読者です 読者をやめる 読者になる 読者になる

ミニものブログ

ミニチュアを作っています!

【初心者向け】コピペで使える囲み枠いろいろ


スポンサーリンク

CSSの詳しい解説を書こうかと思ったのですが、なかなか面倒な作業なので、パソコンで表示する前提なんですが、基本的な囲み枠の作り方を…。

 

紹介しているCSSのコードは、はてなブログの場合、ブログ管理画面のダッシュボードから『デザイン』→『カスタマイズ』→『デザインCSS』の項目にコピペしてください。

 

WordPressの場合は、テーマファイル内のstyle.cssというファイルに、使いたいCSSを追記すると使えるようになると思います。

 

はてなブログの例。

f:id:mini-mono:20170313014634j:plain

 

CSSを適用させる場合は、変更を保存するボタンを忘れずに…。

 

あと、念のため、元から記述してあるデザインCSSのコードは、メモ帳などにコピペして保存しておきましょう。

 

目次

1.背景を薄い青色にする

 

HTMLは以下のように書いてください。

<div class="kakomi_waku">
<p>囲みたい範囲</p>
<p>囲みたい範囲</p>
</div>

 

 CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
}

 

このCSSを、はてなブログのデザインCSSに追加してください。

 

このCSSを指定すると、以下のようになります。

 

囲みたい範囲
囲みたい範囲

 

2.上部に30ピクセルの余白を設けた薄い青の場合

 

1で紹介した囲みに、上部の余白を30ピクセルとりましょうか。その場合のCSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 0px 0px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

3.上部に30ピクセル・下部に15ピクセルの余白を設けた薄い青の場合

 

2で紹介した囲み枠は、下の部分に余裕がないので、15ピクセル分の余白をとりましょうか。

CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 15px 0px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

4.左側に10ピクセル余白をあけた薄い青枠

 

3の枠は、文字の左側に余白がありませんので、10ピクセル分、余白をとりましょうか。

CSSは、以下の通り。

.kakomi_waku {
background: #d1e8ff;/*背景色*/
padding: 30px 0px 15px 10px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

5.背景色が薄いピンクの枠

 

4の枠をベースに、背景色を薄いピンク色に染めましょう。これは簡単ですね。

.kakomi_waku {
background: #ffd1ff;/*背景色*/
padding: 30px 0px 15px 10px;/*余白 数字左から上・右・下・左*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

 ここまでくると、背景色(background)と内側の余白(padding)は、だいたいマスターできたのではないでしょうか?

 

padding(やmargin)の設定は、他のタグにもすでに指定されていることが多いので、干渉することが多く、イメージ通りの余白にならないケースが多いかもしれませんが…。

 

6.上下左右の余白が全部20ピクセルの枠

 

余白が全部、同じ数字の長さの場合、以下のようにCSSコードの短縮が可能です。

.kakomi_waku {
background: #ffd1ff;/*背景色*/
padding: 20px;/*全部の余白が同じなら数値は1つでOK*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

7.背景は薄い灰色で枠線が点線

 

6をベースに、以下のように変更します。

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: dotted;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

8.背景は薄い灰色で枠線が破線

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: dashed;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

9.背景は薄い灰色で枠線が二重線

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: double;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

10.実線で囲む

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

11.実線の色が赤い枠

.kakomi_waku {
background: #efefef;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
border-color: red;/*線の色*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

12.背景が白く実線の色が青で10ピクセルの太さの枠

.kakomi_waku {
background: #ffffff;/*背景色*/
padding: 20px;/*四方の余白*/
border-style: solid;/*線の種類*/
border-color: blue;/*線の色*/
border-width: 10px;/*線の太さ*/
}

 

見え方は以下のように。

 

囲みたい範囲
囲みたい範囲

 

 後日、追加するかもしれませんが、今回はここまで。順を追うと、囲み枠の『背景色』『余白』『枠線』が、なんとなくマスターできるかと思います。

 

今回紹介したコードは、もっと簡略化できる書き方(ショートハンド)がありますが、あえて簡略化していない部分がありますので、『もっと簡素化できるだろ!』というツッコミは、心の中だけの限定でお願いします!

 

ちなみに、長さの単位は、px(ピクセル)を使いましたが、以下のような単位も使う方が多いでしょうか。

 

  1. pt(ポイント)
  2. em(font-sizeプロパティの値を1とする単位)
  3. ex(小文字「x」の高さを1とする単位)

 

pt(ポイント)は、1/72インチのことです。emとexは、以下に図を描きましたので、ご参考に…。

 

f:id:mini-mono:20170313034109j:plain