HTMLでレスポンシブ対応
Sep 04, 2024 pm 04:46 PM
HTML におけるレスポンシブ デザインは、あらゆる畫面サイズのデバイス サイズに応じて HTML 要素を適合させる概念です。これらの要素は、モバイル、デスクトップ、タブレットなどのあらゆるデバイスで完璧に見える必要があります。レスポンシブ デザインとは、表示ビューの利用可能なスペースに応じて要素がすぐに調(diào)整されるものです。これは、ビューポートの幅、テキスト サイズ、レスポンシブ畫像、その他の要素などに基づいています。現(xiàn)在、レスポンシブ デザイン用語(yǔ)には、さまざまなブラウザーやデバイスに合わせた完璧なデザインを?qū)g現(xiàn)するための新しい技術(shù)が數(shù)多く導(dǎo)入されています。メディア クエリは、CSS を介したレスポンシブ デザインを含め、最も優(yōu)れた部分の 1 つであり、ユーザーのデバイス サイズに応じて調(diào)整するようにブラウザーに指示します。
HTML レスポンシブ デザインで使用される構(gòu)文
HTML のレスポンシブ デザインは非常に多くの要素に依存します。一つずつ見てみましょう:
1.ビューポートの設(shè)定: 以下の構(gòu)文は、ビューポートをユーザー ページ ビューに設(shè)定するために使用されます。これは、ブラウザーが Web ページのサイズとそのスケーリングを制御するのに役立ちます。さまざまなデバイスのサイズに応じて要素が自動(dòng)的に調(diào)整され、デバイスに応じて畫面が表示されます。
<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% に設(shè)定できるため、畫面表示ビューで要素の応答性を高めるのに役立ちます。
width: 100%;
4. Max width プロパティ: を幅と同じように使用すると、要素の最大幅を 100 % に設(shè)定できるため、すべての HTML 要素を適切な応答形式で表示するのに役立ちます。
Max-width:100%;
5.レスポンシブ テキスト: 他の要素と同様に、すべてのデバイスの畫面サイズに応じてテキストも対応させる必要があります。 VW を使用して設(shè)定できるため、ユーザーはビューポートの幅を設(shè)定して、デバイスの畫面に合わせてテキスト サイズを簡(jiǎn)単に調(diào)整できます。この構(gòu)文は、ビューポートがブラウザーの表示サイズとして參照されることを説明しています。ここで、1 VW はビューポート幅の実際の 1 % に等しくなります。
<h4 style="font-size:5vw">Text</h4>
6.メディア クエリの使用: メディア クエリは、さまざまなブラウザ サイズのさまざまなデバイス サイズに対してテキスト、畫像、その他の要素の応答性を高めるためのレスポンシブ デザインにおいて重要な役割を果たします。現(xiàn)在、Web ページの応答性を高めるためにさまざまなフレームワークが利用可能です。それらは次のようなものです:
- レスポンシブ スタイルシート: このフレームワークは、W3.CSS などのさまざまなスタイルシート フレームワークを使用するのに役立ちます。レスポンシブ デザインの作成時(shí)に主要な役割を果たします。デフォルトでは、モバイルファーストデザインをサポートしています。學(xué)習(xí)と開発は簡(jiǎn)単です。
- ブートストラップ: 急速に成長(zhǎng)しており、ユーザーが自由に利用できる最も人気のあるフレームワークです。 HTML、CSS、jquery などの Web 開発言語(yǔ)に基づいているため、他のフレームワークよりもユーザー フレンドリーであり、Web ページの応答性を高めるのに役立ちます。
- 最新のレスポンシブ CSS: さまざまな種類のブラウザだけでなく、スマートフォン、タブレット、ラップトップなどのあらゆる種類のデバイスもサポートしています。
HTML でのレスポンシブの実裝例
以下は HTML でのレスポンシブの例です。
例 #1
この例では、HTML コードでビューポートを設(shè)定し、畫像をレスポンシブにしています。
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>
デスクトップまたはラップトップ畫面への出力:
モバイルデバイス上の出力:
タブレット上の出力:
例 #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>
デスクトップビューでの出力:
モバイル デバイスでの出力: モバイル デバイスでは、出力畫面がスクロール可能であるため、Web ページ全體を表示するには、畫面を下にスクロールする必要があります。
タブレット デバイスの出力: 同じ出力がタブレット デバイスごとのサイズとして調(diào)整されます。
例 #3
ブートストラップ、標(biāo)準(zhǔn) 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:
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でレスポンシブ対応の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8638
17
1784
16
1729
56
1580
28
1444
31
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
HTML5サーバーセントイベントでの再接続とエラーの処理。
Jul 03, 2025 am 02:28 AM
HTML5SSEを使用する場(chǎng)合、再接続とエラーに対処する方法には次のものが含まれます。1。デフォルトの再接続メカニズムを理解します。 EventSourceは、デフォルトで接続が中斷されてから3秒後に再試行します。再試行フィールドを介して間隔をカスタマイズできます。 2.接続障害または解析エラーに対処するためにエラーイベントを聞いて、自動(dòng)再接続に依存しているネットワークの問題、サーバーエラーが手動(dòng)で再接続を遅らせる、認(rèn)証障害の更新トークンなど、対応するロジックを?qū)g行し、実行するロジックを?qū)g行します。 3.接続の手動(dòng)での閉鎖と再構(gòu)築、再試行時(shí)間の最大數(shù)を設(shè)定するなど、再接続ロジックを積極的に制御し、ナビゲーターを組み合わせてネットワークステータスを判斷して再試行戦略を最適化します。これらのメジャーは、アプリケーションの安定性とユーザーエクスペリエンスを改善できます。
最新のページの正しいHTML5 Doctypeを宣言します。
Jul 03, 2025 am 02:35 AM
Doctypeは、ページを解析するために使用するHTML標(biāo)準(zhǔn)をブラウザに伝えるステートメントです。最新のWebページは、HTMLファイルの先頭に記述するだけです。その機(jī)能は、ブラウザが奇妙なモードではなく標(biāo)準(zhǔn)モードでページをレンダリングし、その前にスペースやコメントがない最初の行に配置する必要があることを確認(rèn)することです。それを書く正しい方法は1つだけであり、古いバージョンやその他のバリアントを使用することはお?jiǎng)幛幛筏蓼护蟆?charset、viewportなどのその他は、部分的に配置する必要があります。
HTML屬性を使用したクライアント側(cè)フォーム検証の実裝。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1）userequedtoeenforcemandatoryfields.2）validateemailsandurlswitttributeslikemailorurl、orusepatternwithregexforcustomformats.3）
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動(dòng)的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無(wú)効にする屬性を介して無(wú)効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
CSSとJavaScriptをHTML5構(gòu)造と効果的に統(tǒng)合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥當(dāng)な読み込み順序、デカップリング設(shè)計(jì)と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長(zhǎng)する構(gòu)造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問題を回避する必要があります。 3. JavaScriptは、前に導(dǎo)入され、Deferまたは非同期を使用して非同期にロードすることをお?jiǎng)幛幛筏蓼埂?4. 3つの間の強(qiáng)い依存性を減らし、データ - *屬性とクラス名制御ステータスを介して動(dòng)作を促進(jìn)し、統(tǒng)一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協(xié)力することができます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問題に注意してください：無(wú)効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
新しいHTML5メソッド（FormData）を使用してフォームデータを送信する
Jul 08, 2025 am 02:28 AM
HTML5のFormData APIを使用してフォームデータを送信する方が便利です。 1.名前屬性を持つフォームフィールドを自動(dòng)的に収集したり、データを手動(dòng)で追加したりできます。 2.ファイルのアップロードに適したMultiPart/Form-Data形式での送信をFetchまたはXmlhttpRequestを介してサポートします。 3.ファイルを処理する場(chǎng)合、FormDataにファイルを追加してリクエストを送信する必要があります。 4.同じ名前のフィールドが上書きされ、JSON変換とネスト構(gòu)造を処理する必要はないことに注意してください。
