SUNABA KOZA ８日目 HTML CSS の振り返り
こんにちは、コイアイです。
遅くなってすみません、このnoteは７月１０日分です。
よしなに。
課題
あらかじめ用意されたHTML CSS のページを 見やすくするという課題がでました、皆さん それぞれの回答をもってきていて とっても楽しかったので書いていきます 。
下のリンクはワタシが実際に作ったページです、まだひどい出来ですが良ければ...。
１： flex box でアイテム同士の間を開けるには？
上の写真のようにアイテム同士の隙間がないのは見づらいですよね...？
ということで隙間を開けていきましょう。
はい！デキタ。
フレックスボックスのアイテムに padding または margin を使えば スペースを開けられるのですが、
アイテムに width : 30% の指定と 親要素に justify-content : space-around を指定すると間も空いて、次の課題２も同時にクリアできるので もっともエレガンスな解答でしょう。
スクール生の中には 適当な１文字を記入した アイテム を間に挟んで visibility : hidden を適応している方もいて 色んな回答があるんだな～ と思いマシタ。
２：カードの中の本文が中央寄せになっているので左寄せに
これはシンプルですね。
はい！キレイ。
本文に text-align:left; を適応させました。
３：flex アイテム内の文章の量にかかわらず大きさを均等にする。
現状だと真ん中のカードだけ幅広になっていますよね...。これを均等にしていきましょう。
はい！清楚！
１で二個目に挙げた例でも もちろん解決できるのですが 他には アイテム に width : 33% を指定していすることでも解決できます。
これまでの振り返り編
CSSのトレンドを意識しよう。
ページデザインにも流行廃りがあります。
モダンなページデザインを実現するために、流行の意識をしましょう！
apple めちゃめちゃクールだぜ...。
余談ですが、CSSアニメーションで めちゃめちゃかっこいい作品を上げている方もいまして、
こういう作品のソースコードを参照してみたり、CODEPENで色々探してみたりすると楽しそうですよね、ですよね！？
検索方法
５日目に書いたことの補足的な内容なのですが、みなさん検索に何を使っていますか？？
twitter だけではなく、
サロンやアパレルだったらinstagram
技術系ならqiita
イラストだったらpawoo だったりと、
求める情報ごとにSNSを使い分けるとヨイよねって話でした。
user agent sheet
chrome のデベロッパーツールに user agent sheet というのがあります。
これはブラウザ標準のCSSなので消せません！
打ち消したい場合はパワーで勝ちましょう。
ＨＴＭＬの頭に書くコードの意味
HTML の初めに DOCTYPE であったり utf-8 などと決まって書く文にもちゃんと 意味があります。
一個づつググるとためになるかもしれませんね、という事でした。
おわりに
投稿 めちゃめちゃ遅くなってすみません...。
課題で出された内容を伝えたくてページをいちから作っていたのです、git等に慣れていなさ過ぎて紆余曲折あってやっと公開できた感じです...。
下のリンクの本にめちゃめちゃ助けられて、もしこの本とソースツリーがなかったら もっと時間がかかっていたと思いマス...。
ワタシのnote楽しみにしていた方がいましたら、遅くなって申し訳ないです。そしてアリガトウゴザイマス！！
それでは。