256371

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

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

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

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

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

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

バックナンバー

Oct , 2026
Sep , 2026

Aug , 2026

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 17, 2004

タグを覚えよう【第１１回目】　-　画像を修飾してみよう

(4)

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

カテゴリ：タグ教室

今日は今までの復習もかねて、色々な方法で画像を縁取りしてみましょう。
ただ単純に画像を表示するのもいいですが、
たまにはおしゃれな縁取りなどしてみたいですよね(〃⌒▽⌒)

まずは単純に・・・

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1">

表示結果）

これは一番シンプルな縁取りですね(〃⌒▽⌒)
シンプルなだけあって記述も簡単です。

次はこの線の太さを変えてみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8">

表示結果）

縁取りの太さを変えるだけで、また画像の雰囲気も変わりますよね(￣▽￣人)
ただ数字を大きくするだけですのでこれも簡単ですよね？

次は線の色を変えてみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff00ff;">

表示結果）

多少サンプルの色の趣味が悪いような気がしますが・・・

色は好きな色に変えて試してくださいね（笑

ちなみに、縁取りの色を辺によって変えることも出来ます。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff0000 #0000ff;">

表示結果）

色の組み合わせによっては、きっとおしゃれな縁取りになるはずですよ（多分）
ちなみに、「style="border-color:"」ですが、
値を1つ指定：上下左右が指定色
値を2つ指定：記述した順に上下、左右が指定色
値を3つ指定：記述した順に上、左右、下、が指定色
値を4つ指定：記述した順に上、右、下、左が指定色
のように、個別に縁取りの色を指定することができます。
小技として覚えておくと、いつか役に立つかもしれませんよ(〃⌒▽⌒)

そして、以前も紹介しましたが、線のスタイルを変更してみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: double 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dashed 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dotted 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: groove 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: ridge 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: inset 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: outset 12px #9999ff;">

表示結果）

どれも微妙に雰囲気が違いますよね(〃⌒▽⌒)
絵も額縁にいれて飾った方が見栄えがするように・・・
ＨＰ上に載せる画像にも、おしゃれな縁取りなどいかがでしょうか？

明日は「MARQUEE」タグを詳しく解説しようかと思っています。
また来てくださいね(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Aug 17, 2004 06:14:15 PM
コメント(4) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

初めまして。。

れおなるど21 さん

たまたまクリックしたら、いい所に出会って
ホクホク喜んでいます。

日記リンクさせていただきました。

度々参照させていただきますので、宜しく
お願いしますね。 (Aug 17, 2004 08:45:58 PM)

返事を書く

Re:初めまして。。(08/17)

＃七鍵さん

れおなるど21さん

はじめまして(〃⌒▽⌒)
リンクありがとうですm（_ _）m
私もたまたま出会えた偶然に喜んでますよ(￣▽￣人)

こちらこそよろしくお願いします(ﾟ▽^*)ﾉ⌒☆

(Aug 17, 2004 11:21:21 PM)

返事を書く

ぶらぼー

ファイナンシャル・ぱんださん

お主、その道のプロと見た。
早速使わせていただくぞ。

そこでひとつ質問、フリーページを作成する際に、
半角／全角をいちいち入れ替えてタグを手入力するのもなまぬるいから、
わしゃよく使うタグを単語登録しておる。
いちいちAZUKI(ソフト)とか開くのも重たいしのー、
他になんかええ方法はないかのー。
(Aug 26, 2004 11:32:57 PM)

返事を書く

Re:ぶらぼー(08/17)

＃七鍵さん

ファイナンシャル・ぱんださん

いらっしゃいませー(〃⌒▽⌒)
プロだなんてとんでもない。
素人なりに身につけた知識をさもプロのようにひけらかしてるだけですよ。

質問の件ですが、結局一番早いのは手入力ですよ（笑
いや、怒らないで下さい。
ぱんださんもあと５年ほどＨＴＭＬを書いていると
きっとそう思うようになりますから。

(Aug 28, 2004 12:34:27 AM)

返事を書く

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧