おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

記事の一覧ページとトップページを作る -『HTML5&CSS3レッスンブック』第5章

www.okigaru-migaru.net

前回でリンクの設定とナビゲーションメニューを作成しました。

ここからは記事一覧ページとトップページ、すなわちインデックスページを作っていきます。ある程度必要なページが揃ってきますね。

参考書はもちろんエビスコムさんの『HTML5&CSS3レッスンブック』を使っていきます。チャプターは5です。いよいよ後半戦ですね。

デザインがページによって差が出てくることにより、一気に内容が複雑になっていきます。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

インデックスページを作成する

今回作成したのは記事一覧ページとトップページです。URLのindex.htmlは省略可能ですが、わかりやすいようにあえて書いてます。

各ページのHTMLソースとCSSの変更点を載せて解説しております。

HTML(news.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お知らせ - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="posts">

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<section>
<h1>お知らせ</h1>

<article>
<a href="news01.html">
<img src="sunflower-thumb.jpg" alt="">
<h1>真夏のひまわり畑</h1>
<time datetime="2013-08-10T11:00">8月10日 11:00am</time>
<p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。</p>
</a>
</article>

<article>
<a href="news02.html">
<img src="forest-thumb.jpg" alt="">
<h1>新緑の森を散策</h1>
<time datetime="2013-05-01T13:30">5月1日 1:30pm</time>
<p>春から夏にかけては、森を散策するのにおすすめの季節です。少しずつ暖かくなるのに従って、若葉が芽を吹き、花が咲き、森の中が賑やかになっていきます。夏に向かって森が濃い緑に変わっていくのを楽しむのも一興です。</p>
</a>
</article>

<article>
<a href="news03.html">
<img src="winter-thumb.jpg" alt="">
<h1>雪を楽しむ</h1>
<time datetime="2013-01-20T10:15">1月20日 10:15am</time>
<p>冬場のお楽しむと言えば、雪の中の散歩です。夏場は草木が邪魔をして入れないところにも自由に入っていくことができ、普段とは違った景色を満喫することができます。</p>
</a>
</article>
</section>

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

</body>
</html>

sectionタグで関連した記事のまとまりを示す

記事一覧の各リンクはarticleタグでマークアップされており、これをひとまとめにするのがsectionタグです。

1つの記事の中で各見出しごとにまとまりを分ける際にも使えますが、こうやって記事一覧をまとめるのにも使えます。

ページをIDで区別する

記事一覧ページ独自のデザインを施したいのですが、このままh1タグやarticleタグを編集すると記事ページにも影響が出てしまいます。

そこでbodyタグにIDを付与してページを区別します。ここではpostsと名付けていますね。

あとはCSSのセレクタにIDを補足するだけでページごとのデザインを指定することができます。

IDセレクタを使う際にはスタイルシートの優先順位も念頭に置く必要があるのですが、これまたややこしいです。ここでは説明を割愛します。

投稿日時はtimeタグで

投稿日時はtimeタグでマークアップします。

この時サイト上に表示する日時以外に、ソフトウェアが認識できる形でも記述しておきます。それがdatetime属性です。

datetime属性は「年-月-日T時:分」で記述します。

概要全体にリンクを設定する

記事タイトルだけでなく、枠全体にリンクを設定します。

スマホやタブレットを使って見る人にとってはこの方がタップしやすいですからね。スマホファーストの時代ですから配慮が必要でしょう。

aタグで画像から説明文までマークアップし、あとはCSSの設定を行います(後述)

HTML(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<section>
<div id="photo">
<h1>FOREST STUDIO</h1>

<p>自然のあれこれをお届けする森の工房です。</p>

<a href="news.html">工房からのお知らせ</a>
</div>

<p id="message">Forest Studioは、森や自然を生かしたイベントや商品をお届けしている工房です。自然の中にある「森の工房」では、四季折々の風景を楽しんだり、森の散歩を楽しむことができます。お近くまでお越しの際は、ぜひお立ち寄りください。</p>
</section>

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

</body>
</html>

汎用的なマークアップはdivタグで

トップページはサイト名、キャッチフレーズ、説明文の構成で、サイト名とキャッチフレーズの背景に画像を表示します。

サイト名・キャッチフレーズと説明文とを分けるためにdivタグでマークアップします。

divタグは何の意味付けも行わない汎用的なタグでして、ここでは「photo」というIDで指定します。

divはブロックボックスを構成しますが、インラインボックスを構成する場合はspanタグが汎用的なマークアップに使えます。

pタグも区別できるようにする

紹介文はpタグでマークアップされていますが、このままpタグを編集するとキャッチフレーズも変わってしまいます。

そこでpタグにもIDを付与して区別します。ここでは「message」というIDが付けられています。

CSS

article, #message {
    background-color: #ffffff;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #aaaaaa;
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 15px;
    -webkit-box-shadow: 1px 1px 3px #aaaaaa;
    box-shadow: 1px 1px 3px #aaaaaa;
    border-radius: 20px;
    overflow: hidden;
}

/* 記事一覧のページ */
#posts article img {
    float: left;
    margin-right: 20px;
}

#posts article h1 {
    font-size: 24px;
}

#posts section {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#posts header {
    margin-bottom: 20px;
}

#posts time {
    font-size: 12px;
    color: #ffffff;
    background-color: #bdbc8f;
    border-radius: 10px;
    padding: 2px 20px 2px 20px;
}

#posts article a {
    color: #000000;
    text-decoration: none;
    display: block;
    overflow: hidden;
    padding: 20px;
}

#posts article a:hover {
    background-color: #ffe792;
}

#posts article {
    padding: 0;
}

/* トップページ */
#top header {
    margin-bottom: 0;
}

#photo {
    background-image: url(photo.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-color: #3f8ad6;
    text-align: center;
    padding-top: 320px;
    padding-bottom: 80px;
}

#photo h1 {
    color: #ffffff;
    font-size: 60px;
    font-family: 'Chango', cursive;
    text-shadow: 0 5px 10px #000000;
}

#photo p {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 5px 10px #000000;
}

#photo a {
    background-color: #ffaa00;
    background-image: -webkit-gradient(
        linear,
        Left top, Left bottom,
        from(#ffe7b8),
        to(#ffaa00));
    background-image: -webkit-linear-gradient(
        top,
        #ffe7b8 0%,
        #ffaa00 100%);
    background-image: linear-gradient(
        to bottom,
        #ffe7b8 0%,
        #ffaa00 100%);
    padding: 10px 80px;
    border-radius: 10px;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

IDの記述は#を冒頭に入れる

この章ではbodyタグやdivタグ、pタグなどにIDを付与して区別してきました。

ただ、IDを分けてもCSSで関連付けしなければ意味がありません。

IDは冒頭に#置いて記述します。記事一覧ページでbodyタグに設定したpostsというIDならば「#posts」という具合にです。

概要全体にリンクを設定する時はブロックボックスで

記事一覧ページで概要全体にリンクを設定するために画像から説明文までaタグでマークアップしました。

しかし、このままだとタイトルと説明文の間などの余白部分にリンクが設定されません。

そこでaセレクタのdisplayプロパティの値をblock(ブロックボックスに設定)にします。これで画像から説明文の終わりまでが1つのブロックになりました。

あとは説明文の終わり以降も有効になるようにoverflowプロパティの値をhiddenにします。

背景画像を繰り返さないように設定する

続いてトップページ用のCSSです。ここでは背景画像についてです。

背景画像よりもディスプレイサイズが大きいと、背景画像が繰り返し表示されることになります。

今回使用する画像は1枚が大きく繰り返し表示に向いていません。

そこでbackground-repeatプロパティの値をno-repeatにします。

画像をセンタリングにして、画像が表示されない範囲には通常の背景色を使います。これは普通にbackground-colorプロパティで指定すればOKです。

ちなみにid=photoの範囲でのみ有効なので、説明文の方には影響ありません。

カンマで区切ることで設定の流用可能

説明文を表示するmessage部分は、記事ページのarticleと同じデザインにします。

CSSのセレクタの記述っで「article, #message」とすることで設定を流用することができます。

ボタンのグラデーション

記事一覧ページへ飛ぶボタンのグラデーションを設定しています。

background-imageプロパティのlinear-gradientの値を設定します。どの方向にグラデーションするのかと、開始色と終了色をカンマで区切って記述します。

ところがこの設定は未対応のブラウザもあるので、表示できるように追記しておく必要があります。これがまたややこしいんですよね。微妙に値の記述が違いますし。

次はテーブルとフォーム

だいぶ終盤に差し掛かってまいりました。いざ始めると早いもんですね。

次はテーブルとフォームについて勉強していきますよ〜。