‘section’ タグのついている投稿
2011
Feb
14
22:42
TriAx的 HTML5 article、section、aside、div、ルール
スマフォ勉強会ではユーザーインターフェース(UI)、CSS3(装飾)、そしてHTML5(構造)についての熱い議論が交わされています。
本日の主な議題はタイトルにある「article、section、aside、div」についてのルール。
思い切り開発的な内容となってしまいますが、社内の出来事、として軽~くお読みください。
ボク的には『どうでも良い』と思っていたのですが、グループメンバーからの激しいブーイングに、「じゃぁ、決めようよ」と言うことになりました。
あくまでも「TriAx的ローカルルール」です。2~3プロジェクトで変更される可能性が高い、と言うことをお断りしておきます。
順番・強さ的には「article > section > aside > div」となりました。
例を挙げると…。
- article :
-
ブログ記事、ニュース記事、(ツィート?)
<!-- ■ニュース…詳細ページ --> <article> <h1>スマフォ 始めました</h1> <p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p> </article>
- section :
-
コーポレートサイトやポータルサイトなどに見られる見出し付きのコンテンツブロック・グループ。article記事内に(複数)含まれることもある。
<!-- ■コーポレートサイト…ゲートウェイ or インデックス --> <article> <!-- section では見出しタグ(h1~h6) はリセットされますので ページ内に h1 を複数記述することができます --> <section> <h1>スマフォ 始めました</h1> <p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p> </section> <section> <h1>LaCoon CMS 開発順調です</h1> <p>TriAx ではセミオーダーフレームワーク LaCoon を採用することにより開発効率と堅実性の両立を図っています。</p> </section> </article>
- aside :
-
(section の内容に関連する)引用、抜粋、記事。
<!-- ■ブログ記事…タグ・キーワード --> <article> <section> <h1>スマフォ 始めました</h1> <p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p> <aside> <dl>タグ</dl> <dd> <ul> <li><a href="http://labs.triax.jp/tag/html5">HTML5</a></li> <li><a href="http://labs.triax.jp/tag/python">python</a></li> <li><a href="http://labs.triax.jp/tag/pyxis">pyxis</a></li> </ul> </dd> </dl> </aside> </section> </article>
- div :
- 特に意味はなく、どこに含まれても良い。
…という感じでコーディングルールとしてしばらくの間は統一していく事になりました。
すくすくスクラム
アクセスログ
アジャイル
アラン・クーパー
クラウド
コメントの書き方
コンパイル
コーディング規約
スクラム
スマートフォン
ソーシャルメディア
タブレット
タブレット端末
テキストマイニング
テーマ
デザイン
デバッグ
ドン・ノーマン
ネットワーク
プログラマ
ペルソナ
マーケティング
メソッド
ユーザ行動モデリング
便利ツール
勉強会
壁紙
実行時間
教育
暑中見舞い
行動パターン分析
開発
Android
article
aside
buildbot
CSS3
daemon mode
facebook
facebook page
GAE
Getting Things Done
gnuplot
Google Analytics
Google App Engine
GTD
Hadoop
Hardy
HTML5
iframe
iOS
iOS4.2
iPad
iPhone
Jinja
Jinja2
Mahout
Mako
MapReduce
NFS
PEP
pybundle
Pylons
PyPl
Python
Pyxis
Review Board
RHEL4
section
Smartphone
Sphinx
Tablet
Toscawidgets
Trac
TrStyle
UX
Validator
virtualenv
web-kit
Widget
WSGI
