七鍵＠楽天

コメント新着

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

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

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

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

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

バックナンバー

Dec , 2024
Nov , 2024

Oct , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 29, 2004

タグを覚えよう【第４５回目】　-　何かの周りの線（１回目）

(2)

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

カテゴリ：カテゴリ未分類

今日は何かの周りに線を引く方法を紹介しましょう。

そんな内容になっています(〃⌒▽⌒)
まぁ、ただ今回は漠然と何か・・・ではよく分かりませんので

sample

という画像に的をしぼりましょう。
ただ、今回は画像で紹介するだけで・・・
方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・
はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。
しっかりマスターしましょう(￣▽￣人)

<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px 12px;">

表示結果）

違いはわかりますか？
ＨＴＭＬで記述する場合は

border=3

のように全体に対する記述しかできませんでしたよね。
スタイルシートを使用し、スペースで区切り複数の値を指定することによって
上下左右を異なった幅にすることができるというわけです(￣▽￣人)

値を1つ指定：上下左右が指定幅
値を2つ指定：記述した順に上下、左右が指定幅
値を3つ指定：記述した順に上、左右、下、が指定幅
値を4つ指定：記述した順に上、右、下、左が指定幅

となっています(〃⌒▽⌒)

単語は

thin ：細い
medium ：普通
thick ：太い

を指定することができます。
ただし、単語で太さを指定した場合、
実際に表示される太さはブラウザによって異なりますので注意が必要です。

明日はさらにいろいろな線の引き方を細かく見ていきましょう(〃⌒▽⌒)
では、またあしたー(ﾟ▽^*)ﾉ⌒☆

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