コピペで使えるcss3の基礎から小技厳選7個


このページをご覧になっている方なら、CSS(カスケーディング・スタイルシート)という言葉は知っていると思います。
知らない方の為に簡単に説明すると、CSSはフォント・色(カラー)・形(すき間)・背景画像等、レイアウトを指定する言語です。

*ちなみに、htmlは文書構造を指定する言語です。

ワードプレスでは、記事を作成する際に「h2, h3, strong, img, a href(リンク) etc.」等を使われると思いますが、その部分がhtmlにあたります。
cssはそのhtml部分をどの様なレイアウト(形・大きさや位置等)でブログ上に表示させるかを担当しています。

また、最近はCSS3という言葉もお聞きになったことがあると思います。聞いたことはあっても

それがいったい何なのか?
これまでのCSSとどう違うのか?

は、よくわからないという方が多いかも知れません。

CSS3の機能とブラウザの対応

CSSは、HTMLコンテンツ内の情報の見え方(CSSの名前の通り”スタイル”ですね)を様々に調整することを可能にしてきました。フォント、色、背景画像、境界線などは、既存のCSSスタイルで簡単に設定できます。CSS3の機能も、これまでのWebの機能から大きく逸脱するものではなく、ブラウザーの機能を強化・拡大して、HTMLコンテンツに対するよりリッチな機能とリッチな表現をサポートすることが目的です。

各ブラウザに対応させる、ベンダー プレフィックス

CSS3で採用される予定の機能が、各ブラウザで先行実装されていますが、それらの機能を動作させるには、現状ではプロパティの先頭に
「-webkit-」や「-moz-」などのベンダー プレフィックスを付ける必要があります。

HTML5やCSS3の機能のなかでも最新のものは特に、ブラウザのサポート状況を参考にしながら使うべきだと思います。「Can I use…」をフルに活用して、ユーザにとってより一層フレンドリーなブログを作って下さい。

css の記述は下図のようにしますが、名称だけ覚えておいて下さい。CSS記述サンプル

角丸を表現する:border-radius

今まで画像を使って角丸を表現していた部分を「border-radius」を使用する事で簡単に角丸を表現できるプロパティです。要素の角を丸くすることにより、Web サイトに洗練された印象を加えることができます。

角丸:border-radius

 

.sample で、基本となるボーダー(枠)を作成しています。
.sample1 が角丸指定です。

角丸の半径は左上から時計回りで、サイズ指定できます。
例:border-radius: 10px(左上) 20px(右上) 5px(右下) 30px(左下);
1つのみ指定すると、全てに適用されます。

border-radiusで円を描く事も出来ます。

 

border-radius: で幅と高さを画像の半分で指定してやれば良いだけです。写真の加工などにいいですね。

円を描くテスト

 

ボックスに影をつける:box-shadow

勿論上記のborder-radiusと組み合わせることも出来ます。

ボックスに影をつける:box-shadow

 

box-shadow: (カラー, 水平方向, 垂直方向, ぼかし距離, 広がり距離)

影になるカラーはrgbaで指定「16進数形式をRGB, RGBAに変換」すると、色に透過を加えることが出来ます。(サンプルは透過率:0.6=60%)

水平方向の影:正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
垂直方向の影:正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
ぼかし距離:負の値を指定することはできません。値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
広がり距離:正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。

 

線形グラデーションを指定する:linear-gradient

linear-gradient(線形グラデーション)は、background-imageプロパティや list-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされています。

線形グラデーションを指定する:linear-gradient

.sample で、基本となるボーダー(枠)を作成しています。
.sample3 が線形グラデーション指定です。

グラデーションラインとそれに沿って配置される複数の色を指定します。
linear-gradient(開始位置(top, bottom, left, right), 開始色, 途中色, 終了色);
サンプルでは、開始色と終了色だけ指定しています。

 

円形グラデーションを指定する:radial-gradient

radial-gradient(円形グラデーション)も、background-imageプロパティや list-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされています。

radial-gradient

.circle3 で、border-radiusで作成した角丸の円を利用します。
.sample4 が円形グラデーション指定です。

radial-gradient(開始色, 終了色); の順に指定します。
開始色は、中心になります。

 

要素の透明度を指定する:opacity

要素全体を透過させる場合は opacity というプロパティを使います。

まず通常の画像です。

通常の画像

60%の透明度を指定した画像です。

要素の透明度を指定する

使い方は簡単で、セレクタに対して opacity で透明度を指定するだけです。

リンク時のマウスオーバー「a:hover」などで利用して下さい。

 

テキストに影(シャドー)を付ける:text-shadow

radial-gradient(円形グラデーション)も、background-imageプロパティや list-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされています。

テキストに影(シャドー)を付ける:text-shadow

.sample6 がテキストに影を付ける指定です。
.sample6 span はサンプルで使用した<span>〜</span>で囲んだテキストの指定です。

グラデーションラインとそれに沿って配置される複数の色を指定します。
linear-gradient(開始位置(top, bottom, left, right), 開始色, 途中色, 終了色);
サンプルでは、開始色と終了色だけ指定しています。

 

画像を拡大表示する:transition transform

transitionとtransformを組み合わせて、画像に面白い効果を付けることが出来ます。下の画像にマウスを合わせてみて下さい。

画像の拡大表示

ドキッとしましたか?アイデア次第で楽しく使えると思います。

.sample7 は、画像の指定です。
レスポンシブwebデザインでは max-width: 100%; は必須になります。
.sample7 img は拡大表示させたい画像にクラスを付けます。
例:<div class=”sample7″><img src=”https://bbc-theme.jp/wp-content/uploads/2014/08/girl.jpg” alt=”画像の拡大表示” width=”400″ height=”300″ class=”alignnone size-full wp-image-1961″ /></div>

.sample7 img の「transform 0.5s」はアニメーションのスピード、
.sample7 img:hover の「scale(1.7)」は拡大倍率になります。

 

これ以外にもCSS3は沢山ありますので、機会があればまたご紹介したいと思います。

 

9/1 追記:どの様に自分のブログに追加すれば良いのか解らない、というメールを頂きましたので、「ブログにスタイルシートを追加する一番簡単な方法」を公開しました。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です