*

ウェッブ制作

Width =px

ホーム > HTML・CSS > HTM5/CSS3 >
5.文字と画像デザイン MENU 

5.html5/css3 文字と画像のデザイン

学習書の「sample_a」(Chap-4)を表示しソースコードを見て下さい。

1) WEBフォント
WEB頁で表示されるフォントは、使っているパソコンにインストールされているフォントに限られていたが、「CSS3」の機能の「WEBフォント」の利用でWEB作成者の意図したフォントで表示出来る。教材では、「Google Web Font」を利用している。但し、日本語はありません。

Googleフォントの読み込み(例・Righteous)

Googleフォントのcss記述(例・Righteous)

2) 画像の配置(デザイン)
HTML5では、イラスト、写真、グラフ、ソースコードなどの図版を「figure」でマークアップする。図版の説明文は、「figcaption」というマークアップを使用する。
今までの「pタグ」の中では、この図版のマークアップは出来ない事になっている。 順次に表示する図版を奇数番目は右側、偶数番目は左側に表示するCSSの記述が紹介されている。

図版のHTML記述

図版のCSS記述