当ブログではトップのヘッダー部分を除いて、
できるだけ画像を使用しないようにしている。
確かに画像を用いたインターフェイスはキレイだし、
いかにも、なデザインに見える。
しかし、新しいカテゴリーを増やすたびに画像アイコンを作成することは
製作者本人ならともかく、クライアントにとっては
自分で改変できない不自由なサイトということになる。
また、HTML本来の意味合いからも外れているように感じる。
とはいえ、デザイン性がまったくないのも考えものなので、
当ブログでも行っているCSSだけでできる簡単な実践テクニックをいくつか紹介する。
■ブロック要素(div)などの角を丸くする
HTMLのブロック要素(div)などを角丸にするにはborder-radiusを使う。
四隅すべてに指定したい場合は以下を記述
/*------------------------------------*/
border-radius: 10px;
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
/*------------------------------------*/
特定の角だけ丸くする場合は以下を記述
/*------------------------------------*/
/*CSS*/
border-top-left-radius: 10px; /* 左上 */
border-top-right-radius: 10px; /* 右上 */
border-bottom-left-radius: 10px; /* 左下 */
border-bottom-right-radius: 10px; /* 右下 */
/*Safari、Google Chrome*/
-webkit-border-top-left-radius: 20px; /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */
-webkit-border-bottom-left-radius: 20px; /* 左下 */
-webkit-border-bottom-right-radius: 20px; /* 右下 */
/*Firefox*/
-moz-border-radius-topleft: 20px; /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */
-moz-border-radius-bottomleft: 20px; /* 左下 */
-moz-border-radius-bottomright: 20px; /* 右下 */
/*------------------------------------*/
ただし、IEには対応していないようだ。
長くなってきたので続きは次回で。