\͂A\pTel. 090-3218-8930

投稿記事の中で使える囲み枠線の作り方♬

直線の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background:#fff; padding:10px; margin-bottom: 20px; border:2px solid #ff3366;”>
ここに本文を入力する。<br />
</div>

角丸の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”padding: 10px; margin-bottom: 20px; border: 2px solid #ff3366; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>
ここに本文を入力する。<br />
</div>

点線の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background:#fff; padding:10px; margin-bottom: 20px; border:2px dashed #ff3366;”>
ここに本文を入力する。<br />
</div>

水玉の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background:#fff; padding:10px; margin-bottom: 20px; border:3px dotted #ff3366;”>
ここに本文を入力する。<br />
</div>

二重の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background:#fff; padding:10px; margin-bottom: 20px; border:3px double #ff3366;”>
ここに本文を入力する。<br />
</div>

中が塗りつぶされてる四角い囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background:#ffd6ea; margin-bottom: 20px; padding:10px; border:none;”>
ここに本文を入力する。<br />
</div>

中が塗りつぶされてる角丸の囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”background: #ffd6ea; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>
ここに本文を入力する。<br />
</div>

見出し付きの囲み枠線の書き方

■ここにタイトルを入力する
ここに本文を入力する。

<div style=”background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;”>
<span style=”color: #ffffff; font-weight: bold;”>■ここにタイトルを入力する</span>
</div>
<div style=”border: 1px solid #ff7fbf; padding: 10px;”>
ここに本文を入力する。<br />
</div>

タイトルがはみ出てる直線の囲み枠線の書き方

■ここにタイトルを入力する

ここに本文を入力する。

<fieldset style=”border:2px solid #ff3366;”>
<legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend>
ここに本文を入力する。<br />
</fieldset>

タイトルがはみ出てる二重の囲み枠線の書き方

■ここにタイトルを入力する

ここに本文を入力する。

<fieldset style=”border:3px double #ff3366;”>
<legend><span style=”font-weight:bold;”>■ここにタイトルを入力する</span> </legend>
ここに本文を入力する。<br />
</fieldset>

シンプルな影付きの囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;”>
ここに本文を入力する。<br />
</div>

ポイント付きの付箋風オシャレ囲み枠線の書き方

ここに本文を入力する。

■このタグをコピペする
<div style=”border: #ffb2d8 solid 1px; border-left: #ffb2d8 solid 13px; padding: 10px; background: #fffff9;”>
ここに本文を入力する。<br />
</div>


囲み枠線のタグの解説

上記のタグの意味づけを書いておきます。

background:背景色
padding:枠と文字の間の隙間の幅
border:線の太さ、種類、色を指定

・線の種類
 → solid:直線/double:二重線/dashed:破線/dotted:水玉線

#fff、#ffdbff などは色になります。

ポイント!

”;”で閉じるのを忘れないようにしましょう。
タグは1文字でも消えてしまうときちんと表示されなくなってしまうので、気をつけてくださいね。

ページ Topへ