テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.06.10

スタイルシート（38）

(10)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>border: ***;

border は、境界線を指定するプロパティです。HTMLタグのテーブルやスタイルシートのボックス等でも使いますが、指定した要素の周りとの境目を設けてその表示方法を指定してあげます。
ですのでこれを、img（イメージタグ）にスタイル指定をすると、画像の枠に線をつけることができます。

■border: ***;

したがってborderの指定はボックスの指定と同じ要領ですので、スタイルシート（24）スタイルシート>>基本>>ボックス>>ボーダーもあわせて参照していただけるとわかりやすいと思います。

【ボーダー(境界線)borderで指定できること「ボーダーの三指定」】
太さを指定 する
■border-style: ***; border-***-style: ***; 枠線の種類を指定する
■border-color: ***; border-***-color: ***; 枠線の色を指定する
■border: ***; border-***: ***; 枠線の設定をひとまとめに行う

□指定なし
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">指定なしです
表示例↓こんな感じですね（＾＾）

トマト透過指定なしです

□thin細（style="border: thin dotted blue;"）
style="border: thin dotted blue; >□thin細
表示例↓こんな感じですね（＾＾）

トマト透過 □thin細

□medium中（style="border: medium dashed blue;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: medium dashed blue;" >□medium中

トマト透過 □medium中

□thick太（style="border: thick solid blue;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: thick solid blue;" >□thick太
表示例↓こんな感じですね（＾＾）

トマト透過 □thick太

□none（style="border: 5px none LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px none LimeGreen;" >□none
表示例↓こんな感じですね（＾＾）

トマト透過 □none

□hidden（style="border: 5px hidden LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px hidden LimeGreen;" >□hidden
表示例↓こんな感じですね（＾＾）

トマト透過 □hidden

□solid 実線（style="border: 5px solid LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px solid LimeGreen;" >□solid 実線
表示例↓こんな感じですね（＾＾）

トマト透過 □solid 実線

□dotted 点線（style="border: 5px dotted LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px dotted LimeGreen;" >□dotted 点線
表示例↓こんな感じですね（＾＾）

トマト透過 □dotted 点線

□dashed 破線（style="border: 5px dashed LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px dashed LimeGreen;" >□dashed 破線
表示例↓こんな感じですね（＾＾）

トマト透過 □dashed 破線

□double 2重線（style="border: 5px double LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px double LimeGreen;" >□double
表示例↓こんな感じですね（＾＾）

トマト透過 □double

□outset 凸（style="border: 5px outset LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px outset LimeGreen;" >□outset 凸
表示例↓こんな感じですね（＾＾）

トマト透過 □outset 凸

□inset 凹（style="border: 5px inset LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px inset LimeGreen;" >□inset 凹
表示例↓こんな感じですね（＾＾）

トマト透過 □inset 凹

□ridge 山（style="border: 5px ridge LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px ridge LimeGreen;" >□ridge 山
表示例↓こんな感じですね（＾＾）

トマト透過 □ridge 山

□groove 谷（style="border: 5px groove LimeGreen;"）
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="border: 5px groove LimeGreen;" >□groove 谷
表示例↓こんな感じですね（＾＾）

トマト透過 □groove 谷

*****************************************************

【庶事所感】
浜田省吾のオフィシャルブログがジオシティズで公開されているのですが、昨日はけっこう一所懸命関連のブログを探してみて廻りました（＾＾）
やっぱりブログ（日記）の面白さは、リアルタイムにニアリーイコールだからということがありそうに思いました。
「今だから」、とか「ここだけの」とかいった意味で、ブログの特徴を生かしたホームページができるのであって、普遍的な内容の記事ならブログでなくともいいのだと思います。
という意味で、このブログはブログ失格なんだなぁ（＞＜）と解っていながら再認識してしまいました。

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ