Mac mini ミニ大作戦！
第11回　目指せ、完全CSSレイアウト
　　　　　　　　　　　（次回予告編）

目の前に立ちはだかった大きな壁の事を書く前に、「次回予告」エリアについてアレコレやってみる。でも正直言えば、単に「次回予告編」というサブタイトルが面白かっただけなんです‥。すみません。

　

次回予告が楽しい

　自分の中ではホントにトップページの「次回予告」が気に入っている。大好きだ。ネタを考え、それを予告する快感。何物にも代え難い‥と言うと大げさだろうか。もっとテンポ良く、予告した記事をきちんとアップできたら本当に楽しいんだろうけど、残念ながらサラリーマンは自由な時間を捻出するのが難しい。

　そんな「次回予告」エリア。やはり注目して欲しい箇所だけあって、枠線で囲んである。CSSでどうやって記述しようか。っていうか、前回、CSS初心者が絶対納得いかない不可解な現象についてとかなんとか書いておきながら全く約束を守らないでおいて、よくもまあこんなことが書けるもんだ。でも予告は楽しい。それはささやかなマイ・モチベーション。

<div>で定義しよう

　と言っても現時点で既にCSSで枠線表示をしているんだけど、やはり記述の仕方というか、まとめ方というか、今ひとつスマートじゃない感じがする。ちなみにこれまでは<h4>を使って枠線の指定をしていた。でも見た目にも予告編という"領域"だし、ここまでの経緯を踏まえて<div>で定義してみようかな、と思う。id名は<announce>（アナウンス）にする。

　そこでまずHTMLの方へタグを追加。これまでの<main>の中に入れ子状態で作成。

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

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

<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>

続いてCSSの方

　CSSの方には次のような設定値を追加。

/*次回予告編
________________________*/
#announce { font-size: 14px; font-weight: bold; margin: 10px 0; padding: 6px ; border: solid 1px #34626d }

　アナウンス領域では、特に指定していなければ文字は14pxで云々かんぬん〜とあって、要の枠線はborderで指定。1ピクセルの実線で色は#34626d、という感じ。これで見てみる。

サンプルHTMLその35

　前回のサンプルでは「人生の終わらせ方」に挙動を見るため仮リンクを張ったけれど、実際は予告編なのでリンクはカット。するとサイトの趣旨として記事タイトルは基本的に<h2>で括っているので、このように大きな文字＆黒色で表示される。まあ確かにインパクトはあるけれど、トップにある最新記事の表示と同列の扱いをするのはいかがなものか。

　なので「次回予告」領域の中にある<h2>は、そこだけ限定で別の表示をさせる。これは前回の冒頭でやったことと同じ。

/*次回予告編
________________________*/
#announce { font-size: 14px; font-weight: bold; margin: 10px 0; padding: 6px ; border: solid 1px #34626d }

#announce h2{ color: #900; font-size: 14px; font-weight: bold; }

　これを追加して変化を見てみる。記事タイトルの文字を若干小さくして、濃い赤色に指定し直した。

サンプルHTMLその36

チラシ画像を入れて完了

　だいたいバランスが取れた感じがするので、特に変なこともせず普通にチラシ画像を挿入。hspaceだけ5ピクセル入れている。

<div id="announce">
<p>【次回予告】</p>
<h6><img src="sayonara.jpg" alt="" width="80" height="113" align="left" border="0" hspace="5"/>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>
<h4>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。<br clear="all"/>
</h4>
</div>

　これで表示を確認。

　うんうん、かなりオリジナルに近い状態へ復元できた。

　さて、いきなり別ネタを挟んでしまったが、次回こそ、CSS初心者が必ず最初に陥るであろう、というか全く腑に落ちない場面に、僕も遭遇することになるのだった‥、という記事を書きたいと思う。実はようやくここまできたのに、その壁のせいで完全CSS移行計画が挫折する予感が‥。つづく。

　

【06/3/18更新】
トップへもどる↑
　copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.