スマホサイトで使えるCSS3　その１

数ヵ月後に大きなイベントが控えているYu-ichiです

貴重な休みが潰れるのがきついっ！

さて、最近はスマホ対応サイトが一般的になりつつあるような気がします。
昔のガラケーと呼ばれていた携帯で閲覧するサイトは、
出来るだけ軽くする為に画像をなるべく使わず、キャリアによってCSS非対応のものなどあったのでHTMLでゴリゴリ作っていたかと思います。
最近のガラケーは少しマシになっていますが。

いっぽう、スマートフォンと呼ばれる端末ではガラケーと比べ物にならないほどブラウザが進化しています。
通信速度もLTEなど高速なものが普及しつつあり、ホームページもデザイン性の高いものが増えてきました。

ですが、いくら高速回線になっても田舎じゃ3Gのままだったり、画像を多く使ったサイトではレスポンスが悪かったりするので、まだまだテキストベースで構築を考えた方がよさそうです。

そんなわけで、今回はCSS3で実現できる文字の装飾について少しだけご紹介したいと思います。

まずはこれから装飾するテキストのご紹介です。
※ ブラウザによってCSS3非対応なものがあるので、今回は画像で表現しています。

</p>
<p>&amp;lt;p&amp;gt;Netimpact&amp;lt;/p&amp;gt;</p>
<p>

その１．ドロップシャドウ

</p>
<p>p {<br />
  text-shadow:3px 3px 2px rgba(0,0,0,0.5);<br />
}</p>
<p>

その２．ちょっと立体的に見せる

<br />
p {<br />
  text-shadow:<br />
  2px 2px 0px rgba(150,150,150,1),<br />
  4px 4px 0px rgba(255,255,255,1);<br />
}<br />

先程のドロップシャドウを2つ使うことで、立体的に見せることが出来ます。

その３．アウトラインを描く

</p>
<p>p {<br />
  color:#cccccc;<br />
  text-shadow:<br />
  1px 1px 0px #000000,<br />
  -1px 1px 0px #000000,<br />
  1px -1px 0px #000000,<br />
  -1px -1px 0px #000000;<br />
}</p>
<p>

ポイントは文字の色を背景色と同じ色にし、text-shadowを1pxずつ四方にばらすことで
アウトラインに見せています。

こんな感じでtext-shadowを複数重ねたり、文字と離したりすることでドロップシャドウからアウトラインまで画像を使わずに様々な表現をすることが可能です。

CSS3に対応したブラウザでないと普通のテキストが表示されるだけなので、
試す時はCSS3に対応したブラウザを使ってみてください。
（最新のブラウザはほぼ全てCSS3に対応しているはずです）

ちなみに、文字の背景に使用している角丸の枠もCSS3を使って描いています。

それでは、また次回！