メインコンテンツ

個人的セクション要素使用法

(Mon)

Posted in HTML5

HTML5になってマークアップに対する意味付け機能がかなり強化されました。しかし、この意味付けがとても難解であり解釈の方法によって何通りものマークアップ法が存在しているのが現状です。コーダーの意図が強く反映されるようになった上に、現在ディファクトスタンダードとなる定番のマークアップ法も存在しません。そのため、自分用のガイドラインとして記事を起こしてみました。



注意


あくまで個人的なガイドラインである為、内容には間違いが含まれる可能性があります。




個人的アウトライン


HTML5を文章としてイメージし、アウトラインを読むだけで「どの箇所がナビゲーションであるか?」「どの箇所がメインコンテンツであるか?」を明確に表すように設計する。
表示したくない見出し要素に対してはCSSで表示しないようにする。


Ex)
1.サイト名
 1.メインナビゲーション
 2.メインコンテンツ
  1.記事タイトル_1
  2.記事タイトル_2
  3.記事タイトル_3
  4.記事タイトル_4
  5.記事タイトル_5
 3.ページナビゲーション
 4.サイドメニュー
  1.ウィジェットタイトル_1
  2.ウィジェットタイトル_2
  3.ウィジェットタイトル_3




section


アウトライン上問題がある場合かつ、他のセクション要素が適切でない場合に使用する。


※レイアウトの調整を目的とする場合はdiv要素を使用する。




nav


ユーザが主に使うと思われるナビゲーションに対して使用する。


※同じ内容のナビゲーションがヘッダーとフッターに存在する場合は、メインであるヘッダー側のナビゲーションにのみ使用し、フッター側のナビゲーションにはsection要素を使用する。
※nav要素でナビゲーションを分割する場合はnav要素内でsection要素、もしくはsection要素の入れ子を使用する事で分割する(section要素の入れ子を使用する場合は見出しを忘れない事)。




article


メインコンテンツやコメント本文に対して使用する。


※WordPressなど「続きを読む」などで文章が分割されている場合、記事として完結しない事が懸念されるが「Feedの対象である」という判断基準を最優先にし、articleを使用する。
※コメント本文の場合はコメント本文はarticleを使用するが、コメントやコメントフォームを含む部位はasideを使用する。ただし、コメント本文自体を重要なコンテンツ(読者に対ディスカッションを求める場合等)として扱う場合はarticle要素を使用する。




aside


メインコンテンツとの関連が薄い場合、かつaside要素が削除されてもメインコンテンツに影響を与えない場合に使用する。または主にサイドバーに対して使用する(WordPressの場合はウィジェットエリア)。他にもコメントエリアやトラックバックエリアに使用する。


※「関連する記事」は存在しなくてもメインコンテンツは成り立つが、比較的メインコンテンツと関連性のあるコンテンツであるためsection要素でセクションを分割する。
※記事のイメージやアイキャッチ画像等のメインコンテンツになり得ない画像に使用する。ただし、画像がメインコンテンツの補足的な役割を果たすならばfigure要素を見当する必要がある。


※コメントエリアに使用する場合は、コメントをメインコンテンツとして扱わない場合に使用する。コメントをメインコンテンツの一部として扱うのならarticle要素を使用する。


header


サイトのヘッダー、メインコンテンツのヘッダー、コメント本文のヘッダーとして使用する。




footer


サイトのフッター、メインコンテンツのフッター、コメント本文のフッターとして使用する。




address


管理者の連絡先情報として使用する。


※管理者の住所には使用しない。
※サイト全体の管理者の連絡先情報として使用する場合はルート要素の直下に配置する。
※メインコンテンツの著者の連絡先情報として使用する場合はメインコンテンツを囲むarticle要素直下で使用する。




hgroup


主にサイトのヘッダーでサイト名とディセプションをまとめる為に使用する。


※偶然h1、h2が続く場合はhgroup要素は使用しない。




h1~h6


h1のみを使用する。セクションの分割は他のセクション要素で行う。


※他のセクション要素でセクションを分割した際には必ず使用するようにする。


スポンサーサイト

Wordpressにサイト作りました。

(Thu)

Posted in お知らせ

http://0bits.org/
まだ何もおいてないんですが、置いて行ければ良いな...。ある日急にレイアウトが面白い事になるかもしれないのはご愛嬌です。
案の定HTML5で書いてますが、色々とタグが間違ってそうな気もするのでちょくちょく直して行こうかと思います。

プレスリリース

(Thu)

Posted in お知らせ

HTML5 + CSS3 ではこんな事が出来るんだ!?を目標に制作したテンプレートです。
まだまだ調整中であるため、リロードすると途端に形が崩れたり、ソースコードがごちゃごちゃ変わったりするかもしれませんが、プレスリリースしてみました。

背景は「canvasでキラキラした背景を作る方法」を参考(ほとんどパクリ)にさせて頂きました。

HTML5な上に大量のCSS3を記述していますのでIEでは完全にレイアウトが崩壊します。
以下のブラウザで簡単に動作を確認しました。
・最新バージョンGoogle Chrome
・最新バージョンSafari
全ての機能が問題なく動作します。

・最新バージョンFirefox
ページ下部のナビゲーションバーに長い文字列が入った場合、枠内に収まらない文字がhiddenします。

・最新バージョンOpera
各記事のヘッダや、プラグインのタイトルが表示される箇所にグラデーションがかかりません。
ページ下部のナビゲーションバーに長い文字列が入った場合、折り返されて高さが広がります。

FC2ブログをHTML5で書きたい人へ ver.2.4

(Thu)

Posted in テンプレート

HTML5でFC2ブログのテンプレートを作成したい方の為のベースとなるHTMLファイルを作りました。
HTML5に詳しい方。ソースに関してタグの使い方等の修正点等ありましたらご教授のほどお願いします。

ver.2.3からの変更点
1.アウトラインの調整
2.一部を除き見出しをh1に統一(一部display:none;を指定していますので表示されません)
3.コメントフォームにautocomplete機能を追加
4.コメントフォームにfieldset、legendを追加(display:none;、border:none;を指定していますので表示はされません)
5.トラックバック表示部のバグを修正
6.その他細部を修正

トップ画面アウトライン構成:
1.サイト名
 1.メインコンテンツ(表示されません)
  1.記事タイトル
  2.記事タイトル
  3.記事タイトル
  4.記事タイトル
  5.記事タイトル
 2.プラグイン(表示されません)
  1.プラグインタイトル
  2.プラグインタイトル
  3.プラグインタイトル
  4.プラグインタイトル
  5.プラグインタイトル
 3.メインナビゲーション(表示されません)
 4.リターンナビゲーション(表示されません)

トップ画面アウトライン構成:
1.サイト名
 1.メインコンテンツ(表示されません)
  1.記事タイトル
   1.Comments
    1.コメントタイトル
    2.コメントタイトル
   2.Leave a comment
   3.Trackbacks
    1.トラックバックタイトル
    2.トラックバックタイトル
   4.Trackback URL
 2.プラグイン(表示されません)
  1.プラグインタイトル
  2.プラグインタイトル
  3.プラグインタイトル
  4.プラグインタイトル
  5.プラグインタイトル
 3.メインナビゲーション(表示されません)
 4.リターンナビゲーション(表示されません)

注意点:
1.W3C Markup Validation Serviceでチェックしたところ、エラーはありませんが記事の内容によってはエラーが吐き出される場合があります
2.HTML 5 Outlinerでチェックした所、「Untitled Section」が2カ所出力されますが、これはnav要素に対するものですので問題はありません
3.HTML5ではcharsetの推奨値はUTF-8になりますがFC2ブログの環境上、このベースHTMLのcharsetはeuc-jpになっております
4.HTML5で新規追加されたタグを使っておりますので、ブラウザによってはデザインが崩れる場合があります

Continue Reading »

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。