デザインに使えるちょっとしたCSSのスニペットいろいろ

Posted under - Web Design

7

Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。

CSS Snipet

8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね!記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする?コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。

ちょっとした CSS スニペット 目次

  1. ボックスに使うCSSスニペット
  2. テキストに使うCSSスニペット
  3. 画像に使うCSSスニペット
  1. リンクに使うCSSスニペット
  2. ちょっとしたスニペット
  3. IE の旧バーションに ie6 no more って出す Javascript

1. ボックスに使うCSSスニペット

ボックスのデザインエフェクトといえば、丸角 – ラウンドコーナーが大好きな私 …。でも残念ながら IE では、CSS3 未対応なので、丸角もボックスシャドウも使えません。画像を使わずに楽ができると思っていたのに…。気を取り直して、まずは IE でも問題なく表現できるものからご紹介しますね!

1.1. ライトなドロップシャドウエフェクト

CSS3 のボックスシャドウは IE では表現できませんが、なんちゃってシャドウなら表現できます。

Sample

このボックスのシャドウは、CSS3 じゃなくて、CSS2 だけで表現しています。ボーダーを上手に使えば、こんなキレイなデザインが画像なしで表現できますね!IE でもキレイにシャドウが見えているはずです。実は … border-bottom だけ色を濃くして、1px 太くしているだけなんです。

CSS
.shadow {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-bottom: 2px solid #ccc;
    /* IE以外なら丸角も! */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

1.2. IE filter でドロップシャドウエフェクト

IE 8 以下では、CSS3 のドロップシャドウは使えませんが、その変わりに IE filter を使う方法もありますねー。下は IE filter を使ったシャドウです。CSS3 のコードと併記してあります。

Sample

このボックスのシャドウは、IE filter と CSS3 で表現しています。IE 以外では CSS3 のボックスシャドウで表示されますよね!そして IE でも、filter のドロップシャドウがかかっています。

CSS
.shadow {
    padding: 20px;
    border: 1px solid #f0f0f0;
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=0, strength=3, enabled=true);
    /* IE以外なら丸角も! */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

1.3. ボックスのエンボスエフェクト

少し凹んだ感じで立体感を出すエンボスエフェクト。ボーダーを工夫して、ボックスにエフェクトを表現してみます。ただの border なので、もちろん IE でも表現できます。

Sample

このボックスは、CSS3 じゃなくて、CSS2 だけで表現しています。4辺のボーダーのカラーを調整しただけで、エンボスエフェクトが表現できますね!ただの border なので、もちろん IE でも OKですね!

CSS
.pressed {
    color: #fff;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #353fff535;
      /* IE以外なら丸角も! */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

1.4. CSS3 – ボックスの角を丸くする border-radius

前は角を丸くしたい時は、画像を使ってましたねー。最近では CSS3 で丸角を表現するようになってきました。pxで角のまるみの半径を指定します。下記では4つの角全てが丸くなりますね!

CSS3
.round{
	-moz-border-radius: 10px; /* Firefox用 */
	-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
	border-radius: 10px; /* CSS3 */
}

個別に指定したい場合は、以下のように書いて一個ずつ指定することもできます。

CSS3
.round{
    /* Firefox用 */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 40px;
  /* または、*/
    -moz-border-radius: 10px 20px 30px 40px; /* Firefox用 */

    /* Safari,Google Chrome用 */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 40px;
    /* または */
    -webkit-border-radius: 10px 20px 30px 40px; /* Safari,Google Chrome用 */
}

1.4. IE でも CSS で丸角を表現したい!

IE でも CSS で丸角を表現したい場合は、border-radius.htc などの Javascript を使う方法があります。私も使ってみようかなと思って一度実装してみましたが、入れ子になった div では上手く機能しないことがあって結局辞めました …。やり方が間違ってたのかも …。

というわけで、やっぱり CSS3 PIE を使っています。これもときどき思うようにいかないことがあるけど、今の所はこれが一番いいかも!

2. テキストに使うCSSスニペット

CSS3 では、テキストに影を付けられる text-shadow プロパティがありますよね!今まで画像を使わなくてはいけなかった表現も、CSSでできるようになりました!とはいうものの、相変わらず IE だけは未対応ですね …。IE9 になっても、text-shadow は実装されませんでした。

IE 以外のブラウザでは、CSS3 のテキストシャドウは簡単ですし、仕上がりもキレイなのでどんどん使っていきたいですね!

CSS3 text-shadow
text-shadow: 0px -1px 3px rgba(0, 0, 0, .3);

text-shadow

X軸のオフセットは、マイナスを指定すると左方向になります。また、Y軸のオフセットにマイナスを指定すると、上方向にシャドウができます。Blur はぼかし具合。カラーは CSS3 ですから、アフファチャンネル付きの RGBa での指定も OK ですね!もちろん従来通りの #dddddd みたいに指定しても OK です。

2.1. LetterPress エフェクト

テキストシャドウを使ったエフェクトをいくつか試してみましょう。テキストの色と、背景の色の明度差などで見え方が違ってくるので、色々試してみるのもおもしろいですよー。

I Love Web Design

CSS3
text-shadow:0px -1px  1px rgba(0, 0, 0, .4), 0px 1px #fff;

text-shadow は、カンマで区切れば複数指定できますね!また、以下のリンクには、たくさんの text-shadow のサンプルが載ってます!

2.2. IE 独自実装のシャドウ

IE9になっても text-shadow プロパティが使えない IE ですが、IE の独自のフィルターというプロパティがあります。このフィルタープロパティを使えば、ドロップシャドウを付けられないこともないです …。でも見た目が他のブラウザと違っていて、あまり好きじゃないので私は使っていません。一応ちょっとメモを残しておきます。

IE filter
filter: glow(color=#0000ff,strength=3); /* IEのグローエフェクト */
filter: dropshadow(color=#ffff00,offX=5,offY=5); /* IEのドロップシャドウエフェクト */
filter: Shadow(color=#666666, direction=135, strength=5); /* IEのシャドウエフェクト */

値を変更して色々試してみてくださいね。

2.5. 選択したテキストの装飾

テキストをコピーする時に、カーソルをドラックすると色がかわりますよね。たとえばこんな風に。デフォルトだと水色ですが、これも CSS で変更できます。とても簡単なので、デザインに合わせたカラーを指定してみてはどうですか?

CSS3
::selection {
color: #333;
background-color: #facade;
}
::-moz-selection {
color: #333;
background: #facade;
}

3. 画像に使うCSSスニペット

シンプルに画像をそのまま貼付けるのも好きです。でも、デザインによっては枠をつけたりしないと、背景と画像の境目がわからなくって、ちょっと困るときとかありますよね。また、画像をリンクにしたときなども、マウスを乗せたときには変化をつけたい場合もあったりします。

3.1. 画像にベベルエフェクト

画像にポラドイド風の枠をつけて、ベベルエフェクトを表現してみます。outline プロパティと border プロパティを合わせて使うんですねー。下の画像、枠の上部にうっすらと 1px のハイライトが入ってるのがわかりますか?

写真 – via Allways love

CSS
img.beveled{
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

3.2. 画像の透明度を変更する

ブラウザで透明度を変更することだってできます。下の2枚の写真、上は普通に表示(不透明度100%)、下は不透明度50%です。

CSS で不透明度を変更

左はもちろん不透明度 100%で、右が 40%です。IE にも filter があるので、これは使えますね!写真 – Via pastel of colours

CSS
.transparent{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
    opacity : 0.5; /* CSS3 */
}

3.3. 画像を反転させる

普段はあまり使い道はないかもしれませんが、アイデア次第では面白いことができそうですね。

CSS で画像を反転

左がオリジナルで、右が 反転した画像です。IE にも filter があるので、これは実装できますね!写真 – Via 2 MELANCHOLY LOVERS

CSS
img.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

上下反転の場合は scaleXscaleYに、FlipHFlipV にすれば OK です。

3.4. 画像読み込み時に Loading 画像

画像の読み込み時に loading 画像を表示します。ajax loader こんなのですねー。

CSS
img {
	background: url(loader.gif) no−repeat 50% 50%;
}

とはいっても、背景に loading 画像を指定しているだけでした!loading の gif 画像を作るのは ajaxload.info が便利です!

4. リンクに使うCSSスニペット

テキストリンクの装飾は、カラーや背景色、アンダーラインで十分といえば十分です。でももうちょっと工夫することもできますよね!別タブで開いて欲しいリンクが、同一ページで開いたりすると、一回もっどって別タブで開きなおしたりすることってありませんか?私はしょっちゅうあるんです。

そんなとき、初めからどんなリンクなのか、ある程度分かればなーと思ったりします。そんなユーザーフレンドリーなリンクのCSSトリックを紹介します!

4.1. target=”_blank” だけ装飾

リンクをクリックする時に、新しいウインドウやタブが開くかどうか、先に分かるとなんとなく使い易いなーって思います。そこで <a> タグの target="_blank" にだけ、CSSで装飾をしてみます。

CSS
a[target="_blank"] { font-style: italic; }
a[target="_blank"]:hover{ color:#ff0000; }

背景画像を設定すれば Yahoo! JAPAN(←アイコン付き)のように表示されて分かり易いですね!

4.2. 外部サイトへのリンクだけ装飾

ブログで他の Webサイトへのリンクを貼ることは、たくさんあると思います。でもユーザーから見ると、サイト内リンクなのか、外部の Web サイトへのリンクなのかが分かると、ちょっと嬉しいかも …。そこで外部サイトへのリンクにだけ装飾をしてみます!

CSS
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

WordPress で more-link(続きを読む)を使っている人はちょっと注意!

  • 1. .more-link{ background:none !important; }

としておかないと、上記のスタイルが反映されてしまします。

4.3. メールリンクだけ装飾

個人的には、お問い合せをクリックしたらメールソフトが起動しちゃうので、このリンクは好きじゃありません …。でも、どうしても mailto: を使うなら、メールリンクだけ装飾して、メールソフトが立ち上がることを事前に教えてあげるのもいいかなーって思います。

CSS
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

4.4. PDFファイルへのリンクだけ装飾

メールリンクと同じように、PDF ファイルへのリンクもちょっと困り者。通常リンクだと思ってクリックしたら、あれれ?やけに重いぞ? … と思ったらPDFだったりします。

Adobe Reader が立ち上げるのを、数秒間待たなきゃならない環境の人もいるし、PDF だったら見ないという人もいるので、これもアイコン付けて装飾してあげるのがユーザーフレンドリーですね。

CSS
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

色んな属性セレクタでスタイルを指定できますが、テキストリンクだけでなく、画像リンクにも反映されてしまうので使用には注意が必要ですねー。そんなときは jQuery を使うといいかもです!

5. ちょっとしたスニペット

その他、ちょくちょく使う CSS スニペットです。

5.1. ロゴを画像にしてテキストを隠す

背景に画像を配置して、text-indent に -9999px を指定してテキストを隠します。

h1 {
	text-indent:-9999em;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat;
}

5.2. textarea で IE だけ表示されるスクロールバーを消す

IE だけ表示されてしまう textarea のスクロールバーは、overflow:auto を指定すると消えてくれます。

textarea{
	overflow:auto;
}

6. IE の旧バーションに ie6 no more って出す Javascript

最後は CSS じゃないんですけど … IE の旧バージョンに合わせていると、ちょっとコーディングの手間が余計にかかったり、気を使ったりすることが多いですよね。クライアントさんの Webサイトでは、IE を無視っていうわけにはいきませんけど、このブログは個人的なプライベートブログなので、IE の旧バージョン(IE6)でアクセスすると、以下のようなメッセージがでます。

IE6 No more

ソースコードは IE No More というサイトで配布されています。<head>~</head> 間に貼付けるだけで簡単に設置できます。IE に疲れたらこんな方法でアップグレードを呼びかけるのもいいかもですね ;D

Comments

Thank you for the comment.