HTMLでレスポンシブ対応

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

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

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

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

<meta initial-scale='1.0"'>

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

<div class="section content">  <img  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="HTMLでレスポンシブ対応" >
</div>

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

width: 100%;

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

Max-width:100%;

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

<h4 id="Text">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">

<h2 id="Responsive-Design-by-setting-Viewport">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  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="HTMLでレスポンシブ対応" >

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

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

タブレット上の出力:

例 #2

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

HTML コード:

<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>


<h2 id="Responsive-Design-in-HTML-using-Media-Queries">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 id="First-Content-Part">First Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTMLでレスポンシブ対応" >
</div>
<div class="middle">
<h4 id="Second-Content-Part">Second Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTMLでレスポンシブ対応" >
</div>
<div class="bottom">
<h4 id="Third-Content-part">Third Content part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTMLでレスポンシブ対応" >
</div>

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

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

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

例 #3

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

HTML コード:

<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>


<div id="header">
<h1 id="Welcome-to-EDUCBA">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 id="WHO-IS-EDUCBA">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 id="b-Courses-b"><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>

Output on Laptop Screen:

Output on Mobile Devices:

Output on Tablet:

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 サイトの他の関連記事を参照してください。