スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.10 画像IMGタグを極める その2 画像に枠をつける

No.10 画像IMGタグを極める その2 画像に枠をつける

 今回はURLが http://goo.gl/k2xH のスズランの画像を使って画像を表示しそれにいろいろな枠をつけることに挑戦します。
 基本のタグは <img src="http://goo.gl/k2xH" /> です。

 
 画像や領域に枠をつけるスタイルは、border で指定します。ボーダーの指定の仕方は、いろいろなやり方はあるのですが、ここでは枠線の種類と太さを一括して指定する方法を紹介します。

style="border : 種類 太さ; という具合に指定します。
たとえば、普通の線なら、solid 太さは 2pxという具合に指定するなら、スタイルは style="border : solid 2px;" という風に画像のタグの中に書き入れます。

<img src="http://goo.gl/k2xH" style="border : solid 2px;" />


という具合に枠線がつくわけです。
border-style:種類  border-width:幅  border-color:枠線の色 と別々に指定することもできますが、ブログの記事に関して言えば、一括して指定するほうが簡単です。

枠線の種類には
solid:1本線
double:2本線
groove:立体的に窪んだ線
ridge:立体的に隆起した線
inset:内側にへこんだ枠
outset:外側に飛び出た枠
dashed:破線
dotted:点線

というような種類がありますので試してみてください。

写真をクリックすると枠線が変わります


<
border:solid 10px;

<

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。