Pages

2010/05/06

SetucoCMS合宿中のHTML勉強会めも

今立ち上げ中のオープンソースプロジェクト「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">とか、ある程度お決まりの構造や名前を使っていけます。まぁ、正直迷うこともあるけど。

関連して、命名ルールの一般的な参考例

本文全体を囲む
container、wrapper、page、pagebody、all
ヘッダー
header、header-area
ナビゲーション
nav、navi、navigation
グローバルナビゲーション
global-nav、gnav
ローカルナビゲーション
local-nav、lnav
補足ナビゲーション
assist-nav、utility、utility-nav
パンくずナビゲーション
topicpath、breadcrumbs
コンテンツ全体
content(s)、container、wrapper
メインコンテンツ
main、maincontent(s)、content(s)、alpha、primary
サブコンテンツ
sub、subcontent(s)、beta
サイドバー
sidebar
見出しと本文のまとまり
section、entrybody、article(s)
記事単体
article(s)、entry(-ies)
フッター
footer、footer-area、copyright、publication
ロゴ
logo
キービジュアルやメインビジュアル
keyvisual、mainvisual
画像や写真、グラフなど
image、photo、fig、figure
検索
search、search-area、search-box
注釈、ヒント
aside、hint、note
商品一覧
products、item-list、shopitems

0 件のコメント:

コメントを投稿