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

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

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

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

楽天カード

購入履歴

【送料無料】 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 ななつぼし 北海道 送料無料 精米無料

カレンダー

プロフィール

か ず さ か

か ず さ か

カテゴリ

サイド自由欄











2004年08月17日
XML




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

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

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

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

3 段落を設定する p タグ


下で使っているテーブル( 1行3列 )のタグ


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



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


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


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

1-11-2
2-12-2



セルに背景画像を1点配置して
セル内にスクロールバーつきのボックス(今回は p タグ)を使ってみます。


下で使っているテーブル( 1行3列分 )のタグ
緑色はセルに背景画像の指定

<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;">
1 背景画像配置位置
  水平方向 左
  垂直方向 上
<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;">
5 背景画像配置位置
  水平方向 中央
  垂直方向 中央
<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;">
9 背景画像配置位置
  水平方向 右
  垂直方向 下
  背景画像が一部スクロールバーに隠れるためボックスに指定
  (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>


背景画像のアドレスは使う画像に変更して下さい。
3・6・9は背景画像がスクロールバーで一部隠れるため
背景画像をボックスに指定しています。





1 背景画像配置位置
  水平方向 左
  垂直方向 上










2 背景画像配置位置
  水平方向 中央
  垂直方向 上










3 背景画像配置位置
  水平方向 右
  垂直方向 上










4 背景画像配置位置
  水平方向 左
  垂直方向 中央










5 背景画像配置位置
  水平方向 中央
  垂直方向 中央










6 背景画像配置位置
  水平方向 右
  垂直方向 中央










7 背景画像配置位置
  水平方向 左
  垂直方向 下










8 背景画像配置位置
  水平方向 中央
  垂直方向 下










9 背景画像配置位置
  水平方向 右
  垂直方向 下











人気ランキング   





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

最終更新日  2006年02月08日 21時56分41秒
コメント(5) | コメントを書く
[カレンダーテーブル他] カテゴリの最新記事



© Rakuten Group, Inc.
X