【html/css】tableを作成した時に使いたいこと

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

CSS

スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

今回10人中9人が挫折すると言われるプログラミングを、半年間もの間頑張れ、結果、今はPythonエンジニアとして働く事ができているのも、プログラミングスクールを利用して自ら目標を設定して講師の言う通りにひたすら打ち込んだまでです。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

結局一人だとどうしてもだらけてしまいます。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考えました。

無料カウンセリングで、あなたの悩みを相談してみてはいかがでしょうか?

Youtubeでおなじみのまこなり社長が運営するプログラミングスクールになります。

テックキャンプで無料相談を受ける

上記リンク先から無料相談ができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です