ブラウズ：539
レスポンシブ Web サイトの作成は、フロントエンド開発者にとって必須のスキルです。レスポンシブ Web サイトは、デバイスと画面サイズに基づいてレイアウトとコンテンツを調整し、すべてのデバイスで優れたユーザー エクスペリエンスを保証します。この記事では、HTML と CSS を使用して基本的なレスポンシブ Web サイトを構築するプロセスを説明します。
始める前に、HTML と CSS の基本を理解しておく必要があります。 CSS Flexbox とメディア クエリに精通していることも有益です。
まず、新しいプロジェクト フォルダーを作成し、次のファイルを追加します:
index.html を開いて、必要な基本的な HTML 構造を追加します。
Responsive Website My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
次に、styles.css ファイルを開いて、いくつかの基本スタイルを追加することから始めます:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
Web サイトの応答性を高めるために、メディア クエリを使用します。これらにより、画面サイズに基づいてさまざまなスタイルを適用できます。次のメディア クエリをstyles.cssに追加します:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
Web ブラウザでindex.html を開き、ブラウザ ウィンドウのサイズを変更して、さまざまな画面サイズに合わせてレイアウトがどのように調整されるかを確認します。ナビゲーション メニューが垂直方向にスタックされ、画面の幅が狭くなるにつれてコンテンツの周囲のパディングが減少することがわかります。
これで、HTML と CSS を使用してシンプルなレスポンシブ Web サイトを構築できました。この例では、Web ページの構造化とメディア クエリを使用したレスポンシブ デザインの作成の基本について説明します。経験を積むにつれて、CSS グリッド、フレックスボックス、レスポンシブ画像などの高度なテクニックを探索して、より複雑で動的なレイアウトを作成できるようになります。
乞うご期待！！！
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3
