PR
購入履歴
ファッション ブランド ブレアゾン Jun Yoshida デザイン イタリア製 牛革 フィレンツェ ネイビー ローズ ブラック 黒 ローズ グレー グレージュ GIOVANNI ジョバンニ【 トートバッグ 】VREASON ヴレアゾン 日本製 本革 トート バック A4 ファイル フォーマル ビジネス 雑誌 収納 ハンド バッグ バック カブセ 2本手 レディース レザー 本革 牛革 革 皮 人気 トレンド 使いやすい 機能的 充実 おしゃれ カラー きれい 可愛い かわいい 黄金比
ファッション ブランド ブレアゾン Jun Yoshida デザイン イタリア製 牛革 フィレンツェ ネイビー ローズ ブラック 黒 ローズ グレー グレージュ GIOVANNI ジョバンニ【 トートバッグ 】VREASON ヴレアゾン 日本製 本革 トート バック A4 ファイル フォーマル ビジネス 雑誌 収納 ハンド バッグ バック カブセ 2本手 レディース レザー 本革 牛革 革 皮 人気 トレンド 使いやすい 機能的 充実 おしゃれ カラー きれい 可愛い かわいい 黄金比
ファッション ブランド ブレアゾン Jun Yoshida デザイン イタリア製 牛革 フィレンツェ ネイビー ローズ ブラック 黒 ローズ グレー グレージュ GIOVANNI ジョバンニ【 トートバッグ 】VREASON ヴレアゾン 日本製 本革 トート バック A4 ファイル フォーマル ビジネス 雑誌 収納 ハンド バッグ バック カブセ 2本手 レディース レザー 本革 牛革 革 皮 人気 トレンド 使いやすい 機能的 充実 おしゃれ カラー きれい 可愛い かわいい 黄金比
令和5年産 玄米 30kg ななつぼし 北海道 送料無料 精米無料
カレンダー
か ず さ か
お買い得情報や、売り切れ続出の人気アイテムの入荷情報！
カテゴリ
その他
(656)最新お勧め情報
(894)イチロー選手関係
(1055)川崎宗則選手関係
(167)第９４回全国高校野球選手権大会
(67)ＭＬＢポストシーズン２０１１年
(59)ＭＬＢポストシーズン２０１０年
(43)ＭＬＢオープン戦他
(512)ＭＬＢポストシーズン２００９年
(47)第９３回全国高校野球選手権大会
(65)第９２回全国高校野球選手権大会
(65)第９１回全国高校野球選手権大会
(68)第８４回選抜高校野球大会
(49)第８２回選抜高校野球大会
(64)高校野球
(139)高校野球 地方大会結果
(49)スイーツ/洋菓子/和菓子
(14)海産物/肉/フルーツ/野菜
(21)ラーメン/うどん/そば/パスタ
(4)コーヒー/ココア/紅茶
(11)ドリンク/お酒/ワイン
(7)メンズファッション
(2)レディース ファッション
(10)キャラクターグッズ
(4)靴/ブーツ/スニーカー
(3)ダイエット/健康
(7)クッキング
(2)家電/AV・カメラ
(30)サッカー２０１０ワールドカップ
(114)楽天特有の機能他
(121)フリーソフト
(27)カレンダーテーブル他
(117)日記用テンプレート
(53)ＩＥ特有のフィルタ処理
(59)写真集・ＤＶＤ
(11)松井秀喜選手関係
(249)城島健司選手関係
(181)楽天スーパーDEAL
(5)ホテル
(2)楽天ｔｏｔｏ
(1)サイド自由欄
日記でボックスを並べて使ってみましょう
４つのボックスを並べて配置してみます
上下左右の調整はマージンを使うと便利です
日記は自動改行となるので注意が必要です
幅 １５０ 高さ１５０ のボックスで配置してみます
１・ＨＴＭＬタグをボックス毎に改行して書いた場合は縦に配置されます
ＨＴＭＬタグは
<B style="width:150;height:150;background-color:green;">
幅 １５０
高さ１５０</B>
<B style="width:150;height:150;background-color:fuchsia;">
幅 １５０
高さ１５０</B>
<B style="width:150;height:150;background-color:gray;">
幅 １５０
高さ１５０</B>
<B style="width:150;height:150;background-color:teal;">
幅 １５０
高さ１５０</B>
ボックスの配置は下のようになります
幅 １５０
高さ１５０
幅 １５０
高さ１５０
幅 １５０
高さ１５０
幅 １５０
高さ１５０
２・ ＨＴＭＬタグを連続して書いた場合は横に並べて配置されます
ＨＴＭＬタグは
<B style="width:150;height:150;background-color:green;">
幅 １５０
高さ１５０</B><B style="width:150;height:150;background-color:fuchsia;">
幅 １５０
高さ１５０</B><B style="width:150;height:150;background-color:gray;">
幅 １５０
高さ１５０</B><B style="width:150;height:150;background-color:teal;">
幅 １５０
高さ１５０</B>
ボックスの配置は下のようになります
幅 １５０
高さ１５０
幅 １５０
高さ１５０
幅 １５０
高さ１５０
幅 １５０
高さ１５０
３・ マージンを使ってボックスを配置してみましょう
隣接するボックスの間隔（余白領域）を指定できます
ボックスを配置する範囲 幅 ５５０ 高さ ５００
マージンを個別に指定する場合
margin-top: ● 上側
margin-right: ● 右側
margin-bottom: ● 下側
margin-left: ● 左側
マージンを一括して指定する場合
margin: ● 上下左右同じ
margin: ● ● 上下・左右
margin: ● ● ● 上・左右・下
margin: ● ● ● ● 上・右・下・左
ＨＴＭＬタグは
<P style="width:550;height:500;text-align:left;background-color:#ffffcc;">
<B style="width:150;height:150;margin:50;background-color:green;"><BR>幅 １５０<BR>高さ１５０<BR>マージン<BR>上 50 下 50<BR>右 50 左 50
</B><B style="width:150;height:150;margin:75 75 25 75;background-color:fuchsia;"><BR>幅 １５０<BR>高さ１５０<BR>マージン<BR>上 75 下 25<BR>右 75 左 75
</B><B style="width:150;height:150;margin:25 75 75 25;background-color:gray;"><BR>幅 １５０<BR>高さ１５０<BR>マージン<BR>上 25 下 75<BR>右 75 左 25
</B><B style="width:150;height:150;margin:50 25 50 125;background-color:teal;"><BR>幅 １５０<BR>高さ１５０<BR>マージン<BR>上 50 下 50<BR>右 25 左 125
</B></P>
ボックスの配置は下のようになります
幅 １５０
高さ１５０
マージン
上 50 下 50
右 50 左 50
幅 １５０
高さ１５０
マージン
上 75 下 25
右 75 左 75
幅 １５０
高さ１５０
マージン
上 25 下 75
右 75 左 25
幅 １５０
高さ１５０
マージン
上 50 下 50
右 25 左 125
高
さ
５
０
０
幅５５０
４・ 各ボックスのマージン
わかりやすいようにマージン部分に背景色をつけてあります
マージンについては こちら
を参考に
幅 １５０
高さ１５０
マージン
上 50 下 50
右 50 左 50
幅 １５０
高さ１５０
マージン
上 75 下 25
右 75 左 75
幅 １５０
高さ１５０
マージン
上 25 下 75
右 75 左 25
幅 １５０
高さ１５０
マージン
上 50 下 50
右 25 左 125
