| CSS3 DocumentWorkspace Root | > | CSS3 WebFont/ColorDesign |
CSS3で追加されたテキスト・フォント・プロパティの仕様
CSS3ではテキストやフォントの仕様が大幅に拡張されています。特にはWebFontの適用についてはGoogleWebFontsAPIを使用することで簡易なコーディングでグラフィカルな表現が可能になり今後期待がもてる分野です。以下詳細はW3C仕様により確認していきます。
[フォント関連（フォント名、サイズ、スタイル、太さ等）の仕様]
[テキスト関連（文字間隔、行ぞろえ、改行等)の仕様]
[書字方向等の仕様]
Webフォント指定
Webフォントはサーバー内にあるフォントデータのＵＲＬとフォーマットを指定して読み込む仕組みであり、このWebフォントを使用することで個人のローカル環境にインストールされていないフォントを使用しWebサイトに表示することができます。
これはGoogle Web Fonts Apiを使用することで実現することが可能になりました。このAPIを使用することでアクセス時にブラウザに適したフォントファイルの適用をすることができます。Google Web Fonts Apiは日本語対応が現状されておりませんが、今後期待ができる表示方法であり、より簡易コーディングで多様なフォントの仕様が可能です。
以下のURLからGoogle Web Fontsサービスにアクセスすることができ、利用したいフォントを選ぶことでHTMLとCSSに記載するコードを生成することができます。
- 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);
HTML生成コードはHTMLのheadに貼り付けCSS生成コードはスタイルシートにそのままコピーしてください。 以下はGoogle Web Fonts APIより生成したサンプルコードです。
スタイルシートに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
- 省略された文字を・・・で表示します。
- text-overflowプロパティを使用するとテキストがその表示領域をオーバーした際に省略文字の("・・・")を表示する設定をすることができます。 使用する場合はオーバーフローした文字をどう処理を行うか設定するoverflowプロパティと自動改行するかどうか設定するwhite-spaceを共に使用する必要があります。 値にはeliipsisとclipの値があります。
- CSS記述
- li#ellipsisstyle{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; background:#CCCCCC; width:500px; }
- clip
- デフォルトの値です。オーバーフローした文字を切り取って省略します。
- text-overflowプロパティを使用するとテキストがその表示領域をオーバーした際に省略文字の("・・・")を表示する設定をすることができます。 使用する場合はオーバーフローした文字をどう処理を行うか設定するoverflowプロパティと自動改行するかどうか設定するwhite-spaceを共に使用する必要があります。 値にはeliipsisと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
- 連続する半角スペース・タブ・改行文字を半角スペースとして認識し、自動改行を行います。
- white-spaceは 文字の自動 改行を指定します 。 値には normal | pre | nowrap | pre-wrap | pre-lineがあります。
- white-spaceは 文字の自動 改行を指定します 。 値には normal | pre | nowrap | pre-wrap | pre-lineがあります。
- nowrap
- 連続する文字列の半角スペース・タブ・改行文字を一つの半角スペースとして認識し一行で表示しますが改行はしません。自動改行も行いません。
- white-spaceは 文字の自動 改行を指定します 。 値には normal | pre | nowrap | pre-wrap | pre-lineがあります。
- pre-wrap
- 半角スペース・タブ・改行文字を一つの半角スペースとして認識し表示します。改行、自動改行を行います。
- white-spaceは 文字の自動 改行を指定します 。 値には normal | pre | nowrap | pre-wrap | pre-lineがあります。
- pre-line
- 半角スペース・タブ・改行文字を一つの半角スペースとして認識し表示しますが、自動改行は行いません。ただし改行は表示されます。
- white-spaceは 文字の自動 改行を指定します 。 値には 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軸、Ｙ軸に歪み、degで指定);のように記述を行います。transform:scale(2,2)rotate(360deg)translate(500px,0);ではScaleでX軸方向へ2倍拡大・Y軸方向へ2倍拡大を指定、roteteで360度回転を指定、translateでX軸方向へ500px移動を行っています。
次の例では下のボールに動きをつけてみました。
以下、HTML/CSS記述内容です。IE、Cromeでのブラウザ指定を行っている為、重複した記述があります
transitionプロパティ
transitionプロパティでは変化の仕方を設定します。次のように記述します。
値には次の値があります。
border-radius ビジュアルデザイン
CSS3には角丸の指定および円形のグラデーションなど今まで画像を使用して表現していたデザインをCSSだけで指定することができます。
次のデザインはborder-radiusを5pxに指定したものです。値が一つの場合には４つの角に適用され、４つの場合には左上の角、右の上角、右下の角、左下の角に適用されます。以下、例文を記述します。
- お気に入り
- テスト
- テストメニュー
- テストメニュー
以下、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ではグラデーション表現をスタイルシートの記述で表現することができます。 まずはボタンを作成してからグラデーションを付け加えてみましょう。
- ENTRY
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度の角度をつけた表現を行います。
- ENTRY
ボタンの中心として120度の角度をつけた表現はこのようになります。
- ENTRY
Box-shadowプロパティ
次はボタンに影をつけた表現をおこないます。その場合はbox-shadowを使用します。内側に影をいれることで光沢感をつけた表現することができます。
CSS記述は以下の通りです。
- ENTRY
外側に影をいれ立体感を出すことができます。
- ENTRY
- 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; }
CorporateSite