[写経] HTML5&CSS3 ステップアップブック 2

忘れないうちに続きです。

文字と画像のデザイン

1. ページデザインに沿ったマークアップが重要
2. WEBフォントを利用したデザインも可能
3. 図版のマークアップはhtml5で追加されたタグを利用する

図版のマークアップ いままで

<p>
<img alt="図版" src="xx.png" />
<small>キャプション</small>
これは図版ですよ!
</p>

図版のマークアップ html5

<figure>
<img alt="図版" src="xx.png" />
<figurecaption>キャプション</figurecaption>
</figure>
<p>これは図版ですよ!</p>

奇数配置 css3

article section:nth-of-type(odd) figure{
/* article内の奇数番目にマークアップしたsection内のfigureへ適用するcss */
}

偶数配置 css3

article section:nth-of-type(even) figure{
/* article内の奇数番目にマークアップしたsection内のfigureへ適用するcss */
}

グラフィカルデザイン

1. 角丸の指定
2. グラデーションの指定
3. 影の指定
4. 透過の指定

最初の要素に角丸を指定する

要素:first-of-type{
/* 要素の最初にマークアップへ適用するcss */
}

この辺は実践で身に付ける方がよさそう。