イーブロでは過去にコピペで使えるボックスデザインの記事を書いています
しかし、私自身その記事を作りながらも、皆さんのサイトに合うデザインであれば喜ばしいことですが、「どうもこの色が・・・」とか「ここの太さがな・・・」という風にも思われてるんだろうなーと思ってたところがあります。
今回、ボックスデザインを作るための知識をＣＳＳの簡単な基礎知識も含めて書いていきます。
”作りたいけど、作り方が分からない”というなら、まずは簡単にでも作ることができるようになれば、そこからは知識の肉付けです。
また、コピペで作ったものでも少し手を加えられば、より自分に合ったサイトが作れます。
ボックスデザインを自分で変更・作成ができるように頑張ってください。
ボックスデザインを作る前にCSSの基本だけ知ろう
CSSがよく分からないと、何が書いてるのかすら分かりません。
何が書いてるか分からないと、どのように書けばいいか分からないので、簡単に基本だけはしりましょう。
CSSはclass・idタグとセットで使う
CSS(Cascading Style Sheets)はWebページにデザインをするための言語です。
ボックスデザインだけでなく、テキスト装飾やレイアウトなど様々なものに使われますが、レイアウトの変更場所を指定してあげる必要があります。
そこでHTMLのclassタグやidタグを使って指定してあげるんですが、８～９割はclassタグを使って行うので、今回全てclassタグでの解説にします。
<div class=”box”>テキスト内容</div>
■ＣＳＳ
.box{
border:1px solid #000;
}
この記述で”「テキスト内容」というテキストを黒の1pxの太さの四角で囲む”となります。
classタグで指定したclass名と範囲をCSSで指定してあげるだけです。
ボックスデザインの基本を学ぶ
ボックスデザインは基本的にborderプロパティを使います。
先ほども記述しましたが、ボックスデザインの基本となる記述とその結果を見てみましょう。
<div class=”box”>テキスト内容</div>
■ＣＳＳ
.box{
border:1px solid #000000;
}
これを基本として少しずつ色や形、幅などを変えて自分好みのボックスデザインを作っていきます。
テキストの周りの色や太さを変える
まず自分好みのborderの線や色を変える方法を理解しましょう。
borderプロパティを書くときは
.border{
1px solid #000000;
}
のように「○px solid #□□□□□□」と書きます。
この○pxの数字によって線の太さが変わり、#□□□□□□の部分はカラーコードで色を変えます。
例えば、太さを3pxにしてカラーコードを”#ff0000”（赤）に変更すると以下のようになります。
.border{
3px solid #ff0000;
}
ボックスデザインの線とテキストの間に空間を持たせる
今まで例であげたボックスデザインをみてもわかると思いますが、テキストとボックスデザインの枠との間が窮屈じゃないですか？
ただ何となく囲まれてるだけで、ボックスデザイン感があまりないですよね。
そこでテキストと枠との間に空間を作ってあげる必要があります。
paddingプロパティを使うことで自由な空間を作ることができます。
.border{
border:3px solid #ff0000;
padding:25px;
}
少し空間を広げると、ボックスデザインらしくみえます。
空間のサイズは自分の好みで変更してください。
ボックスデザインの背景の色を変える
borderのみでボックス作ると、囲み線のみで背景はサイトの背景に影響されます。
サイトの背景が白なら、ボックス内の背景も白にしかなりません。
ここでボックスデザインの背景色の変更をしましょう。
背景色を変えるときはbackground-colorプロパティを使います。
.border{
border:3px solid #003059;
padding:25px;
background-color:#d6ecff;
}
背景をかえると、少しデザイン性もあがります。
サイトに合わせて、テキストカラーも変えることで分かりやすくなります。
ボックスデザインのデザイン性を上げる方法
ボックスデザインの角を丸くする
ボックスデザインの角を丸くして少しおしゃれにしましょう。
border-radiusプロパティを使うことで、ボックスの角を丸くすることができます。
丸さのサイズはpxで設定します。
理論的に”10pxがこんな丸さ”というのはありますが、実際に数字を設定・変更しながら理想の形にするようにしてください。
.border{
border:3px solid #003059;
padding:25px;
background-color:#d6ecff;
border-radius:10px;
}
丸さの大きさを小さくして角を取るだけで柔らかい印象になります。
角の丸みを大きくして、かわいくておしゃれなボックスにもできます。
角を付ける場所を自分で自由に変更する
border-radiusを使って、ボックスデザインの角を丸く設定すると、４つの角全てが同じ丸みになります。
１つの角だけを丸くしたいとか、少し個性的なボックスを作るときは別のプロパティを使います。
border-top-right-radius: ○px;
border-bottom-right-radius: ○px;
border-bottom-left-radius: ○px;
の４つを使います。
角の丸みを個別に変更できるプロパティです。
.border{
border:3px solid #003059;
padding:25px;
background-color:#d6ecff;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 10px;
}
丸さの大きさを小さくして角を取るだけで柔らかい印象になります。
角の丸みを大きくして、かわいくておしゃれなボックスにもできます。
１から作らなくても、コピペ利用のCSSを自分なりにカスタマイズできる
「１から覚えるボックスデザイン（囲み枠）の作り方」というタイトルですが、CSSで１から作らないとしても、今回の知識だけでも幅が広がります。
https://eblogate.net/css-flame-sample”]
イーブロでもボックスデザインをコピペで使う記事を紹介してますが、全ての人にマッチするわけではないと思っています。
ここの基本を覚えてCSSで何が書かれてるか分かると、どこをどのように変更したらいいのか分かります。
ボックスは記事を分かりやすく書くときに必要な「ツール」といってもいいものです。
自分なりにカスタマイズして、自分のサイトにより良くマッチさせてくださいね。
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
