【縦派】レスポンシブ・スマホ対応のcssのtableのデザイン・作成プログラミングTwitter1Facebook0はてブ0Pocket0LINEコピー2019.03.03先日、tableが使いたくなり、今更ながら、スマホにも対応できるレスポンティブテーブルを調べてみました。「横スクロール」ではなく「縦」スマホで閲覧したとき、そのままにしておくと「はみ出る」という問題に直面します。デザインは「横スクロール」はui的に格好悪いと思うので、一定の幅になったら「縦」になる方法で作成しています。「横スクロール」は視線が散漫になるというか。コピペは学びがないと思うので、一応、段階的に作りかたを解説してみます。スポンサーリンクステップ1:テーブルの作成まず、ただのテーブルを作成します。見出しセル見出しセルデータセルデータセルhtmlです。<table><tr><th>見出しセル</th><th>見出しセル</th></tr><tr><td>データセル</td><td>データセル</td></tr></table>cssです。left;}ここまでは解説はいらない気がしますが、右上は1箇所だけ線をひいて、あとは各々の左下に線をひいていきます。collapse;はあまりにテーブルを使わないので忘れていました。隣接する境界線を結合して表示します。塗りを指定する場合、塗りと線がぴったりとあいます。block;で縦並び、data-labelの擬似要素で置き換え見出しセル1見出しセル2データセル1データセル2htmlです。data-label="見出しセル2">データセル2</td></tr></tbody></table>theadとtbodyをセットで追加しました。data-labelも追加しました。cssでtheadを消去して、代わりにdata-labelでテキストを表示します。}}ひとつひとつわけて解説します。block;で縦に並べます。none;}で見出しを消します。attr(data-label);を追加して1つのセルに擬似要素で表示させます。left;して完了です。細かいとところやサイズはお好みでお願いします。ステップ3:横に項目名をつけるこのままだと縦横のテーブルではありません。data-label="見出しセル2">データセル2</td></tr></tbody></table>項目Aにはdata-labelをつけません。項目の量はいくつになるかわかりませんから、ひっくり返して縦長に設定するわけですね。bold;}項目Aに色をつけるコードです。擬似クラスの:first-childは最初の子要素にスタイルを適用するコードです。}}項目Aが縦になったとき、色をつけるコードです。横の見出しは塗り分ける場合はどうしましょう。擬似要素を使っているため、1つのセルになっています。背景色を2色で分割する方法としてlinear-gradientがあります。}}セルが別れているわけではないため、文字が長い場合、色に浸透してしまいます。強引な気もしましたので、もっとよい方法があれば知りたいですね。【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】プログラミングスクールは格安に!cssやphpも楽勝に!電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。Unlimitedを含む)や動画をまとめていきます。wordpressであってもphpの基本は変わりません。phpの書籍は...2017.12.29プログラミングvue.js/vuex/nuxtのおすすめ入門本(書籍)やサンプルコードvue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしていま...2020.01.15プログラミングudemyのセールはいつで頻度は?ユーデミー社の口コミudemyが日本に上陸する前から知っていたユーデミユーザーです。英語の技術系コンテンツをよく買っていました。udemyとは動画学習サイトです。GithubとBitbucketのどちらがいいのでしょうか。Github、Bitbucket、SourceTreeなどをノウハウの覚書もかねていきます。どれを使うのか、ちょっと迷いましたが、いろいろと比較してRemodalを使うことにしました。決め手は次の2点です。蛍光ペンのマーカーのような効果を作成できます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。漫画や小説で安いアプリ/サイトはどこ!?udemyのセールはいつで頻度は?ユーデミー社の口コミタイトルとURLをコピーしました。