5.html5/css3 文字と画像のデザイン
学習書の「sample_a」(Chap-4)を表示しソースコードを見て下さい。
1) WEBフォント
WEB頁で表示されるフォントは、使っているパソコンにインストールされているフォントに限られていたが、「CSS3」の機能の「WEBフォント」の利用でWEB作成者の意図したフォントで表示出来る。教材では、「Google Web Font」を利用している。但し、日本語はありません。
Googleフォントの読み込み(例・Righteous)
1 |
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'> |
Googleフォントのcss記述(例・Righteous)
1 2 |
header#pageheader h1 {... font-family: 'Righteous', cursive} |
2) 画像の配置(デザイン)
HTML5では、イラスト、写真、グラフ、ソースコードなどの図版を「figure」でマークアップする。図版の説明文は、「figcaption」というマークアップを使用する。
今までの「pタグ」の中では、この図版のマークアップは出来ない事になっている。 順次に表示する図版を奇数番目は右側、偶数番目は左側に表示するCSSの記述が紹介されている。
今までの「pタグ」の中では、この図版のマークアップは出来ない事になっている。 順次に表示する図版を奇数番目は右側、偶数番目は左側に表示するCSSの記述が紹介されている。
図版のHTML記述
1 2 3 4 |
<figure> <img src="photo01.jpg" .... <figcaption>工房へ続く森の中の道</figcaption> </figure> |
図版のCSS記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
figure {margin: 0} article section:nth-of-type(odd) figure {float: right; margin-left: 15px; margin-bottom: 15px} article section:nth-of-type(even) figure {float: left; margin-right: 15px; margin-bottom: 15px} article section figcaption {color: #666666; font-size: 10px; display: block;} article section:nth-of-type(odd) figcaption {text-align: right;} |