【はてなブログ】文章を囲ういろいろな枠の作り方

f:id:sunko-chan:20210520155124p:plain

記事の文章を枠で囲む。
見た目にもかっこいいし、読みやすくなりますよね。

この枠、いろいろいじることでいろんな枠を作ることができるんです。

結構簡単にできるのでいろいろ試してみてね。

枠のコード

枠のコードと言っても組み合わせでいろいろできるので、とりあえず1つの例を挙げます。

こんな感じになるよ。
改行は<br>を使ってね。

めんどくさいからこれでいいやって人は下のコードを貼り付けるだけで使えます。

<div style="display:inline-block; background:#fff;
 padding: 10px; font-weight: bold; border:3px double #fc4a1a;
 border-radius: 10px;">ここに本文<br>本文2行目</div>

枠をカスタマイズ

先ほど枠のコードを紹介しましたが、これをいじることで様々な枠を表示することができます。

<div style=""の""で囲まれた部分をいじるわけですね。

枠の種類

どんな枠で囲むかですね。

これは
border:3px double #fc4a1a;
の部分です。

border:枠の太さ 枠の種類 枠の色;
で指定します。

枠の太さは数字が大きければ太くなります。
太さはpxで指定します。

枠の種類は

solid:1本線で囲む
double:2本線で囲む
dotted:点で囲む
dashed:ちょっと長い点で囲む
groove : へこんだ感じの枠で囲む
ridge : 盛り上がった感じの枠で囲む
hidden:囲む線なし

があります。

solidの場合

doubleの場合

dottedの場合

dashedの場合

grooveの場合

ridgeの場合

hiddenの場合

こんな感じですね。
hiddenの場合だけわかりにくいので枠の中の色を変えています。

hiddenの場合は枠自体がなくなるので枠の太さ、枠の色は省略できます。

余談ですが、<div style=""></div>の中に新たに
<div style=""></div>を挿入することで枠の中に枠を作ることもできます。

こんな感じに
枠の中に
新たに枠を
作れるよ。

なお、枠で囲むという趣旨とは少し離れますが、
border-線を引く位置と指定することでその位置にだけ線を引くこともできます。

border-top : 文字の上に線を引く
border-bottom : 文字の下に線を引く
border-left : 文字の左に線を引く
border-right : 文字の右に線を引く

border-topの場合

border-bottomの場合

border-leftの場合

border-rightの場合

もちろん、これらを組み合わせることもできますし、
それぞれの線を個別に設定することもできます。

こんな感じ

角を丸くする

枠の四隅に丸みを付けたい場合は

border-radius: 丸みの強さ;

で指定します。

数字が大きくなるほど枠の四隅が丸くなります。
丸みの強さもpxで指定します。

border-radius: 10px;の場合

border-radius: 20px;の場合

border-radius: 30px;の場合

border-radiusは30px以上にしても変わらないと思います。

また、border-radiusの数字を10px 0 10px 0;のようにすると、
枠の角ごとに個別に丸みを指定することもできます。

数字は左上、右上、右下、左下の順に対応しています。
丸みをつけたくない場所は0を指定します。

枠の四隅を丸くする

border-radius: 10px 0 20px 30px;と指定してみました。
左上が10px、右上が丸みなし、右下が20px、左下が30pxですね。

文字に合わせる

枠で囲むとき何も指定しないと画面全体を枠で囲み、
文字数が少ないと変な感じになります。

そこで、文字数に合わせて枠の大きさを変えたい場合、

display:inline-block;

を追加します。

display:inline-block;なしの場合

display:inline-block;ありの場合

枠の中の文字数に合わせて枠の大きさが変わるよ。

文字寄せ

枠の中の文字を中央に寄せたり、右に寄せたりすることもできます。

その場合は

text-align: 寄せる位置;

で指定します。

center : 中央寄せ
right :右寄せ

です。

leftで左寄せになりますが、省略できます

text-align: center;の場合

text-align: right;の場合

文字を太字にする

文字を太字にしたい場合は

font-weight: bold;

を使います。

font-weight: bold;なしの場合

font-weight: bold;ありの場合

文字の特定の部分だけ太字にしたい場合は太字にしたい文字を
<span style="font-weight: bold"></span>で囲みます。

こんな感じになるよ。

文字の色を変える

文字の色を変えたい場合は

color: 色の指定;

を使います。

色の指定はカラーコード、またはその色の英名で指定します。

色の指定は原色大辞典のサイトを参考にしてみてください。

黒ならblackまたは#000000になります。

color: green;の場合

color: #ff0000(赤);の場合

枠の中の色を変える

文字の色と同様に枠の中の色を変えることもできます。

枠の中の色は

background: 色の指定;

で指定します。

background: green;の場合

background: #ff0000(赤);の場合

枠の中に余白を作る

枠の中に余白を作るには

padding: 余白の大きさ;

を指定します。

指定の方法はpxemです。

pxとemの違いですが、

px : 絶対値
em : 相対値

となります。

pxはそのまま数字が大きさになるのでわかりやすいと思います。

emはちょっとわかりにくいかもしれません。

ブログでテンプレートを使ってたりすると、
そのテンプレートにはあらかじめ文字の大きさが設定されています。

そのあらかじめ設定されている文字の大きさを基準にしたものがemです。
なので、emは人によって大きさが変わります。

em 2はそのブログで使われている文字の大きさの2倍の大きさってことですね。

つまり、paddingは指定した文字の大きさ分、枠の中に余白を作るということです。

padding: 0pxまたは指定しなかったの場合

padding: 1em;の場合

padding: 10px;の場合

また、paddingもpadding: 10px 2em 0 50px;とすることで
borderと同じように個別に設定可能です。

それぞれ左から上、右、下、左に対応しています。
また、pxとemを同時に使用することもできます。

padding: 10px 2em 0 50px;の場合

枠の外に余白を作る

枠の外に余白を作りたい場合は

margin: 余白の大きさ;

を使います。

余白の大きさの指定はpaddingの時と同じです。

paddingが枠の中の文字に対しての余白にで、marginは枠の外の文字に対しての余白、
つまり枠の上下左右の文字に余白を作ります

枠の外周に見えない壁を作ると言えばわかりやすいでしょうか。

marginも余白の大きさはpxemで指定します。

margin: 指定なしの場合
壁に阻まれてないよ。
壁に阻まれてないよ。

margin: 30px;の場合
壁に阻まれてるよ。

margin: 3em;の場合

壁に阻まれてるよ。

文字の大きさを変える

文字の大きさを変える場合

font-size: 文字の大きさ;

を使います。

文字の大きさはpx、emどちらでも大丈夫です。

font-size: 30px;の場合

文字を斜体にする

文字を斜体にする場合

font-style: italic;

を使います。

ただ、お使いのブラウザやフォントによっては機能しない場合があります。

こんな感じになるよ。

文字に下線を引く

文字に下線を引く場合

text-decoration: underline;

を使います。

こんな感じになるよ。

文字に打ち消し線を引く

文字に打ち消し線を引く場合は

text-decoration: line-through;

です。

こんな感じになるよ。

まとめ

ここまで細かく説明してきたけど、簡単に言うと以下の通り。

枠で囲む
border:枠の太さ 枠の種類 枠の色;
border-線を引く位置:枠の太さ 枠の種類 枠の色;で個別に線を引く
線を引く位置
border-top : 文字の上に線を引く
border-bottom : 文字の下に線を引く
border-left : 文字の左に線を引く
border-right : 文字の右に線を引く

枠の角を丸くする
border-radius: 丸みの強さ;
border-radiusの数字を10px 0 10px 0;
数字は左上、右上、右下、左下の順に対応

枠を文字に合わせる
display:inline-block;

文字を寄せる
text-align: 寄せる位置;
寄せる位置
center : 中央寄せ
right :右寄せ

文字を太字にする
font-weight: bold;

文字の色を変える
color: 色の指定;

枠の背景の色を変える
background: 色の指定;

枠の中の余白を変える
padding: 余白の大きさ;
padding: 10px 2em 0 50px;
上、右、下、左に対応

枠の外の余白を変える
margin: 余白の大きさ;
margin: 10px 2em 0 50px;
上、右、下、左に対応

文字の大きさを変える
font-size: 文字の大きさ;

文字を斜体にする
font-style: italic;
※できない場合あり

文字に下線を引く
text-decoration: underline;

文字に打ち消し線を引く
text-decoration: line-through;

これらをうまく組み合わせて自分の思い通りの枠で囲みましょう。

厳密には違うのかもしれないけど、どんどん後ろにつけ足していくだけでできるよ!