Mac mini ミニ大作戦！
第9回　目指せ、完全CSSレイアウト
　　　　（あれこれテキスト装飾編）

おおまかな枠組みが出来たところで、メインコンテンツ部分のテキストにあれこれ装飾を施していく。CSSへの移行作業の中で、実はコレが最も楽しい作業かも。

テキストへの飾り付け

　今回は前回まで作成したサンプルの中央に配置されているメインコンテンツ部分のテキストを装飾していくのだけれど、今一度そのHTMLを確認してみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS" />
<title>フリフリの「Mac mini ミニ大作戦！」</title>
<link href="TEST18.css" rel="stylesheet" type="text/css" media="all"/>
</head>

<body>

<div id="main">
<h6>Mac mini ミニ大作戦！</h6>
<h2>第1回　目指せ、完全CSSレイアウト</h2>
<p>先日、ちょっと新しいサイトデザインに更新してみようかなと思い立ったのだけれど、その作業が非常～に面倒臭くなることが判明。原因はレイアウトを従来通りテーブルタグで構成していたからだった‥。そこでCSSレイアウトに移行を試みる新シリーズ。【06/2/4】</p>

<p>【次回予告】</p>
<h6>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>
<p>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。</p>

<dl>
<dt>Mac mini ミニ大作戦！</dt>
<dd>祝！阪神優勝記念クロックアップ
☆1.25GHz→1.67GHz！☆【05/10/1】</dd>
<dt>映画百本</dt>
<dd>「ライフ・アクアティック」果てしなきロール・プレイ【06/1/14】</dd>
<dt>放談ラジオ音響系</dt>
<dd>2005年の重大ニュース【05/12/31】</dd>
<dt>読後の一言</dt>
<dd>『COSMOS　コスモス（上下）』カール・セーガン著【05/7/9】</dd>
</dl>
</div>

<div id="sub">
<p>
<img src="../../02/css_gogo/MENU.gif" alt="当サイトのキラーコンテンツ" />
</p>
</div>
</div>
<div id="nav">
<ul>
<li id="macmini"><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li id="movie"><a href="../../../Movie/index.html">映画百本</a></li>
<li id="radio"><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li id="bbs"><a href="../../../BBS/index.html">BBS放送局</a></li>
<li id="book"><a href="../../../Book/index.html">読後の一言</a></li>
<li id="mail"><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>
copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.
</p>
</div>
</body>
</html>

　改めて見てみると、背景画像の指定はCSS側に一任しているし、テーブルタグも使ってないだけあってかな～りスッキリしているなあと思う。さて、今回手を付けるのは赤字の部分。と言っても基本的にこのHTMLはほとんど修正しない。現状では見出しを意味する<h>タグの2～6を使用して、ブラウザで見てもその通りに大きくなってたり小さくなってたりするけれど、これを意のままにコントロールできるのがCSS。従来のHTMLでもボールドにしたり、点滅させたり、色を付けたり、イタリックにしたり出来たけれど、CSSではもっと踏み込んだコトが可能。

　ここで赤字の<p>タグ（段落）で括っている箇所なんだけど、意味合いとしてはこれで良いのだが、今後コンテンツ・ページとの兼ね合いで<h4>で括り直すことにした。あと「優勝記念クロックアップ」と「☆1.25GHz」の間に改行<br />を入れた。もう一度要所を抜粋。

<div id="main">
<h6>Mac mini ミニ大作戦！</h6>
<h2>第1回　目指せ、完全CSSレイアウト</h2>
<h4>先日、ちょっと新しいサイトデザインに更新してみようかなと思い立ったのだけれど、その作業が非常～に面倒臭くなることが判明。原因はレイアウトを従来通りテーブルタグで構成していたからだった‥。そこでCSSレイアウトに移行を試みる新シリーズ。【06/2/4】</h4>

<p>【次回予告】</p>
<h6>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>
<h4>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。</h4>

<dl>
<dt>Mac mini ミニ大作戦！</dt>
<dd>祝！阪神優勝記念クロックアップ<br/>
☆1.25GHz→1.67GHz！☆【05/10/1】</dd>
<dt>映画百本</dt>
<dd>「ライフ・アクアティック」果てしなきロール・プレイ【06/1/14】</dd>
<dt>放談ラジオ音響系</dt>
<dd>2005年の重大ニュース【05/12/31】</dd>
<dt>読後の一言</dt>
<dd>『COSMOS　コスモス（上下）』カール・セーガン著【05/7/9】</dd>
</dl>
</div>

　表示状態を確認しておく。

サンプルHTMLその22

　「先日、ちょっと新しい‥」の部分は、これまでプレーンなテキストだったけれど、僕の都合により<h4>で括り直したので見出し扱いとなり、文字が太くなっている。でもこれは後半、CSSでガラリと変えてしまう。

まず<h6>

　コンテンツのカテゴリーを表している<h6>を指定してみる。参考書を読むとフォント・サイズの指定はemを単位として使いましょうとか、いろいろ細かい「こうしておくべき」ルールがあるみたいなんだけど、時間の余裕がないので検証は後回しにして、とりあえず"現状の再現"を目標にしておく。

/*メイン部分の文字装飾
________________________*/

#main h6 { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }

　この状態で確認してみる。

サンプルHTMLその23

　そうそう、こんな感じ。で、次は最新記事のタイトルを括っている<h2>を指定。

　この状態で確認してみる。これは素の<h2>の挙動とさほど変化させてないので、見栄え変わらず。

サンプルHTMLその24

　ところで従来の感覚だと、同一ページで扱える<h2>の動作指定は1つしか出来ないと思いがちだけど、今回のCSS内で「#main h2」と書いているように、「main領域内で使っているh2に対して」と有効範囲を限定できる。言い換えれば他の領域に同じ<h2>タグを使い回していても、例えば「#footer h2」とすればフッタの<h2>は装飾を変えることが出来る。いくらCSSとはいえ「1から6までしか使えないじゃないか」と思っていたが、これは勉強になった。

　では次。先ほど<h4>タグにて括り直した箇所の、文章の見栄えを変えてみる。

/*メイン部分の文字装飾
________________________*/

#main h6 { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }
#main h2 { font-size: 20px; font-weight: bold; letter-spacing: 0; margin: 0em 0 }
#main h4 { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0.1em }

サンプルHTMLその25

枠線で背後を飾る

　さて、メイン部分の後半は過去の記事タイトルを各カテゴリ毎に箇条書きしてある。この部分は定義リストタグの<dl>、その見出しにあたる<dt>、各リストになる<dd>で括ってある。ここでは<dt>と<dd>についてあれこれ指定する。

/*メイン部分の文字装飾
________________________*/

#main h2 { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }
#main h2 { font-size: 20px; font-weight: bold; letter-spacing: 0; margin: 0em 0 }
#main h4 { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0.1em }

/*定義部分の装飾
________________________*/

#main dt, #main dd { margin: 0; padding: 0;}

#main dt { color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.1em; background-color: #999; margin: 0.67em 0; padding: 3px 63px 3px 6px; border-style: none none none solid; border-width: medium medium medium 12px; border-color: #9cc }

　最初にとりあえずお約束ということで<dt><dd>のマージンと余白を0にリセットしてあるが、まあこれは必要ないかも。で、カテゴリの見出しとなる<dt>は派手に装飾してるのだけれど、これは文章を「枠線」で囲い込んでいるワケ。まず修正したものを見てみる。

サンプルHTMLその26

　ここではbackground-colorでタイトル文章の背景を灰色にして、マージンとかパディングでブロック状に拡張し、border-style以降で左側のみ枠線を12pxで表示させ、そのカラーを水色に指定している。その他細かい説明は時間の余裕がないので省略させてもらうけれど（というか自分が楽をする為にやってるので言い訳しなくてもいいんだが‥）、リファレンスブックなどのCSS文法書を読むと簡単に理解できる。

　さらに続けて<dd>の部分を指定する。装飾の仕組みは<dt>と同じ。

/*メイン部分の文字装飾
________________________*/

#main h2 { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }
#main h2 { font-size: 14pt; font-weight: bold; font-stretch: condensed; margin: 0em 0 }
#main h4 { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0.1em }

/*定義部分の装飾
________________________*/

#main dt, #main dd { margin: 0; padding: 0;}

#main dd { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0; margin: 1em 0; padding: 0 0 0 6px; border-style: none none none solid; border-width: 1px medium medium 10px; border-color: #666 }

サンプルHTMLその27

　ま、とりあえず見てくれはだいぶ形になった。さて、<dd>の部分はリンクを張っていないので黒色の目立たない表示になっているが、比較用オリジナルHTMLを見ると、普段は独自のリンク設定により、濃い青色で強調表示している。

<dd>の中での<a>の見栄えを指定

　テキストにリンク指定すると、通常は元にあるテキストの状態を維持して、せいぜい色が変わるくらいだけど、CSSを使えば大きく変化させられる。これは前回の左メニューでの考え方と似てる。

/*定義部分の装飾
________________________*/

#main dt, #main dd { margin: 0; padding: 0;}

#main dd a { font-size: 13px; font-weight: bold; letter-spacing: 0; }

　リンク先は未設定のままだけど、とりあえず。

サンプルHTMLその28

　リンク設定箇所の色設定をしていないので、色に関してはデフォルトの挙動のまま。これは後日調整。ここで注目すべきは、ページ上部のリンクは<h2>で指定した大きさを維持しているけど、下部の記事タイトル部分の見出しに施したリンクは、先のサンプル27での文字設定を維持せず、「#main dd a」で指定したように変化している、という点。

インラインでの指定もアリ

　記事ネタを書いてるのもしんどいが、もう少し。下部の映画百本「ライフアクアティック」の部分は上部の映画百本「みなさん、さようなら。」で指定した<h6>とほぼ同じなんだけれど、ここで同様に<h6>で括ってしまうと、見出し定義上改行されてしまう。

サンプルHTMLその29

　まあ、別にこれでも良いんだけど、百本と言ってるだけに、これが100行も並ぶと壮観な眺めになってしまう。なので、ここでは「.title」というクラスセレクタを作って、必要に応じインラインで装飾を施す。クラスという概念の説明は‥長くなるので省略。参考書などに詳しく書いてあります。

/*定義部分の装飾
________________________*/

#main dt, #main dd { margin: 0; padding: 0;}

#main dd a { font-size: 13px; font-weight: bold; letter-spacing: 0; }

.title { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }

　HTML上では次のようにして使用する。

<dl>
<dt>Mac mini ミニ大作戦！</dt>
<dd>祝！阪神優勝記念クロックアップ<br/>
☆1.25GHz→1.67GHz！☆【05/10/1】</dd>
<dt>映画百本</dt>
<dd><a href="777"><span class="title">「ライフ・アクアティック」</span>果てしなきロール・プレイ</a>【06/1/14】</dd>
<dt>放談ラジオ音響系</dt>
<dd>2005年の重大ニュース【05/12/31】</dd>
<dt>読後の一言</dt>
<dd>『COSMOS　コスモス（上下）』カール・セーガン著【05/7/9】</dd>
</dl>

　<span>タグはHTMLで「グループ化」を意味するモノらしい。以前活躍した<div>も同じような定義だったけど、<div>は一つの段落・領域をドドッと括るのに使った（ブロック要素）。対して<span>は文章の中のちょっとした部分（今回は映画のタイトル部分）に、必要に応じて何度でも使うことが出来る‥らしい（インライン要素）。
　この<span>にクラス「.title」と名前を付けて、その名前を伴った<span>は、CSS内であらかじめ設定されている動作をする、という形。<span class="title">～</span>で気軽に使おう。

サンプルHTMLその30

　なんか知らないが、気合いの入った企画になってしまった。今まではほとんどの文章をspanとクラスを用いたインライン要素で細かく括っていたが、これは恥ずかしいほどの大間違いなのだと分かった。相変わらず詰めは甘いけど、<h>要素をうまく割り当てて、効率の良いHTMLになったと思う。今回は間に合わなかったけれど、コンテンツ内の「次回予告」領域の設定をどうすべきか悩んでいる最中。というわけで次回はちょっと息抜きして左メニュー、右メニューの調整をしてみるつもり。

【06/3/13更新】

トップへもどる↑

Mac mini ミニ大作戦！第9回 目指せ、完全CSSレイアウト （あれこれテキスト装飾編）

テキストへの飾り付け

まず<h6>

枠線で背後を飾る

<dd>の中での<a>の見栄えを指定

インラインでの指定もアリ

Mac mini ミニ大作戦！
第9回　目指せ、完全CSSレイアウト
　　　　（あれこれテキスト装飾編）