ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML と CSS を使用して初めてのレスポンシブ Web サイトを構築する
HTML と CSS を使用して初めてのレスポンシブ Web サイトを構築する
- 王林オリジナル
- 2024-07-31 02:59:32631ブラウズ
レスポンシブ Web サイトの作成は、フロントエンド開発者にとって必須のスキルです。レスポンシブ Web サイトは、デバイスと画面サイズに基づいてレイアウトとコンテンツを調整し、すべてのデバイスで優れたユーザー エクスペリエンスを保証します。この記事では、HTML と CSS を使用して基本的なレスポンシブ Web サイトを構築するプロセスを説明します。
前提条件
始める前に、HTML と CSS の基本を理解しておく必要があります。 CSS Flexbox とメディア クエリに精通していることも有益です。
ステップ 1: プロジェクトのセットアップ
まず、新しいプロジェクト フォルダーを作成し、次のファイルを追加します。
- Index.html: メインの HTML ファイル。
- styles.css: Web サイトのスタイルを設定するための CSS ファイル。
ステップ 2: HTML の構造化
index.html を開いて、必要な基本的な HTML 構造を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Responsive Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome to My Website</h2>
<p>This is a simple responsive website built with HTML and CSS.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>We provide excellent web development services.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>We offer a wide range of web development services.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Feel free to reach out to us for any inquiries.</p>
</section>
</main>
<footer>
<p>© 2024 My Responsive Website</p>
</footer>
</body>
</html>
ステップ 3: ウェブサイトのスタイルを設定する
次に、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;
}
ステップ 4: レスポンシブにする
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;
}
}
ステップ 5: Web サイトをテストする
Web ブラウザでindex.html を開き、ブラウザ ウィンドウのサイズを変更して、さまざまな画面サイズに合わせてレイアウトがどのように調整されるかを確認します。ナビゲーション メニューが垂直方向にスタックされ、画面の幅が狭くなるにつれてコンテンツの周囲のパディングが減少することがわかります。
ついに
これで、HTML と CSS を使用してシンプルなレスポンシブ Web サイトを構築できました。この例では、Web ページの構造化とメディア クエリを使用したレスポンシブ デザインの作成の基本について説明します。経験を積むにつれて、CSS グリッド、フレックスボックス、レスポンシブ画像などの高度なテクニックを探索して、より複雑で動的なレイアウトを作成できるようになります。
お楽しみに!!!
以上がHTML と CSS を使用して初めてのレスポンシブ Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。