ボックスの基本形
まずは、何もなしの単に四角いだけのボックスです。
.kihon {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; border: 1px #AAA solid;}
角を少し丸めたボックス
基本の角を少しだけ丸みを持たせたボックスです。真四角より少し柔らかみが出ます。border-radiusで指定し、ここでは10pxとしました。
.kadomaru {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #3FF; border: 1px #0CF solid; border-radius: 10px;}
左右の角を完全に丸めたボックス
今度は、左右の角を完全に丸めたボックスです。border-radiusを高さの半分の35pxにするとこのような形になります。背景色や文字色も少し変えてみました。
.kadomaru35 {width: 300px; height: 70px; font-size: 34px; color: #FFF; text-align: center; text-weight: bold; line-height: 70px; background-color: #6F6; border-radius: 35px;}
角を完全に丸めたボックス
今度は、角完全に丸めて楕円形状にしたボックスです。border-radiusを50%にするとこのような形になります。また、境界線を二重にしました。
.kadomaru50 {width: 300px; height: 70px; font-size: 27px; text-align: center; line-height: 62px; background-color: #3FF; border: 4px #0AC double; border-radius: 50%;}
平行四辺形のボックス
ボックスを右のX軸方向に20度傾けて平行四辺形としました。transformでskewXを指定します。
.heikou {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #3FF; border: 1px #0CF solid; transform: skewX(-20deg);}
左右に縦線の入ったボックス
平行四辺形の両側に縦の線を入れました。
.heikoutate {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #3FF; border: 1px #0CF solid; transform: skewX(-20deg);}
左に太い線の入ったボックス
左側に見出しであることがわかるような太い線を入れました。それと共に下の境界線にも同色の線を入れました。
.left {width: 300px; height: 70px; font-size: 26px; text-align: center; line-height: 70px; color: #831; background-color: #FFEDEA; border-left: 60px #830 solid; border-bottom: 6px #831 solid;}
グラーションのついたボックス
背景色をグラーションにしました。backgroundに、linear-gradientを付けて二つの色を指定するとできます。
.grad {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: linear-gradient(#FFF1F3, #F7A); border: 1px #F7A solid; border-radius: 5px;}
横方向のグラーションのついたボックス
背景色を縦で横方向に変わるグラーションにしました。background: linear-gradient(90deg, #3FF, #9FA)のように最初に90deg,をつければ、横方向となります。
.gradyoko {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: linear-gradient(90deg, #3FF, #9FA); border: 1px #0CF solid; border-radius: 5px;}
円形のグラーションのついたボックス
背景色を縦で横方向に変わるグラーションにしました。linear-gradientの代わりにradial-gradientとすれば円形になります。
.gradrad {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: radial-gradient(#3FF, #9FA); border: 1px #0CF solid; border-radius: 5px;}
虹色のグラーションのついたボックス
円形のグラーションを中心部からズラと共に、虹色にしました。linear-gradientの代わりにradial-gradientとすれば円形になります。
.niji {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: radial-gradient(circle at 40% 120%, #FFF 40%, #FDA 40%, #FDA 45%, #EEA 45%, #EEA 50%, #AFA 50%, #AFA 55%, #ADF 55%, #ADF 60%, #AAF 60%, #AAF 65%, #DAF 65%, #DAF 70%, #FFF 70%, #FFF 100%); border: 1px #03F solid; border-radius: 5px;}
円形のグラーションのついたボックス
背景色を縦で横方向に変わるグラーションにしました。linear-gradientの代わりにradial-gradientとすれば円形になります。
.gradrad {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: radial-gradient(#3FF, #9FA); border: 1px #0CF solid; border-radius: 5px;}
扇型グラデーションを背景とするボックス
背景に扇型グラデーションを活用し放射線状の模様にしました。
.conic {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; color: #FEC; background-image: repeating-conic-gradient(from 0deg at 20% 50%, hsl(190, 100%, 50%) 0, hsl(200, 100%, 50%) 5%, hsl(190, 100%, 50%) 10%); border: 1px #530 solid; border-radius: 5px; box-shadow: 4px 4px 2px #AAA;}
光彩があるボックス
ボックスの周りが光り輝くようにしました。box-shadowで、最初の数値を0にすると周りに同じように影がつきます。
.kosai {width: 300px; height: 70px; font-size: 30px; color: #FB2; text-align: center; line-height: 70px; background-color: #333; border-radius: 5px; box-shadow: 0 0 20px #F70;}
エンボスのあるボックス
ボックスの内側に影をつけ、いわゆるエンボス加工をしました。box-shadowにinsetを付け加えます。形状も真四角に改めています。
.emboss {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #4DD; border: 1px #666 solid; box-shadow: 3px 3px 1px #099 inset;}
くっきりとした影のあるボックス
ボックスの外側に僅かな濃いめの影をつけて厚みを出し、さらに、少し離れてくっきりとした影をつけ、宙に浮いている感じを出します。
.kukkiri {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #EEE; border: 1px #666 solid; border-radius: 5px; box-shadow: 2px 2px 1px #333, 20px 20px 1px #999;}
ゴールドの縞模様
斜めに、ゴールドの縞模様を入れます。金属板の感じが出るように、border-bottomとborder-rightで少し色の違う縁を付けています。グラデーションを%で細かく指定していますが、ゆっくりとしたグラデーションにしたり、急に変化をつけるグラデーションとすることで、様々に変えることができますので、ご自分で%や色の値を変えてみてください。
.gold {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: linear-gradient(135deg, #F3C340 20%, #FC4 35%, #FFD 40%, #F3C340 60%, #FC4 75%, #F3C340 100%); border-bottom: 3px #F0C03A solid; border-right: 4px #F5C53F solid;}
二重の枠があるボックス
内側に白い筋を入れることで、柔らかい感じが出ます。box-shadowに二つ指定することで、これが実現できます。また、そりに併せて、少し光った感じを出すため斜めのグラデーションを入れました。
.double {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background: linear-gradient(135deg, #3F3 50%, #9F9 62%, #9F9 68%, #3F3 74%); box-shadow: 0 0 0 2px #fff, 0 0 0 8px #3F3;}
ステッチの入ったボックス
今度は内側の白い筋をステッチ風に転戦にしてみます。ステッチはborderで入れ、box-shadowで外側にひめげます。併せて楕円形にしてみました。
.stetch {width: 300px; height: 70px; font-size: 30px; text-align: center; line-height: 70px; background-color: #37F; border: 3px #FFF dotted; border-radius: 50%; box-shadow: 0 0 0 4px #37F;}
上下二色のボックス
グラデーションを利用して上下に色を塗り分けてみました。また、それに併せて、上のはしの角だけ20%の丸みをつけました。
.joge {width: 300px; height: 70px; font-size: 30px; color: #AAA; text-align: center; line-height: 70px; background: linear-gradient(#222 80%, #CA4 80%); border-radius: 20% 20% 0 0;}
赤いリボン付いたボックス
グラデーションを利用して左上隅に赤のリボンを入れました。
.ribbon {width: 300px; height: 70px; font-size: 30px; color: #777; text-align: center; line-height: 70px; background: linear-gradient(135deg, #9FF 10%, #F00 10%, #F00 20%, #9FF 20%);}
縞模様のボックス
背景にパステルカラーの縞模様をつけました。
.stripe {width: 300px; height: 70px; font-size: 30px; color: #333; text-align: center; line-height: 70px; background-image: linear-gradient(90deg, #FEF 25%, #EEF 25%, #EEF 50%, #F5F2F2 50%, #F5F2F2 75%, #F8FFEE 75%, #F8FFEE 100%); background-size: 40px; border: 2px #55F solid; border-radius: 10px;}
額縁のようなボックス
境界線の4本を微妙に塗り分けることで、額縁のような効果を出します。
.gaku {width: 300px; height: 70px; font-size: 24px; color: #777; text-align: center; line-height: 55px; background: #FEF7EE; border-left: 10px #631 solid; border-top: 10px #742 solid; border-right: 10px #520 solid; border-bottom: 10px #592909 solid;}
まとめ
いかがでしたか?
画像を読み込んで表示するのと比べ、CSSでデザインを仕上げると、色や大きさの変更などが容易であることがメリットではないでしょうか。
クラス名をつけておくと、一斉に変換できるのも便利な点です。
CSSでできるものはできるだけCSSで済ませ、凝ったデザインの場合のみ、画像を使うというのが良いのではないでしょうか。
これからも、このサイトはより良いデザインのものを追加したり差し替えたりするかもしれません。
また、今回はワードプレスの機能の限界のためかできなかった擬似要素を使ったデザインや、背景画像を外部から取り込んだデザイン等も、別のブログでやってみたいと思います。
ちなみに、このサイトでは画像は読み込まず、ワードプレスに直接HTMLとCSSを書き込んでいます。ですから、デザインの変更も容易です。
ご参考にしていただいて、より良い色の組み合わせの色合いなどに書き換えるなどしてご活用していただければ幸いです。