生涯、学習していきたい

2018年はプログラミング学習に凝っています。

<コピペ用>ブログの本文を枠で囲っちゃおう♪

ブログの本文を枠で囲みたいな、と思ったことはありませんか?

今日はブログを枠で囲んでみましょう!

はてなブログだけではなく、ほかのブログサービスでももちろん使えます。

 

f:id:ponnkichi:20180310212015p:plain

 

 

本文を枠で囲む方法

このようなイメージの枠を作りましょう。

 

こんな風に枠で囲います!

 

「html編集画面」を開いて、このように記述しましょう。

 <div style="border: 1px solid #ccc;">こんな風に枠で囲います!</div>

 

このように書くと、上のように文を線で囲むことができます。 

 

まずは、囲みたい文字の前に

<div style="border">

 

 を書き入れます。

線の種類は、

 

"border:1px solid #ccc"

 

赤字の部分を変えることで指定することができます。

ひとつひとつ見ていきましょう。 

線の太さを設定する

 線の太さは、

 

"border:1px solid #ccc"

 

 この場合「1px」となっています。

ここの数字をいじれば、線を太くすることができます。

線の太さは2pxです
 <div style="border: 2px solid #ccc;">線の太さは2pxです</div>

 

線の太さは3pxです

 <div style="border: 3px solid #ccc;">線の太さは3pxです</div>

 

線の太さは10pxです

  <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>

 

線の種類はinsetです

 <div style="border: 3px inset #ccc;">線の種類は実線です</div>

 

線の種類はoutsetです

 <div style="border: 3px outset #ccc;">線の種類は実線です</div>

 

insetとoutsetは立体的に見せるもの(影をつける)なので、他の色よりも濃く見えるのですね。

 

線の種類はgrooveです

 <div style="border: 3px groove #ccc;">線の種類は実線です</div>

 (grooveは、立体的に窪んだ線で表示されます)

 

線の種類はridgeです

 <div style="border: 3px ridge #ccc;">線の種類は実線です</div>

 (ridge)は、立体的に浮かび上がった線で表示されます)

 

borderの種類については、ドットインストールさんのCSS入門編の#11でも学習しています。

ponnkichi.hatenablog.com

 

線の色を変える

線の色を変えるときには、この部分を変えます。 

<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などのように、色のコードを書く方法です。

 色コードは、こちらのサイトを参考にさせていただきました。

www.colordic.org

ありがとうございます!

  

線の色は#afeeeeです

 <div style="border: 3px solid #afeeee;">線の色は#afeeeeです</div>

 

 

線の色は#7fffd4です

<div style="border: 3px solid #7fffd4;">線の色は#7fffd4です</div>

 

先ほどのサイトでは、色コードと一緒に色名も書いてあるので、

色名のほうを記入してもいいですね。 

 

 

 

色については、ドットインストールさんのCSS入門編の#09でも学習しています。

ponnkichi.hatenablog.com

CSS3の#03では、透明度もプラスした考え方を学習しています。

ponnkichi.hatenablog.com

 

線に余白をつける

このままだと、線が文字に密着しすぎて窮屈な印象を受けるかもしれません。

そんなときには、線と文字の間に余白をつけましょう。

 

余白は0です

 <div style="border: 3px solid #afeeee;">余白は0です</div>

 

余白は10pxです

 <div style="border: 3px solid #afeeee; padding: 10px;">余白は10pxです</div>

 

 

余白は上下が10px、左右が30pxです

 <div style="border: 3px solid #afeeee; padding: 10px 30px;">余白は上下が10px、左右が30pxです</div>

 

このように、borderプロパティと同じようにpaddingプロパティを書くと、ゆとりのある感じになります。

 

paddingについては、

ドットインストールさんのCSS入門編の#12で学習しています。

くわしくはこちらをご覧くださいね。

ponnkichi.hatenablog.com

 

背景に色を塗りたい

本文の背景に色をつけたい場合があると思います。

  

余白は10pxです

 <div style="border: 3px solid #afeeee; padding: 10px; background: #dcdcdc;">余白は10pxです</div>

 

そのようなときには、backgroundを書き足しましょう。

 

長い文でもこのとおりです。

 

ブログのカスタマイズは、最初は難しいなあと思ったのですが、
学習をすすめていくうちにとても楽しくなりました。
htmゃcssを学ぶと、できることが増えてきてとっても楽しいですね!
これからもたくさん学習していきたいと思います。
 
 <div style="border: 3px solid #1F91BE; padding: 10px; background: #CAE7F2;">(ここに文)</div>
 

線の角を丸めたい

最後に、線の角を丸くしてみましょう。
角のまるさは10pxです

<div style="border: 3px solid #afeeee; padding: 10px; border-radius: 10px;">角のまるさは10pxです</div>

 

border-radiusをつけます。数字は、角のまるさの大きさです。

 

 

角のまるさは20pxです

 <div style="border: 3px solid #afeeee; padding: 10px; border-radius: 20px;">角のまるさは20pxです</div>

 

角のまるさは30pxです

 <div style="border: 3px solid #afeeee; padding: 10px; border-radius: 30px;">角のまるさは30pxです</div>

 

border-radiusに関しては、

CSS3の#09でも学習しています。

pxのほかに、%も使えるんですよ!

ponnkichi.hatenablog.com

50%と指定すれば、まんまるにすることもできるんですよ♪

 

 

ではこのあたりで。

  

大切な部分や告知文、強調したいところなどは
線で囲うととっても読みやすくなりますよね。
また、引用する部分<blockquote>をカスタマイズするときにもとっても役に立つと思います。
伝え方が未熟なところはありますが、楽しんでいただけるととっても嬉しいです!
長くなってしまいましたが、読んでくださり、どうもありがとうございました!
 

<div style="border: 3px dotted #1B8EBC; padding: 30px; background: #CEF1ED; border-radius: 50px;">(ここに文)</div>