fieldset(フィールドセット)タグの枠線を変えるには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。



囲い枠について色々と書いていますが、まだレッスンしていなかったことがありましたね^^;

というのも、このようなご質問が。
 


フリースペースで、川上さんが紹介されていたfieldset(フィールドセット)タグを使っています。
囲い線の色を変えるにはどうすれば良いでしょうか?

 

 


通常のfieldsetタグの枠線はグレーの直線なのですが、


↓画像表示
川上雄大のワンポイントレッスン
↓ブラウザ表示

 

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 


その枠線の色や種類を変えることができます。



例えば、太さ1pxの赤色の実線で囲むと

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:1px solid #ff0000;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


となります。


borderは境界線の太さ、スタイル、色を一括で指定します。

border: 1px solid #ff0000;
(半角スペースで区切ります。)

 

 

 


=スタイルの種類=
none ・・・ 枠線なし(ボーダーの幅の値は0になる)
dotted ・・・ 点線(丸い点線)
dashed ・・・ 破線(四角い点線)
solid ・・・ 実線
double ・・・ 二重線
groove ・・・ 立体枠(窪み)
ridge ・・・ 立体枠(隆起)
inset ・・・ 立体枠(内側全体が窪み)
outset ・・・ 立体枠(内側全体が隆起)

 

 


 

 


・5px・立体枠(窪み)の紺色(カラーコード:#000066)は↓

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:5px groove #000066;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


・5px・立体枠(内側全体が隆起)のピンク色(カラーコード:#ff1493)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 
↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:5px outset #ff1493;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 


・3px・点線の緑色(カラーコード:#008000)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
  
  ↓ブラウザ表示

 

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

 

<fieldset style="border:3px dotted #008000;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


でも、点線や破線の場合、見出しの背景に表示されます(IE10の場合)ので、このようにしたりします。

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:3px dotted #008000;"><legend style="background-color:#ffffff;"><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


・3px・破線のオレンジ色(カラーコード:#ff9933)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:3px dashed #ff9933;"><legend style="background-color:#ffffff;"><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


・4px・二重線の茶色(カラーコード:#994c00)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:4px double #994c00;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


・5px・立体枠(隆起)の黄色(カラーコード:#ffd400)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:5px ridge #ffd400;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 

 


・2px・実線の黒色(カラーコード:#000000)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 ↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="border:2px solid #000000;"><legend><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 

 


・見出し付きの影付きピンク色(カラーコード:#ff1493)はこちら↓

↓画像表示
川上雄大のワンポイントレッスン
 
↓ブラウザ表示

 

 

◆枠の見出し◆1)本文1
2)本文2
3)本文3


↓ソース

 

 

<fieldset style="padding:10px; font-size:1em;border:2px solid #ff1493;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #AAA;"><legend style="margin-left:8px; padding:6px 10px;background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color: #ff1493; color:#ffffff; font-weight:bold;box-shadow: 5px 5px 5px #AAA;text-shadow:1px 1px 3px #000;border-radius:8px;"><strong>◆枠の見出し◆</strong></legend>1)本文1<br>2)本文2<br>3)本文3</fieldset>

 


さらに、ご自分専用の色で作成したい方は、色見本サイトで探してみてくださいませ^^

色見本と配色サイト

WEB色見本 原色大辞典




以上、パソコンワンポイントレッスンでした。

LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント