CSSを使って囲み枠を作ってみよう!
今回は「CSSを使ってノックス(囲み枠)」を作ってみようと思います。
きらり
結耶
それに自分で囲み枠を作れると結構楽しいよ~w
ということで今回はいろいろな囲み枠を作りながら基本的なCSSなどを紹介していきます。
基本的なCSS
まずはボックスを作るために基本的なCSSを紹介します。
marginとpadding
marginとpaddingはどちらも余白を指定するするものです。
ですが、marginは要素の外側、paddingは要素の内側の余白を指定します。
padding: 値 ;
marginとpaddingとも値はpx(ピクセル)、em(エム)、%(パーセント)などの単位で指定します。
- 値1つ・・・上下左右
- 値2つ・・・上下 左右
- 値3つ・・・上 左右 下
- 値4つ・・・上 右 下 左
ボックス(囲み枠)を中央に表示
ボックスを中央に表示させたい場合は、marginnの左右の値を「auto」にするとボックスは中央に表示されます。
例: margin:20px auto;
widthとheight
widthは横幅、heightは高さを指定します。
値はpx(ピクセル)やem(エム)、%(パーセント)などの単位で指定します。
ユーザーはパソコンやタブレット、スマホなどの端末でサイトを見ます。
それらの端末の画面の大きさは様々です。
widthで横幅を指定すると囲み枠の横幅が画面より大きいと画面に収まらずはみ出してしまいます。
また、スマホなどの小さい画面合わせて横幅を指定してパソコンで見ると小さ過ぎたりします。
heightも指定指定するとパソコンで見て綺麗に収まっていてもスマホで見ると枠の中に文章などが収まらくなってしまいます。
これらの問題を解決するために、max-width (最大幅)やメディアクエリを使って指定するといいと思います。どうしてもwidthで指定したいときは%(パーセント)を使うようにするといいと思います。
heightの場合は高さを固定するときのみ使って必要なければ指定する必要はないと思います。
※メディアクエリの使い方は以下の記事の中で説明しています。
枠線
borderを使うと上下左右の枠線をまとめて指定できます。
- none・・・線は表示されず、太さは「0」になる(初期値)
- solid・・・一本線(実線)
- double・・・二重線
- groove・・・立体的な窪んだような線
- ridge・・・立体的な隆起したような線
- inset・・・左と上の線が暗く、右と下の線が明るく表示され、線で囲われた領域全体が窪んで見える
- outset・・・左と上の線が明るく、右と下の線が暗く、線で囲われた領域全体が隆起して見える。
- dashed・・・破線
- dotted・・・点線
上下左右の線を個別に指定
border-bottom: 太さ 線種 色 ; 下の線
border-left: 太さ 線種 色 ; 左の線
border-right: 太さ 線種 色 ; 右の線
太さ・線種・色で指定する
border-style: 線種 ;
border-color: 色 ;
- 値1つ・・・上下左右
- 値2つ・・・上下 左右
- 値3つ・・・上 左右 下
- 値4つ・・・上 右 下 左
太さ・線種・色それぞれ値1つで上下左右、2つで上下 左右と指定することができます。
きらり
結耶
囲み枠を作ってみよう!
では実際に作ってみようと思います。
きらり
結耶
とりあえずシンプルな囲み枠を作ってみよう!
コピーして使う場合はご自分のサイトに合わせて変更をしてください。
またお使いのテーマなどによってfont-size(文字サイズ)やline-height(行間)の指定してください。
基本的な囲み枠
上で紹介したCSSを設定しただけのものです。
<div class="box1">ここに内容を書く</div>
.box1 {
margin:20px auto;
padding:1em;
border:2px solid gray;
}
二重線
※上記のCSSの4行目を border:6px double gray; に変更して枠線を二重線にしました。
点線
線の色も変えてみました。
※border:5px dotted orange;で指定
角丸
border-radiusを追加して角を丸くしました。
<div class="box2">ここに内容を書く</div>
.box2 {
margin:20px auto;
padding:1em;
border:2px solid gray;
border-radius:0.5em;
}
関連記事 CSSを使って画像を丸く表示する方法
影付き
box-shadowを追加して影をつけました。
<div class="box3">ここに内容を書く</div>
.box3 {
margin:20px auto;
padding:1em;
border:2px solid gray;
border-radius:0.5em;
box-shadow:5px 5px 5px #555;
}
関連記事 CSSを使って影をつける
背景色をつける(線なし)
これだけでもだいぶ感じが変わりますね。
<div class="box4">ここに内容を書く</div>
.box4 {
margin:20px auto;
padding:1em;
background:orange;
color:#fff;
}
背景色+上下に線
ちょっとおしゃれな感じになりますね。
<div class="box5">ここに内容を書く</div>
.box5 {
margin:20px auto;
padding:1em;
background:orange;
color:#fff;
border-top:2px dashed #fff;
border-bottom:2px dashed #fff;
box-shadow:0 0 0 5px orange;
}
黒板風
これはなかなか存在感がありますねw
<div class="box-kokuban">ここに内容を書く</div>
.box-kokuban {
margin:20px auto;
padding:1em;
background:#0B614B;
color:#fff;
border:8px ridge chocolate;
}
最後に
結耶
きらり
ボクもあーゆーの作りたい~!
結耶
今回はmarginやpadding、borderの使い方も含めこのような記事を書いてみました。
今回ご紹介した囲み枠は見た目もCSSもとてもシンプルなものです。
「囲み枠を作る」というと難しそうな気がしますが、コツを覚えれば初心者の人でも自分で作ることができます。
また記事にに囲み枠を使うとそれだけでも記事にメリハリがついてユーザーにとっても読みやすくなるんではないでしょうか。
ディスカッション
コメント一覧
こんばんは
ランキングから来ました
囲み枠を作ってみようと思います
> besconさん
こんばんは。
コメントありがとうございます。
囲み枠って難しそうですが、意外と基本的なCSSで作れます。
簡単なものでも自分で作ると嬉しいものですよ(*^^*)
こんにちは。
いつもお世話になっています。
今回の記事もブックマークさせていただきます。
囲み枠の基本的なことといってもたくさんありました。
少しずつ覚えていこうと思います。ありがとうございます。
> takafumiさん
こんばんは。
お返事遅くなり申し訳ありませんm(_ _)m
CSSはいろいろありますからね。徐々に覚えてください。
いろいろできるようになると楽しいですよ(*^^*)