文章全体を四角で囲みたい！
CSSで指定してやる方法もあるけど、今回は、HTMLで直接指定する方法。
ちょっと見にくいです…。
必要な箇所に、目次から飛ぶのがいいかもしれません…(´_ゝ｀)
<div> タグのstyle属性を使う。
枠線の指示は、"border: ......" です。
枠線のタイプを選ぶ。
<div style="border: ■;"> ■ </div>
例えばコレ。
border: solid; は、枠線を実線に。
border: dotted; は、枠線を点線に。
border: dashed; は、枠線を破線に。
border: double; は、枠線を二重線に。
枠線の太さを選ぶ。
<div style="border: ■px solid;"> ■px </div>
例えばコレ。
枠線に余白をつける。
余白については、Chromeのデベロッパーツールでみかけた
この図が分かりやすいかも。
対象のすぐ周りの部分がpadding。
その周りがborderで、さらに周りがmargin。
ここでは、paddingで設定してみます。
<div style="padding: ■px; border: 1px solid;"> ■px </div>
例えばコレ。
応用編：padding以外の余白も設定。
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid;">
margin-bottom: 10px </div>
例えばコレ。
これと比べて…
枠とこの文字の間に少し空白ができました (*´▽｀*) この上の部分の空白。
…説明が分かりにくいですね (-"-;)
枠線の色を設定。
カラーコードの指示を出します。
<div style="border: 1px solid #■;"> ■ </div>
例えばコレ。
カラーコードについては、こちらもご参考にどうぞ。
枠内の文字の色を設定。
<div style="border: 1px solid #000000; color: #■;"> ■ </div>
例えばコレ。
ちなみに、borderのところに#■■■■■■ を書かなかったら…
<div style="border: 1px solid; color: #ff0000;"> red </div>
例えばコレ。
枠も文字も全部色が変わっちゃいます。 Σ(*´Д｀)
枠の中の色を設定。
<div style="border: 1px solid; background-color: #ccff99;"> #ccff99 </div>
例えばコレ。
枠の 横幅を設定。
<div style="border: 1px solid; width: 200px;"> 200px </div>
例えばコレ。
【2018年7月1日追記】
先日気づいたのですが、
pxで幅を指定すると、例えばスマホなどの画面が小さいもので見るときに、
横幅が長くなりすぎたりすることがありました。
画面に併せて調整ということを考えると、
width: 50%、などのような、%表示の方がよいみたいです。(´_ゝ｀)
枠の角が丸いもの。
<div style="border: 1px solid ; border-radius: ■px;"> ■px </div>
例えばコレ。
応用編：枠の角の指定を変えてみる
左から順に、左上、右上、右下、左下。
<div style="border: 5px solid ; border-radius: ■px ■px ■px ■px;">
■px ■px ■px ■px </div>
例えばコレ。
一カ所だけ角丸にしてみました。(*´▽｀*)
0だと、カーブの指定なしって意味ですね。
※widthで長さも変えてます。
まとめ・雛形
これまでに出てきたものをまとめると…
<div style="padding: px;
margin-bottom: px;
border: px solid # ;
color: #;
background-color: #;
width: px;
border-radius: px;">
■■■ </div>
ここに適当に好きな数を入れます。いらないものは空白のままで。
上のは、こうなりました。
こんな感じで、アレンジできますね°˖✧◝(⁰▿⁰)◜✧˖°
好きなパターンの雛形を作っておくと、なお使いやすくなるかと思います。
今度作ろうかな～。(*´▽｀*)
パターンの雛形つくりました
コピペしてそのまま使うも、編集して使うもアリです。
…というか、自分が使いたいから作っただけですが、、
よろしければどうぞご利用ください。(*´з`)
