2020年05月17日
HTMLのみで囲み線・枠線を簡単に設定する方法【A8.netファンブログ向け保存版】
ファンブログの文章にHTMLのみで囲み線や枠線を簡単に設定する方法
文章(ブログ)を書く上で、読みやすさや文字の強調などを考え装飾文章を作成したいと思いますよね！
読む側からしたら読みやすい、見やすい文章の方が最後まで読んでくれる事が多いです。
また他人のブログなどを見て、このブログ読みやすい！カッコイイ！って感じると最後まで読んでしまうものです。
そこで、HTMLのみで誰でも簡単に装飾できる囲み線・枠線を紹介したいと思います。
囲み線HTMLコード【コピペOK】
<div style="border: 5px solid #99cc33;
padding: 10px; border-radius: 0px;
background: #ffffff;">ここにテキスト入力</div>
padding: 10px; border-radius: 0px;
background: #ffffff;">ここにテキスト入力</div>
囲み線＆枠線のHTMLコード属性の説明
線のコード属性①
コードにあるborder: 5px solid #99cc33は、線の太さ・線種・線色を表します。
線の太さ
5px(基本設定)の数字を変えると線の太さが変わります。
1pxの線の太さ
3pxの線の太さ
5pxの線の太さ
8pxの線の太さ
10pxの線の太さ
線の種類
solid部分のコードを別の線コードに変えると線種が変わります。
【solid】 直線を表します(基本設定)
【dotted】 点線を表します
【dashed】破線を表します
【double】 二重線を表します
【groove】 くぼみのある線を表します
【ridge】 隆起した線を表します
線の色
#99cc33の部分を別の色コードに変更すると線の色が変わります。
黒色(#000000)
青色(#0000ff)
緑色(#008000)
黄色(#ffff00)
ピンク(#ff00ff)
赤色(#ff0000)
線のコード属性②
コードにあるpadding: 10pxは、文章入力の枠巾を表します。
10pxの枠巾
15pxの枠巾
20pxの枠巾
線のコード属性③
コードにあるborder-radius: 1pxは、枠線の4つ角の丸みを表します。
1pxの角の丸み
5pxの角の丸み
10pxの角の丸み
15pxの角の丸み
線のコード属性④
コードにあるbackground: #ffffffは、枠線内の背景色を表します。
白の背景色 #ffffff
グレーの背景色 #dddddd
薄い黄色の背景色 #ffffcc
オレンジ色の背景色 #ffcc00
ちょっとした工夫でブログの見栄えが良くなります。
お好みに合わせて囲み線の色や背景色などを変えて自分だけのオリジナルブログを書いてみて下さい。
早速 囲み線を使った文章を書いて見ましょう！
色の変更はカラーコード一覧を参考に↓↓↓
http://www.netyasun.com/home/color.html
CSS&HTMLを分かりやすく解説した本
【このカテゴリーの最新記事】
-
-
-
-
-
no image
-
no image
-
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/9855780
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
