【demo01】2セルの場合の使用した例

480px でデザインが変更します。

CSS Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
レスポンシブデザイン 表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。

【demo02】横に長い場合 overflow-x と inline-block を使用した例

768px でデザインが変更します。

  CSS HTML jQuery PHP Illustrator Photoshop Fireworks
ユニオン太郎 3 3 3 3 3 3 3
ユニオン次郎 3 3 5 5 2 1 1
ユニオン三郎 1 1 1 1 5 5 5
ユニオン花子 2 2 2 3 2 3 3

【demo03】リスト風にした場合 list-item を使用した例

480px でデザインが変更します。

Webブラウザ Google Chrome Safari Mozilla Firefox Internet Explorer
アドビ製品 Illustrator Photoshop Lightroom Dreamweaver

元の記事に戻る