Mac mini ミニ大作戦！
第4回　目指せ、完全CSSレイアウト
　　　　　　（マークアップ編その2）

残りの部分もマークアップ（タグ付け）。これくらいのことはサクサクッとこなしたいところだけれど、意味付けを考えていると深い悩みスパイラルにハマってしまう。が、ここはお気楽に。後で修正できるし。

　

後半です

　タグ付けくらい1回でまとめればよいとは思うが、意外に面倒臭いことに気付いたこの企画。次第に「別に現状のままでいいじゃん」というイケナイ囁きが聞こえてくるようになってきたのだけれど、ネタを細切れにしてモチベーションを維持することにした。今回は後半の「D」「E」「F」「G」セクション。

悩みどころの次回予告「D」

　個人的にこのサイトの表紙で一番気に入ってるのがこの「D」セクション。更新が遅れがちなので実質的には機能不全に陥っているけれど、トップページに"次回予告"という発想を入れることは絶対必須だった。普通、次に書くネタを宣伝しておく事って無いと思うんだけれど、これは月刊雑誌感覚の名残なんだよね。よく最後のページに次回予告ってあるのを、トップに持ってくることで、読者の興味を繋げておく効果が出るのではないか、と書くともっともらしいけれど、実は自分のモチベーション維持に一番貢献してたりする。

　ところでこの「D」、リニューアル当時どうやってCSSで指定したのかまるで覚えていない。改めてCSSを見るとかなり強引に設定してしまったようで、今回これを少しはスマートに記述したいと思っているのだがあまり自信が無い。まあその悩みは後回しにして、ここでは普通にタグ付けしておく。

<p>【次回予告】</p>

<h6>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>

<p>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。</p>

最近の記事「E」

　最近更新した記事ネタをコンテンツ・ブロック毎に見出しで掲載しているセクション「E」。まずそれぞれのブロックの見出しがあって、その中身をタイトルで箇条書きしてる状態。どういうタグで括れば一番スマートなんだろうか‥非常に悩む。もしかしたら簡単なことなのかもしれないが、どうも今ひとつピンとこない。ちなみに現状では細かく<h3>などで一つ一つ指定しているんだけれど、形態から見てリストタグで括るのもアリだし、前回紹介した定義リスト（dl、dt、dd）で括るのも良いかもしれない。ちょっと書いてみる。

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

　これを書きながら思ったのだけれど、この定義リストタグ、意味合いとしては<dl>で宣言して、<dt>が見出しになって、<dd>でその見出しの説明文を記述する、というものらしい。<dd>は<dt>の説明文という関係性があるということは、<dd>と<dt>一つずつでペアとしなければいけないのだろうか。今回実現したいように、<dd>を箇条書きで幾つも並べるのはルール違反なんだろうか‥。う〜む、どうなんだろう‥。ちなみに<dd>を幾つ並べても表示の際にエラーは出ないんだけれど。

　現時点で施す装飾は各コンテンツ共に共通と考えているので、この定義リストで括った方が理解しやすいし、CSS設定も簡略できる気がする。もし将来的に例えばminiネタと映画ネタを視覚的にも分けていくなら、リストの方が分かり易いような気もする。う〜ん、どうせこのセクションはプライオリティ低いし、全然埒があかないから後で悩もうっと。

画像で行っちゃいます「F」、さらりと「G」

　この部分はトピック扱いというか、旬の物扱いというか、つまり一発ネタ的なものなので、深く考えず画像一発、段落扱いで。代替えテキストはひとまず簡単にしておく。

<p>
<img src="images/MENU.gif" alt="当サイトのキラーコンテンツ" />
</p>

　2006年1月というテキストは重要な情報でもないし、デザイン的に画像にしてしまうので、ここではひとまず省略しておく。

<p>
copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.
</p>

改めて文章構造を考える

　では、タグ付けしてきたA~Gセクションをまとめてみる。

<!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>
</head>
<body>

<h1>
<img src="images/top.jpg" alt="フリフリのMac mini ミニ大作戦！" />
</h1>

<ul>
<li><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li><a href="../../../Movie/index.html">映画百本</a></li>
<li><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li><a href="../../../BBS/index.html">BBS放送局</a></li>
<li><a href="../../../Book/index.html">読後の一言</a></li>
<li><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>

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

<p>
<img src="images/MENU.gif" alt="当サイトのキラーコンテンツ" />
</p>

<p>
copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.
</p>

</body>
</html>

　これを実際にブラウザで表示してみる。ここでは仮だったリンク先のパスなどは修正してある。

　なんかとんでもないことになっているが気にせずに、ほとんどレイアウトの施されていない状態で見てみる。ここではテーブルで組み上げた時の順序に沿って並べたけれど、情報を伝えるための文章として見たとき、情報の重要なものから列挙すべきと考えると、トップ画像のある「A」とその次に重要な「C」の間に、左メニューリスト「B」があるのは人が読む場合でもコンピュータの解釈上でも好ましくない。なので「B」セクションは文章構造の後半へ回してしまう。これは主に視覚障害者が利用する音声ブラウザが、文章を読み上げる場合に有効になる。確かにいきなり「Mac mini ミニ大作戦、映画百本、放談ラジオ音響系‥」と読み上げられても意味が分からない。

　サンプル2の状態で見れば、改めて意義としても視覚的にも「B」部分のプライオリティが低いことが分かる。CSSでは細かく表示位置を指定できるので、HTMLの段階で各セクションがどの位置に置かれていても大丈夫ということなのだ。

　やっとタグ付けが終わった‥。次回はdivタグでグループ化。もはやテーブルタグは登場しない（うまく行けば）。miniネタを期待してる読者には申し訳ないけれど、しばらくは自分の満足の為に更新。そういえばこの記事ネタ作成時、参考にさせていただいたサイトも紹介しておきます。

【HTMLタグの簡単検索】TAG index - ホームページ制作情報
http://www.tagindex.com/index.html

The Web KANZAKI -- Japan, music and computer
http://www.kanzaki.com/
この中の「文書の骨格となる基本要素 -- ごく簡単なHTMLの説明」
http://www.kanzaki.com/docs/html/htminfo11.html

　特にKANZAKIさんのHPではマークアップする際の段落や見出しの「意味付け」について再考する助けになりました（僕の努力不足で記事にうまく反映できていないのですが）。その他にも勉強になる情報が丁寧に掲載されています。どうも有り難うございました。

　

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