A. アニメーションもCSSだけで実現できる!

CSS3なら、JavaScriptなどのスクリプトを使うことなくアニメーションが作れます。

CSS3だけで特定の要素をアニメーションさせる方法

CSS3では、「CSSだけ」で簡単なアニメーションを作成できます。スクリプトは一切不要。CSSソースを記述するだけで、文字を動かしたり、背景色を徐々に変化させたりなど、様々なアニメーションが実現できます。古いブラウザで閲覧した場合でも、ただアニメーションしない状態で表示されるだけなので、安心して活用できます。

出典: CSS3だけで特定の要素をアニメーションさせる方法 [ホームページ作成] All About

B. 文字に陰を付けたり縁取りしたりできる!

CSS3なら、文字を画像化することなく陰を付けたり縁取りしたりできます。

文字に影を付け、画像に重ねた文字を見やすくするCSS3

CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。

出典: 文字に影を付け、画像に重ねた文字を見やすくするCSS3 [ホームページ作成] All About

C. CSS3なら枠線もいろいろ! 角丸や斜線も引ける

CSS3なら、枠線の種類は「実線・点線・二重線・破線」だけではありません。枠線として画像を指定すれば自由度の高い枠線が作れます。画像を使わずに角を丸くすることもできますし、画像を使わずにグラデーションを描くこともできます。グラデーションを応用すれば斜線を引くことも可能です。

CSS3のborder-imageで、しましまの目立つ枠線を作る

CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。

出典: CSS3のborder-imageで、しましまの目立つ枠線を作る [ホームページ作成] All About

画像を使わずにCSSだけで角を丸くする方法

CSS3のborder-radiusプロパティを使えば、スタイルシートだけで枠線の角(ボックスの隅)を丸くできます。この方法なら、「四隅の角丸を画像で用意して配置を工夫する」というような複雑で面倒なことは不要で、簡単にボックスの角を丸くできます。

出典: 画像を使わずにCSSだけで角を丸くする方法 [ホームページ作成] All About

表の空っぽのセルにだけ、CSSで斜線を引く方法(グラデーションの応用)

CSSを工夫すると、画像を使わずにCSSだけで1本の斜線を引くことができます。また、CSS3では「空(カラ)の要素」だけを対象にして装飾が適用できます。それらを合わせれば「テーブル内の空っぽのセルに斜線(対角線)を引く」装飾も簡単に実現可能です。ほんの短いCSSソースで、テーブル内の空欄セルに斜線を引く方法をご紹介。

出典: 表の空っぽのセルにだけ、CSSで斜線を引く方法 [ホームページ作成] All About

D. 文字も画像も何でも回転したり引き延ばしたりできる!

CSS3なら、文字だろうと画像だろうと何でも自由な角度で回転させられます。横や縦に伸ばすこともできます。

CSS3を使って画像や文字を任意の角度で回転させる方法

CSS3のtransformプロパティを使うと、45度でも90度でも自由な角度で文字や画像を回転させられます。「画像や文字を90度傾けて縦にしてページ端に寄せる」といったデザインが、画像化して加工しなくても実現できます。Y軸を基準に180度回転させることで「鏡文字」を作るなど、おもしろい表現も可能です。

出典: CSS3を使って画像や文字を任意の角度で回転させる方法 [ホームページ作成] All About

CSS3のtransformで、文字を長体や平体で表示する方法

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等を解説。

出典: CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About

E. 段組も1行で実現できる!

CSS3には段組(マルチカラム)を作るためのプロパティもあり、とても簡単に自由度の高い段組レイアウトが作れます。

簡単に段組が作れる!CSS3、columnsプロパティ

CSS3では、たった1つのプロパティを記述するだけで、簡単に「段組(マルチカラム)」レイアウトが作れます。「3段組」のように段の個数を指定したり、「1段は20文字分」のように各段の横幅を指定して入るだけ並べたり、柔軟な段組構造が作成できます。段と段の間に罫線を引いたり、段と段の余白量を調整するのも、専用のプロパティを追記するだけで楽々実現できます。

出典: 簡単に段組が作れる!CSS3、columnsプロパティ [ホームページ作成] All About

HTMLの記述順に関係なく自由に表示順を変更できるCSS

ウェブサイトをレイアウトする際、「HTMLソースに記述した順序」と「実際に表示したい順序」が一致しなくなることがあります。そこで便利なのが、CSS3のflexbox(フレキシブルボックス)という記述方法です。これを使えば、HTML側に記述した順序に影響されずに、CSSだけでかなり柔軟に表示順を決定できます。

出典: HTMLの記述順に関係なく自由に表示順を変更できるCSS [ホームページ作成] All About

F. CSS3なら従来の不便を解消できる!

CSS3には、従来の不便を解消できる新しい単位や新しい仕様も追加されており、デザインが作りやすくなっています。

CSS3の新単位「rem」で文字サイズを分かりやすく指定

単位emや%を使って相対的に文字サイズを指定すると、複数のボックスを経由した先などでの表示サイズが把握しにくいことがあります。CSS3の新単位「rem」を使えば、常にルート要素の文字サイズが基準になるため、文字サイズを分かりやすく指定できます。

出典: CSS3の新単位「rem」で文字サイズを分かりやすく指定 [ホームページ作成] All About

横幅を100%にした際、親ボックスからはみ出すのを防ぐ方法

画像やボックスなどを横幅いっぱいに広げるべく、CSSで横幅を「100%」に指定すると、なぜか親ボックスの領域からはみ出してしまうことがあります。CSSで細かくデザインしている際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介。

出典: 横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All About

G. 奇数・偶数などの条件でデザインを分けられる!

CSS3なら「奇数番目用のデザイン」・「偶数番目用のデザイン」など、登場順序に応じてデザインを変えるのも簡単です。指定条件以外の場合に適用できる「その他」を指定する方法もあります。

CSS3で偶数行・奇数行など「n番目」を限定装飾する

リストやテーブルなどたくさんの項目が連続する要素は、1行おきに装飾を変えると見やすくなります。CSS3で用意された「nth-child疑似クラス」を使えば、装飾対象を「偶数番目のみ」・「奇数番目のみ」などに簡単に限定できます。他にも「3つおき」や「先頭の5つ」など柔軟に指定できる便利なCSSです。

出典: CSS3で偶数行・奇数行など「n番目」を限定装飾する [ホームページ作成] All About

条件に外れた場合だけ装飾するCSS3「:not()」の使い方

CSSで装飾対象を指定する「セレクタ」は、「その条件に合致する場合」にだけ装飾を適用するものです。しかし、CSS3で追加された「:not()」を使うと、「指定した条件から外れている場合」に装飾を適用できます。否定の条件を指定できると、複雑な条件をシンプルに記述できることもあり、込み入ったデザインを作る際に便利です。否定疑似クラス「:not()」の使い方をご紹介。

出典: 条件に外れた場合だけ装飾するCSS3「:not()」の使い方 [ホームページ作成] All About

H. CSS3の基本

CSS3ってそもそも何なのか? 基本も再度押さえておきましょう。セレクタとして記述できる内容も増えています。

CSS3とは? 機能が増えて便利になったスタイルシート

CSS3とは何でしょうか? CSS3は従来のCSS(スタイルシート)に便利な仕様がたくさん追加された新しい装飾手段です。CSS3では従来のCSSと何が異なり、何ができるようになるのでしょうか? CSS3について、概要と表示例などを簡単にご紹介いたします。

出典: CSS3とは? 機能が増えて便利になったスタイルシート [ホームページ作成] All About

CSSの「セレクタ」の書き方 再入門(CSS3対応版)

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。

出典: CSSの「セレクタ」の書き方 再入門(CSS3対応版) [ホームページ作成] All About