HTMLでレスポンシブ対応-htmlチュートリアル-php.cn

HTML レスポンシブデザインで使用される構文

HTML でのレスポンシブの実装例

例 #3

Conclusion

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでレスポンシブ対応

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:46 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML におけるレスポンシブデザインは、あらゆる画面サイズのデバイスサイズに応じて HTML 要素を適合させる概念です。これらの要素は、モバイル、デスクトップ、タブレットなどのあらゆるデバイスで完璧に見える必要があります。レスポンシブデザインとは、表示ビューの利用可能なスペースに応じて要素がすぐに調整されるものです。これは、ビューポートの幅、テキストサイズ、レスポンシブ画像、その他の要素などに基づいています。現在、レスポンシブデザイン用語には、さまざまなブラウザーやデバイスに合わせた完璧なデザインを実現するための新しい技術が数多く導入されています。メディアクエリは、CSS を介したレスポンシブデザインを含め、最も優れた部分の 1 つであり、ユーザーのデバイスサイズに応じて調整するようにブラウザーに指示します。

HTML レスポンシブデザインで使用される構文

HTML のレスポンシブデザインは非常に多くの要素に依存します。一つずつ見てみましょう:

1.ビューポートの設定: 以下の構文は、ビューポートをユーザーページビューに設定するために使用されます。これは、ブラウザーが Web ページのサイズとそのスケーリングを制御するのに役立ちます。さまざまなデバイスのサイズに応じて要素が自動的に調整され、デバイスに応じて画面が表示されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ログイン後にコピー

2。 レスポンシブ画像: Web ページに画像を追加するときは常に、それらの画像を各デバイスの画面サイズに適切なサイズで表示する必要もあります。

<div class='section content'>  <img class='example' src='images/example.svg' /></div>

ログイン後にコピー

3. Set width プロパティ: CSS を使用すると、幅を 100% に設定できるため、画面表示ビューで要素の応答性を高めるのに役立ちます。

width: 100%;

ログイン後にコピー

4. Max width プロパティ: を幅と同じように使用すると、要素の最大幅を 100 % に設定できるため、すべての HTML 要素を適切な応答形式で表示するのに役立ちます。

Max-width:100%;

ログイン後にコピー

5.レスポンシブテキスト: 他の要素と同様に、すべてのデバイスの画面サイズに応じてテキストも対応させる必要があります。 VW を使用して設定できるため、ユーザーはビューポートの幅を設定して、デバイスの画面に合わせてテキストサイズを簡単に調整できます。この構文は、ビューポートがブラウザーの表示サイズとして参照されることを説明しています。ここで、1 VW はビューポート幅の実際の 1 % に等しくなります。

<h4 style="font-size:5vw">Text</h4>

ログイン後にコピー

6.メディア クエリの使用: メディアクエリは、さまざまなブラウザサイズのさまざまなデバイスサイズに対してテキスト、画像、その他の要素の応答性を高めるためのレスポンシブデザインにおいて重要な役割を果たします。現在、Web ページの応答性を高めるためにさまざまなフレームワークが利用可能です。それらは次のようなものです:

レスポンシブスタイルシート: このフレームワークは、W3.CSS などのさまざまなスタイルシートフレームワークを使用するのに役立ちます。レスポンシブデザインの作成時に主要な役割を果たします。デフォルトでは、モバイルファーストデザインをサポートしています。学習と開発は簡単です。
ブートストラップ: 急速に成長しており、ユーザーが自由に利用できる最も人気のあるフレームワークです。 HTML、CSS、jquery などの Web 開発言語に基づいているため、他のフレームワークよりもユーザーフレンドリーであり、Web ページの応答性を高めるのに役立ちます。
最新のレスポンシブ CSS: さまざまな種類のブラウザだけでなく、スマートフォン、タブレット、ラップトップなどのあらゆる種類のデバイスもサポートしています。

HTML でのレスポンシブの実装例

以下は HTML でのレスポンシブの例です。

例 #1

この例では、HTML コードでビューポートを設定し、画像をレスポンシブにしています。

HTML コード:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Design by setting Viewport</h2>
<p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p>
<img src="images.jpg" >
</body>

ログイン後にコピー

デスクトップまたはラップトップ画面への出力:

HTMLでレスポンシブ対応

モバイルデバイス上の出力:

HTMLでレスポンシブ対応

タブレット上の出力:

HTMLでレスポンシブ対応

例 #2

例 2 では、メディアクエリを使用して画面の応答性を高めています。これにより、次のコードを使用してさまざまなブラウザやさまざまなデバイスをサポートし、Web ページをレスポンシブにすることができます。

HTML コード:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>
</head>
<body>
<h2>Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>

ログイン後にコピー

デスクトップビューでの出力:

HTMLでレスポンシブ対応

モバイルデバイスでの出力: モバイルデバイスでは、出力画面がスクロール可能であるため、Web ページ全体を表示するには、画面を下にスクロールする必要があります。

HTMLでレスポンシブ対応

タブレットデバイスの出力: 同じ出力がタブレットデバイスごとのサイズとして調整されます。

HTMLでレスポンシブ対応

例 #3

ブートストラップ、標準 CSS、メディアクエリを使用した別の例 3 を見てみましょう:

HTML コード:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2>WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>
</body>
</html>

ログイン後にコピー

Output on Laptop Screen:

HTMLでレスポンシブ対応

Output on Mobile Devices:

HTMLでレスポンシブ対応

Output on Tablet:

HTMLでレスポンシブ対応

Conclusion

Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.

以上がHTMLでレスポンシブ対応の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。