『我流コードからの卒業 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 猪狩 丈治,じゅんいち☆かとう,大和田 純,白土 慧,みやけん,小野 修司,個々一番,中島 聡,おにたま,角田 直行,久保 達彦,はまちや2,竹内 真,高井 真也,成田 一生,ココロ社,小飼 弾,ミック,太田 昌吾,WEB+DB PRESS編集部 技術評論社 |
