1437220
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

お取り寄せいいもの見つけたよ！

【毎日開催】

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

10秒滞在

いいね! --/--

次の日記を探す

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

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

楽天カード

購入履歴

【送料無料】 KITEN キテンリポソームビタミンC 2000mg 皮膚科医監修ハリツヤ【楽天ランキング1位】ビタミンC 楽天ランキング1位 KITEN キテンリポソームビタミンC サプリメントビタミンC サプリ 2000mg 栄養機能食品特許成分配合高吸収高濃度持続型医師監修日本製 120粒 30日分
ファッションブランドブレアゾン Jun Yoshida デザインイタリア製牛革フィレンツェネイビーローズブラック黒ローズグレーグレージュ GIOVANNI ジョバンニ【トートバッグ】VREASON ヴレアゾン日本製本革トートバック A4 ファイルフォーマルビジネス雑誌収納ハンドバッグバックカブセ 2本手レディースレザー本革牛革革皮人気トレンド使いやすい機能的充実おしゃれカラーきれい可愛いかわいい黄金比
ファッションブランドブレアゾン Jun Yoshida デザインイタリア製牛革フィレンツェネイビーローズブラック黒ローズグレーグレージュ GIOVANNI ジョバンニ【トートバッグ】VREASON ヴレアゾン日本製本革トートバック A4 ファイルフォーマルビジネス雑誌収納ハンドバッグバックカブセ 2本手レディースレザー本革牛革革皮人気トレンド使いやすい機能的充実おしゃれカラーきれい可愛いかわいい黄金比
ファッションブランドブレアゾン Jun Yoshida デザインイタリア製牛革フィレンツェネイビーローズブラック黒ローズグレーグレージュ GIOVANNI ジョバンニ【トートバッグ】VREASON ヴレアゾン日本製本革トートバック A4 ファイルフォーマルビジネス雑誌収納ハンドバッグバックカブセ 2本手レディースレザー本革牛革革皮人気トレンド使いやすい機能的充実おしゃれカラーきれい可愛いかわいい黄金比
令和5年産　玄米　30kg　ななつぼし　北海道　送料無料　精米無料

カレンダー

プロフィール

かずさか

フォローする

カテゴリ

楽天ｔｏｔｏ

(1)

サイド自由欄

< 新しい記事

新着記事一覧(全5054件)

過去の記事 >

2004年08月17日

テｰブル（　table　）を使ってセル内にスクロールバーつきのボックスを配置してみましょう。

次の３種類のタグにスタイルを設定してみます。

１　特定の範囲を設定する　div　タグ
　　（楽天ヘルプの利用できる要素に style は含まれていません）

２　特定の範囲を中央揃えする　center　タグ

３　段落を設定する　p　タグ

下で使っているテーブル（　１行３列　）のタグ

<table border="1" bordercolor="blue" bgcolor="#eeeeee" cellspacing="0" cellpadding="0" align="center"><tr><td><div style="overflow:scroll;width:220px;height:200px;">
div　タグに指定
テキスト内容によって高さを変更する
 
 </div></td><td><center style="overflow:scroll;width:220px;height:200px;">
center　タグに指定
テキスト内容によって高さを変更する
 
 </center></td><td>
ｐ　タグに指定
テキスト内容によって高さを変更する
 
 </td></tr></table>

１　div　タグを使ったボックス
テキスト・画像およびテーブルの配置ができます
行揃えは　align　属性で指定
画像

の表示
２行２列のテーブル

１-１	１-２
２-１	２-２

２　center　タグを使ったボックス
テキスト・画像およびテーブルの配置ができます
行揃えを中央で使う時に便利
画像

の表示
２行２列のテーブル

１-１	１-２
２-１	２-２

３　ｐ　タグを使ったボックス
テキストや画像の配置ができます
行揃えは　align　属性で指定
画像の表示
２行２列のテーブル

１-１	１-２
２-１	２-２

セルに背景画像を１点配置してセル内にスクロールバーつきのボックス(今回は　ｐ　タグ)を使ってみます。下で使っているテーブル（　１行３列分　）のタグ緑色はセルに背景画像の指定 <table border="1" bordercolor="blue" bgcolor="#eeeeee" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg);background-repeat:no-repeat;background-position:left top;"><p style="overflow:auto;width:220px;height:200px;"> １　背景画像配置位置　　水平方向　左　　垂直方向　上 <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></p></td><td style="background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg);background-repeat:no-repeat;background-position:center center;"><p style="overflow:auto;width:220px;height:200px;"> ５　背景画像配置位置　　水平方向　中央　　垂直方向　中央 <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></p></td><td><p style="overflow:auto;width:220px;height:200px;background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg);background-repeat:no-repeat;background-position:right bottom;background-attachment:fixed;"> ９　背景画像配置位置　　水平方向　右　　垂直方向　下　　背景画像が一部スクロールバーに隠れるためボックスに指定　　（background-attachment:fixed;を追加）　 <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></p></td></tr></table> 背景画像のアドレスは使う画像に変更して下さい。３・６・９は背景画像がスクロールバーで一部隠れるため背景画像をボックスに指定しています。
１　背景画像配置位置　　水平方向　左　　垂直方向　上	２　背景画像配置位置　　水平方向　中央　　垂直方向　上	３　背景画像配置位置　　水平方向　右　　垂直方向　上
４　背景画像配置位置　　水平方向　左　　垂直方向　中央	５　背景画像配置位置　　水平方向　中央　　垂直方向　中央	６　背景画像配置位置　　水平方向　右　　垂直方向　中央
７　背景画像配置位置　　水平方向　左　　垂直方向　下	８　背景画像配置位置　　水平方向　中央　　垂直方向　下	９　背景画像配置位置　　水平方向　右　　垂直方向　下

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

最終更新日 2006年02月08日 21時56分41秒
コメント(5) | コメントを書く

[カレンダーテーブル他] カテゴリの最新記事