HTML5×CSS3 DOCUMENT WORKSPACE
 HTMLワーキンググループにより策定され次世代HTML標準になったHTML5及び新しく構造化文書を表現する方法として標準化されたCSS3を使用するサイト制作が主流となってきておりますが、当サイトではHTML5/CSS3草案より要素・構文の変更点や利便性・機能性の向上を確認していきながら次世代標準化仕様を広めていく目的でHTML5/CSS3を使用してサイト制作を行っております。
 当サイトにつきましては制作過程であり定期的に更新を行っております。誤表記や内容等の誤りにつきましては発見次第できる限り修正を図っていく意識で制作に取り組んで参りますのでご了承下さいますようお願い申し上げます。
CSS3 DocumentWorkspace Root > CSS3 WebFont/ColorDesign

CSS3で追加されたテキスト・フォント・プロパティの仕様

CSS3ではテキストやフォントの仕様が大幅に拡張されています。特にはWebFontの適用についてはGoogleWebFontsAPIを使用することで簡易なコーディングでグラフィカルな表現が可能になり今後期待がもてる分野です。以下詳細はW3C仕様により確認していきます。

[フォント関連(フォント名、サイズ、スタイル、太さ等)の仕様]

[テキスト関連(文字間隔、行ぞろえ、改行等)の仕様]

[書字方向等の仕様]

Webフォント指定

Webフォントはサーバー内にあるフォントデータのURLとフォーマットを指定して読み込む仕組みであり、このWebフォントを使用することで個人のローカル環境にインストールされていないフォントを使用しWebサイトに表示することができます。

これはGoogle Web Fonts Apiを使用することで実現することが可能になりました。このAPIを使用することでアクセス時にブラウザに適したフォントファイルの適用をすることができます。Google Web Fonts Apiは日本語対応が現状されておりませんが、今後期待ができる表示方法であり、より簡易コーディングで多様なフォントの仕様が可能です。

以下のURLからGoogle Web Fontsサービスにアクセスすることができ、利用したいフォントを選ぶことでHTMLとCSSに記載するコードを生成することができます。

HTML生成コードはHTMLのheadに貼り付けCSS生成コードはスタイルシートにそのままコピーしてください。 以下はGoogle Web Fonts APIより生成したサンプルコードです。

HTML記述
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
CSS記述
@import url(http://fonts.googleapis.com/css?family=Amatic+SC);

スタイルシートにfont-familyを適用します。

#Amatic { font-family:'Amatic SC'; font-size: 15px; }

スタイルを適用したWebFontは次のようになります。

Welcome to Google WebFonts!!

テキスト・フォント関連仕様

その他、テキスト・フォント関連の仕様では改行調整、ドロップシャドウ、縦書きなどビジュアル効果だけではなく多様な表現が可能です。以下、代表的なものを取り上げます。


word-breakプロパティ(自動改行)

word-breakプロパティを使用することで自動改行を適用することができます。 値としてnormal/keep-all/break-allがあります。

normal
日本語、中国語、韓国語は改行され、そのほかは言語ルールできまります。
keep-all
日本語、中国語、韓国語は単語の途中で改行されず、そのほかは言語のルールで決まります。
break-all
日本語、中国語、韓国語以外は単語の途中でも改行される。

text-alignプロパティ

text-alignプロパティで両端ぞろえ、スペース調整を行うことができます。


text-shadowプロパティ ドロップシャドウ

text-shadowプロパティを使用することでテキストにドロップシャドウをつけることができます。

値には以下の値を指定できます。

記述は「text-shadow:水平方向のオフセット値 垂直方向のオフセット値 陰影のぼかしの半径(省略可) 色」のように記述します。

text-shadow:3px 3px 4px blue;

記述した文章はこのように表示されます。


text-overflowプロパティ

text-overflowプロパティを使用するとテキストがその表示領域をオーバーした際に省略文字の("・・・")を表示する設定をすることができます。 使用する場合はオーバーフローした文字をどう処理を行うか設定するoverflowプロパティと自動改行するかどうか設定するwhite-spaceを共に使用する必要があります。 値にはeliipsisとclipの値があります。

 
eliipsis
省略された文字を・・・で表示します。
CSS記述
li#ellipsisstyle{  text-overflow:ellipsis;  overflow:hidden;  white-space:nowrap;  background:#CCCCCC;  width:500px; }
 
clip
デフォルトの値です。オーバーフローした文字を切り取って省略します。
CSS記述
li#clipstyle{  text-overflow:clip;  overflow:hidden;  white-space:nowrap;  background:#CCCCCC;  width:500px; }

white-spaceプロパティ

white-spaceは文字の表示設定や自動改行を指定します。値にはnormal | pre | nowrap | pre-wrap | pre-lineがあります。
preに関しては空白や改行をそのまま表示させる値となります。

 
normal
連続する半角スペース・タブ・改行文字を半角スペースとして認識し、自動改行を行います。
 
pre
半角スペース・タブ・改行及び内容もそのまま表示しますが、自動改行は行いません。
 
nowrap
連続する文字列の半角スペース・タブ・改行文字を一つの半角スペースとして認識し一行で表示しますが改行はしません。自動改行も行いません。
 
pre-wrap
半角スペース・タブ・改行文字を一つの半角スペースとして認識し表示します。改行、自動改行を行います。
 
pre-line
半角スペース・タブ・改行文字を一つの半角スペースとして認識し表示しますが、自動改行は行いません。ただし改行は表示されます。

transformプロパティ

CSS3には特殊効果の仕様が追加され、CSSの記述だけでオブジェクトのアニメーション、3D効果、スライドショーなどのエフェクト効果を簡単に実行することができるようになりました。

transformでは対象とする要素に対し、移動、回転などのエフェクト効果をつけることができます。transformプロパティの記述方法はtransform:scale(X方向へ拡大,Y方向へ拡大)rotate(回転する角度degで指定)translate(X軸方向へ移動、pxで指定,Y方向へ移動)skew(X軸、Y軸に歪み、degで指定);のように記述を行います。transform:scale(2,2)rotate(360deg)translate(500px,0);ではScaleでX軸方向へ2倍拡大・Y軸方向へ2倍拡大を指定、roteteで360度回転を指定、translateでX軸方向へ500px移動を行っています。

次の例では下のボールに動きをつけてみました。

以下、HTML/CSS記述内容です。IE、Cromeでのブラウザ指定を行っている為、重複した記述があります

HTML記述
<ul id="transform"> <li class="listyle" id="ball1"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball2"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball3"><a href="#"><img src="image/ball.gif"></a></li> <li class="listyle" id="ball4"><a href="#"><img src="image/ball.gif"></a></li> </ul>

CSS記述
#ball1:hover{ -webkit-transform:scale(100,100)rotate(360deg)translate(500px,0); -webkit-transition:all 1s ease-in-out; transform:scale(100,100)rotate(360deg)translate(500px,0); transition:all 1s ease-in-out; } #ball2:hover{ -webkit-transform:scale(0,0)rotate(180deg)translate(-200px,0); -webkit-transition:all 1s ease-in-out; transform:scale(0,0)rotate(180deg)translate(-200px,0); transition:all 1s ease-in-out; } #ball3:hover{ -webkit-transform:scale(1,1)rotate(0deg)translate(900px,100px); -webkit-transition:all 0.7s ease-in-out; transform:scale(1,1)rotate(0deg)translate(900px,100px); transition:all 0.7s ease-in-out; } #ball4:hover{ -webkit-transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg); -webkit-transition:all 0.7s ease-in-out; transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg); transition:all 0.7s ease-in-out; }

transitionプロパティ

transitionプロパティでは変化の仕方を設定します。次のように記述します。

transtionプロパティの記述
transition:変化させるプロパティ名の指定、限定しない場合はall 変化かかる時間;

値には次の値があります。

transition-property
transition-propertyによって変化させる対象のプロパティを指定することができます。限定して変化をさせるにはプロパティ名でそのプロパティを指定しコンマ区切りで複数指定することも可能です。限定させない場合にはallを使用します。
transition-duration
transition-durationでは変化が行う時間を指定、アニメーションにかける時間を指定します。単位はs(秒)かms(ミリ秒)で行います
transition-delay
transition-delayでは変化が始まる時間を指定を指定します。単位はs(秒)かms(ミリ秒)で行います
transition-timing-function
transition-timing-functionではアニメーションの変化の速度の仕方を設定します。

border-radius ビジュアルデザイン

CSS3には角丸の指定および円形のグラデーションなど今まで画像を使用して表現していたデザインをCSSだけで指定することができます。

次のデザインはborder-radiusを5pxに指定したものです。値が一つの場合には4つの角に適用され、4つの場合には左上の角、右の上角、右下の角、左下の角に適用されます。以下、例文を記述します。

お気に入り
テスト
テストメニュー
テストメニュー

以下、HTML/CSS記述内容です。

HTML記述
<dl id="dlstyle"> <dd id="dditem1" ><a href="#お気に入り">お気に入り</a></dd> <dd id="dditem2" ><a href="#">テスト</a></dd> <dd id="dditem3" ><a href="#">テストメニュー</a></dd> <dd id="dditem4" ><a href="#">テストメニュー</a></dd> </dl>
CSS記述
#dditem1{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem1:hover{ -webkit-transform:scale(1,1.2)translate(0,-2px); transform:scale(1,1.2)translate(0,-2px); background-color: #9900cc; transition:all 0.7s; } #dditem2{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem2:hover{ -webkit-transform:scale(1.2,1); transform:scale(1.2,1); background-color: #33cc99; transition:all 1s; } #dditem3{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem3:hover{ -webkit-transform:scale(1,1.3)translate(0,-3px); transform:scale(1,1.3)translate(0,-3px); background-color: #ffffff; } #dditem4{ float: left; margin:0; border-radius:10px 10px 0 0; background-color: #E9E9E9; border: thin #C8C8C8 solid; text-align: center; width: 130px; padding: 5px; height: 20px; } #dditem4:hover{ -webkit-transform:scale(1,1.3)translate(0,-3px); transform:scale(1,1.3)translate(0,-3px); background-color: #ff9933; transition:all 1s; }

グラデーション表現

CSS3ではグラデーション表現をスタイルシートの記述で表現することができます。 まずはボタンを作成してからグラデーションを付け加えてみましょう。



background: linear-gradientでグラデーションの指定を行っております。記述内容はrgbでの色指定を行っており上から0%の位置ではrgb(166,240,200)の色彩で始まり50%の中間地点のrgb(120,192,149) までグラデーションをかけています。同様に中間部から底辺までは50%のrgb(30,177,138)? 100%のrgb(10,80,40)でグラデーションをかけています。

以下、CSS記述内容です。IE、Firefox、Cromeでのブラウザ指定を行っている為、重複した記述があります。

CSS記述
#item1{ background: linear-gradient( rgb(166,240,200) 0%, rgb(120,192,149) 50%, rgb(30,177,138) 50%, rgb(10,80,40) 100%); background: -webkit-linear-gradient( rgb(166,240,200) 0%, rgb(120,192,149) 50%, rgb(30,177,138) 50%, rgb(10,80,40) 100%); background: -moz-liner-gradient( rgb(166,240,200) 0%, rgb(120,192,149) 50%, rgb(30,177,138) 50%, rgb(10,80,40) 100%); border-radius: 5px 5px 5px 5px; border:1px #6ae1c1 solid; font-family:メイリオ; font-size: 16px; color:#FFFFFF; float: left; text-align: center; width: 130px; padding: 5px; height: 20px; }

次はボタンの中心として45度の角度をつけた表現を行います。



#item2{ background: linear-gradient(45deg, rgb(166,240,200) 0%, rgb(120,192,149) 50%, rgb(30,177,138) 50%, rgb(10,80,40) 100%); }

ボタンの中心として120度の角度をつけた表現はこのようになります。




Box-shadowプロパティ

次はボタンに影をつけた表現をおこないます。その場合はbox-shadowを使用します。内側に影をいれることで光沢感をつけた表現することができます。

CSS記述は以下の通りです。

CSS記述
box-shadow:X方向 Y方向 ぼかし 影の大きさ rgba[rgb+透明度](R,G,B,透明度(0-1))


CSS記述
box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,1);

外側に影をいれ立体感を出すことができます。



CSS記述
box-shadow:1px 1px 2px 1px rgba(0,0,0,0.3);

CSSで実装するプルダウンメニュー

CSSの記述で実装するプルダウンメニューの作成方法を記述します。基本的にはhoverの応用ではありますが、transitionやtransformを使用することで更に豊富なバリエーションを作ることができます。ブラウザに比較的負担をかけずにリッチコンテンツの制作が可能です。




HTML記述
<ul id="itemMenu"> <li> <a href="#">テストメニュー</a> <ul class="sub"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> <li><a href="#">サブメニュー4</a></li> <li><a href="#">サブメニュー5</a></li> </ul> </li> <li> <a href="#">テストメニュー2</a> <ul class="sub"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> <li><a href="#">サブメニュー4</a></li> <li><a href="#">サブメニュー5</a></li> </ul> </li> </ul>
CSS記述
/*****************親メニューの設定****************/ ul#itemMenu li{ float:left; } ul#itemMenu li a{ background:linear-gradient( rgb(251,229,246) 0%, rgb(214,70,185) 50%, rgb(200,61,180) 50%, rgb(258,17,200) 100%); background: -webkit-linear-gradient( rgb(251,229,246) 0%, rgb(214,70,185) 50%, rgb(200,61,180) 50%, rgb(258,17,200) 100%); background: -moz-liner-gradient( rgb(251,229,246) 0%, rgb(214,70,185) 50%, rgb(200,61,180) 50%, rgb(258,17,200) 100%); border-radius: 3px 3px 3px 3px; font-family:メイリオ; font-size: 12px; color:#FFFFFF; box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.3); box-shadow:1px 1px 2px 1px rgba(0,0,0,0.2); text-align: center; width:130px; padding: 5px; height: 20px; display:block; } ul#itemMenu li a:hover{ background:linear-gradient( rgb(250,171,240) 0%, rgb(250,163,233) 50%, rgb(250,139,226) 50%, rgb(251,75,216) 100%); background: -webkit-linear-gradient( rgb(250,171,240) 0%, rgb(250,163,233) 50%, rgb(250,139,226) 50%, rgb(251,75,216) 100%); background: -moz-liner-gradient( rgb(250,171,240) 0%, rgb(250,163,233) 50%, rgb(250,139,226) 50%, rgb(251,75,216) 100%); border-radius: 3px 3px 3px 3px; font-family:メイリオ; font-size: 12px; color:#FFFFFF; box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.3); box-shadow:1px 1px 2px 1px rgba(0,0,0,0.2); text-align: center; width: 130px; padding: 5px; height: 20px; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } /*****************子メニューの設定*****************/ #itemMenu li ul.sub{ display:none; position:absolute; padding:0px; background:rgba(230,160,230,0.2); border-radius: 0 0 6px 6px; width: 140px; } #itemMenu li ul.sub li{ float:none; } #itemMenu li ul.sub li a{ text-align:left; font-family:メイリオ; font-size:12px; padding-top:7px; padding-bottom:7px; text-align: left; background:rgba(230,160,230,0); text-shadow:none; border-radius:0; border:none; box-shadow:none; } #itemMenu li ul.sub li a:hover{ text-align:left; font-family:メイリオ; width: 130px; font-size:12px; padding-top:5px; padding-bottom:5px; text-align: left; background:rgba(230,160,230,0.4); border-radius: 6px 0 6px 0; margin:0; transform:scale(1,1)skew(180deg); transition:all 0.7s; -webkit-transform:scale(1,1)skew(180deg); -webkit-transition:all 0.7s; } /*****************子メニューの表示*****************/ #itemMenu li:hover ul.sub{ display:block; }