七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Dec , 2024
Nov , 2024

Oct , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 30, 2004

タグを覚えよう【第４５回目】　-　何かの周りの線（２回目）

(6)

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

今日も昨日に引き続き・・・

まぁ、何かでは分かりにくいので

sample

という画像に的をしぼって話を進めていましたよね(〃⌒▽⌒)
しつこいようですが、今回は画像で紹介するだけで・・・
方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・
はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。
しっかりマスターしましょう(￣▽￣人)

では早速いっきに例を紹介しましょう(〃⌒▽⌒)

<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:solid 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:double 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dashed 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dotted 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:groove 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:ridge 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:inset 12px #9999ff;"> 
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:outset 12px #9999ff;"> 

表示結果）

「border」を使用することにより、画像の周りの線をいろいろと変更することができます。
スタイル、太さ、色を任意の順番にスペースで区切って指定をします。

もし、個別に上下左右の線をいろいろと変更したい場合は

上の線に関する指定：border-top
左の線に関する指定：border-left
右の線に関する指定：border-right
下の線に関する指定：border-bottom

記述方法は「border」と同じです(￣▽￣人)