SetucoCMS合宿中のHTML勉強会めも ~ b6note

今立ち上げ中のオープンソースプロジェクト「SetucoCMS」の合宿中に、HTML勉強会を行った。講師はプロジェクトリーダーの@skyguild。走り書きのようだけど、内容をメモったのでここに記録。

SetucoCMS HTML勉強会

hタグについて

h6まである。html4ではh1は一つのページに一つまで、となっていたが、html5ではその辺の事情が変わりつつある。単純に太い大きい文字で表示するタグじゃない。見出しの意味を持つのが重要。

リストタグ（ul ol dl）について

場合によっては、dlタグを使うのか、それをhタグをpタグでやればいいのかと迷うこともある。見分け方、判断の仕方としては、「◎◎」は「〜だ」、「○○」は「〜〜だ」というときは「dl dt dd」だろうし、「◎○」について、「◎○◎○◎○◎○◎○◎○◎○◎○◎○◎○◎でhhhhhhasldkfja;slkdjfaだ」とかならhタグとpタグがいいかもね。

divタグについて

ブロックレベル要素（ほかにh,p,・・・など、文書構造としての意味を持つもの）。要素をまとめておけるタグ。divタグ自体は意味を持たないタグ。意味をなさないので、本来は「いかにdivを使わないか」という観点で見たり。

spanタグについて

divのインライン要素。（a,img・・・など、文中に使うもの）pタグで囲った中でも、一部だけ赤文字にしたいとか。ただし、これも本来文書としての意味をなさないので、使用には一考を要する。たとえば、赤文字にしたいのはなぜか=>強調したいから。=>それなら別のタグでは。

b, em, strong の違いについて

bはbold、emはemphasis、strongはstrongの略（strongは略じゃない＞＜）。emは文中で強調・重視したいところ、strongはさらにstrongなところ！

copyright表記について、addressタグを使うのは適切か

addressか？そうでもないだろ => pタグじゃね？という議論があったりした。でも、それも違わね？みたいな展開になって、さらにhtml5ではsmallタグを使うんだって。

HTML5では

divで一般的に表していたことをタグ化して、より適切に文書構造の意味を表現できるようにする。例えば＜div id="header"＞というお決まりのタグは＜header＞タグにするとか。

例えば＜a＞（アンカー）タグでページ内ジャンプを表現しているとき、音声読上げブラウザでは毎回不要な見出しを読上げられたりする。それが、HTML5なら＜navigator＞タグで適切な意味を持たすことができ、音声ブラウザに対する適切な配慮ができる。「セマンティックなマークアップ」方面に力を入れている。

CSS3について

やりすぎじゃないかな、という意見も。CSSは装飾を施すものであって、アニメーション関連はCSS本来の役目だろうか？

CSSの書き方について

dim#header と書くときの、divは意味があるか？ないけど、それをみたときに意味が分かりやすい。p#copyright と書いたときとか、#copyrightより分かりやすい。htmlソースを見て検索しないでも、cssだけ見れば分かるよね。私は結構すき。そもそも、要素はコーディングに設計／定義をすべきものなので、後から要素を変更しない前提で書くべきだし。

cssの一括書きと個別書き

たとえば、backgroundとbackground-image, background-position, background-repeat。3つ書くと3行消費しちゃうし読みにくくなるから、background一行で書こうね。あと、marginの指定はmargin-top、margin-bottomとか分けるんじゃなくて、margin:10px 0; みたいにまとめ書きしよう。

それに、margin/paddingの指定をするときに0pxとか書かないで。0は0であって、emでもpxでもないのだよ。

HTMLコーダーが魅せるのは、見えないところ

HTMLコーダーがアツくなるポイントとしては、alt属性。これは入れた方がいいとかじゃなくて「入れなきゃいけない」。音声読上ブラウザに対する配慮もそうだし、SEO的にも効果がある。imgタグにaltが入っていなければ、どちらもダメ。

imgで、画像に対する意味の補足としてやるとか。tips的には、＜h2＞＜a href="" title="*****"＞＜/a＞＜/h2＞みたいに書いたときのtitle属性。title属性は、多くのタグにつけられる要素。補助的な意味として、アツい。
HTMLって、見えないところにけっこうこだわるもんなんだよー。googleも、「ランキング上げるためじゃなくてユーザのことを考えてサイト作りなさい」って言ってるんだよ！

読み上げブラウザのtips

altに補足の文書を書いてあげるとき、「menu」って書くと「エム・イー・エヌ・ユー」とか読上げられちゃったりすることがあるので、カタカナで「メニュー」って書いてあげるほうがいいよ、とかね！

レイアウト

固定幅レイアウト、リキッドレイアウト、エラスティックレイアウト。

固定幅: 横幅が変動しないレイアウト
リキッドレイアウト: リキッドレイアウト
エラスティックレイアウト（ゴムのように弾力性のあるレイアウト）: 文字サイズを基準に各所のサイズを決める（単位にemを使うなど）
リキッド+エラスティックレイアウト: 最大幅／最小幅などを指定したり、外部のバナー等固定幅でなければならない部分がある場合は、柔軟にがんばる。

エラスティック+固定幅の活用例⇒http://www.jec.ac.jp/design-w/

お役だち情報

役立つサイト: Another HTML-lint gateway
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
HTMLの構造上の正しさを採点してくれるよ！; W3C Markup Validation Service
http://validator.w3.org/
役立つアドオン - Firefox: Web Developer
http://lab.tubonotubo.jp/tools/webdeveloper/index.html; HTMLバリデータ
https://addons.mozilla.org/ja/firefox/addon/249
検証してくれます。; Semantic Checker 0.8.0
https://addons.mozilla.org/ja/firefox/addon/13560
Sugamo.CSSで教えてもらったアドオン。
要素ごとに色分けして一目で分かるように表示してくれるよ。

質疑応答

Q:brタグってどうなの

A:改行であって空白ではない。改行なのだよ。p使うべきときはp使うべきだし、あくまでも意味としての改行に使うべき。レイアウト調整のために使うことは許されない。いっさい。ダメ、絶対。

Q:idとかclassの名前を付けるのめんどくさいんですけど。

A:逆に、必要なところ以外はidやclassをつけないようにコーディングを頑張っては。たとえばulタグ自体にcssを指定すればいいのにわざわざdivでラッピングしたりは無駄っすよね。あとは、＜div id="container"＞とか、ある程度お決まりの構造や名前を使っていけます。まぁ、正直迷うこともあるけど。

b6note

2010/05/06