kobasaです(´ω｀*)今日は時間割学習でチャットアプリ進めてました。
ヒントだけでHTMLとCSSを書いていくのはなかなか難しい。
どこまでdivで区切るのか考えないといけませんし、divがでてくればclass名が増えてゆく…
とりあえず初回なので自分で考えたクラス名で進めていますが、微妙ですねw
やはりコードを書く前の段階で完成形に近いHTMLの構造とクラス名は考えておく必要がありますね。
そのためには全体を把握しないといけないのですが、初見じゃキツイっす(´･ω･`)
あと判断がつかないのがpadding、marginをどのセレクタに記述するか。
表示がおかしければ間違ってるからいいんだけど、解説と似たような表示になるときが困る。
どっちでもいいのか、実はダメなのか。暗黙のルールみたいなのがあるんですかね?
ついでにセレクタ内のプロパティの記述順も地味に悩む。
僕はwidthとかサイズを指定するプロパティを先に書いてるんですけど、これでええんかな。
37日目の勉強内容
HTML/CSS新要素まとめ
box-sizingプロパティ：
box-sizing: border-box; と記述するとwidthで指定した値がborder、paddingを含むようになりレイアウト崩れが起きにくい。
label要素：
フォームで使用し項目をlabelタグで囲むと、項目名をクリックしても入力要素をクリックしたことになる。
これによりinput type=”file” のデフォルトで表示されるボタンをdisplay: none;で消しつつ、自分で作ったボタンをクリックして画像ファイルを開くことができる。
overflowプロパティ：
子要素が領域内からはみ出してしまうとき、どのような表示にするかを指定できる。
overflow: scroll; ならスクロールバーが表示されるのでスクロールすることではみ出した部分を見ることができる。
README(拡張子.md)
アプリの説明書のようなもの。マークダウン方式でテーブルやアソシエーションを記述した。
ただテーブルを普通に記述するとかなりめんどくさい。そこでVSCodeの拡張機能の出番！
Text Tablesという拡張機能をインストールすれば表の幅の自動調整をしてくれるのでスペースで空白の調節する必要なし！
control + Q を2回押してTable Mode：Onにすれば使用できるぽい。
勉強中に発見できれば楽できたのにw
コメント