ども、
ピアノ教室管理人です。
今回はブログ記事の中で
特定の文章だけを枠で囲む方法をご紹介します。
会話や説明文、抜粋記事など
いろんなときに役に立ちますよ。
文章だけを枠で囲んだサンプル
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
有名な平家物語の冒頭の一節ですね。
こんな感じで、
ある特定の文章だけ枠で囲んでみましょう。
サンプルのタグ
上記のサンプルのHTMLタグはこうなっています。
<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>
祇園精舎の鐘の声 諸行無常の響きあり
沙羅双樹の花の色 盛者必衰の理をあらわす
おごれる人も久しからず ただ春の世の夢のごとし
たけき者も遂には滅びぬ 偏に風の前の塵に同じ
</div>
このままコピー&ペーストして使ってもらってOKです。
文章はお好きなように変えてください。
では
カスタマイズしたい人のために解説しておきますね。
タグの解説
文章を枠で囲む方法の基本はこうなっています。
<div>
文章 文章 文章 文章
</div>
文章 文章 文章 文章
</div>
<div>と</div>で文章を挟めばいいんですが、
このままでは線などが表示されません。
そこで枠のスタイルを設定していきます。
<div style="border:1px solid #FF0000; margin:0px; padding:10px; background-color:#FFFFFF;">
文章 文章 文章 文章
</div>
文章 文章 文章 文章
</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>
文章 文章 文章 文章
</div>
実際の使用例はこんな感じです。
⇒ わくわく感が決め手のレッスンシールの使い方♪
でわ ^^)/~