テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。 見出しとコンテンツを交互に縦表示 テーブルの縦横を切り替える テーブルそのものをスクロール レスポンシブでレイアウトを変更する 一般的にテーブルはTableタグを使っているでしょう。 その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。 これらを操作す
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーブルタグをレスポンシブサイトでも見やすくする方法・４選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
