Mac mini ミニ大作戦！
第10回　目指せ、完全CSSレイアウト
　　　　　　　　　　（息抜き調整編）

右側の画像マップと左側のアイコンメニューの位置調整をする。こんなの簡単簡単、息抜きにサラサラッと記事を書いて更新しよう〜、っと思いきや、そうは問屋が卸さなかったのだった。

　

いきなり訂正

　前回「ライフアクアティック」の文字をリンクを張った状態のまま赤色に指定するのに、「<span class="title">〜</span>を使おう」と書いたけれど、記事をアップした翌日の朝、出勤途中の電車の中でふと「いや、それは間違いでは無いんだけど効率悪いじゃないか？」と気付いた。ほんの僅かだけれど、もうちょっとスマートなやり方があるじゃんか。で、こう変更してみた。

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

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

#main dd a { font-size: 13px; font-weight: bold; letter-spacing: 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 }

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

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

　前回は.title というクラスセレクタを設定してみたが、ここでは第9回で学んだように、「#main領域内の<dd>タグ内で使われている<em>に対しては、特別に○○のような表示をさせる」という範囲限定の設定を用意してやれば、より簡素なタグ付けで仕事が済む。<em>は通常、「強調」を意味するタグだけど、その挙動をCSSで指定し直している。CSSはこういう事が出来て柔軟だなあ。よってHTML側では次のように括り直せばいい。

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

　これなら長々と<span class="title">〜</span>とタイトルを括っていたところを<em>〜</em>で済ますことができる。

サンプルHTMLその31

　カスタムで用意した.titleを使うより、既存のタグを活用すればGoLive上でも用意されているメニューから素早くタグ付けすることが出来てひじょう〜に便利。

右側の画像マップ、位置調整

　ずっとズレたままにしておいた右側の画像マップ。サンプルを表示させるたびになんかイライラしてきたので、ここで位置を調整しておく。

/*右メニューの整理
________________________*/
#sub {text-align: right; margin: 0; padding: 0 }

　CSSに上の記述を追加してサンプルを確認してみる。

サンプルHTMLその32

　右端に寄ったのはいいけれど、ヘッダ画像との間に余白が空いてしまっている‥。何が原因なのかとしばらく悩んで40分。ようやく以前作成して「いつか直しておこう」と思っていたヘッダ部分の記述に問題があるのだと判明。これまで#header { text-align: center;}としていた箇所を次のように修正。

/*ヘッダ
________________________*/
#header { margin-right: auto; margin-left: auto ; width: 750px; height: 160px}

　やはりきちんと幅・高さの指定をしておかないとダメみたい。

サンプルHTMLその33

続いて左側のアイコンメニュー

　さて、左側のアイコンメニューにも上部に余白がある。で、これを直して位置調整もしようと思ったのだが、あれこれCSSを修正したり追加したりしても上手く行かない‥。プロパティを追加するのも<ul>なのか<li>なのか、いろんな場所にmargine 0を付け加えたり、イヤ待てよ、background-positionかしらん？等々、なんやかんやで時間が過ぎていく。

　結局なんてことはない。下の赤色の記述が間違っていたのだ。ほれほれ、以前も嵌った、カンマで区切っちゃダメってやつだ。

/*左メニュー
________________________*/
#nav ul {margin: 0,0,0,0px ; padding: 0; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }

　で、位置調整も合わせて修正したのがコレ。背景画像を意図する場所に配置するのに、それは<li>でやるのか<a>でやるのか、果てはnavと名付けた<div>やるのか試してみたが、結局はリスト・タグ親の<ul>だった。ここまでくるのに何と約4時間かかった。おいおい。

/*左メニュー
________________________*/
#nav ul {margin-top: 10px ; margin-left: 45px; padding: 0 ; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px; }

サンプルHTMLその34

　たかがこんな些細な事に気付くのに一体どれだけの時間を費やしたのか。全然息抜き調整編では無いではないか。今回はっきり分かったが、僕には単純なスクリプトさえいじる才能は皆無。この程度で悩んでいるんだから、世のプログラマーさんの仕事ってどれだけ重労働なものか‥。

　だから、PowerPCからインテルにアプリを移行＆最適化する作業なんて、とてもとても面倒臭い作業に違いない。

　というわけで各要素の配置もある程度仕上げることができた。が、しかし。CSS初心者が必ず最初に陥るであろう、というか全く腑に落ちない場面に、僕も遭遇することになるのだった。つづく。

　

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