コピペするだけで文章を枠で囲むやり方です

2012年02月24日


ども、
ピアノ教室管理人です。


今回はブログ記事の中で
特定の文章だけを枠で囲む方法をご紹介します。


会話や説明文、抜粋記事など
いろんなときに役に立ちますよ。


文章だけを枠で囲んだサンプル


祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ

有名な平家物語の冒頭の一節ですね。


こんな感じで、
ある特定の文章だけ枠で囲んでみましょう。



サンプルのタグ


上記のサンプルのHTMLタグはこうなっています。

<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>


このままコピー&ペーストして使ってもらってOKです。
文章はお好きなように変えてください。




では
カスタマイズしたい人のために解説しておきますね。


タグの解説


文章を枠で囲む方法の基本はこうなっています。

<div>
文章 文章 文章 文章
</div>


<div></div>で文章を挟めばいいんですが、
このままでは線などが表示されません。


そこで枠のスタイルを設定していきます。

<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
文章 文章 文章 文章
</div>

赤い文字部分が枠のスタイルを指定してるところです。


border:1px solid #FF0000;

これは枠の線の指定です。
borderが「線」という意味なんです。


borderの右から順に
「線の太さ」「線の種類」「線の色」
と指定しています。


border:線の太さ 線の種類 線の色;
ですね。



「線の太さ」はピクセルで指定します。

1px → 2px → 3px → 4px・・・・
という具合に太くなっていきますよ。



「線の種類」はいくつかの中から選べますが、
ここでは基本的なモノだけご紹介しておきます。

solid ⇒ 実線
dashed ⇒ 破線
dotted ⇒ 点線
double ⇒ 二重線



「線の色」はRGBで指定してます。

数値はRGBのそれぞれの色を表しています。

#000000; ⇒ R(=赤色)
#000000; ⇒ G(=緑色)
#000000; ⇒ B(=青色)


数値は16進数で、
00〜FFを使います。


色の指定の詳細についてはコチラをご覧ください。



margin:0px;
枠の外側の上下左右のマージンを決めてます。

とりあえず0pxでOKだと思います。



padding:10px;
枠の内側の余白をしていしてます。

padding:0px;
にするとこうなってしまいます。

祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ

窮屈そうですよね。



background-color:#FFFFFF;
枠の内側の背景色を指定してます。

色の決まりは上記の線の色と同じなので割愛します。




ま、難しいことはさておき、
コピー&ペーストしてお使いください。

<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
文章 文章 文章 文章
</div>



実際の使用例はこんな感じです。
わくわく感が決め手のレッスンシールの使い方♪


でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。