ブログ記事の一部を枠で囲む方法②　好きな色で作ってみよう！

大阪・泉佐野市のスマホ タブレット・パソコン教室 Soft Garden
ホーム ｜ 子どもクラス ｜ コース一覧 | お問合せ
住所：大阪府泉佐野市鶴原1856　2F
E-Mail：softgarden.k@gmail.com　お電話：090-6969-3856

こんにちは。
パソコン教室 SoftGarden 講師 小野田です。

ブログ記事の一部を枠で囲む方法①

前回の続き。。。

一つ注意点がありました
枠内に記事を書いて改行したいとき【Enter】キーを押すと、別の枠が出てくる場合があります。
　　（使用しているヴァージョンによって変わります）
改行するときは【Shift】キーを押しながら【Enter】キーを押して、改行してください。

今回は、枠線の色や線の種類を変えてみたいと思います。

その前に、
色を設定する際に、ブログではカラーコードというものを設定します。
このカラーコードは【＃】から始まり、数字とa~fまでのアルファベットの組み合わせです。

カラーコード：http://html-color-codes.info/japanese/
このページにある色をクリックすると、カラーコードが表示されるので活用してください。
一番左上の白をクリックすると【#FFFFFF】と表示されました。
白のカラーコードは【#FFFFFF】ということです。

前回の
<div style="background:#ffffff; padding:10px; border:2px dotted #ff0000;">
　　枠内の記事をココに書く</div><br>
をわかりやすく分けて説明します。

<div style=
の後、""で囲まれたところに設定があります。

①　background:#ffffff;
　　枠線内の背景色を設定します。
　　前回は白で設定したので【#ffffff】です。
　　↑で紹介したカラーコード表から、背景色に使いたい色のカラーコードを設定してください。
 

②　padding:10px;
　　枠線から文字までの余白の設定です。
　　枠線から上下左右10pxの余白ができています。
　　数値が小さくなれば余白が小さくなり、文字が線に近づきます。
 

③ border:2px dotted #ff0000;
    線の太さ、線の種類、線の色を設定しています。

　 ・border:2px
　 線の太さの設定です。数値が大きくなるほど太くなります。
　好きな太さに変えてみてください。
　
　・dotted
　線の種類の設定です。ココでは点線になっています。
　他にも色んな線の種類がありますので紹介します。
　solid：実線 1本線
　double：実線 2本線
　dotted：点線
　dashed：破線
　hidden：線ナシ
　dotted　の部分を変えてみてください。枠線の種類が変わります。

　・#ff0000;
　線の色の設定です。
　↑で紹介したカラーコード表から、枠線に使いたい色のカラーコードを設定してください。

線の太さ、種類、色、背景色を変えて、色んな組み合わせで作ると、
複数の枠組みがあっても、見やすく掲載できると思います。

また、アメーバブログだけでなく、WordPressやFC2ブログでもお使いいただけます。

是非、使ってみてください(^^)/

次回は、角を丸くする方法と枠に見出しをつける方法を、お伝えしたいと思います。