スポンサーリンク

CSSを使って囲み枠を作ってみよう!

2019年6月30日HTML・CSS

今回は「CSSを使ってノックス(囲み枠)」を作ってみようと思います。

きらり

きらり

「ボックス(囲み枠)」ってなんだか難しそうだね(^^;
結耶

結耶

でもボックスって意外と基本的なCSSで出来ちゃうんだよね~Ψ( ̄∇ ̄)Ψ
それに自分で囲み枠を作れると結構楽しいよ~w

ということで今回はいろいろな囲み枠を作りながら基本的なCSSなどを紹介していきます。

スポンサーリンク

基本的なCSS

まずはボックスを作るために基本的なCSSを紹介します。

marginとpadding

marginpaddingはどちらも余白を指定するするものです。
ですが、marginは要素の外側、paddingは要素の内側の余白を指定します。

margin(マージン)

要素(ボックス)padding(パディング)

テキスト
CSSmargin: 値 ;
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の場合は高さを固定するときのみ使って必要なければ指定する必要はないと思います。

※メディアクエリの使い方は以下の記事の中で説明しています。

枠線

CSSborder:太さ 線種 色;

borderを使うと上下左右の枠線をまとめて指定できます。

線種

  • none・・・線は表示されず、太さは「0」になる(初期値)
  • solid・・・一本線(実線)
  • double・・・二重線
  • groove・・・立体的な窪んだような線
  • ridge・・・立体的な隆起したような線
  • inset・・・左と上の線が暗く、右と下の線が明るく表示され、線で囲われた領域全体が窪んで見える
  • outset・・・左と上の線が明るく、右と下の線が暗く、線で囲われた領域全体が隆起して見える。
  • dashed・・・破線
  • dotted・・・点線

上下左右の線を個別に指定

CSSborder-top::太さ 線種 色;  上の線
border-bottom: 太さ 線種 色 ;  下の線
border-left: 太さ 線種 色 ;  左の線
border-right: 太さ 線種 色 ;   右の線

太さ・線種・色で指定する

CSSborder-width:太さ ;
border-style: 線種 ;
border-color: 色 ;
値の指定

  • 値1つ・・・上下左右
  • 値2つ・・・上下  左右
  • 値3つ・・・上  左右  下
  • 値4つ・・・上  右  下  左

太さ・線種・色それぞれ値1つで上下左右、2つで上下  左右と指定することができます。

きらり

きらり

へえー、線を個別に指定すると太さや線種、色が変えられるんだね!
結耶

結耶

そういうことになるね(*^^*)

囲み枠を作ってみよう!

では実際に作ってみようと思います。

きらり

きらり

これでボックス(囲み枠)ができるの?
結耶

結耶

まぁ、囲み枠のデザインや使ってるテーマによって背景色を指定したりするよ。
とりあえずシンプルな囲み枠を作ってみよう!

コピーして使う場合はご自分のサイトに合わせて変更をしてください。
またお使いのテーマなどによってfont-size(文字サイズ)やline-height(行間)の指定してください。

基本的な囲み枠

もっとも簡単でシンプルな囲み枠です。
上で紹介したCSSを設定しただけのものです。

HTML
<div class="box1">ここに内容を書く</div>
CSS
.box1 {
    margin:20px auto;
    padding:1em;
    border:2px solid gray;
}

二重線

上の囲み枠の枠線の太さを太くし二重線にしてみるとこんな感じになります。

※上記のCSSの4行目を border:6px double gray; に変更して枠線を二重線にしました。

点線

枠線を点線にするとこんな感じになります。
線の色も変えてみました。

※border:5px dotted orange;で指定

角丸

角を丸くしたシンプルな囲み枠です。
border-radiusを追加して角を丸くしました。

HTML
<div class="box2">ここに内容を書く</div>
CSS
.box2 {
    margin:20px auto;
    padding:1em;
    border:2px solid gray;
    border-radius:0.5em;
}

関連記事  CSSを使って画像を丸く表示する方法

影付き

角を丸くして影を付けたシンプルな囲み枠です。
box-shadowを追加して影をつけました。

HTML
<div class="box3">ここに内容を書く</div>
CSS
.box3 {
    margin:20px auto;
    padding:1em;
    border:2px solid gray;
    border-radius:0.5em;
    box-shadow:5px 5px 5px #555;
}

関連記事  CSSを使って影をつける

背景色をつける(線なし)

背景色を指定して文字色を変えただけの囲み枠です。
これだけでもだいぶ感じが変わりますね。

HTML
<div class="box4">ここに内容を書く</div>
CSS
.box4 {
    margin:20px auto;
    padding:1em;
    background:orange;
    color:#fff;
}

背景色+上下に線

上と下に線を入れてみました。
ちょっとおしゃれな感じになりますね。

HTML
<div class="box5">ここに内容を書く</div>
CSS
.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

HTML
<div class="box-kokuban">ここに内容を書く</div>
CSS
.box-kokuban {
    margin:20px auto;
    padding:1em;
    background:#0B614B;
    color:#fff;
    border:8px ridge chocolate;
}

最後に

結耶

結耶

結構長くなってしまいましたね。今回はこれくらいにしておこうか!
きらり

きらり

えー!結耶は「タイトル付き」の囲み枠使ってるでしょ!?
ボクもあーゆーの作りたい~!
結耶

結耶

それはまた今度ね。とりあえず今日は基本的なものだけにしておく。

今回はmarginやpadding、borderの使い方も含めこのような記事を書いてみました。

今回ご紹介した囲み枠は見た目もCSSもとてもシンプルなものです。
「囲み枠を作る」というと難しそうな気がしますが、コツを覚えれば初心者の人でも自分で作ることができます。

また記事にに囲み枠を使うとそれだけでも記事にメリハリがついてユーザーにとっても読みやすくなるんではないでしょうか。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM