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

Tweet

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

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

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

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

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

お次はこれ。

HTMLはこんな感じです。

ついでにもういっこ。

こちらはこちらで。

枠の種類と色を調整する

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

例えば、
border: 1px solid
を
border: 2px dashed
に変えたら、

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

例えば、背景カラーコードサンプルの
#EFEFEF
を
#CCCCFF
に変えたら、

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

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

Tweet