<コピペ用>ブログの本文を枠で囲っちゃおう♪
ブログの本文を枠で囲みたいな、と思ったことはありませんか?
今日はブログを枠で囲んでみましょう!
はてなブログだけではなく、ほかのブログサービスでももちろん使えます。
本文を枠で囲む方法
このようなイメージの枠を作りましょう。
「html編集画面」を開いて、このように記述しましょう。
<div style="border: 1px solid #ccc;">こんな風に枠で囲います!</div>
このように書くと、上のように文を線で囲むことができます。
まずは、囲みたい文字の前に
<div style="border">
を書き入れます。
線の種類は、
"border:1px solid #ccc"
赤字の部分を変えることで指定することができます。
ひとつひとつ見ていきましょう。
線の太さを設定する
線の太さは、
"border:1px solid #ccc"
この場合「1px」となっています。
ここの数字をいじれば、線を太くすることができます。
<div style="border: 3px solid #ccc;">線の太さは3pxです</div>
<div style="border: 10px solid #ccc;">線の太さは10pxです</div>
10pxになると、かなり太い感じがしますね^皿^
線の種類を変える
線の種類を変えるときには、ここを変えます。
<div style="border: 3px solid #ccc;">線の種類は実線です</div>
実線の場合には「solid」になります。
ほかには…
<div style="border: 3px dotted #ccc;">線の種類は実線です</div>
<div style="border: 3px dashed #ccc;">線の種類は実線です</div>
<div style="border: 3px doubled #ccc;">線の種類は実線です</div>
<div style="border: 3px inset #ccc;">線の種類は実線です</div>
<div style="border: 3px outset #ccc;">線の種類は実線です</div>
insetとoutsetは立体的に見せるもの(影をつける)なので、他の色よりも濃く見えるのですね。
<div style="border: 3px groove #ccc;">線の種類は実線です</div>
(grooveは、立体的に窪んだ線で表示されます)
<div style="border: 3px ridge #ccc;">線の種類は実線です</div>
(ridge)は、立体的に浮かび上がった線で表示されます)
borderの種類については、ドットインストールさんのCSS入門編の#11でも学習しています。
線の色を変える
線の色を変えるときには、この部分を変えます。
<div style="border: 3px solid #ccc;">線の太さは3pxです</div>
線の色の名前を書く
<div style="border: 3px solid red;">線の色は赤です</div>
<div style="border: 3px solid red;">線の色は青です</div>
<div style="border: 3px solid lightgreen;">線の色はライトグリーンです</div>
<div style="border: 3px solid tomato;">線の色はトマトです</div>
「トマト」という色名がかわいくて気に入っています^皿^
色名を書くのも楽しいですね^^
線の色のコードを書く
#cccなどのように、色のコードを書く方法です。
色コードは、こちらのサイトを参考にさせていただきました。
ありがとうございます!
<div style="border: 3px solid #afeeee;">線の色は#afeeeeです</div>
<div style="border: 3px solid #7fffd4;">線の色は#7fffd4です</div>
先ほどのサイトでは、色コードと一緒に色名も書いてあるので、
色名のほうを記入してもいいですね。
色については、ドットインストールさんのCSS入門編の#09でも学習しています。
CSS3の#03では、透明度もプラスした考え方を学習しています。
線に余白をつける
このままだと、線が文字に密着しすぎて窮屈な印象を受けるかもしれません。
そんなときには、線と文字の間に余白をつけましょう。
<div style="border: 3px solid #afeeee;">余白は0です</div>
<div style="border: 3px solid #afeeee; padding: 10px;">余白は10pxです</div>
<div style="border: 3px solid #afeeee; padding: 10px 30px;">余白は上下が10px、左右が30pxです</div>
このように、borderプロパティと同じようにpaddingプロパティを書くと、ゆとりのある感じになります。
paddingについては、
ドットインストールさんのCSS入門編の#12で学習しています。
くわしくはこちらをご覧くださいね。
背景に色を塗りたい
本文の背景に色をつけたい場合があると思います。
<div style="border: 3px solid #afeeee; padding: 10px; background: #dcdcdc;">余白は10pxです</div>
そのようなときには、backgroundを書き足しましょう。
長い文でもこのとおりです。
学習をすすめていくうちにとても楽しくなりました。
htmゃcssを学ぶと、できることが増えてきてとっても楽しいですね!
これからもたくさん学習していきたいと思います。
線の角を丸めたい
<div style="border: 3px solid #afeeee; padding: 10px; border-radius: 10px;">角のまるさは10pxです</div>
border-radiusをつけます。数字は、角のまるさの大きさです。
<div style="border: 3px solid #afeeee; padding: 10px; border-radius: 20px;">角のまるさは20pxです</div>
<div style="border: 3px solid #afeeee; padding: 10px; border-radius: 30px;">角のまるさは30pxです</div>
border-radiusに関しては、
CSS3の#09でも学習しています。
pxのほかに、%も使えるんですよ!
50%と指定すれば、まんまるにすることもできるんですよ♪
ではこのあたりで。
線で囲うととっても読みやすくなりますよね。
また、引用する部分<blockquote>をカスタマイズするときにもとっても役に立つと思います。
伝え方が未熟なところはありますが、楽しんでいただけるととっても嬉しいです!
長くなってしまいましたが、読んでくださり、どうもありがとうございました!
<div style="border: 3px dotted #1B8EBC; padding: 30px; background: #CEF1ED; border-radius: 50px;">(ここに文)</div>