アメブロ・エクセル限定パソコンサポーターのおおはたけいこです。
パソコン苦手～
とりあえず使えるけど、、、
ブログってどうやって書いたらいいの？
カスタマイズなんてできるわけない！
そんな方のため、できる限りわかりやすく
お伝えしていきます★
ブログの記事を書くとき、
文字の色やサイズを変えてみたり、、、
絵文字や画像を使ってみたり、、、
読みやすいように、行間を開けてみたり、、、
目立たせたいところは、太字にしたり、、、
いろいろ工夫しますよね。
わたしも、
ヘッダーメニュー追加の手順
という使い方をしている、
＜div＞タグ
この＜div＞＜/div＞で囲むと、
見えないブロックのようなものができるのです。
そこに、枠や背景を指定すると、
いろんな使い方ができるのです。
＜div＞タグの基本編は、コチラ↓
ブログ記事を部分的に枠で囲みたい
基本編では、枠のカタチをメインにお伝えしました。
今回は、枠線いろいろアレンジ★
◆枠線の種類を変えてみましょう。
[solid]は、実線ですが、それ以外にもこんなに種類があります。
[solid]は、実線
<div style="border:5px solid #FF6C37; padding:10px;">[solid]は、実線</div>
[dotted]は、点線
<div style="border:5px dotted #FF6C37; padding:10px;">[dotted]は、点線</div>
[dashed]は、破線
<div style="border:5px dashed #FF6C37; padding:10px;">[dashed]は、破線</div>
[double]は、二重線
<div style="border:5px double #FF6C37; padding:10px;">[double]は、二重線</div>
[inset]は、内向き立体
<div style="border:10px inset #FF6C37; padding:10px;">[inset]は、内向き立体</div>
[outset]は、外向き立体
<div style="border:10px outset #FF6C37; padding:10px;">[outset]は、外向き立体</div>
◆囲むだけが、＜div＞タグじゃないんです。
線を上下左右、それぞれ指定することができます。
（わかりやすくするために、背景色を入れています）
[border-top]は、枠の上のみ
<div style="border-top:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-top]は、枠の上のみ</div>
[border-right]は、枠の右のみ
<div style="border-right:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-right]は、枠の右のみ</div>
[border-bottom]は、枠の下のみ
<div style="border-bottom:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-bottom]は、枠の下のみ</div>
[border-left]は、枠の左のみ
<div style="border-left:5px solid #FF6C37; padding:10px; background-color: #FDE8D5;">[border-left]は、枠の左のみ</div>
上下で組み合わせてみたり
<div style="border-top:2px dotted #FF6C37; border-bottom:5px solid #FF6C37; padding:10px;">上下で組み合わせてみたり</div>
左と下で組み合わせて、色や太さを変えてみたり
<div style="border-left:15px solid #00A794; border-bottom:10px solid #C60091; padding:10px;">左と下で組み合わせて、色や太さを変えてみたり</div>
このように、アレンジは自由自在。
どんなデザインにしたいか、
どんなイメージを伝えたいか、
明確にしておかないと、
どうしたらいいのか、わからない、思いつかない
という深みにはまってしまいます。
ビシッときめてみたい
やさしくふ～んわり
なーんてイメージをしながら作ることが、
とっても大切です！！！