HOME > Web制作

制作実績







【横並びBOXコーディングパターン例】
固定BOX ・可変BOX・フロートBOX ・ フロートなしBOX コード例一覧
※下記は説明例のため、画像サイズをCSSで記述。本来は直タグで、width="" height=""指定がベスト
※CSSはこのHTML文書<head>内にインラインで記述してあります。

※実際のサイトHPサンプル


1.BOX枠固定

1-1.BOX枠縦横固定(画像縦横比率維持) ×フロート指定要素に直接「縦位置中央配置」指定は効かない



1-2.同上 float指定要素の中にBOXで「画像縦横中央配置」 ※分かりやすいようBOX高さ300pxにしています 〇



1_3. 同上(画像に枠線) 〇



2.BOXサイズ可変 ※サイズ可変BOXは読み込みスピードが結構遅くなる

2-1.高さ固定・幅可変BOX(画像に枠) 画像縦横比率維持・フロート(各段の画像数は可変) 同サイズの画像ならシンプルで〇



2-2.幅固定・高さ可変BOX float無し「display:table-cell」仕様(各段の画像数は固定) ▲DIVを挟まないといけない



2-3.同上 「display:inline-block」仕様 〇DIVなしで可能



ページの先頭へ