こてんぐ

コーディング鋭意勉強中📖

[こてんぐ @coteng0105]

10/21　記録
✔︎初級模写

⏰所用時間：4h

📝コメント
・姓名の分割表示にの方法を別サイトを参考に作ってみた
・（ボタンリンク）aタグの中にインタラクティブコンテンツは入れられない。
・gridを縦に並べるのはgrid-template-columns:1fr;
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/20　記録
✔︎初級模写

⏰所用時間：1.5h

📝コメント
・autocomplete属性でユーザビリティの向上
・inputとbuttonの仕様、利便性の違い
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/19　記録
✔︎初級模写

⏰所用時間：1.5h

📝コメント
・dl内のdt,ddの上下にborder追加する時、last-childでは記述できない…？
・formのinputにも<dl>使うのは現在でも主流なのだろうか…
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/17　記録
✔︎初級模写

⏰所用時間：1.5h

📝コメント
・mainvisual以下のコンテンツを揃えるのに、id,class指定でwidth設定
・画像を箱内で均等に複数列・行並べる時flex-wrap,から calc() or width%指定
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/16　記録
✔︎初級模写

⏰所用時間：3.0h

📝コメント
・dlのdt,ddの横並び％で幅調整
・複数htmlへのまたぎリンク
・ヘッダーの位置調整のためのline-height1
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/13　記録
✔︎初級模写+書籍

⏰所用時間：2.0h

📝コメント
・条件設定での複数画像の切り替えにはpicture
・form, input の復習
・属性名のcss指定、::placeholderでのcolor設定
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

@LTechJP ありがとうございます！
これからも模写に努めて参ります！

[こてんぐ @coteng0105]

10/10　記録
✔︎模写コーディング

⏰所用時間：3.0h

📝コメント
・divはblock。imgはインライン。margin：0autoきかない。
・containerをmainの外に設定する訳
・last-childの使い所
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/7　記録
✔︎模写コーディング

⏰所用時間：2.0h

📝コメント
・vwの使い所、仕様
・画像とテキストを違い違いに表示（row-reverse）
・containerクラスの使い所
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/5　記録
✔︎模写コーディング

⏰所用時間：2.0h

📝コメント
・左右で２分割のレイアウトでは箱にwidth:50％設定
・dt,ddを横並びにするにはflexでflex-wrap
％で幅を指定し両端レイアウトに
#codejump #Web制作 #プログラミング学習

[こてんぐ @coteng0105]

10/3　記録
✔︎模写コーディング

⏰所用時間：2.0h

📝コメント
・object-fit: cover は親箱ではなく、img に当てることで比率を保ったまま綺麗に拡大縮小できる
・画像を画面幅いっぱいに3等分する際はcalc(100% / 3)
・vertical-align の意義を理解。
#codejump #Web制作 #プログラミング学習