研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）
ブログの文章の一部をいろいろな枠で囲むHTMLタグ。
たとえば↓こんなタイトルつきの枠囲いがあります。
タイトルつきの枠をHTMLコードで表現するには、↓このように<filedset>タグを使います。
<fieldset><legend>タイトル</legend>枠の中の文章</fieldset>
このようなタイトルつき枠囲いは<fieldset>タグを使いますが、
一般的に装飾のために枠囲いをするときは<div>タグを使うのがもっとも使いやすいです。
<fieldset>タグでも枠囲いはできますが、<fieldset>にはフォーム要素をグループ化するという意味がよくわからない目的があります。
テンプレートのCSS（スタイルシート）で<fieldset>の表示方法が指定されている場合もあり、ねらい通りの枠線が表現できないということもあります。
（このブログで<fieldset>タグでやってみたら、枠線の色が想定通りになりませんでした。）
<div>タグを使って枠線で囲む基本
<div style="border-style: solid ; border-width: 1px;">枠線で囲まれる本文</div>↑このタグで、↓このような表示になります。
枠線で囲まれる本文
つまり、<div>タグにstyle属性でいろいろなスタイルを直接指定してしまうというわけです。
ここで指定してあるスタイルが、
border-style: solid;
と
border-width: 1px;
区切りに「;」をつければいろいろなスタイルをいくつも設定できます。
枠線の種類
border-style: solid; で、線の種類を設定します。実線 ⇒ soid
点線 ⇒ dotted
破線 ⇒ dashed
二重線 ⇒ double
線無し ⇒ none
<div style="border-style: dotted ; border-width: 3px;">点線で文章を囲む</div>
↓
点線で文章を囲む
枠内の余白
padding: 10px 5px 10px 20px; で、枠内の余白が設定できます。設定の数字は左から、上、右、下、左です。
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px;">枠内の余白が 10px 5px 10px 20px<</div>
↓
枠内の余白が 10px 5px 10px 20px
枠線の色
border-color: red; で、枠線の色を設定できます。色の指定 red はカラーネームを使っていますが、カラーコードの#ff0000を使うこともできます。
カラーネームやカラーコードを調べるには、
たとえば↓このようなサイトが参考になります。
⇒ カラーチャート/カラーネーム 147色 - TAG index Webサイト
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red;">枠線の色を赤に設定</div>
↓
枠線の色を赤に設定
枠内の文字色
color: green; で、枠内の文字色を設定できます。<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green;">枠内の文字色を緑に設定</div>
↓
枠内の文字色を緑に設定
枠内の背景色
background-color: lavender; で、枠内の背景色（塗り潰し）を設定できます。<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender;">枠内の背景色をラベンダーに設定</div>
↓
枠内の背景色をラベンダーに設定
枠の横幅
width: 400px; で、文字枠の横幅を設定できます。<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px;">枠の横幅を400pxに設定</div>
↓
枠の横幅を400pxに設定
HTML5/CSS3で新しく使えるようになったstyle属性
HTML5/CSS3では、新しく角丸や影付き（ドロップシャドウ）などが使えるようになりました。
Internet Explorer 8 などの、HTML5/CSS3に対応していないブラウザでは表示することができませんが、表示されないのは角丸や影付きの部分だけで、ここまでの装飾はそのまま表示されます。
世界の半数の人にしか伝わらない装飾ですが、表示されない場合もあることをふまえた上で使ってみるのもおもしろいと思います。
枠のコーナーを丸くする（HTML5/CSS3）
border-radius: 10px; で、枠に角丸をつけることができます。<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px; border-radius: 10px;">枠の角を丸くする</div>
↓
枠の角を丸くする
IE8の方のために画像で表示しておきます。
HTML5/CSS3のブラウザでは↓こう見えています。
枠に影をつける（HTML5/CSS3）
box-shadow: 5px 5px 5px #AAA; で、枠に影をつけることができます。<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA;">枠に影をつける（ドロップシャドウ）</div>
↓
枠に影をつける（ドロップシャドウ）
画像↓
<blockquote>タグは装飾目的で使用しない方がいい。
<blockquote>タグを使って枠線を表示する方法が、いろいろなブログで紹介されています。しかし、<blockquote>タグは本来「引用」のためのタグです。
引用以外の目的で<blockquote>タグを使用すると、
HTMLタグを見てブログを読んでいるGoogleのクローラーや視覚障害者用の読み上げソフトなどをダマすことになってしまいます。
装飾だけの目的で<blockquote>タグを使用することはやめておいたほうがいいと僕は思います。
それにたとえば、このブログでは引用とわかるように装飾する設定をCSSでしてあるので、<blockquote>タグがついている部分は↓こうなってしまいます。
blockquote要素で、引用部分を示すことができます。
via: HTMLタグ/テキスト・フォントタグ/引用文を示す（長文） - TAG index Webサイト
この要素は、長めの文書を引用する際に使用します（段落ごと引用する場合など）。短い文章を引用する場合は、この要素ではなくq要素を使用します。
一般的なブラウザでは、この要素の左右に適度なマージンが入ります（左右がインデントされます）。
なるほど。ブログのCSSで設定してなくても、一般的なブラウザのCSSで左右マージンが設定してあるということなのですね。
外部サイト：
・カラーチャート/カラーネーム 147色 - TAG index Webサイト
・HTMLタグ/テキスト・フォントタグ/引用文を示す（長文） - TAG index Webサイト
関連記事：
研Q6.ブログ記事に見出しをつけて読者にもクローラーにも読みやすくする。
研Q58.ブログの画像の周りにHTMLで枠線（border）をつける方法。
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。 RSSリーダーとは？⇒ Vol.146.ＲＳＳってなんなの？
リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
記事末尾110posted by +M Inamura (水村亜里)
- 関連記事
- 研Q18.ブログのバックアップ方法⇒直感的でわかりやすいのはこの方法
- 研Q17.青山華子さんのブログじゃんじゃん（アメブロ）が削除された！
- 研Q9.ブログタイトル＋記事タイトルという並べ方はかなりマズイです。
- 研Q6.ブログ記事に見出しをつけて読者にもクローラーにも読みやすくする。
- 研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）