研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）

ブログの文章の一部をいろいろな枠で囲むHTMLタグ。

photo:pic-in-pic-in-frame-in-frame-in-window by Problemkind

たとえば↓こんなタイトルつきの枠囲いがあります。

　注記：

たとえば「注記」のような、本文の流れとは別のことを書きたいときなど、タイトルつきの枠で囲っておけば、本文の流れを邪魔することなく必要なことを書くことができます。
ほかには追記：などを書くにも使いやすいスタイルです。

タイトルつきの枠をHTMLコードで表現するには、↓このように<filedset>タグを使います。

<fieldset><legend>タイトル</legend>枠の中の文章</fieldset>

このようなタイトルつき枠囲いは<fieldset>タグを使いますが、
一般的に装飾のために枠囲いをするときは<div>タグを使うのがもっとも使いやすいです。

<fieldset>タグでも枠囲いはできますが、<fieldset>にはフォーム要素をグループ化するという意味がよくわからない目的があります。
テンプレートのCSS（スタイルシート）で<fieldset>の表示方法が指定されている場合もあり、ねらい通りの枠線が表現できないということもあります。
（このブログで<fieldset>タグでやってみたら、枠線の色が想定通りになりませんでした。）

<div>タグを使って枠線で囲む基本

<div>タグを使って、↓このような枠囲いができます。

枠線で囲まれる本文

点線で文章を囲む

枠内の余白が 10px 5px 10px 20px

枠線の色を赤に設定

枠内の文字色を緑に設定

枠内の背景色をラベンダーに設定

枠の横幅を400pxに設定

HTML5/CSS3で新しく使えるようになったstyle属性

HTML5/CSS3では、新しく角丸や影付き（ドロップシャドウ）などが使えるようになりました。

Internet Explorer 8 などの、HTML5/CSS3に対応していないブラウザでは表示することができませんが、表示されないのは角丸や影付きの部分だけで、ここまでの装飾はそのまま表示されます。

世界の半数の人にしか伝わらない装飾ですが、表示されない場合もあることをふまえた上で使ってみるのもおもしろいと思います。

枠の角を丸くする

IE8の方のために画像で表示しておきます。
HTML5/CSS3のブラウザでは↓こう見えています。

枠に影をつける（ドロップシャドウ）

画像↓

>>新ブログミナムラのまど2で続きを読む>

CSS3デザインブック 仕事で絶対に使うプロのテクニック posted with カエレバ　⇒カエレバについて MdN編集部 エムディエヌコーポレーション 2012-03-21 Amazon　 図書館　 楽天ブックス Yahooショッピング　 Yahooオークション

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ Vol.146.ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾110posted by +M Inamura (水村亜里)