ryo511 のすべての投稿

CSS3 擬似クラスセレクタ

擬似クラスセレクタでは、「最初の要素」「最後の要素」といった条件によって、自動的に対象の要素を選ぶことができる。

・主な擬似クラスセレクタ(要素名 スタイルが適用される要素)

:first-child 親要素の最初の子要素となる要素
:last-child 親要素の最後の子要素となる要素
:nth-child(n) 親要素のn番目の子要素となる要素
:nth-child(odd) 親要素の奇数番目の要素となる要素
:nth-child(even) 親要素の偶数番目の要素となる要素
:first-of-type 親要素の子要素として最初に出現する要素
:last-of-type 親要素の子要素として最後に出現する要素
:nth-of-type 親要素の子要素としてn番目に出現する要素

例 最後のli要素のmargin-bottomを0にしたい場合

・クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li.last {
    margin-bottom:0;
}

・擬似クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li:last-child{
    margin-bottom:0;
}

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

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

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

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

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

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

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

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

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

参考書籍: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)
クチコミを見る