画像の配置とレイアウトを整える
今回は画像の配置と画像のレイアウトを整える作業をしました。
画像の配置
以下、今回の記述内容です。
HTML
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
</figure>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*画像を中央に配置するレイアウト*/
figure.photo-center {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
赤字の部分が今回追加した記述です。
久しぶりにHTMLを触った感覚ですね。
画像の配置自体は、
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
以上の記述でOKです。
img srcというセレクタにsunflower.jpgという値を入れている感じですね。altは画像を文字で説明するために必要なタグです。
SEO効果もあると言われているので、画像の挿入時には必ず入れておきたい記述です。
ただ、画像を配置する際に、<figure>タグを入れました。この記述をしても画面上ほとんど変化はありませんが、（画像が少し左下に下がる）ここに画像を配置してますよ！って宣言していることになるので、画像を配置する際はできるだけ記述したほうが良さそうです。
ただし、◎や☓などの簡単な画像を挿入する場合は不要みたいですね。画像自体に大きな意味を持たせる場合に記述すると良いようです。
※画像ファイルはstyle.cssとHTMLファイルが入ったフォルダに入れておく必要があります。
figure.photo-center
これは参考テキストが勝手に付けたクラス名なので、別に他の名前でも問題ありません。figure.photo-centerでは、画像が中央に来る指定（text-align: center;）と画像の上と下に余白を大きくする指定（margin-top: 30px;
margin-bottom: 30px;）をしました
この指定自体は理解すればとても簡単です。画像を見てみると実際に中央に寄っているのがわかるので、目で見て実感できる変化は楽しいですよね。
ちなみに、クラス名を指定するときは、なるべく具体的じゃない物を指定すると良いそうです。CSSの記述はあとから追加するパターンがかなり多いそうなので、ふんわりとしたニュアンスでつけるのが一般的だそうです。
というか、まずこの説明がふんわりしていますよね。簡単に言うと以下のようになります。
じゃんけんと付けるのは◎
グーチョキパーのグーとつけるのは☓
という感じです。語彙が足りないので、これで理解してもらえることを祈っています。
まとめ
今回の記述で目新しいものと言えば、figureタグですね。今までアフィリエイトサイトを何個か作成したことがありますが、こんなタグを入れたことはありませんでした。
今後サイトを作っていくのに際し、覚えておくと良いタグのひとつかもしれません。
今回のBefore Afterです
画像を挿入したことによって、全部映らなくなってしまいましたが、今のところ順調にサイトが完成に向かっています。
この調子で引き続き勉強をがんばっていこうと思います。
