Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

余裕がある人向け課題 テーブル編 【30Daysトライアル2nd】

スポンサーリンク

tables

30Daysトライアル2nd Day14 余裕がある人向け課題をやった感想記事です。

 

 

課題の内容

Day14 余裕がある人向け課題の内容は3点ありました

  • Perfect pixelで確認
  • いろいろなバリエーションのテーブルを作ってみる
  • YouTubeを埋め込んでみる

この記事では「いろいろなバリエーションのテーブルを作ってみる」をチャレンジした感想を書いていきます↓

 

コーディング課題のリンクとイメージ

課題のURLこちら↓

https://xd.adobe.com/spec/eaa65528-0ca5-4874-6a44-2aed761a5d04-9c97/grid

(パスワードは東フリさんのスラックに参加すると確認できます)

 

 課題の完成イメージ↓ 

 

Timeの課題のテーブルは歯医者さんなどに使われていそうで、No Borderの方は物件紹介などにつかわれていそうなテーブルです。

tables

 

 

チャレンジ結果

この課題ではテーブル内のセルが結合している部分があったり、特定のセルや行の色を変えたりする練習ができました。

 

うまくいかない所や、つまづいたときは本課題の時にもお世話になった記事を参考にして作り上げました。

 

参考記事のリンクです↓

CSSでテーブルを作る上で実践的に覚えておきたいこと | HPcode

HTMLのtableでテーブルを作る方法と応用テクニックを解説 | webliker

 

See the Pen 30 DAYS trial 2nd table by Yaponka (@Yaponka) on CodePen.

レスポンシブが苦手なもので、レスポンシブにはなってないです。。

 

最後に

本課題でテーブルを作った時にテーブルの作り方の基本を理解できていたので今回の余裕がある人向けの課題は比較的時間がかからずに完成させることができました。

 

できないこと数え出したら切りがないですが、30Daysトライアルの課題を進めていくことでできることも少しずつ増えてきているので、少しでもできるようになったことを喜びながら前に進んでいきます。

 

30Daysトライアル2ndの本課題の感想はこちら↓

treatmyself.hatenablog.jp