はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
情報の意味を考えながらHTMLコーディング
2008/05/19
トモ・リーン
つぎはHTMLを組むわよ～。
どんなデザインなの？？
ケンジ
おう！
このデザインがデザイナーから渡されたものだぜ！
デザイン
トモ・リーン
おっと・・・！　かわいいわね！！
ケンジ
tableタグは絶対に使ったらダメなんだよね！
トモ・リーン
う～ん、それは良くある誤解ね。
tableタグは元々表組み用のタグだから別に表だったら使ってもいいのよ。
file.3のDOCTYPE宣言の表はtableタグを使ってるわ。
ケンジ
tableタグはレイアウトのために使うのは良くないけど、表に使うのは大丈夫なんだね。
トモ・リーン
そうよ。
じゃあ、テキストを抜き出して、そのテキストにふさわしいタグでマーキングしてみて。
ケンジ
おう～っ！
がんばるケンジさん
ケンジのHTML
<body>
<div>佐藤・ミント・ぴょん吉・眠都・道隆オフィシャルサイト<br />
ネコ王子ことみったん</div> <a href="profile/index.html">プロフィール</a><br />
<a href="blog/index.html">みったんのblog</a><br />
<a href="dv/index.html">みったん被害報告</a><br />
<a href="photo/index.html">フォトグラフィ</a><br />
<a href="contact/index.html">コンタクト</a><br /> <div>みったん・略歴</div>
<p>産まれながらの王子。<br />
甘い外見とは裏腹にイライラするとすぐにかみつく。<br />
趣味的にキレる。恐怖の支配者。また、どうしようもないビビリなのは有名。</p> <div>みったんの<br />ヒマつぶし的生活を<br />のぞいてみよう！</div> <div>みったんの新しいチャームポイント写真が追加されました！</div>
<p><strong>みんな待ってた！</strong><br />
みったんのチャームポイント写真が追加されました！！<br />
耳毛です。<br />
みったんの本体とも うわさの耳毛、アップで撮影しました。<br />
ヨリヨリしたくなること間違いなし！！<br />
仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。<br />
仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。</p> <a href="photo/mimige.html">もっと耳毛を見る</a> <div>Copyright(C) 2008 michitaka sato All Rights Reserved.</div> </body> 実際のファイルを見てみる
ケンジ
どや～～～。
トモ・リーン
う～ん。おしい～。
ちょっと書いてみるから強調している部分に注目してね。
トモ・リーンのHTML
<body>
<h2><a href="index.html">佐藤・ミント・ぴょん吉・眠都・道隆オフィシャルサイト</a></h2>
<h1><a href="index.html">ネコ王子ことみったん</a></h1>

<ul>
<li><a href="profile/index.html">プロフィール</a></li>
<li><a href="blog/index.html">みったんのblog</a></li>
<li><a href="dv/index.html">みったん被害報告</a></li>
<li><a href="photo/index.html">フォトグラフィ</a></li>
<li><a href="contact/index.html">コンタクト</a></li>
</ul>

<dl>
<dt>みったん・略歴</dt>
<dd>産まれながらの王子。<br />
甘い外見とは裏腹にイライラするとすぐにかみつく。<br />
趣味的にキレる。恐怖の支配者。また、どうしようもないビビリなのは有名。</dd>
</dl>

<div>みったんショット</div><p>みったんのヒマつぶし的生活をのぞいてみよう！</p>

<h3>みったんの新しいチャームポイント写真が追加されました！</h3>
<p><a href="photo/mimige.html"><img src="img-michitaka/photo.jpg" alt="刺激的な耳毛写真！！！" width="248" height="178" /></a>
<strong>みんな待ってた！</strong>
みったんのチャームポイント写真が追加されました！！<br />
耳毛です。<br />
みったんの本体ともうわさの耳毛、アップで撮影しました。<br />
ヨリヨリしたくなること間違いなし！！<br />
仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。<br />
仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。仮テキストです。文章が入ったときの雰囲気を見ていただく為に、入れています。ご確認ください。</p>
<a href="photo/mimige.html">もっと耳毛を見る</a>
<div>Copyright&copy; 2008 michitaka sato All Rights Reserved.</div>

</body>
実際のファイルを見てみる
ケンジ
なんか見慣れないタグがあるし、メニューに<ul>って意味的には分かるけど<ul>タグを使うと、頭に『・』が自動的に付くから困らない？？
トモ・リーン
そこをCSSでコントロールするのよ！
ケンジ
おお～！
なんかCSSの話しっぽくなってきたね！！
トモ・リーン
table組みではあまり使わないけどCSS組みでは、結構使われているHTMLタグをまとめてご紹介です。
h1～h6
見出しの意味を持つ。
h1が一番重要な意味を持つタグで、数字が下がるほど小見出しの意味合いが強くなる。
また、h1タグはサイト名やサイトロゴをマークアップすることが多い。
dl, dt, dd
リストタグの一種。
使用例を非表示 <dl>
<dt>タイトル：基本形</dt>
<dd>内容：基本形このように使います。</dd>
</dl> <dl>
<dt>タイトル：ddを複数つなげる</dt>
<dd>内容1：このようにddを複数つなげることも出来ます。</dd>
<dd>内容2：このようにddを複数つなげることも出来ます。</dd>
<dd>内容3：このようにddを複数つなげることも出来ます。</dd>
</dl> <dl>
<dt>タイトル1：繰り返し</dt>
<dd>内容1：dt, dd のセットを繰り返して使用することも出来ます。</dd>
<dt>タイトル2：繰り返し</dt>
<dd>内容2：dt, dd のセットを繰り返して使用することも出来ます。</dd>
<dt>タイトル3：繰り返し</dt><dd>内容3：dt, dd のセットを繰り返して使用することも出来ます。</dd>
</dl>
hr
もともと、区切り線として使われていたが、CSSを使用しないと見栄えの制御が難しく、あまり使用されていなかったが、CSSで線の見栄えが細かく設定出来るようになったので、見た目にこだわるサイトでも使えるようになった。
strong
強調の意味のタグ。
普通に使うと太字になる効果がある。もともとは太字の効果として『b』タグが使用されていましたがbタグは意味の無い見た目のみのタグのため、使用しない。（見た目はすべてCSSで制御）
div
何の意味も持たないタグ。ブロック要素。
span
何の意味も持たないタグ。インライン要素。
ブロック要素とインライン要素
タグの表示の方法は大きく２つに分けることが出来ます。ブロック要素とインライン要素です。
例えばh1～h6, dl, table はブロック要素。
strong, img, a はインライン要素。
詳しくはそのうち書きます！
ケンジ
うぐっ・・・・・・。
ちょっと気持ち悪くなったけど、見たことあるタグも結構あったから大丈夫だよ！
トモ・リーン
なれたら、平気になるどころか楽しいから安心してね。
ケンジ
うん・・・・・・。
トモ・リーン
で、先に書いたソースをブラウザで見ると、こうなります！
トモ・リーンの書いたHTMLをブラウザで見たイメージ
ケンジ
うわ～！　全然デザイン再現できてないよ～～。
トモ・リーン
まだCSS作ってないしね。
つぎに乞うご期待よ～♪
ケンジ
っていうか、写真画像入ってるよ！
テキストだけって言ってなかった？？
トモ・リーン
う～ん、実はね、イメージ的な画像じゃなくて、情報として必要な画像の場合は配置しておいた方がいいのよ。
メイン画像のネコがごろ～んってしてるのは情報的に無くてもいいけど、耳毛の話しをしているところでは、耳毛写真があったほうがいいでしょ？
ケンジ
へぇ～～～。（・・・・・・。）
ってなんだか、フワッとしてて分かりにくいんですけど？
トモ・リーン
もうちょっと細かく言うと、わたしは画像の取り扱いはこのように分けているのよ。
画像の役割と取り扱い
その画像が無いと説明が成り立たないもの
imgタグで画像をHTMLに配置し、altでその画像の説明をする。
例：このページのトモ・リーンの書いたHTMLをブラウザで見たイメージなど
装飾された文字などで、見栄えが変わってもいいが、省略しては説明が成り立たないもの
その文言にふさわしいマーキングをし、イメージは背景画像で表示。
例：このページのページタイトルの部分（h5でマーキングしています）
その画像が無くても内容の説明には困らないが、ページの華やかさや、サイト全体のイメージの構築に役立つもの
特にその画像の説明は書かずに、背景画像に指定。
例：このページのケンジが必死にコーディングしている画像。
ケンジ
う～～～ん、この画像の扱い分けは何か意味があるの？
トモ・リーン
（XHTML＋）CSSってもともと「内容」＋「見栄え」を切り離す、と言う理想の元に作られたものなのよ。
だからその思想から画像の役割を考えるとこうなるわね。
このサイトも、FirefoxだとWeb Developerのように、CSSをオフに出来るものを使ってCSSの切れた状態で見てみると、分かりやすいかもよ。
ケンジ
でもさぁ、トモ・リーンは妖精だから余り分からないかもしれないけど、現実って理想ばっか追いかけられないよ・・・・・・。
トモ・リーン
・・・・・・。
トモ・リーン
まっ、あれよ。
実は私もお客様からの受注内容で組み方を変えているからね。
特に印刷時の見栄えに関連して画像の扱いが変わるわ～。
ちなみにこのサイトは印刷設定のCSSはしていません！！
ケンジ
へぇ～。妖精なのに妙に俗っぽいね！
でも、なんでこのサイトは印刷設定してないの？
トモ・リーン
このサイトはXHTML＋CSSの理想形態で作っているので、CSS妖精の私の気持ちも満たされるのよ～！あとSEOにもいいのよね～。
今のところ「印刷時の理想＋XHTMLの理想＋CSSの理想」を合わせた物はwebブラウザの印刷対応のレベルが上がるまで無理ね。
どれかが犠牲になるわ。
ケンジ
ふ～ん。
またそのうち、印刷用のCSSのことも教えてね！
トモ・リーン
そのうちね。
トモ・リーン
今回の例のように、スタイルシートが無い状態のときでも必要な情報が表示され、大事な情報が強調されているようにHTMLを作るのが大事ね。
きちんと情報別にHTMLのタグでマーキングしておくと自然にいいソースになるわよ。
今回のポイント！
タグの「見た目」じゃなくて「意味」を考えてHTMLコーディングをしよう！
トラックバック(0)
このブログ記事を参照しているブログ一覧：情報の意味を考えながらHTMLコーディング
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/75
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4