【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブ化するなら知っておきたいtable-cellの使い方

レスポンシブ化するなら知っておきたいtable-cellの使い方

レスポンシブ化するなら知っておきたいtable-cellの使い方

こんにちは、ECプロデュース部の岡本です。

今回は「要素を段落ちさせずに並べること」ができる便利なプロパティ「table-cell」について紹介します。

RWDグローバルナビの課題:段落ち

サイトをレスポンシブする際、必ず問題になるのが「グローバルナビの扱い方」です。

floatやinline-blockで作成した場合、全ての要素で単位を「%」に指定しないと「段落ち」が発生します。

段落ちの例
段落ちの例

しかし上の画像のように一部のコンテンツの横幅を固定化させたいケースもあります。

こんな時に使いたいのが、「table-cell」です。

tableレイアウトを実現する:table-cell

table-cell実装例
table-cell実装例

「table-cell」は要素を「tdタグ」と同じにするプロパティで、displayにて設定します。

親要素に「display:table」を設定する必要がありますが、この2つだけでほぼtableタグと同じ動きを実現させることができるのです。

固定化させる要素「以外」に「display: table-cell」を設定し、固定化させる要素に「width: 200px」の様に数値を設定します。

これだけで段落ちすることなく、固定化させた要素以外がレスポンシブに幅を変えていくグローバルナビを作ることができます。

サイドバーなどにも応用可能!

このtable-cellを応用することで、「固定幅のサイドバーを持つレイアウト」も実現できます。

各プロパティの設定はグローバルナビとほとんど同じです。

  1. 親要素に「display: table」を設定
  2. 固定化させる要素に「width:ピクセル幅」を設定
  3. その他の要素に「display: table-cell」を設定

という3ステップで実装できます。

またtable-cellのもう1つの便利な点は、「table-cell要素だけで%指定ができる」ということです。

3カラムのレイアウトを作る際、それぞれのwidthを以下のように設定できます。

table-cell 3カラム

ピクセル指定した要素の幅を考慮せず、残りの要素の幅=100%として計算をしてくれます。

そのためレイアウトを設定する際、細かな計算をすることなく調整することができます。

table-cell動作サンプル

実際にtable-cellを使用したページを作成しました。

グローバルナビの「home」とサイドバーの「200px固定エリア」の2箇所が固定化され、残りの要素がレスポンシブに動作します。

スマートフォン対応や背景色の設定などのプロパティが混ざっていますが、基本的には上記の記述をそのまま設定して作成しています。

まとめ

CSSの登場によって「バッドプラクティス」扱いされやすい「tableでのレイアウト」。

しかし今回の様に、それぞれの特性を活かすことでよりリッチなレスポンシブレイアウトを実現させることができます。

なお、記事リストや商品リストのような「複数行になるコンテンツ」ではレイアウトが崩れてしまいますのでご注意下さい。

 

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+