初心者のためのホームページ作成動画解説付

枠線について

border:ボーダーの幅 ボーダーの種類 ボーダーの色

何かの要素に枠線をつけたい場合は「border」プロパティを使用します。
例えば<p>要素に枠線をつけたい場合は、
border:ボーダーの幅 ボーダーの種類 ボーダーの色の順番で記述します。
<p style="border:1px solid #ccccff">初心者のためのホームページ講座</p>
と記述すると下記のように枠線が付きます。

初心者のためのホームページ講座

枠線の大きさや種類を変えると見栄えも変わってきます。
<p style="border:5px dotted #ccccff">初心者のためのホームページ講座</p>
と記述すると下記のようになります。

初心者のためのホームページ講座

例えば、文字の下だけに線を入れたい場合はこのように記述します。
<p style="border-bottom:5px solid #ccccff">初心者のためのホームページ講座</p>

初心者のためのホームページ講座

以下のような記述をすると、左と下に線を引くことができます。
<p style="border-left:5px solid #5555ff;border-bottom:1px solid #5555ff">初心者のためのホームページ講座</p>

初心者のためのホームページ講座


余白を設定していないのでこれでは良くありませんが(^^;)
paddingを設定すると余白ができて見栄えが良くなります。
このエントリーをはてなブックマークに追加