中央のコンテンツをコーディング
中央のコンテンツをコーディングしていきます。
Webサイトでは「メイン画像」「サイドバー」「新着情報」をよく配置します。
ここではその基本的なコーディングをご紹介します。
事前準備
本記事では、ダミーの画像をメイン画像及びバナー画像として使用しています。
まずはこちらでダミー画像を生成しましょう。
メイン画像から生成します。幅に1440、高さに600と入力し、「画像を生成する」ボタンをクリックしてください。
下記のような画像が生成されれば成功です。
URLが生成されるので、コピーし、ブラウザで開きます。
ブラウザで開いた後、右クリックし、名前をつけて保存をクリックしてください。
名前は、mainimg.pngとします。
同様の手順でバナー画像を生成します。
バナー画像は幅350、高さが80です。
下記のような画像が生成されれば成功です。
こちらはbanner.pngという名前で保存します。
mainimg.pngとbanner.pngの保存完了後、両ファイルを以下のパスに配置します。
sample-site
├── index.html
├── img
├──├── banner.png
├──├── mainimg.png
以上で事前準備完了です。
HTML
HTMLのコーディングから進めます。
index.htmlを以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/reset.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="header-top">
<h1 class="logo"><a href="index.html">Sample</a></h1>
<div class="tel">TEL：00-0000-0000</div>
</div>
<div class="nav">
<ul class="nav-list" role="list">
<li class="nav-item"><a href="#">ホーム</a></li>
<li class="nav-item"><a href="#">会社概要</a></li>
<li class="nav-item"><a href="#">事業内容</a></li>
<li class="nav-item"><a href="#">採用情報</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>
<!-- ここから -->
<div>
<img src="img/mainimg.png" alt="メイン画像" class="main-img"> <!-- ダミーイメージの生成の手順を書くこと -->
</div>
<div class="content">
<div class="container">
<div class="sidebar">
<ul role="list">
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
</ul>
</div>
<div class="news">
<h2 class="h2">新着情報</h2>
<ul role="list">
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
</ul>
</div>
</div>
</div>
<!-- ここまで追加 -->
</body>
</html>
HTMLの解説
1. メイン画像部分
<div>
<img src="img/mainimg.png" alt="メイン画像" class="main-img">
</div>
<img>
画像を表示するタグです。- src="img/mainimg.png"
画像ファイルのパスを指定します。ここではimgフォルダ内のmainimg.pngを表示します。 - alt="メイン画像"
画像が表示されなかったときの代替テキスト。SEOやアクセシビリティに重要です。 - class="main-img"
CSSでデザインするためのクラス名です。
- src="img/mainimg.png"
2. <div class="content"> と <div class="container">
Webページの主要なコンテンツをまとめるためのブロックです。contentにdisplay: flex;とjustify-content: center;を指定することでコンテンツを中央揃えにしています。
containerはdisplay: flex;を設定することでsidebarとnewsのコンテンツを横並びにし、gap: 70pxを指定することでsidebarとnewsの間を70px開けています。最後にmarginとpaddingことで、レイアウトを調整しています。
3. サイドバー部分
<div class="sidebar">
<ul role="list">
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
</ul>
</div>
<div class="sidebar">サイドバーをまとめる要素です。<ul role="list">
箇条書きリスト。role="list" を付けることでスクリーンリーダー対応が向上します。<li>
リストの1つ1つの項目です。<a href="#">
バナー画像をリンクにしています。クリックするとリンク先に飛べます。<img src="img/banner.png" alt="バナー画像" class="banner">
メイン画像と同じく、表示するイメージの設定、イメージが表示されない時の設定、CSSでデザインするためのクラス名を指定しています。
4. 新着情報部分
<div class="news">
<h2 class="h2">新着情報</h2>
<ul role="list">
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
</ul>
</div>
<div class="news">
新着情報をまとめる部分です。<h2 class="h2">新着情報</h2>
見出し。h2タグは大見出しの次に使われる見出しタグです。<ul>
ニュースをリスト形式で並べています。<li>
ニュースの日付と内容を1行ごとに表示しています。
CSS
style.cssには以下のcssを追加します。
.content {
display: flex;
justify-content: center;
}
.content .container {
display: flex;
gap: 70px;
margin: 30px auto;
padding: 0 20px;
}
.sidebar {
background-color: #f7f7f7;
padding: 20px;
}
.sidebar li:not(:last-child) {
margin-bottom: 10px;
}
.news {
flex: 1 0 auto;
padding: 15px 0;
}
.content .h2 {
font-size: 2.0rem;
border-bottom: 2px solid;
margin-bottom: 10px;
}
.news li {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
.news li:not(:last-child) {
margin-bottom: 10px;
}
CSSの解説
1. .content
.content {
display: flex;
justify-content: center;
}
display: flexとjustify-content: centerを指定し、中のコンテンツを左右中央に寄せています。
2. .content .container
.content .container {
display: flex;
gap: 70px;
margin: 30px auto;
padding: 0 20px;
}
-
display: flex;
サイドバーとニュース部分を横並びにしています。 -
gap: 70px;
横並びにした要素の間に70pxの余白を空けています。 -
margin: 30px auto;
上下に30pxの余白を作り、左右は自動で中央寄せします。 -
padding: 0 20px;
左右に20pxの内側余白をつけています。
3. .sidebar
.sidebar {
background-color: #f7f7f7;
padding: 20px;
}
-
background-color: #f7f7f7;
薄いグレーの背景色を設定。 -
padding: 20px;
内側に20pxの余白をつけています。
4. .sidebar li:not(:last-child)
.sidebar li:not(:last-child) {
margin-bottom: 10px;
}
-
:not(:last-child)
複数あるli要素の内、最後のli要素以外に適用するというルールを設定しています。 -
margin-bottom: 10px;
各リスト項目（li要素）の下に10pxの余白を追加しています。先述のルールにより、最後のリスト項目以外のリスト項目に適用されます。
5. .news
.news {
flex: 1 0 auto;
padding: 15px 0;
}
-
flex: 1 0 auto;
横並びしたときに、ニュース部分が広がりやすくなる指定。 -
padding: 15px 0;
上下に15pxの内側余白を追加。
6. .content .h2
.content .h2 {
font-size: 2.0rem;
border-bottom: 2px solid;
margin-bottom: 10px;
}
-
font-size: 2.0rem;
見出しを大きめに表示。 -
border-bottom: 2px solid;
下に線を引いて、見出しを強調。 -
margin-bottom: 10px;
下に10pxの余白をつける。
7. .news li
.news li {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
-
border-bottom: 1px solid #ccc;
各ニュースの下に区切り線を追加。 -
padding-bottom: 5px;
文字と線の間に余白を確保。
8. .news li:not(:last-child)
.news li:not(:last-child) {
margin-bottom: 10px;
}
-
:not(:last-child)
最後以外のリストに適用。 -
margin-bottom: 10px;
各ニュース同士の間に余白を追加。
動作確認
これをブラウザで開くと以下のようになります。
