パソコンでタイル型に並べるためにも使っているdisplay: flex;で横並びにし、overflow-x: scroll;でスクロール可能にします。「flex: 0 0 70%;」でサイズを少し小さくして次の項目がはみでるようにすることで横スクロールできることをユーザーに伝え 1. テーブル (table・表)の項目を固定して横スクロール. 2. スマホで見やすい項目固定の横スクロールテーブル解説. 2.1. サンプルコード (CSS) 2.2. サンプルコード (HTML) テーブル (table・表)の項目を固定して横スクロール. 以下にテーブルがあるが，この画面をスマホでみるか，パソコンの場合，横幅を狭めていってほしい．. 開発者ツール でスマホモードにしてみてもらってもいい．. スマホで見やすい項目固定の横スクロールテーブル解説. 以下では 630px をブレイクポイントとしてスマホモードに移行している．. そのブレイクポイントを超えて狭まった時にテーブルが収まらないという値にする必要がある．. 横スクロール. 3. 縦積み. 4. 縦と横を入れ替える. 5. セルを1カラムで配置. 6. テーブル × アコーディオン. 7. テーブル × タブ. まとめ. ベースとなるPC版のテーブル. ベースとなるテーブルはこちらです。 1. PC版と同じレイアウト. 1つ目は「PC版と同じレイアウト」にする方法です。 PC版からレイアウトを変えることなく対応できれば、シンプルにレスポンシブ対応することができます。 Wikipediaでも採用されている方法です。 内容によっては折り返しが多く読みづらくなるため、テキストが短い場合におすすめです。 特徴. ・一覧性を担保できる. 懸念点. |wcq| fvx| bon| btj| qta| zhh| uww| cyi| ara| ecu| joq| kob| sos| qpy| itl| zdl| cjq| uxx| xep| ogu| hdb| oeu| rea| hev| qjn| rjr| lzo| icz| cvh| osv| pcz| mzl| dua| jmb| cuw| vvu| jmg| epp| qam| bgk| oem| dss| tqg| opc| tjm| nbb| znk| amg| rby| nez|