CSS3 が登場してから、画像や JavaScript を使わずに様々な表現ができるようになりました。
検索すれば「え！こんなのも！？」というテクニックがたくさん出てきます。ジェネレーターも数多くあるので、複雑な記述を覚えなくてもコピペだけでおしゃれなデザインになりますよね。
でも、やりすぎてしまうと逆にダサくて読みづらいデザインになることも。
そこで今回は「ちょっとカッコよくなる」方法をご紹介します。box-shadow と text-shadow を使って、さりげない演出をしてみましょう！
Headline
たった 1px がデザインを引き締める
あちこちのブログを眺めていると、『このデザイン、カッコいいなー』と思うことがよくあります。
派手なエフェクトをかけていることもありますが、ほとんどはよく見なければわからないほどのさりげない効果がカッコよさを演出しているものです。
たとえば、区切り線 <hr /> を入れてみましょう。
背景色は薄いグレー（#eeeeee）で、区切り線は黒（#000000）です。
なんの変哲もないデザインですが、このようにすると…
ちょっと立体感のあるおしゃれな線になりました！
もう少し背景色を濃くして（#333333）見比べてみましょう。
どうですか？ さりげないでしょう？
どちらも box-shadow を使って、たった 1px の線を <hr /> の下にくっつけているだけです。
同じ box-shadow を使うのでも、こんな風にしてしまうとちょっとダサくなりますね。
好みもありますが、シャドウを強めに指定したものがたくさん並ぶと目ざわりになりがち。
デザイナーなら派手な要素をうまくまとめられるかもしれませんが、僕らのような素人は「さりげないデザインでちょっとカッコよく見せる」ぐらいがちょうどよいのです。
それでは、ちょっとカッコいい CSS をコピペして使ってください！
box-shadowを使ってちょっとカッコいい線を引く
区切り線を使うときは上記のように <hr /> を使うよりも、<div> や <li> に直接 border で指定することが多いと思います。
「border-bottom」と「box-shadow」を併用してちょっとカッコいい線を引いてみましょう。
rgbaの透明度で色を変える
線の色は rgba で指定するのが一番わかりやすいと思います。
- rgba
- 赤（red）・緑（green）・青（blue）に alpha（透明度）を加えたカラーモデルのこと。
ここで使うのは「白 rgba(255,255,255,1)」と「黒 rgba(0,0,0,1)」です。
かっこ内の 4 番目の数字が透明度をあらわしており、たとえば黒の透明度を変えていくとこのようになります。
不透明（1）
半透明（0.5）
うすい透明（0.1）
コードはこんな感じです。
<p style="background-color:rgba(0,0,0,1);color:#fff;">不透明（1）</p> <p style="background-color:rgba(0,0,0,0.5);color:#fff;">半透明（0.5）</p> <p style="background-color:rgba(0,0,0,0.1);color:#fff;">うすい透明（0.1）</p>
カッコいい線を引く基本形は、border に黒、box-shadow に白です。あとは背景色によって透明度を変更していくだけ。
簡単ですね。
リスト（li）にカッコいい区切り線をつける
それでは、リスト <li> のサンプルをご覧ください。
背景色にうすいグレー（#eeeeee）
- border に rgba(0,0,0,0.1)
- box-shadow に rgba(255,255,255,1)
li {
border-bottom: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,1);
}
背景色に濃いグレー（#333333）
- border に rgba(0,0,0,1)
- box-shadow に rgba(255,255,255,0.1)
li {
border-bottom: 1px solid rgba(0,0,0,1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
もちろん <div> に適用しても OK です。
背景に画像を敷いたり他の色を使う場合は、border と box-shadow それぞれの透明度を調整してみてください。
text-shadowを使ってちょっとカッコいい文字にする
文字に立体感を加えるには、text-shadow を使います。
使い方は box-shadow と同じですが、ちょっと斜めにシャドウをつけることでカッコいいテキストになります！
text-shadow の指定方法
先ほどの box-shadow はこのような指定になっていましたね。
box-shadow: 0 1px 0 rgba(0,0,0,1);
text-shadow も指定方法は同じで、各数字はこのような意味をもちます。
線は下方向にのみ 1px ずらしましたが、文字は左にも 1px ずらすのが基本形。
指定するさいは「-1px」とすることで影が左に動きます。
text-shadow: -1px 1px 0 rgba(0,0,0,1);
では、サンプルをご覧ください。
テキストに立体感を演出する
うすいグレーの背景に文字を並べるとこのようになります。
濃いグレーの文字（#333333）
では、text-shadow を指定してみましょう。
濃いグレーの文字（#333333）
p {
text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
よく見比べると、ほんのり白い影が見えますね。
背景色をもう少し濃くする場合は、text-shadow の透明度を調整するとスッキリします。
背景色より濃い文字（#111111）
p {
text-shadow: -1px 1px 0 rgba(255,255,255,0.2);
}
背景色が黒にちかくて白抜き文字にする場合は、黒い影をつけてあげます。
影がない場合はこんな感じですが、
白文字（#ffffff）
1px の黒い影がつくとこうなります。
白文字（#ffffff）
p {
text-shadow: -1px 1px 0 rgba(0,0,0,1);
}
いずれもさりげない装飾ですが、機会があれば使ってみてください。
テキスト全体にシャドウをつけるのではなく、タイトルや見出しなどワンポイントで使うのが効果的です。
まとめ
ブログは記事を読んでもらうのが目的ですから、過度な装飾で読みづらくなってしまうなら本末転倒。
デザインは控えめにして中身で勝負です！
あちこちのブログをよーく見ると、1px のこだわりが垣間見えて面白いです。ぜひ探してみてください。
それでは、また。