全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.20
テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・応用編
前回は、スタイルシートについて学びました。
今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。
前回も書きましたが、スタイルシートは「習うより慣れよう！」です。
ということで、じゃんじゃん例題を載せていきますので、
実際に遊んで覚えてみましょう！
まずは、最もシンプルな形から。
入力ソースはこちら。
「 border:1px 」は、枠の太さを表し、数字を大きくすると枠が太くなります。
いままでと違い、数字に単位（ px ）がついている点に注目ですね。
「 #ff6600 」は枠自体の色。おなじみの RGBカラー や 色名 で好きな色にできます。
「 solid 」は、線状の枠を指定する値です。
ちなみに「 background-color:#ffcc99; 」をプラスすると・・・
このように背景をつけることができました。
入力ソースはこちら。
「 dashed 」をつかって枠を点線に。
「border:1px」のとき
入力ソースはこちら。
「border:3px」「background-color:#ccffcc;」のとき
入力ソースはこちら。
「 double 」をつかって枠を2重に。(「border:2px」以下だと2重になりません)
「border:3px」のとき
入力ソースはこちら。
「border:4px」「background-color:#ccccff;」のとき
(外側の枠が太くなりました）
入力ソースはこちら。
「 dotted 」をつかって枠をかわいく。
「border:3px」のとき
入力ソースはこちら。
「border:4px」「background-color:#ccccff;」のとき
入力ソースはこちら。
このように色々な枠をつくることができました。
次回は、この枠をつかって、さらに遊んでみます！
前回は、スタイルシートについて学びました。
今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。
前回も書きましたが、スタイルシートは「習うより慣れよう！」です。
ということで、じゃんじゃん例題を載せていきますので、
実際に遊んで覚えてみましょう！
まずは、最もシンプルな形から。
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:1px solid
#ff6600;"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「 border:1px 」は、枠の太さを表し、数字を大きくすると枠が太くなります。
いままでと違い、数字に単位（ px ）がついている点に注目ですね。
「 #ff6600 」は枠自体の色。おなじみの RGBカラー や 色名 で好きな色にできます。
「 solid 」は、線状の枠を指定する値です。
ちなみに「 background-color:#ffcc99; 」をプラスすると・・・
このように背景をつけることができました。
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:1px solid
#ff6600; background-color:#ffcc99;
"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「 dashed 」をつかって枠を点線に。
「border:1px」のとき
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:1px dashed
#339933;"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「border:3px」「background-color:#ccffcc;」のとき
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:3px dashed
#339933; background-color:#ccffcc;
"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「 double 」をつかって枠を2重に。(「border:2px」以下だと2重になりません)
「border:3px」のとき
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:3px double
#3300ff;"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「border:4px」「background-color:#ccccff;」のとき
(外側の枠が太くなりました）
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:4px double
#3300ff; background-color:#ccccff;
"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「 dotted 」をつかって枠をかわいく。
「border:3px」のとき
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:3px dotted
#6600ff;"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
「border:4px」「background-color:#ccccff;」のとき
ここに文章や画像をいれます
入力ソースはこちら。
<table width="300" height="50" style="border:4px dotted
#6600ff; background-color:#ffccff;
"
>
<tr><td>ここに文章や画像をいれます</td></tr></table>
<tr><td>ここに文章や画像をいれます</td></tr></table>
このように色々な枠をつくることができました。
次回は、この枠をつかって、さらに遊んでみます！
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 10:11:34
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
