8.5 画像つきサイドメニューを作る
戻る
メニューにサムネイル画像を付けて表示します。「人気の記事」メニューにサムネイル画像を追加し、記事のタイトルが右側に並ぶようなデザインにします。
サムネイル画像を追加
サイドメニューの「人気の記事」の各リンクにサムネイル画像を追加します。別途用意してあるサムネイル画像を<img>で表示させています。
<aside>～</aside> の範囲内で編集してください。
<aside>
<h1>特集</h1>
・・省略・・
<h1>おすすめ記事</h1>
・・省略・・
<h1>人気の記事</h1>
<ul>
<li><a href="#">
<img src="img/people-s.jpg">
秋葉原周辺で出会った人たち</a></li>
<li><a href="#">
<img src="img/goods-s.jpg">
部屋を彩るかわいいグッズ</a></li>
<li><a href="#">
<img src="img/tel-s.jpg">
通話アプリを活用する</a></li>
<li><a href="#">
<img src="img/cpu-s.jpg">
最新第5世代CPU PYRONEのすべて</a></li>
</ul>
</aside>
CSSでは、バージョン10以前の Internet Explorer で、リンクされた画像の周囲に青い罫線が追加されるのを防ぐため、スタイルシートを使って<img>に対してborderが付かないように設定（border:none;）しておきます。
/* サイドメニュー */
aside ul { margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px; }
aside a { display: block;
padding: 5px;
color: black;
font-size: 14px;
text-decoration: none; }
aside a:hover { background-color: #dddddd; }
aside h1 { margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px; }
aside i { color: #ff8844;
margin-right:5px; }
aside a img { border: none; }
各メニュー項目にサムネイル画像が追加されました。
画像のサイズは 60px x 60px です。
カテゴリー情報を追加する
記事に対するカテゴリー情報を追加します。ここでは<span>を使って記入します。
また、後でスタイルシートが設定しやすいように以下の点を修正します。
- 「人気の記事」の<ul>にクラス名「ninki」を追加します。
- 記事のタイトルとカテゴリー情報は<div>で囲いボックス化し、さらにクラス名「text」を追加します。
<div class="text">～</div>
<aside>
・・省略・・
<h1>人気の記事</h1>
<ul class="ninki">
<li><a href="#">
<img src="img/people-s.jpg">
<div class="text">
秋葉原周辺で出会った人たち
<span>リポート</span>
</div>
</a></li>
<li><a href="#">
<img src="img/goods-s.jpg">
<div class="text">
部屋を彩るかわいいグッズ
<span>ガジェット</span>
</div>
</a></li>
<li><a href="#">
<img src="img/tel-s.jpg">
<div class="text">
通話アプリを活用する
<span>ライフハック</span>
</div>
</a></li>
<li><a href="#">
<img src="img/cpu-s.jpg">
<div class="text">
最新第5世代CPU PYRONEのすべて
<span>ガジェット</span>
</div>
</a></li>
</ul>
</aside>
各メニュー項目の末尾にカテゴリー情報が追加されました。
画像とテキストを横に並べる
サムネイル画像と記事タイトルが縦に並んでしまっているので、横に並ぶようにします。
サムネイル画像<img>とテキスト<div class="text">はそれぞれボックスを構成しており、<a>によってグループ化されている状態なので、ボックスを横に並べる設定に利用します。
ただし、サムネイル画像の横幅は60ピクセルに固定して変化しないようにしたいので、<img>のwidthや<div class="text">のwidthは工夫してあります。
/* サイドメニュー */
aside ul { margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px; }
aside a { display: block;
padding: 5px;
color: black;
font-size: 14px;
text-decoration: none; }
aside a:hover { background-color: #dddddd; }
aside h1 { margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px; }
aside i { color: #ff8844;
margin-right:5px; }
aside a img { border: none; }
.ninki a:after { content: "";
display:block;
clear: both; }
.ninki img { float: left;
width: 60px; }
.ninki .text {
float:left;
width: calc(100% - 60px); }
サムネイル画像とテキストが横に並びました。
サイドメニューの横幅が変化してもサムネイル画像の横幅は変わりません。
画像とテキストとの間隔を調整する
サムネイル画像とテキストが密着して見づらいので、間隔を調整します。
<div class="text">に対してpadding-leftを「15px」に指定して余白を調整します。そしてボックスの横幅が余白を含めて計算されるように box-sizing を「border-box」にする設定も追加します。
/* サイドメニュー */
aside ul { margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px; }
aside a { display: block;
padding: 5px;
color: black;
font-size: 14px;
text-decoration: none; }
aside a:hover { background-color: #dddddd; }
aside h1 { margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px; }
aside i { color: #ff8844;
margin-right:5px; }
aside a img { border: none; }
.ninki a:after { content: "";
display:block;
clear: both; }
.ninki img { float: left;
width: 60px; }
.ninki .text {
float:left;
width: calc(100% - 60px);
box-sizing: border-box;
padding-left: 15px; }
画像とテキストの間に余白が入りました。
カテゴリー情報をデザインする
<span>で囲まれたカテゴリー情報をデザインします。display を「block」に設定し、カテゴリー情報の前に改行がかかるようにします。また、color で文字色をグレー「#666666」にし、font-size で文字サイズを「12px」にします。
/* サイドメニュー */
aside ul { margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px; }
aside a { display: block;
padding: 5px;
color: black;
font-size: 14px;
text-decoration: none; }
aside a:hover { background-color: #dddddd; }
aside h1 { margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px; }
aside i { color: #ff8844;
margin-right:5px; }
aside a img { border: none; }
.ninki a:after { content: "";
display:block;
clear: both; }
.ninki img { float: left;
width: 60px; }
.ninki .text {
float:left;
width: calc(100% - 60px);
box-sizing: border-box;
padding-left: 15px; }
.ninki span { display: block;
color: #666666;
font-size: 12px; }
カテゴリー情報がデザインされました。
メニュー項目を区切る
「人気の記事」の各メニュー項目を点線で区切ります。<a>のborder-bottomで各項目の下に太さ１ピクセルの薄いグレー（#dddddd）の点線（dashed）を挿入し、区切りとします。
/* サイドメニュー */
aside ul { margin: 0;
padding: 0;
list-style: none;
margin-bottom: 30px; }
aside a { display: block;
padding: 5px;
color: black;
font-size: 14px;
text-decoration: none; }
aside a:hover { background-color: #dddddd; }
aside h1 { margin-top: 0;
margin-bottom: 10px;
border-bottom: dotted 2px #dddddd;
color: #666666;
font-size: 18px; }
aside i { color: #ff8844;
margin-right:5px; }
aside a img { border: none; }
.ninki a:after { content: "";
display:block;
clear: both; }
.ninki img { float: left;
width: 60px; }
.ninki .text {
float:left;
width: calc(100% - 60px);
box-sizing: border-box;
padding-left: 15px; }
.ninki span { display: block;
color: #666666;
font-size: 12px; }
.ninki a {
border-bottom: dashed 1px #dddddd; }
サイドメニューの項目が点線で区切られました。