2008年09月15日　コーディング html / cording / dreamweaver

直書きライクな、HTML+CSSコーディング。

記事URL：http://tech.kimihiko.jp/article/19413275.html

直書きライクな、HTML+CSSコーディング。

【追記】これは、ネタです。
以下の内容は、良いHTML+CSSコーディングを推奨するものではありません。
こんなに反響があると思ってなかったので追記しておきます　(´-ω-｀)ｺﾞﾒﾝﾅｻｲ

CSSはHTMLから切り離して外部ファイルとして保管され、
その外部CSSファイルを修正すれば、HTMLファイルに触れずとも、
HTMLページの見た目を柔軟に変更できる、ということが
近年のHTMLページ制作におけるスタンダードになっています。

ですが、

私はHTML+CSSコーディングをする際に、
この外部CSSを作るのが非常に億劫でなりません。

idやclassなどのネーミングはもちろん、
どこに、どう設定を書くのか、などに非常に繊細な技術を要するからです。

かといって、styleを使って
htmlに直書きするのも面倒だなと思っていました。

そこで

CSSの機能を細分化してclass定義した外部CSSファイルをひとつ用意しておき、
そのCSSファイルを読み込ませたHTMLファイルに、
class定義を組み合わせて呼び出すだけで（HTMLに定義をしていくだけで）
なんとかHTML+CSSコーディングが出来てしまう、
そんな方法を考えてみました。

外部CSSファイルには、私が作ったflex.cssというファイルを使います。
flex.cssには、たとえば具体的には以下のような定義があります。

資料）flex.cssの一部

/*
/*
マージ(m)
*/
.m_t0 {margin-top: 0px; }
.m_t2 {margin-top: 2px; }
.m_t3 {margin-top: 3px; }
.m_t5 {margin-top: 5px; }
.m_t7 {margin-top: 7px; }
.m_t10 {margin-top: 10px; }
.m_t15 {margin-top: 15px; }
.m_t20 {margin-top: 20px; }
.m_t25 {margin-top: 25px; }
.m_t30 {margin-top: 30px; }
.m_t35 {margin-top: 35px; }
.m_t40 {margin-top: 40px; }
.m_t45 {margin-top: 45px; }
.m_t50 {margin-top: 50px; }

.m_r0 {margin-right: 0px; }
.m_r2 {margin-right: 2px; }
.m_r3 {margin-right: 3px; }
.m_r5 {margin-right: 5px; }
.m_r7 {margin-right: 7px; }
〜

このようなかんじで１機能ごとに使いそうな設定がズラーッと記述してあります。
詳しくは実際のファイルでご確認ください。
http://kimihiko.jp/inc/css/flex.css

flex.cssは基本的に完成してるものと考えますので、
触るのはHTMLファイルのみとなります。

CSSの書き方を考えることなく、直書きライクに感覚的にHTML+CSSコーディングができてしまう、
ということに重きを置いてますので
多少、web標準（W3Cの仕様など）から外れても良しとしますし、
制作後の修正のしやすさ（メンテナンスビリティ・メンテナンシビリティ）などには
とくに配慮するものとはなっていません。

基本的にCSSファイルに修正をする必要がないので、
考え方によってはメンテナンシビリティが高いともいえるかも知れませんが。。。

御託はこれくらいにして、
ポイントとなるdiv,spanタグ、
そしてid,classの使い方について述べたいと思います。

●idについて

idの重要な役割は、それが何のdivなのかパッと分かるようにする
手がかりとなることです。
なので、id名は、分かりやすいネーミングにします。

例）idの名前
id="hidari_menu_no_shita"
id="kiji_title_no_migi"

どこの場所のタグかすぐに分かるようなネーミングであれば
名前は不細工でもなんでもよいです。

のちに修正をかけたいときなどid名を入力して検索すれば
パッとその場所にジャンプできるようにすることが目的です。
なので、同じ名前のidを複数作ってはいけません。

●classについて

classの役割は、細分化したclass定義を呼び出してHTMLの見栄えを表現することです。
前述したflex.css内のclass定義を使って実際にhtmlに書く場合は以下のようになります。

例）記事タイトルの右divに、上部10px、右5pxのマージンを設定。
<div id="kiji_title_no_migi" class="m_t10 m_r10">りんご</div>

●divについて

divタグは、タグとしては特別な意味のないタグです。

divの使いどころですが、
グループピングしたいところに使います。
なので、様々な場所で使います。
またdivには、idとclassを必ず設定します。
理由は、idは場所を特定する名前がつけられ、
classにはCSSの具体機能が呼ばれるからです。

●spanについて

spanタグは、divと同様、タグとしては特別な意味のないタグですので
基本的にdivと同じ使い方をすればよいと思ってください。

divとspanタグの違いは、ブロック要素であるか、インライン要素であるか、
ということになります。

ブロック要素には前後に改行がはいるので、改行を入れたくない場合は
spanを使う、なんてこともあるかもしれませんね。

また、インライン要素は単体で存在させることはよろしくないので、
ブロック要素で囲んでやる必要があります。

もう一点、divは単にスペーサとして使う場合もあり、
そのときは以下のようにするのですが、
何も入れるものが無いとはいえ、ブロック要素のdivが空というのも
おかしいので、明示的にspanを入れることがあります。

例）高さ10pxのスペースを確保
<div id="spacedesu" class="h_10"><span class=""></span></div>

※ブロック要素とインライン要素については以下ページをご覧下さい。
http://www.tohoho-web.com/html/memo/elem.htm


以上です。