最終更新日：
公開日：
ワークショップ
HTML&CSS入門 WEBサイトを作る
VOL11コンテンツ2のCSSを書く
前回に引き続き、コンテンツ2のCSS（スタイルシート）を書いていきます。
この記事のポイント
- コンテンツ2をデザイン案と同じ表示になるように整える
- text-alignプロパティで文字寄せを指定する
- box-shadowで影をつける
目次
コンテンツ2のCSSをコーディングする
前回はヘッダー部分の下にあるコンテンツ1部分についてCSSのコーディングをしてきました。
今回は引き続き、その下に移動して「コンテンツ2」のCSSをコーディングしていきましょう。
CSSファイルは前回と同様に「style.css」を使用していきます。
幅と左右の余白を設定する
まずは前回までと同様に、コンテンツ2の横幅と余白を設定して、先にアウトラインを作成していきます。
コンテンツ2も左右の余白が自動で均一になるようにdiv要素で囲みます。
「index.html」を開いて、以下のdiv要素を追加してください。
index.html
<!DOCTYPE html>
// 省略
<main>
<section id="content1">
<div class="wrapper">
<figure><img src="./fox.png" alt="プロフィール画像"></figure>
<div class="text_area">
<h1>こんにちは！</h1>
<p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください！</p>
</div>
</div>
</section>
<section id="content2">
<div class="wrapper">
<h2>お知らせ</h2>
<ol>
<li><a href="#"><time datetime="2021-04-12">2021.04.12</time>お問い合わせページを追加しました。</a></li>
<li><a href="#"><time datetime="2021-04-05">2021.04.05</time>プロフィールを更新しました。</a></li>
<li><a href="#"><time datetime="2021-04-01">2021.04.01</time>PROFILEサイトを公開しました！</a></li>
</ol>
<p class="link_contact"><a href="">お問い合わせはこちら</a></p>
</div>
</section>
</main>
<footer id="footer">
<p>Copyright©2021 GRAYCODE.</p>
</footer>
</body>
</html>
このdiv要素もレイアウトを整えるために使用します。
「style.css」を開いて、コンテンツ1の下に赤字のコードを追記してください。
style.css
@charset "UTF-8";
body {
font-family: 'Noto Sans JP', sans-serif;
color: #222;
background-color: #e9e279;
}
// 省略
/* content2
------------------------------ */
#content2 {
width: 100%;
}
#content2 .wrapper {
margin: 0 auto;
padding: 50px 0 100px;
width: 100%;
max-width: 1000px;
text-align: center;
}セレクタはコンテンツ1のときと同じようにsection要素のid属性「#content2」と、新しく追加したdiv要素のclass属性「.wrapper」を使ってCSSを適用します。
div要素を使って左右の余白を設定している部分はヘッダーと同様です。
コンテンツ2は下の部分の余白を少し大きめに取るため、paddingプロパティの3つ目に下部の余白を100pxで指定しています。
ここまでpaddingプロパティは何度か使ってきましたが、値の数によって余白の指定する場所を切り替えることができます。
値は最大4つで、4つのときは先頭から順に「上、右、下、左」を指定することができます。
3つ以下の指定にするとまとめて指定することができ、指定パターンは以下のようになります。
paddingプロパティの使用例
// (1)上下左右：10px
padding: 10px;
// (2)上下：10px、左右：20px
padding: 10px 20px;
// (3)上：10px、左右：20px、下：30px
padding: 10px 20px 30px;
// (4)上：10px、右：20px、下：30px、左：40px
padding: 10px 20px 30px 40px;
// (5)全て別々に指定する。指定している内容は(4)と同じ
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;(5)のように上下左右を個別に指定することも可能です。
また、複数指定がある場合は一番最後に指定した値が適用されます。
コンテンツ部分のCSSをコーディング
コンテンツ2のレイアウトができたところで、続いてコンテンツのCSSをコーディングしていきます。
style.css
@charset "UTF-8";
// 省略
/* content2
------------------------------ */
#content2 {
width: 100%;
}
#content2 .wrapper {
margin: 0 auto;
padding: 50px 0 100px;
width: 100%;
max-width: 1000px;
text-align: center;
}
#content2 h2 {
display: inline-block;
margin: 0 auto 40px;
padding-bottom: 10px;
font-size: 1.25rem;
font-weight: 700;
border-bottom: 4px solid #222;
}
#content2 ol {
margin-bottom: 40px;
padding: 30px 40px 40px;
text-align: left;
border-radius: 20px;
background-color: #f7f7f7;
}
#content2 ol li {
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 2.0em;
border-bottom: 2px solid #d5c800;
}
#content2 ol li:last-child {
margin-bottom: 0;
}
#content2 ol li time {
margin-right: 20px;
font-size: 0.85rem;
}ここまでの変更を保存してブラウザで表示してみると、コンテンツ2は次のように表示されます。
お知らせの一覧の表示がデザイン案の通りになりました。
お知らせの見出しであるh2要素に対して「display: inline-block;」を指定しています。
h2要素は標準ではブロックレベル要素のため、以下のように親要素の幅いっぱいに表示されます。
そのままだとh2要素内のテキスト「お知らせ」と黒い下線の幅が均一になりません。
そこで、今回は上記のようにdisplayプロパティを指定することで、テキストと下線の幅を揃えています。
さらに、親要素であるdiv要素の中で「text-align: center;」を指定することで、テキストを中央揃えにして見出しを中央に表示されるように指定しています。
見出しの黒い下線はborder-bottomプロパティで設定することができます。
値の「4px solid #222」は半角スペースで区切って線の太さ、種類、色を順番に指定しています。
今回は下線のみですが、borderプロパティを使って上下左右に枠線を引いたり、border-topプロパティで上側、border-rightプロパティで右側、border-leftプロパティで左側に線を表示させることもできます。
お問い合わせボタンのCSSをコーディング
「お知らせ」までできたところで、最後に「お問い合わせはこちら」ボタンのCSSをコーディングしていきます。
style.css
@charset "UTF-8";
// 省略
/* content2
------------------------------ */
#content2 {
width: 100%;
}
#content2 .wrapper {
margin: 0 auto;
padding: 50px 0 100px;
width: 100%;
max-width: 1000px;
text-align: center;
}
#content2 h2 {
display: inline-block;
margin: 0 auto 40px;
padding-bottom: 10px;
font-size: 1.25rem;
font-weight: 700;
border-bottom: 4px solid #222;
}
#content2 ol {
margin-bottom: 40px;
padding: 30px 40px 40px;
text-align: left;
border-radius: 20px;
background-color: #f7f7f7;
}
#content2 ol li {
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 2.0em;
border-bottom: 2px solid #d5c800;
}
#content2 ol li:last-child {
margin-bottom: 0;
}
#content2 ol li time {
margin-right: 20px;
font-size: 0.85rem;
}
#content2 .link_contact a {
display: inline-block;
padding: 15px 60px;
color: #fff;
font-size: 1.0rem;
font-weight: 500;
box-shadow: 0 5px 0 #b07c00;
background-color: #e29000;
}
#content2 .link_contact a:hover {
background-color: #e89d19;
}p要素の内側にあるa要素がボタンの本体になります。
ボタンの下側にはbox-shadowプロパティを使って影を設定しているところがポイントです。
また、a要素にマウスカーソルが乗っているときにボタン本体の色を変えるように「a:hover」を指定しています。
この「:hover」はリストの「:last-child」と同じ擬似クラスで、カーソルが乗っている状態にのみCSSを適用するときに使うことができます。
カーソルが離れたら擬似クラスの適用も解除されます。
ここまでで、コンテンツ2のCSSが出来上がりました。
ブラウザで改めて表示してみると以下のようになります。
もうすぐトップページが完成します。
次回はページの一番下にあるフッター部分のCSSをコーディングしていきましょう。