記事中の文章を枠線で囲んだり背景色を付ける方法(HTML講座)

文章 枠 入れ方 HTML


枠です枠!強調したい文章に枠線を付けたい!

文章 枠 入れ方 HTML

ブログ記事を書いていくと、いろいろなデザイン、レイアウトを試したくなるものですよね。ブログの目的は文章でメッセージを伝えることですけど、読みやすい、それでいて書き手のテンションが伝わるようなアレンジが出来れば、発信する側も受信する側もブログをより楽しめるようになると思います。

今回は、文章に枠線を付けるというテクニックについて紹介します。これは、HTML言語を使って簡単に装飾することが出来ますので、この記事をブックマークしていつでも引用できるようにしておいてもよろしいかと思います。

まず、こんなん作ってみました。

ここに文章 ここに文章 ここに文章 ここに文章

これは、こんなプログラムです。

 

お次はこれ。

ここに文章 ここに文章 ここに文章 ここに文章

HTMLはこんな感じです。

 

ついでにもういっこ。

ここに文章 ここに文章 ここに文章 ここに文章

こちらはこちらで。

 

枠の種類と色を調整する

枠の種類を変えたい場合は、
border: 1px solid
のところをいじります。

例えば、
border: 1px solid

border: 2px dashed
に変えたら、

ここに文章 ここに文章 ここに文章 ここに文章

ここに文章 ここに文章 ここに文章 ここに文章
になります。

 

枠の中の背景色を変えたい場合は、
background: #EFEFEF
のところをいじります。

例えば、背景カラーコードサンプルの
#EFEFEF

#CCCCFF
に変えたら、

ここに文章 ここに文章 ここに文章 ここに文章

ここに文章 ここに文章 ここに文章 ここに文章
になります。

幅を変えたい時は「width:」の部分の数字を変えます。

…という風に、上記を下敷きにあれこれカスタマイズしてみて下さい〜。