tableを作成した時に、テーブルが崩れる！カッコよくレスポンシブデザインに仕上げたい！なんてことはありませんでしょうか？ここ最近flex-boxを触ることが多かったので試しに見本を作成してみました。
キーワード
- div span
- ul, li 擬似クラス
- flex-box
- word-break
コンテンツ
実際の動き
兎にも角にも実際の動きをみてもらって完成のイメージを作るのが先決です。
したいこと
ここでは先に記述したキーワードを実装していきます。
技術
- div span でdisplay:none;の使い方
- ul, li 擬似クラスの扱い方
- flex-boxで見栄えの良いレスポンシブデザイン
- word-breakで長いメールアドレスも収納
書いたコード
tableの中身は実際にはテンプレートタグで回すのが効率的なのですが今回はそこまで裏のことも記載できないので、下記の記述になります。
https://jsbin.com/?html,css,output
試し書きしたい人は上記サイトからどうぞ
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<table> <thead> <tr> <th>id</th> <th>name</th> <th>from</th> <th>age</th> <th>gender</th> <th>email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><div class="container"><span>name</span><span>Alex</span></div></td> <td><div class="container"><span>from</span><span>Brazil</span></div></td> <td><div class="container"><span>age</span><span>24</span></div></td> <td><div class="container"><span>gender</span><span>Male</span></div></td> <td><div class="container"><span>email</span><span>alex@example.com</span></div></td> </tr> <tr> <td>2</td> <td><div class="container"><span>name</span><span>John</span></div></td> <td><div class="container"><span>from</span><span>America</span></div></td> <td><div class="container"><span>age</span><span>25</span></div></td> <td><div class="container"><span>gender</span><span>Male</span></div></td> <td><div class="container"><span>email</span><span>John@example.com</span></div></td> </tr> <tr> <td>3</td> <td><div class="container"><span>name</span><span>Kim</span></div></td> <td><div class="container"><span>from</span><span>Korea</span></div></td> <td><div class="container"><span>age</span><span>33</span></div></td> <td><div class="container"><span>gender</span><span>Male</span></div></td> <td><div class="container"><span>email</span><span>kimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkimkim@example.com</span></div></td> </tr> <tr> <td>4</td> <td><div class="container"><span>name</span><span>Ai</span></div></td> <td><div class="container"><span>from</span><span>Japan</span></div></td> <td><div class="container"><span>age</span><span>24</span></div></td> <td><div class="container"><span>gender</span><span>Female</span></div></td> <td><div class="container"><span>email</span><span>ai@example.co.jp</span></div></td> </tr> </tbody> </table> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
table th, td{ border: 1px solid #aaaaaa; } table th{ background: #eeaaaa; color: #ffffff; } table td{ background: #ffffff; } /* フレキシブル時の要素を消しておく */ table tbody tr td span:first-child{ display: none; } /* iPadレスポンシブ */ @media screen and (max-width: 768px){ table thead tr{ display:none; } table td{ display: block; width: 100%; } table tbody tr td:first-child{ background: #aaaaee; color: #ffffff; text-align: center; } .container{ display: flex; flex-shrink:0; flex-grow:o; } .container span:first-child{ display: inline; color: #8a7790; flex-basis: 5em; text-align: left; } .container span:last-child{ flex-basis: calc(100% - 5em); word-break: break-all; } } |
スクールを利用して本格的に学ぶ
いかがでしたでしょうか？
今回10人中9人が挫折すると言われるプログラミングを、半年間もの間頑張れ、結果、今はPythonエンジニアとして働く事ができているのも、プログラミングスクールを利用して自ら目標を設定して講師の言う通りにひたすら打ち込んだまでです。
挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。
結局一人だとどうしてもだらけてしまいます。
これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。
ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考えました。
無料カウンセリングで、あなたの悩みを相談してみてはいかがでしょうか？
Youtubeでおなじみのまこなり社長が運営するプログラミングスクールになります。
上記リンク先から無料相談ができます。
コメントを残す