『WEB+DB PRESS vol.66』を読んだ

WEB+DB PRESS Vol.66

『我流コードからの卒業 HTML構造化指南』ということで、なんとなく書いていたHTMLを、しっかり構造化して考える必要性をお勉強。

コーディングといったら、div、ひたすらdivを使ってきました。displayでblockにしたりinlineにしたり、id名とclass名で区別したり…。
そうではなくて、もっと臨機応変にタグを使い分けたほうが賢いよというお話。
機械だけじゃなくて、人間にとっても、後で読み返したときにわかりやすくなるのだそうだ。

以下、抑えておくべきポイントをピックアップ。

・ブロック要素とインライン要素は、並列に記述せず、ツリー構造化
・vertical-alignはインライン/インラインブロックには効かないが、tableタグだけは例外
・グロナビは順序なしリストul、パンくずは順序ありリストol、Q&Aは定義リストdl
・セル構造には、TD(title discription)構造を使用
・divは、リストでも見出しでも段落でも表でもないときに、グルーピングの役割で使用
・clearfixでラッパーを作るのは、floatによって、親が子の高さを計算しなくなるのを回避するため
・トルツメはfloat、トルママはposition
・区切りに線を使うとき、両端だけ線をなくすには、negative-marginとoveflowhiddenの組み合わせを検討する
 (ラッパー構造を足して、左(もしくは上)に食い込ませて、はみ出た分を隠す)
 (first-child等で同じことはできる)

ウェブサービス開発に途中参加というパターンしか経験したことがないので、命名規則も、構造の作り方も、郷に入っては郷に従えな感じだったんですが、自分用のテンプレも持っておかないと、余計なことに時間使っちゃってもったいないかも。

サッと変更・修正を行うためにも、はじめから、変更しやすいようにわかりやすく書くというのは今後必須。

アルゴリズムの記事と、クックパッド開発ノウハウの記事も参考程度に。

WEB+DB PRESS Vol.66 WEB+DB PRESS Vol.66
猪狩 丈治,じゅんいち☆かとう,大和田 純,白土 慧,みやけん,小野 修司,個々一番,中島 聡,おにたま,角田 直行,久保 達彦,はまちや2,竹内 真,高井 真也,成田 一生,ココロ社,小飼 弾,ミック,太田 昌吾,WEB+DB PRESS編集部

技術評論社
売り上げランキング : 117957

Amazonで詳しく見る


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>