おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

サイト上に画像を表示してみよう -『HTML5&CSS3レッスンブック』第3章

www.okigaru-migaru.net

前回はページ全体のレイアウトを整えました。ここに画像を表示していきます。

画像はウェブページにおける重要なファクターですからね。思い通りに貼り付けられるようになりたいです。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

参考にするのはエビスコムさんの『HTML5&CSS3レッスンブック』です。チャプター3を進めていきます。

ちなみに使用している画像は当書籍が配布しているサンプルです。自前で画像を用意するのも面倒なので使わせていただきます。

サイト上に画像を表示する

この章では3つのページを作成します。それぞれ違う画像とレイアウトです。

全部ソースを載せると冗長な記事になってしまいますので、news01のHTMLコードを載せています。

CSSは前回から変更点があったものだけ載せています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1>
</header>

<article>
<h1>真夏のひまわり畑</h1>

<p>森の工房の隣りにある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>

<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
<figcaption>夏のひまわり畑</figcaption>
</figure>

<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

figureタグで図版としてマークアップ

画像が本文に関連した図版ということを示すためにfigureタグでマークアップします。

このタグはブログをやっているなかではなかなか使いませんね。初めて知りました。

画像だけでなくプログラムコードや引用文などもマークアップできるそうです。

図版にキャプションを挿入する

fig captionタグで図版にキャプションを入れられます。

キャプションは上につけても下につけても大丈夫です。

alt属性の使い方

alt属性は画像の内容についての説明を記述するもので、基本的に必ず記述が必要です。

ただし、タイトルロゴのようにすぐ前後に同等の情報がある場合は説明を省略することも可能です。

その場合は空欄で入力します。alt属性自体は忘れないように入れておきましょう。

CSS

/* ヘッダー */
header h1 img {
    vertical-align: -10px;
    margin-right: 5px;
}

/* 記事 */
article {
    overflow: hidden;
}

/* フッター */
footer {
    clear: both;
}

/* 画像を中央に配置するレイアウト */
figure.photo-center {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* 画像を左に配置するレイアウト */
figure.photo-left {
    margin: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left
}

figure.photo-left img {
    width: 550px;
}


/* 画像を右に配置するレイアウト */
figure.photo-right {
    margin: 0;
    margin-left: 20px;
    float: right
}

figure.photo-right img {
    width: 550px;
}

/* 小見出し */
h2 {
    clear: both;
    border-bottom: solid 5px #c39f4a;
    margin-top: 30px;
}

figureタグの余白を削除する

図版を示すfigureタグですが、デフォルトスタイルシートでは余白が発生します。

記事のレイアウトによっては余白が邪魔な場合があります。そんな時はCSSで削除することも可能です。

ここでは「画像を左に配置するレイアウト」のところで、「photo-left」というクラス名で指定してマージンを0にしています。

ロゴ画像の中央にサイト名を揃える

サイト名の前にロゴ画像を表示していますが、そのまま貼り付けただけだと下のラインに沿って表示されるのでズレたように見えてしまいます。

そこでheder h1 imgセレクタのvertical-alignプロパティを調整してやることで中央に揃えます。

ぶっちゃけ完成したページだけ見てもCSSに記述があるかわからないんですよね。結構地味な工夫が完成度に関わってくるんですね。

回り込みの指定と解除

画像の回り込みを指定する場合はfloatプロパティを使います。値をleftにすれば画像が左で文章が右に、rightにすれば逆になります。

回り込みを指定した場合、次のボックスも回り込みが適用されてしまうのでclearプロパティの値をbothにしてやることで解除することができます。

ここではfooterがそうですね。

画像をボックスに含めて表示する

画像の回り込みを指定した場合、そのままでは記事のボックスの大きさは文章の量に依存します。画像が下のボックスにまではみ出てしまいます。

そこでarticleセレクタのoverflowプロパティの値をhiddenにします。

これで画像が記事のボックスに含めて表示されます。

次回はリンクとナビゲーション

次回はネットサーフィン(死語)の要であるリンクとナビゲーションです。

リンクがなければネットはここまで普及はしてないでしょうね。SEOも被リンクを重視しているだけに学ばずに通れない項目であります。

www.okigaru-migaru.net