【htmlで記述】囲み線の作り方

ブログ記事を書くにあたって、わかりやすいように囲み線で囲みたいと思っています。囲み線をhtmlタグでできるように調べました。

【htmlで記述】囲み線の作り方

【基本タグ】

<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #FF0000; border-radius: 5px; background-color: #FFFF00; color: #000080;”>ここに文字を入力する。</div>

[padding: 10px;]
→ paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。

[margin-bottom: 10px;]
→ marginは、枠の外側の余白です。margin-bottomだと、枠の下の余白です。

[border: 1px dotted #FF0000;]
→ borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#FF0000となります。
(線の種類)
・solid…直線
・dotted…点線
・dashed…破線
・double…二重線
・groove…くぼみ線
・ridge…隆起線

[border-radius: 5px;]
→ border-radiusは、角丸指定。角丸の半径が5pxとなります。
※[border-radius:10px 0 10px 0;]とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味です。

[background-color: #FFFF00;]
→ background-colorは、背景色の指定です。

[color: #000080;]
→ colorは、文字色の指定です。

【htmlで記述】囲み線の幅を調節する方法

1.囲み枠の幅を枠内のテキストの長さに自動調整して表示させる方法

<div style=”display:inline-block;padding: 10px; margin-bottom: 10px; border: 1px dotted #FF0000; border-radius: 5px; background-color: #FFFF00; color: #000080;”>トントンブログ</div>
トントンブログ

[display:inline-block;]をstyle=””に入れる。

2.特定の幅にしたい場合

<div style=width:300px;><div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #FF0000; border-radius: 5px; background-color: #FFFF00; color: #000080;”>トントンブログ</div></div>
トントンブログ

<div style=”width:300px;”>~</div>で囲む。

【htmlで記述】中央寄せ、左寄せ、右寄せ

中央寄せ <div align=”center”>~</div>
左寄せ  <div align=”left”>~</div>
右寄せ  <div align=”right”>~</div>

にほんブログ村 人気ブログランキング (←参加中、応援お願いします。)

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!詳細はこちらからどうぞ ⇒ 【THE THOR(ザ・トール)】

CTR IMG