CSS3で追加されたプロパティ
CSS3で追加されたプロパティを利用することで、文字組みの指定、イメージを使用しないと表現できなかったビジュアル効果などが実現可能です。テキストとフォント、エフェクト、カラーとイメージなどに分けて、主な使用について記載していきます。
という事で、それでは今回はッ、
・Webフォントの指定
・文字の大きさの自動調整
・自動改行
・両端揃え
・最終行の行揃え
・下線の位置
・ドロップシャドウ
・縦書きと横書き
・エフェクト
・カラーとイメージ
・リストマーク
上記について記載していこうと思います…。
CSS3テキストとフォント
CSS3では、テキストやフォントの使用が大幅に拡張されています。
フォント関連の使用「CSS Fonts Module Level3」、テキスト関連の使用「CSS Text Level3」、組み方向などの使用「CSS writing Modes Moduke Level3」などがあり、ウェブフォントの利用や禁則処理、改行の調整、下線や圏点の調整、ドロップシャドウ、縦書きなど、テキストとフォントの表現力が格段に向上しています。
「CSS Fonts Module Level3」プロパティ一覧
フォント名、文字サイズ、スタイル等の指定
| プロパティ | 指定内容 |
|---|---|
| font | フォントについての指定をまとめて行う |
| font-family | フォントの種類を指定 |
| font-feature-settings | OpenTypeフォント機能の有効・無効の切り替え、装飾の指定 |
| font-kerning | カーニングについての指定 |
| font-language-override | 言語の種類を切り替える指定 |
| font-size | フォントのサイズの指定 |
| font-size-adjust | フォントのサイズを調整 |
| font-stretch | フォントを縦長・横長にする |
| font-style | フォントスタイル（標準・イタリックetc）を指定する |
| font-synthesis | フォント合成の指定 |
| font-variant | フォントをスモールキャプスで表示 |
| font-variant-alternates | 装飾文字の指定 |
| font-variant-caps | スモールキャプスに切り替える指定 |
| font-variant-east-asian | 異体字の指定 |
| font-variant-postition | 上付き・下付きの指定 |
| font-weight | フォントの太さを指定 |
| font-variant-ligatures | 合字の指定 |
| font-variant-numeric | 分数表示の指定 |
「CSS Text Level3」プロパティ一覧
改行や行揃え、禁則処理などの組版ルールの指定
| プロパティ | 指定内容 |
|---|---|
| hanging-punctuation | 句読点のぶら下げ組の指定 |
| hypens | 単語の分割 |
| letter-spacing | 文字の間隔の指定 |
| line-break | 禁則処理の指定 |
| overflow-wrap | 単語の改行についての指定 |
| tab-size | タブの幅の指定 |
| text-align | 行揃えの指定 |
| text-align-last | 最終行の行揃えの指定 |
| text-decoration | 文字の線（下線・上線・取り消し線）の指定 |
| text-decoration-color | 文字の線の色を指定 |
| text-decoration-line | 文字の線の種類を指定 |
| text-decoration-skip | 線を非表示にしたい部分の指定 |
| text-decoration-style | 文字の線のスタイルを指定 |
| text-emphasis | 圏点を表示する指定 |
| text-emphasis-color | 圏点の色の指定 |
| text-emphasis-position | 圏点の配置の指定 |
| text-emphasis-style | 圏点のスタイルを指定 |
| text-indent | 最初の行の文字下げの指定 |
| text-justify | 両端揃え指定の調整 |
| text-shadow | テキストの影の指定 |
| test-space-collapse | 空白文字の処理を適用するかどうかの指定 |
| text-transform | アルファベットの大文字・小文字の指定 |
| text-underline-position | アンダーラインの配置指定 |
| text-wrap | テキストの折り返しの指定 |
| white-space | 空白文字の処理についての指定 |
| word-break | 文章の改行についての指定 |
| word-spacing | 単語の間隔の指定 |
「CSS Writing Modes Module Level3」プロパティ一覧
縦書き・横書きなどの指定
| プロパティ | 指定内容 |
|---|---|
| direction | 文字方向の指定 |
| ‘caption-side’ | 表組みのキャプションの配置 |
| ‘column-width’ | カラムの幅 |
| ‘width’,’min-width’ | 幅の値,幅の最小値 |
| ‘max-width’,’height’ | 幅の最大値,高さの値 |
| ‘min-height’,’max-height’ | 高さの最小値,高さの最大値 |
| text-combine-horizontal | 縦組みグリフの水平合成 |
| text-combine-mode | 縦組みの水平方向のグリフ・スケーリング |
| text-orientation | 縦書きテキスト内の文字の回転 |
| unicode-bidi | 言語ごとの文字方向ルールの変更 |
| writing-mode | 組み方向（縦書き・横書き）の指定 |
Webフォントの指定
Webフォントは、サーバー内にあるフォントデータのURLとフォーマットを指定して読み込む仕組みです。Webフォントを利用することで、ユーザーのローカル環境にインストールされていないフォントを使ってWebサイトを表示することができます。※あらかじめフォントのライセンスを確認する必要があります。
フォーマットには、WOFF（Web Open Font Format）やTrueType、OpenType、SVG Font、EOTなどがあります。
Webフォントを読み込むには、@font-face規則を使って、ソースとなるURLやフォントの種類を記述します。以下に記述できるプロパティと記述サンプルを記載します。
@font-faceで指定できるプロパティ
| プロパティ | 指定内容 |
|---|---|
| font-family | フォントファミリー |
| src | フォントのソース |
| font-style | フォントのスタイル |
| font-weight | フォントの大きさ |
| font-stretch | フォントの横幅 |
| unicode-range | グリフのコードの範囲 |
@font-faceの記述サンプル
| 【サンプルソースコード】 |
| @font-face { |
| font-family: Gentium; |
| src: url(https://example.com/fonts/Gentium.ttf); |
| } |
文字の大きさの自動調整
Webページで指定されているフォントが閲覧しているデバイスにない場合、代替フォントが表示されますが、文字サイズのバランスなども変わってしまいます。
font-saize-adjustプロパティで、数値（縦横比）を指定すると自動調整してくれます（小文字「x」が同じ高さになるよう調整されます）。
| 初期値：none 適用要素：すべての要素 継承：あり 値：(number)/none/inherit |
| 【サンプルソースコード】 |
| h1 { |
| font-size-adjust: 0.5; |
| } |
自動改行
自動的に改行されるルールについて指定します。値には、normal（日本語、中国語、韓国語は単語の途中で改行されない、その他の言語はルールで決まる）、break-all（日本語、中国語、韓国語以外は、単語の途中でも改行される）があります。
| 初期値：normal 適用要素：すべての要素 継承：あり 値：normal/keep-all/break-all |
| 【サンプルソースコード】 |
| p { |
| word-break: break-all; |
| } |
両端揃え
taxt-alignプロパティで「justify」を指定した際、言語ごとの規則を指定することができます。
値には、auto（ブラウザのデフォルト）、none（なし）、inter-word（スペースの間隔で調整）、inter-ideograph（スペースの調整と、日本語や中国語などは文字間で調整）、inter-cluster（スペースの調整）、distrbute（スペースの調整と字間の調整）、kashida（アラビア語などスペースや字間で調整出来ない言語を引き伸ばすことで調整）があります。
| 初期値：auto 適用要素：ブロック要素（オプションとしてインライン要素の適用可能） 継承：あり 値：auto/none/inter-word/inter-ideograph/inter-cluster/distribute/kashida |
| 【サンプルソースコード】 |
| p { |
| text-justify: inter-ideograph; |
| } |
最終行の行揃え
文章の最後の行に対して、行揃えを指定します。値には、auto（text-alignプロパティの値）、start（書字方向の開始）、end（書字方向の終端）、left（左）、right（右）、center（中央）、justify（両端）があります。
| 初期値：auto 適用要素：ブロック要素 継承：あり 値：auto/start/end/left/right/center/justify |
| 【サンプルソースコード】 |
| p { |
| text-align-last: right; |
| } |
下線の位置
text-decorationプロパティで、指定された下線の位置を決めることができます。値にはauto（ブラウザのデフォルト）、alphabetic（ベースライン）、below left（テキストの下に表示、縦書きでは左に表示）、below right（テキストの上に表示、縦書きでは右に表示）があります。
| 初期値：auto 適用要素：すべての要素 継承：あり 値：auto/alphabetic/below left/below right |
| 【サンプルソースコード】 |
| p { |
| text-underline-position: below left; |
| } |
ドロップシャドウ
テキストにドロップシャドウ：影を適用することができます。「text-shadow：水平方向のオフセット値、垂直方向のオフセット値、陰影のぼかしの半径（省略可）、色」のように記述します。水平方向と垂直方向のオフセット値、ぼかし半径、色の組み合わせをセットにして、カンマ（,）で区切れば、複数指定することが可能です。
| 初期値：none 適用要素：すべての要素 継承：あり 値：none/横（px)縦（px）ぼかし（px)カラー（#〇〇〇) |
| 【サンプルソースコード】 |
| h1 { |
| text-shadow: 2px 3px 2px #000; |
| } |
縦書きと横書き
文章の書字方向（横書き・縦書き）を指定します。値には、horizontal-tb（横書きで行が上から下へ流れる）、vertical-rl（縦書きで列が右から左に流れる）、vertical-lr（縦書きで列が左から右に流れる）があります。縦書きの場合、Windows環境では、縦書き用フォント名（日本語のフォント名の頭に「@」）を指定する必要があります。なお、IEの場合は、独自拡張のtr-tb（horizontal-tbと同じ）、tb-rl（vertical-rlと同じ）、tb-lr（vertical-lrと同じ）で対応することになります。
| 初期値：horizontal-tb 適用要素：すべての要素（適用できない：table row groups,table column groups,table rows,table columns） 継承：あり 値：horizontal-tb/vertical-rl/vertical-lr |
| 【サンプルソースコード】 |
| html { |
| writing-mode: vertical-rl; |
| } |
エフェクト
アニメーションやとランジションなどの特殊効果は、JavaScriptなどの拡張技術を使用していましたが、CSS3には「CSS 2D Transforms」や「CSS 3D Transforms Module Level3」、「CSS Animations Module Level3」などの仕様が追加されており、CSSだけでオブジェクトのアニメーションや3D効果、スライドショーのとランジション効果などを簡単に実行することが可能になりました。
| transformプロパティは、対象とする要素に対して、移動・回転・伸縮（拡大・縮小）・傾斜などの2次元トランスフォーム処理を実行します。 移動は、translate()、translateX()、translateY()、回転はrotate()、伸縮はscale()、scaleX()、scaleY()、傾斜はskew()、skewX()、skewY()を指定します。 |
| 初期値：none 適用要素：ブロックレベル要素、インライン要素 継承：なし 値：none/transform |
| 【サンプルソースコード】 |
| #obj { |
| transform: translate(480px,80px)scale(2,2)rotate(120deg); |
| } |
アニメーション、とランジションなどエフェクト関連モジュール
カラーとイメージ
CSS2.1でボックスの角を丸くしたり、テキストに陰影をつけるには、イメージ（画像）を使用しました。これらの視覚表現は、div要素を増加させ、CSSを複雑にしてしまうなど、アクセシビリティ上の問題やメンテナンス性の低下などが指摘されてきました。
CSS3には、「CSS Color Module Level3」や「CSS Backgrounds and Borders Module Level3」などの仕様が追加されており、角丸の指定やボックスのドロップシャドウ、線形および円形のグラデーション表示、複数の背景画像を重ねて表示する機能など、CSS2.1では画像で表現してきたビジュアルデザインをCSSだけで指定できるようになっています。
| border-radiusプロパティは、対象とするボックスの角を丸くします。値が1つの場合は、4つの角に適用され、2つの場合は左上と右下の角、右上と左下の角にそれぞれ適用されます。3つなら左上、右上と左下、右下の角、4つの場合は、左上から時計回りに適用されます。 |
| 初期値：0 適用要素：すべての要素（border-collapseの値がcllapseのtable要素は除く） 継承：なし 値：ピクセルおよび%など |
| 【サンプルソースコード】 |
| #contents { |
| border: solid 1px #4c5482; |
| border-radius: 10px; |
| } |
リストマーク
リスト関連では、CSS2.0で定義されていた漢数字「一、二、三」やひらがな「あいうえお/いろは」、カタカナ「アイウエオ/イロハ」、がCSS3で復活しています。
| list-styleプロパティは、「list-style:リストマークの種類イメージ画像で表示する位置」のように指定します。値は省略可能です。CSS3では、CSS2.1で削除され、再び採用された漢数字（cjk-ideographic）やひらがな（hiragana）、カタカナ（katakana）などが使用できます。 |
| 初期値：disc none outside 適用要素：「display:list-item」の要素 継承：あり 値：list-style-type/list-stle-position/list-style-image |
| 【サンプルソースコード】 |
| li { |
| list-style: cjk-ideographic; |
| } |
という事で今回は、CSS3で追加されたプロパティをサンプルソースコードと共に記載いたしました。
特にエフェクトやカラーとイメージにつきましては、まとめ的要素で記載いたしましたので、少し分かりにくいかと思います。現段階では、概念を理解しておけば問題ないことと思います。また、W3Cのリンクを記載しておきましたので、そちらをご参照いただければ、特に問題ないと言いますか、コレが絶対的な内容ですね。
しかしながら、エフェクトやカラーとイメージなどは、CSS3で表現することができますと、すごく便利ですので、別の記事に「実践編」もしくは「TIPS」で記載しようと思っています。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
