HTML5セマンティックマークアップ

section:章や節の単位をマークアップする。見出しと本文で構成される1つのまとまりをマークアップするために使う。

article:ブログやニュースの記事のように、その部分だけを切り離しても独立したコンテンツとなるような箇所に利用する。

nav:ページ内の主要なナビゲーションをマークアップ。

header:ページやセクションの導入部分に当たる見出しやナビゲーションリンクをグループ化。

footer:ドキュメントの関連情報や著作権情報などをグループ化。

figure:挿絵、図表とそのキャプション(figcaption要素)をマークアップ。

small:著作権表記や注釈等の細目をマークアップ。

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

iPhone向けサイト設計のポイント

・ページサイズは横幅320pxを基準に設計
・文字サイズは14~16px、行間は1.4~1.6
・ページの左右には10pxの余白を作る
・ナビゲーションリンクの縦幅は44px前後

参考:iOSヒューマン インターフェイス ガイドライン(pdf)

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

読書メモ『「旬」なサイトに学ぶ76のデザイン・エッセンス』

<文字デザインのエッセンス>

☆読みやすさを最優先に考える
・ゴシック系のフォント
・本文の色は、濃い目のグレー(地とのコントラストを抑える)
・本文の背景は、白または明るい色

☆シンプルさの中で、ディテールに凝る
・文字が床面に反射
・ガラス調のボタンメニュー

とりあえず、ブログのデザインテンプレートのCSSをいじって、フォント指定をMSゴシックから、指定なしに変えた。これだと、windows vista/7ならメイリオで、windows xpならMSゴシックで表示されるはず。メイリオに慣れると、MSゴシックを読むのはツラい。

作例は後でつくってみる予定。

Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)
Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)
クチコミを見る