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


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


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

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

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

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


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

サンプルのタグ

上記のサンプルのＨＴＭＬタグはこうなっています。

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

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




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

タグの解説

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

<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 ⇒ 二重線



「線の色」はＲＧＢで指定してます。

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

#000000;　⇒　Ｒ（＝赤色）
#000000;　⇒　Ｇ（＝緑色）
#000000;　⇒　Ｂ（＝青色）


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


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



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

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



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

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

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

窮屈そうですよね。



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

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




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

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

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


でわ ^^)/~

このブログの目次