こんばんは！
枠をつけると画像がしまるんですね。
同じものなのに違って見えます。
でめららさんは皆様も書いておられるように庶事所感で時事感を出してるじゃありませんか！
私など無知でコメントできなくて庶事所感のことばかり書いてる気がします(^^; .... (2005.06.10 21:01:34)
枠をつけると画像がしまるんですね。
同じものなのに違って見えます。
でめららさんは皆様も書いておられるように庶事所感で時事感を出してるじゃありませんか！
私など無知でコメントできなくて庶事所感のことばかり書いてる気がします(^^; .... (2005.06.10 21:01:34)
2005.06.10
テーマ： アクセス向上(301)
カテゴリ： 【実験中】
スタイルシート>>border: ***;
////////////////////////////////////////////////////////////////////
border は、境界線を指定するプロパティです。HTMLタグのテーブルやスタイルシートのボックス等でも使いますが、指定した要素の周りとの境目を設けてその表示方法を指定してあげます。
ですのでこれを、img（イメージタグ）にスタイル指定をすると、画像の枠に線をつけることができます。
■border: ***;
したがってborderの指定はボックスの指定と同じ要領ですので、 スタイルシート（24）スタイルシート>>基本>>ボックス>>ボーダー もあわせて参照していただけるとわかりやすいと思います。
【ボーダー(境界線)borderで指定できること「ボーダーの三指定」】
太さを指定 する
■border-style: ***; border-***-style: ***; 枠線の 種類 を指定する
■border-color: ***; border-***-color: ***; 枠線の 色 を指定する
■border: ***; border-***: ***; 枠線の設定をひとまとめに行う
□指定なし
<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">指定なしです</p>
表示例↓こんな感じですね（＾＾）
□thin細（style="border: thin dotted blue;"）
style="border: thin dotted blue; >□thin細</p>
表示例↓こんな感じですね（＾＾）
□medium中（style="border: medium dashed blue;"）
<p><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中</p>
□thick太（style="border: thick solid blue;"）
<p><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太</p>
表示例↓こんな感じですね（＾＾）
□none（style="border: 5px none LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□hidden（style="border: 5px hidden LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□solid 実線（style="border: 5px solid LimeGreen;"）
<p><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 実線</p>
表示例↓こんな感じですね（＾＾）
□dotted 点線（style="border: 5px dotted LimeGreen;"）
<p><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 点線</p>
表示例↓こんな感じですね（＾＾）
□dashed 破線（style="border: 5px dashed LimeGreen;"）
<p><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 破線</p>
表示例↓こんな感じですね（＾＾）
□double 2重線（style="border: 5px double LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□outset 凸（style="border: 5px outset LimeGreen;"）
<p><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 凸</p>
表示例↓こんな感じですね（＾＾）
□inset 凹（style="border: 5px inset LimeGreen;"）
<p><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 凹</p>
表示例↓こんな感じですね（＾＾）
□ridge 山（style="border: 5px ridge LimeGreen;"）
<p><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 山</p>
表示例↓こんな感じですね（＾＾）
□groove 谷（style="border: 5px groove LimeGreen;"）
<p><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 谷</p>
表示例↓こんな感じですね（＾＾）
*****************************************************
【庶事所感】
浜田省吾のオフィシャルブログがジオシティズで公開されているのですが、昨日はけっこう一所懸命関連のブログを探してみて廻りました（＾＾）
やっぱりブログ（日記）の面白さは、リアルタイムにニアリーイコールだからということがありそうに思いました。
「今だから」、とか「ここだけの」とかいった意味で、ブログの特徴を生かしたホームページができるのであって、普遍的な内容の記事ならブログでなくともいいのだと思います。
という意味で、このブログはブログ失格なんだなぁ（＞＜）と解っていながら再認識してしまいました。
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
////////////////////////////////////////////////////////////////////
border は、境界線を指定するプロパティです。HTMLタグのテーブルやスタイルシートのボックス等でも使いますが、指定した要素の周りとの境目を設けてその表示方法を指定してあげます。
ですのでこれを、img（イメージタグ）にスタイル指定をすると、画像の枠に線をつけることができます。
■border: ***;
したがってborderの指定はボックスの指定と同じ要領ですので、 スタイルシート（24）スタイルシート>>基本>>ボックス>>ボーダー もあわせて参照していただけるとわかりやすいと思います。
【ボーダー(境界線)borderで指定できること「ボーダーの三指定」】
太さを指定 する
■border-style: ***; border-***-style: ***; 枠線の 種類 を指定する
■border-color: ***; border-***-color: ***; 枠線の 色 を指定する
■border: ***; border-***: ***; 枠線の設定をひとまとめに行う
□指定なし
<p><img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">指定なしです</p>
表示例↓こんな感じですね（＾＾）
指定なしです
□thin細（style="border: thin dotted blue;"）
style="border: thin dotted blue; >□thin細</p>
表示例↓こんな感じですね（＾＾）
□thin細
□medium中（style="border: medium dashed blue;"）
<p><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中</p>
□medium中
□thick太（style="border: thick solid blue;"）
<p><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太</p>
表示例↓こんな感じですね（＾＾）
□thick太
□none（style="border: 5px none LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□none
□hidden（style="border: 5px hidden LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□hidden
□solid 実線（style="border: 5px solid LimeGreen;"）
<p><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 実線</p>
表示例↓こんな感じですね（＾＾）
□solid 実線
□dotted 点線（style="border: 5px dotted LimeGreen;"）
<p><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 点線</p>
表示例↓こんな感じですね（＾＾）
□dotted 点線
□dashed 破線（style="border: 5px dashed LimeGreen;"）
<p><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 破線</p>
表示例↓こんな感じですね（＾＾）
□dashed 破線
□double 2重線（style="border: 5px double LimeGreen;"）
<p><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</p>
表示例↓こんな感じですね（＾＾）
□double
□outset 凸（style="border: 5px outset LimeGreen;"）
<p><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 凸</p>
表示例↓こんな感じですね（＾＾）
□outset 凸
□inset 凹（style="border: 5px inset LimeGreen;"）
<p><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 凹</p>
表示例↓こんな感じですね（＾＾）
□inset 凹
□ridge 山（style="border: 5px ridge LimeGreen;"）
<p><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 山</p>
表示例↓こんな感じですね（＾＾）
□ridge 山
□groove 谷（style="border: 5px groove LimeGreen;"）
<p><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 谷</p>
表示例↓こんな感じですね（＾＾）
□groove 谷
*****************************************************
【庶事所感】
浜田省吾のオフィシャルブログがジオシティズで公開されているのですが、昨日はけっこう一所懸命関連のブログを探してみて廻りました（＾＾）
やっぱりブログ（日記）の面白さは、リアルタイムにニアリーイコールだからということがありそうに思いました。
「今だから」、とか「ここだけの」とかいった意味で、ブログの特徴を生かしたホームページができるのであって、普遍的な内容の記事ならブログでなくともいいのだと思います。
という意味で、このブログはブログ失格なんだなぁ（＞＜）と解っていながら再認識してしまいました。
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
Re:スタイルシート（38）(06/10)
カモミール9828
さん
これはテンプレのイメージなどを変える時にも
便利ですね～。
同じトマトなのに違う表情に見えます。
ココでちょうどお勉強してる方も多いと思うので
いいのではないでしょうか？
庶事所感で知ったことも多いですよ～♪ (2005.06.10 12:42:15)
便利ですね～。
同じトマトなのに違う表情に見えます。
ココでちょうどお勉強してる方も多いと思うので
いいのではないでしょうか？
庶事所感で知ったことも多いですよ～♪ (2005.06.10 12:42:15)
Re:スタイルシート（38）(06/10)
ななももママ3939
さん
こんにちは～！
いやいや、ここではすっかりお勉強させて頂いてます・・・
と言ってもかなり落ちこぼれですけど。
いつでも見に来られると思って安心しておりますので、
突然閉鎖しました・・・はダメですよぉ～～！
ほんとカモミールさんがおっしゃられるように、
同じトマトでも可愛く見えるのや、
高級感があるように見えるのや、
枠でずいぶん表情が違いますね！ (2005.06.10 15:48:18)
いやいや、ここではすっかりお勉強させて頂いてます・・・
と言ってもかなり落ちこぼれですけど。
いつでも見に来られると思って安心しておりますので、
突然閉鎖しました・・・はダメですよぉ～～！
ほんとカモミールさんがおっしゃられるように、
同じトマトでも可愛く見えるのや、
高級感があるように見えるのや、
枠でずいぶん表情が違いますね！ (2005.06.10 15:48:18)
Re[1]:スタイルシート（38）(06/10)
でめらら58
さん
カモミール9828さん
-----
こんにちは（＾＾）コメントありがとうございます♪
境界線を変えただけでも画像が違って見てたりしますよね。
ブログはどうしたものでしょうね（＞＜）
今しばらくは、なかなか時間も無いのでこんな感じで行こうと思うのですが、難しいですね（＞＜）
(2005.06.10 16:18:40)
-----
こんにちは（＾＾）コメントありがとうございます♪
境界線を変えただけでも画像が違って見てたりしますよね。
ブログはどうしたものでしょうね（＞＜）
今しばらくは、なかなか時間も無いのでこんな感じで行こうと思うのですが、難しいですね（＞＜）
(2005.06.10 16:18:40)
Re[1]:スタイルシート（38）(06/10)
でめらら58
さん
ななももママ3939さん
-----
こんにちは（＾＾）コメントありがとうございます♪
取り敢えずすぐに閉鎖とかは考えてはいないのですが（;汗）よく見ると（いや見なくても）これはブログではないですからぁ～残念（切腹！）
まぁまぁおいおい考えて行きます（＾＾）
(2005.06.10 16:22:40)
-----
こんにちは（＾＾）コメントありがとうございます♪
取り敢えずすぐに閉鎖とかは考えてはいないのですが（;汗）よく見ると（いや見なくても）これはブログではないですからぁ～残念（切腹！）
まぁまぁおいおい考えて行きます（＾＾）
(2005.06.10 16:22:40)
ご無沙汰してます
BananaGirl
さん
助けを求めたいときだけお邪魔して ごめんなさい。
オリジナルのトップページが作りたいのですが、どうも何回変えても気に入らないので 今はこちらのをお借りしています。また挑戦しようと思います。
で、ここで質問なんですが、テキスト欄や画像欄が画像の大きさによって、変わり、他に影響するのを防ぐ方法（width， height を確定する）は ないのでしょうか？
ブログのこと、ここに来ればこれがある この存在感はなくさないで欲しいんです。 (2005.06.10 17:03:51)
オリジナルのトップページが作りたいのですが、どうも何回変えても気に入らないので 今はこちらのをお借りしています。また挑戦しようと思います。
で、ここで質問なんですが、テキスト欄や画像欄が画像の大きさによって、変わり、他に影響するのを防ぐ方法（width， height を確定する）は ないのでしょうか？
ブログのこと、ここに来ればこれがある この存在感はなくさないで欲しいんです。 (2005.06.10 17:03:51)
Re:ご無沙汰してます(06/10)
でめらら58
さん
BananaGirlさん
-----
こんにちは（＾＾）コメントありがとうございます♪
あらら（；汗）ページの閉鎖とかではなくて、ここに書いているのは「ブログ」ではないじゃんね！ってことでして、今後（スタイルシートについて終わって）からはブログについて考えなければいけないなぁと思っているんですよ（＞＜）
画像や文字が枠より大きいと数値の指定を超えて崩れてしまいますね（＞＜）
簡単なのは容量に見合うだけの画像や文章に変えればいいのですが･･･
スタイルのボックスの中でも width や height の指定は可能です。
もちろん固定できます。
オーバーフローの場合はそのまま字を見えなくするのかスクロールにするのかなどですよね。
(2005.06.10 18:33:49)
-----
こんにちは（＾＾）コメントありがとうございます♪
あらら（；汗）ページの閉鎖とかではなくて、ここに書いているのは「ブログ」ではないじゃんね！ってことでして、今後（スタイルシートについて終わって）からはブログについて考えなければいけないなぁと思っているんですよ（＞＜）
画像や文字が枠より大きいと数値の指定を超えて崩れてしまいますね（＞＜）
簡単なのは容量に見合うだけの画像や文章に変えればいいのですが･･･
スタイルのボックスの中でも width や height の指定は可能です。
もちろん固定できます。
オーバーフローの場合はそのまま字を見えなくするのかスクロールにするのかなどですよね。
(2005.06.10 18:33:49)
Re:スタイルシート（38）(06/10)
きのこせいじん
さん
今晩は、今回のborder小回りよくつかえそうなので憶えると便利だし使用範囲広いですよね。
画像も画像だけポンと置かれるより色んなイメージが湧いてきますね。
(2005.06.10 20:34:09)
画像も画像だけポンと置かれるより色んなイメージが湧いてきますね。
(2005.06.10 20:34:09)
Re:スタイルシート（38）(06/10)
jasmintea7
さん
Re[1]:スタイルシート（38）(06/10)
でめらら58
さん
きのこせいじんさん
-----
おはようございます（＾＾）コメントありがとうございます♪
かんたんでしょ！！
スタイルシートって面白いですよね！
HTMLタグと違って、基本タグに追加するだけで画像やテキストを別物みたいに見せてくれますものね。
ホームページ作成のヒントが結構あると思うんですよね（＾＾） (2005.06.11 09:25:44)
-----
おはようございます（＾＾）コメントありがとうございます♪
かんたんでしょ！！
スタイルシートって面白いですよね！
HTMLタグと違って、基本タグに追加するだけで画像やテキストを別物みたいに見せてくれますものね。
ホームページ作成のヒントが結構あると思うんですよね（＾＾） (2005.06.11 09:25:44)
Re[1]:スタイルシート（38）(06/10)
でめらら58
さん
jasmintea7さん
-----
おはようございます（＾＾）コメントありがとうございます♪
無知なのはわたくしでして（;大汗）
･･･ん～
ブログって難しく考えると難しいのね（★o★）ってカンジですかねぇ･･･
(2005.06.11 09:28:13)
-----
おはようございます（＾＾）コメントありがとうございます♪
無知なのはわたくしでして（;大汗）
･･･ん～
ブログって難しく考えると難しいのね（★o★）ってカンジですかねぇ･･･
(2005.06.11 09:28:13)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
