厳選!今すぐ使えるCSS3の便利機能10選

Webサイト制作
サイト制作
2022.01.19
新たに勧告された「CSS3」ですが、これまでと何が違うのか、どのような機能があるのか詳しくわからないという人も多いです。

CSS3にはとても便利な機能がたくさん実装されているので、CSS3についてやこれまでのCSSとの違いと共に、すぐにでも使いたい便利な機能を10個紹介していきます。

CSS3とは

CSS3とは、CSSの最新版のことを指します。

「CSS」とは、「Cascading Style Sheet(カスケーディング・スタイルシート)」を略した言葉で、webページの見栄えを定義する言葉として使われています。

単に「スタイルシート」と呼ばれることも多いです。

Cascade(カスケード)は、「段階的に連なっているもの」という意味があり、CSSでは上位の要素に向けて指定した装飾が、下位の要素に向けて指定した装飾へと引き継がれて適用されていきます。

このように段階的に適用される仕様のことを「カスケード」と呼びます。

CSSの仕様は、レベルと呼ばれるバージョン番号が設定されていて、CSS1・CSS2・CSS2.1…というように「CSS」の後に数値を付けて表されています。

最初のCSSは「CSS1」と呼ばれる規格で、1996年に確定されました。

その後、1998年に仕様に改良が加えられた「CSS2」、2011年に「CSS2.1」が確定されています。

その次の規格として2011年から策定を進めているのが、今回紹介している「CSS3」です。

CSS3は一部勧告がされていますが、全体の勧告はまだ行われていません。

新たなCSSではなく、仕様が増えた便利なCSS

CSS3は、「これまでと大きく異なる新しいバージョン」というわけではなく、従来のCSSとの互換性があります。

これまでのCSSに、新しく便利な仕様を加えた規格がCSS3です。

基本的な文法(記述方法)に変化はほぼないため、従来のCSSで使用していた記述方法は、そのままCSS3としても使えると考えて問題ありません。

 

CSS3とCSSの違い

CSS3のソースは、基本的な部分では従来のCSSソースとほとんど変わりません。
その中でもこれまでのCSSとの違いを2点紹介していきます。

HTML5との併用が必須ではない

「HTML5+CSS3」のように表記されていることが多いですが、CSS3はHTML5と一緒に使わなければいけないというわけではありません。

実行環境が対応しているのであれば、HTML5にこだわる必要はなく、

例えば、XHTML1.0やHTML4.01で記述されているwebページを、CSS3を活用してデザインすることが可能です。

これまでの記述との混同が可能

1つのCSSソースの中に、「CSS3の記述」と「CSS2の記述」を一緒に記述するといった、新旧のCSSが混在が可能です。

従来の記述はそのまま使用することが可能なので、CSS3で新たに追加されたプロパティを使う場合、既存部分は書き換えずに、現在のCSSにCSS3の記述を追記するだけで使うことができます。

CSSについては以下のページで詳しく解説していますので、こちらも参考にしてみてください。

▼関連記事

 

CSS3の便利な機能10選

実際にCSS3から実装された便利な機能を10個紹介していきます。

 

角を丸くする

これまでは角を丸くしたデザインにする場合、背景に角を丸くした画像を挿入して作成する必要がありました。

しかし、CSS3で追加された機能では、「border-radius:〇px;」とするだけで、角を丸くすることが可能です。

「px」だけでなく、「em」や「%」を指定する事も可能です。

画像を使って表現すると背景用の画像を読み込む必要があり、ページのファイル容量が増えてしまいます。

ファイル容量が増えることで表示にかかる時間が遅くなってしまうので、画像を少なくしてファイル容量を軽くした方が、ユーザーが快適に閲覧できます。

また、線の色や背景の色を変更したいと思った時に、背景に入れる画像を作り直す必要がなくなるので、変更も手軽に出来るようになります。

 

影を付ける

これまでは影を付けたデザインを使用する場合、画像にする必要がありました。

そのため、文章や大きさなどを変更するたびに画像を作り直してアップするという作業が必要になり、一文字だけ変える・文章を入れ替えるなどの簡単な作業も時間がかかってしまうということがありました。

 

しかし、CSS3で影を指定するプロパティが追加されたことにより、「text-shadow: (右距離) (下距離) (ぼかし具合) (影の色);」で影を付けることができます。

例えば「text-shadow: 7px 6px 2px #666;」というような記述になります。

右距離に指定する数値を大きくすることで影が右側に、下距離に指定する数値を大きくすることで影が下側に伸びます。

これらの数値は負の値も設定する事が可能です。

例えば、右距離に「-10px」下距離に「-12px」を設定した場合、左側に10px、上側に12px影が伸びます。

ぼかしの距離は、指定する数値を大きくするほど、ぼかしが強くなります。

 

また、文字ではなく要素へ影を付ける場合は、

「box-shadow: (右距離) (下距離) (ぼかしの距離) (影の広がり) (影の色);」で影を付けることが可能です。

例えば「box-shadow: 15px 15px 15px 15px #666;」このような記述です。

影の広がりに指定する数値を大きくするほど、影の範囲が広くなります。

影の色に続けて「inset」を入力すると、外側についていた影を要素の内側へ向かせることができます。

 

アニメーションを与える

「transition」というプロパティを使うことで、アニメーションを付ける事が可能になりました。

記載方法としては、


.animation {

background: #ff0000;

width:200px;

transition: all 0.5s;

}

.animation :hover {

background: #00ff00;

width:400px;

}

というように記載します。

上記のcssの場合は、「animation」の要素上にカーソルを乗せた際に、背景色を0.5秒かけて赤から緑に変化させるというアニメーションになります。

また、「width」の設定も行っているため、カーソルを乗せた際に0.5秒かけて横幅が倍に広がるように指定しています。

変化前と変化後の指定を行い、変化にかかる時間を「transition」にて指定して使います。

 

文字や画像の回転

変形関数と呼ばれる特別な値を指定して、HTML上の任意の要素を自在に変形させることの出来る「transform」プロパティの値に組み合わせて、「rotate」という変形関数を使って角度を指定することで、30度や90度など、好みの角度で、文字や画像などのHTMLの要素を回転することが可能です。

「transform」プロパティは、そのまま紙を回転させるような2D(平面)回転だけではなく、3D(立体)回転も可能です。

例えば、Y軸を基準として180度回転させることで、鏡文字を作ることもできます。

本文の表示として使うことは少ないですが、横方向に並んでいる文字を90度回転して縦向きに表示させ、ウインドウの端に寄せておくというデザインは、よく取り入れられている方法です。

画像単位・文字単位でなく、HTML内の特定の要素を全て回転させることが出来るため、画像化して加工する手間がなく、簡単にデザインの幅を広げられます。

記載方法としては、


transform: rotate(角度「deg」); /* 2D(平面)で回転 */

transform: rotateX(角度「deg」); /* 3DのX軸(水平)で回転 */

transform: rotateY(角度「deg」 ); /* 3DのY軸(垂直)で回転 */

transform: rotateZ(角度「deg」); /* 3DのZ軸(奥行)で回転 */

というように記載します。

上記の角度は、90度なら「90deg」、「-30deg」だと反時計回りに30度になります。

 

偶数行と奇数行で装飾を分ける

テーブルやリストなど、複数の項目が連続する要素に対して、「偶数だけ・奇数だけに適用するスタイル」というように、任意の規則で一部分だけ異なる装飾を「nth-child」疑似クラスを使うことで出来るようになりました。

行数の多い表や項目数の多いリストでは、1行ごとに色分け表示すると見やすくなります。

以前はHTML側で各行にclass属性を付加しなければできませんでしたが、nth-child疑似クラスを使えば、HTMLソース側に何も書き加えなくても、CSSの記述だけで装飾することが可能です。

交互に装飾を切り替えるだけではなく、「2つおき・3つおき」のように倍数を指定したり、「最初のみ・最後のみ」のように任意の場所を指定することも可能です。

偶数だけを対象に装飾するには「:nth-child(2n)」、奇数だけを対象に装飾するには「:nth-child(2n+1)」と指定します。

記載方法は、


li:nth-child(2n) {

/* 偶数番目(2,4,6……番目)だけに適用されるCSS */

color: red;

}

li:nth-child(2n+1) {

/* 奇数番目(1,3,5……番目)だけに適用されるCSS */

color: green;

}

のように記載します。

上記の場合は、偶数行は赤、奇数行は緑に設定を行っています。

 

新しい単位「rem」

CSSで文字サイズを指定する際、「80%」や「0.8em」という割合で指定しますが、この方法では入れ子構造の要素の場合、構造が深くなればなるほど文字のサイズが意図していない大きさになってしまったり、どれくらいのサイズで表示されるか分かりにくくなってしまうという問題があります。

原因は、文字サイズとして指定した値は子要素へも継承されるためです。

CSS3ではこのような問題を解決できる単位として、新しく「rem」という単位が追加されました。

この単位「rem」は、親要素ではなく、ルート要素の文字サイズを基準として文字サイズを指定することができる単位です。

そのため、入れ子構造になっていても、徐々に文字サイズが小さくなるといった問題は起こらず、どれくらいの文字サイズで表示されるのかを簡単に把握することができます。

この単位「rem」の記述方法は、基準となる要素が異なるだけで、従来からある単位「em」と同じなので、記載する際には、

「1em」 =「1rem」

「0.8em」 = 「0.8rem」

というように記載します。

 

メディアクエリでcssを切り替える

メディアクエリとは、画面サイズや画面解像度などに応じて、表示画面を切り替えられるCSSの機能です。

従来の、デバイスの種類に応じて表示画面を切り替えられるメディアタイプを拡張して作られた仕様で、メディアクエリを使うことで、ユーザーが利用しているデバイスを基準にして適用スタイルを細かく調整することができます。

CSS3のメディアクエリの、link要素のmedia属性を使って適用スタイルを指定できる点は従来のメディアタイプと同じですが、画面サイズに応じて適用スタイルを切り替えるような、細かな条件指定を追加することができるようになりました。

例えば、


media=" (max-width: 899px)">

media="(min-width: 900px)">

と記載した場合、

画面幅(width)が899px以下の場合には「mobile.css」

画面幅(width)が900px以上の場合には「pc.css」

を表示させる設定になっています。

PCとスマホで表示画面を切り替えるような、レスポンシブデザインにも活用できます。

 

条件に合わないもののみ装飾する

従来のcssには、装飾対象を限定するセレクタの記述方法が数多く用意されていますが、「指定した条件に合致する場合」に装飾を適用するものがほとんどです。

CSS3で追加された記述方法「:not()」は、「指定した条件から外れている場合」に装飾を適用することが可能です。

否定の表現を使わないと実現できない装飾は少ないですが、否定の条件を指定する方が複雑なデザインを短く記述できる場合があるので、覚えておくと便利です。

例えば、内部リンクと外部リンクを装飾で区別する場合、従来ではHTML側で外部リンクに特定のclass名を記載する必要があります。

しかし、「:not()」を使うことで、簡単に「リンク先が自サイトでないリンク」を指定して装飾することが可能になります。

このように、否定の条件指定を使うことで、記述を短縮することができる場合があります。

 

文字を平体や長体で表示する

ワープロソフトのように文字の横幅だけを伸縮させて、横に平べったい平体や、縦に細い長体を適応させる場合、従来なら文字を画像化して加工する必要がありましたが、CSS3の「transform」プロパティを使うことで、簡単に適応させることができます。

本文の装飾にはあまりおすすめしませんが、見出しや、ページ脇に飾りのように表示する文字などに活用することができます。

基本の記述は「transform: scale( xx , yy );」というように記述します。

「xx」には横の倍率、「yy」には縦方向の倍率を数値で記述します。

標準サイズが「1」なので、1より小さくすれば表示サイズも小さく、1より大きくすれば表示サイズも大きくなります。

 

例えば文字を平体にする場合には、

transform: scale( 1 , 0.7 );

というように記述します。

上記の場合、横幅は基準値のまま文字の縦方向が0.7倍縮みます。

 

文字を長体にする場合には、

transform: scale( 0.5 , 1 );

というように記述します。

文字の縦幅は基準値のまま、横方向が0.5倍縮みます。

このように、横幅を大きく(高さを小さく)することで平体に、横幅を小さく(高さを大きく)することで長体になります。

 

マルチカラムを簡単に作ることが出来る

マルチカラム(段組)を、新たに追加された「columns」プロパティを使うことで、短い記述で簡単に作ることができます。

マルチカラムは、「3段組」のように、段の個数を指定したり、「1段=30文字分」というように横幅を指定して段を並べるレイアウトも可能です。

マルチカラムを設定することで、ユーザーが長文を横長の画面で見た時に、文章が横方向に長くなりすぎるのを防ぐことができます。

「max-width」プロパティで横幅を制限するよりも、必要に応じて段を増やすことができるため、表示領域を有効に活用することに繋がります。

段の数を指定する場合には、

column-count: 4;

段の横幅を指定する場合には、

column-width: 25em;

と記述します。

上記の記述の場合、「段の数を4段」「段の横幅は25文字分」という指定をしています。

 

CSSの書き方は変わらない

これまで紹介した通り、これまでのcssとの互換性があるので、新たなプロパティを覚えていく必要がありますが、記述方法自体は変わりなく、従来通りの記述が可能です。

ただし、CSS3を活用する上での注意点が1点あるので、紹介します。

 

CSS3未対応のブラウザでは再現できない場合がある

CSS3に対応していないブラウザでcssを表示させる場合、全てのCSSソースが表示されなくなるわけではありませんが、CSS3で新実装されたプロパティは再現されない場合があります。

例えばアニメーションの場合、アニメーション自体は再現されませんが、指定していた文字の色は再現される場合がほとんどです。

そのため、CSS3のプロパティ記述をメインにしてしまうと、未対応のブラウザで再現されずにユーザーが困惑する可能性があるため、従来のCSSとうまく織り交ぜながら活用していくことがおすすめです。

 

まとめ

CSS3とは仕様が増えた便利なCSSです。

CSS3とCSSの違いは、

  • HTML5との併用が必須ではない
  • これまでの記述との混同が可能

CSS3の便利な機能は下記になります。

  1. 枠の角を丸くする
  2. 影を付ける
  3. アニメーションの付与
  4. 文字や画像を回転
  5. 偶数・奇数行で装飾を分ける
  6. 新単位「rem」
  7. メディアクエリの設定
  8. 条件に合わないものを装飾
  9. 文字を平体や長体で表示
  10. マルチカラムの作成

これまでのCSS記述はそのままに、記述を短く簡単にするための機能がたくさん実装されています。

便利な機能ばかりなので、今回紹介した内容をもとに、実際に活用してみてくださいね。

SEOやWEB制作に関する情報を検索する

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)