画像の周りに枠を表示したい

今回は、画像の周りに枠を表示させる、というもの。

※尚、「記事の編集」は簡易な方「URL自動リンクと改行だけのシンプルな入力」を基準に
※進めています。

味気なく撮った写真を、ぽつんと載せて、うぬぬぬとしていると、
なにやら、神(？)のお告げが(笑)

神：「枠をつけた画像をアップすればよいのじゃぁ～」

ま、確かに、保存容量がアップしたから、それでもよいんですけど、
せっかくなので、CSSにある命令を使って簡単な枠線を引いてみましょう♪
で、<img>タグには↓のように記述する♪

<img src="pekepeke.jpg" style="border: 10px solid #ccccff;"/>

でこう書いた場合は↓のようになります。

で、styleというのは、HTML書式の中で、部分的にCSS書式を使う時に使用するものです。

で、borderは枠線を設定するときに使用する単語になります。
で、そのborderに設定する値は以下。
・幅---枠線の幅を設定します(例だと、「10px」の箇所。10の値を変更して使用)
・線種---枠線の種類を設定します(例だと、「solid」の箇所。詳細は下に)
・色---枠線の色を設定します(例だと、「#ccccff」の箇所)

---

ここで、色について、ちょっと。
よく、テレビや雑誌で「三原色」というのを聞いたことがあると思います。
つまりは、「赤」「緑」「青」のことです。
で、6コの文字の割り振りは
#FFFFFF
となっています。

---

※ちなみに、16進数表記なので、0～Fまでの文字で調整します。
※「0」に近いほど暗くなり、「F」に近いほど明るくなります。
※黒は「#000000」となり、白は「#FFFFFF」となります。
で、
「16進数がわかりにくい！」
と言う方は、色名(colorname)での指定もできますが、さすがに一覧にすることはできませんよ。。。

---

で、本題に戻り、枠線の種類を書いておきますね。
<img src="pekepeke.jpg" style="border: 5px solid #ffa500;"/>
↑の「solid」の箇所を変更してます。

　線種

solid (実線)	dotted (点線)
dashed (破線)	double (二重線)
groove (へこみ線)	ridge (浮き上がり線)
inset (へこみ線2)	outset (浮き上がり線2)

※う～ん、ちょっと多かったかな。
※でも拒否反応がでても、一回作ってしまえばあとは、コピー&ペーストで再利用できますよ♪

---

今回のオマケ：
画像にマウスカーソルを当てたときに文字を表示するには、
<img src="pekepeke.jpg" alt="このようにかくとよいよ♪"/>
下の画像にカーソルを当ててね(笑)

追記：2005/10/27 13:00
「コメント欄にて「title」を使用しましょう」
とご指摘がありましたので、「title」を使う場合は、
<img src="pekepeke.jpg" title="このようにかくとよいよ♪"/>
↑な感じ。
・「alt」と「title」の違い
なんらかの理由で画像が表示されない場合、文字を表示するのが「alt」
画像を選択したときに、吹きだしみたいなヤツに文字を表示させたいのが「title」
となります。

※吹きだしみたいなヤツに文字を表示させる機能は、「alt」「title」の両方に備わった機能です。

---

しかし、ターゲットのブログは、いまだにフツー...どうすべか、このカテゴリー...orz

コメント 26

いろんな線が書けるのね～♪
前にタグ辞典とか買ったけど
ホントに基本的なことしかしたことないし…笑
by ヤク (2005-10-27 10:21) 

＞<img src="pekepeke.jpg" alt="このようにかくとよいよ♪"/>
alt=""は代替テキストなので、
＞画像にマウスカーソルを当てたときに文字を表示するには、title=""を使いましょう。
あと、/ の左に空白があった方がよさげです。
by 通行人Q (2005-10-27 11:14) 

おっ待ってました。小技シリーズ(^_^)背景が薄い色の画像はこうやってワクを付けると見栄えがしますね。一度やってみます。多分また質問すると思いますが(^^ゞ
by barbie (2005-10-27 12:05) 

やっぱ写真には、背景が黒の方がはえるのですよね～
下の線種の説明のグレーの部分も画像の枠として設定しているのですか？？
by あやこ (2005-10-27 12:32) 

＞ヤクさん
コメント及び「nice!」判定ありがとですm(_ _)m
うんうん、初めはみんなそう♪
イロイロなサイトを見て、「コレどうやるんだろう？」
って疑問から興味を持ってください♪

＞通行人Qさん
あははー、確かに、ご指摘の通りです。
イマドキ、「画像非表示」にしている人は、少ないから、
やっぱり、titleの方がよさそうですね。
あとで、追記しておきます♪

＞barbieさん
コメント及び「nice!」判定ありがとですm(_ _)m
待ち人はっけーん(笑)
枠線の画像を準備しなくても、これだけ表現できれば、十分ですよね？
手詰まりになりましたら、いつでもドゾー♪

※ちなみに「小技」ではないですゾd(＾＾*)

＞あやこさん
コメント及び「nice!」判定ありがとですm(_ _)m
やっぱり、トーンを落とした方が映えますね。
グレーの箇所は、また、今度で。
ちなみに、「画像の枠」ではありませぬ。
TRとかTDでわかるかな？
by NecoYanagi (2005-10-27 12:43) 

写真の内容とかに合わせて変えると楽しそう♪
スキンの色との相性もありますね。。。
by loiter_about_on_the_way (2005-10-27 12:49) 

＞にっしぃさん
コメント及び「nice!」判定ありがとですm(_ _)m
うん、確かに、周りの色とかにも見栄えは影響しますね。
ココはセンスの見せどころですなd(＾＾*)
by NecoYanagi (2005-10-27 13:07) 

うぅん、、親子愛を感じます。。
by (2005-10-27 15:06) 

分かりました^^　ありがとうございます♪
by あやこ (2005-10-27 15:17) 

なるほど～。いろいろできるんですね。
勉強になりました！
by happy (2005-10-27 15:33) 

＞yuiさん
一方通行か、はたまたモノグサなだけかも。。。orz

＞あやこさん
ここいらへんは、もうちょっと先。
ターゲットも興味もってるけどねー。

＞happyさん
コメント及び「nice!」判定ありがとですm(_ _)m
うんうん、イロイロできますよー。
お試しあれ♪
by NecoYanagi (2005-10-27 17:02) 

ほぉー勉強になりますなぁ！

しかしセンスがない私はどうすれば？？

≪答え≫
諦める（涙）
by t-244 (2005-10-27 17:03) 

＞Ｔｓｕｙｏｓｈｉさん
コメント及び「nice!」判定ありがとですm(_ _)m
諦めんな～！
そういや、内P終わってしまったね...orz
by NecoYanagi (2005-10-27 17:05) 

こういうのって、
凝りだすとキリがなくなっちゃうんですよねぇ～。
しかも、ワケが分からなくなっちゃったり。（笑）
by sweet-cool (2005-10-27 20:03) 

小技が、大技に思えてしかたのないきむたこは、
ギターを持った、白い小僧（DAKARAだっけ？）が、
気になります。コレ、いいなー。歌ってるよ・・・。
by knacke (2005-10-27 20:35) 

入れ知恵　ありがとうございます^^
成果は、今日の記事参照で・・・(笑)

自分のＨＰの方は、タグばしばしなのですが・・・(^^;
by あやこ (2005-10-27 20:54) 

私も勉強しよぉ・・・♪
さんきゅです～今後もこのカテ続けていってください～
by jasper (2005-10-27 21:20) 

最近はお手軽入力モード．．．．．
by ccq (2005-10-27 22:15) 

＞to All
コメント及び「nice!」判定ありがとですm(_ _)m

＞Ranranさん
うんうん、文字の羅列ばかりだと、わかりにくいですよねー。
さらに、「改行」は自動判別...見やすく整理できやしない...orz

※整理できる手はありますけどねσ(＾＾)

＞きむたこさん
DAKARAぼうやです。何体か生息してますが、コレが一番♪

「小技」？「大技」？？

違いますよ(笑)

＞あやこさん
いやいや、もともと知ってる人に対して入れ知恵なんて。
そんな、たいそーな記事ではないので、お気軽にね♪

＞jasperさん
ちょいと、手を加えてみるのも楽しいですよ♪
ただ、ケータイからタグを書くのは大変ですけどσ(＾＾)
お！読者一人はけーん。
しばらく続きますよ。。。多分(笑)

＞ccqさん
ぃゃ、ccqさんが懲りはじめたら、またまた差がつきそうA＾＾;;)
ただでさえ、スゴイ写真なのに(笑)
by NecoYanagi (2005-10-28 09:42) 

これよくNecoさんが使っているやつですね！
どうやってるんだろうって思ってました。
だんだん高度になってきました(ノ∀`)が、今度挑戦してみたいです。
とっても分かりやすい記事、nice!です♪
by ナシウタ (2005-10-29 01:16) 

＞ナシウタさん
コメント及び「nice!」判定ありがとですm(_ _)m
を！
えーっとね、グレーの箇所はまた違う方法で設定しています。
ここでは、枠線の話しだけですぅ(ノ∀`)←真似っコしてみた(笑)
もうちょい先で、グレーの箇所も説明していく予定。
by NecoYanagi (2005-10-29 02:36) 

これまた、ありがとうございます。ですね。
チャレンジしてみよう。。。（できるかな・・・・ｗ）
by ブタゴリラ (2005-10-29 02:45) 

!
なるほど～。枠線と背景？は違うのですね。
自分のサイト持ってるのに全く知識ないです(ノ∀`)←本家冫､)
by ナシウタ (2005-10-29 11:41) 

＞ブタゴリラさん
コメント及び「nice!」判定ありがとですm(_ _)m
できますよー！
下書きしておいて、確認しながら編集したほうがよいかと♪

＞ナシウタさん
うん、違う。
Necoもサイト作ってたころの知識しかありません。
しかも、ココって独自CSS置けないから面倒で面倒で。
無意味に(ノ∀`)←真似っコ(￣ー￣)ニヤリ
by NecoYanagi (2005-10-29 14:45) 

これだと、スキンを変えた時とか、画像のフチも後から色調整できるから
いいですねｗ
by papa007_ (2005-10-31 12:08) 

＞papa007_さん
コメント及び「nice!」判定ありがとですm(_ _)m
できますね。
でも、もっと簡単な方法があるんですよ。(試してないですが)
でも、仕組みをしらない人だとパニックになってしまいそうで...σ(＾＾)
by NecoYanagi (2005-10-31 12:55)