模範解答つき模写コーディング「For Santa! 」編に参加してみました。2024.12.16~22

2024年12月20日 18:30

クリスマス限定！というドットインストールの課題にチャレンジ！
このクラスでは、HTML / CSS で「サンタさんにお手紙が届くアプリ」の LP サイトの模写コーディングを行います。
内容自体はとてもシンプルで初学者向けかと思います。

通常の256timesは毎日課題が出されますが、今回のは課題は1日目のみで、解説と模範解答が毎日追加されていくのが異なる点。

模範解答とボリューミーな解説付きとのことで、勉強になりそうだなと思い参加。（プレミアムプランに加入していれば追加料金もかからず！）
1日目午前10時にお題が発表され、翌日午前10時までに初回提出しないと脱落！。。。とはいえ未完成でも、提出さえすれば大丈夫です。

提出の日は山に行っていて、帰ってから眠気との戦いだなぁと思っていたけど、何とか作って提出。
模範解答・解説は2日目から4日間、順次公開されていきます。

詳細を記載することはできないのですが、学んだこと、忘れていたことを記録していきます！

【Day2】HTML解説

imgタグにaltをつけるのを忘れずに。
imgタグにwidthとheightをつけるのを忘れずに。

サイズをどうするか迷っていたら忘れていました。とりあえず最初につけておきましょう。変えたい場合はCSSで変える。

pタグを使うか、divを使うか

なんとなく文っぽいとpタグ使ってしまいそうだけれど、長文の時のみ使う。

ボタンは、単にページ遷移するだけならばaタグで実装する。

フォームの情報を送信する、などの処理がある場合はbuttonタグを使用。

画像をhtmlで指定するか、CSSでbackgroundで指定するか。

どちらの考え方も正解、デザイナーの意図を反映することを心がける。
画像を HTML に <img> で置けば、文書構造上、意味のあるものとして配置できる。CSS で背景として敷けば装飾として解釈されるが、ビューポートの幅が狭い時の見た目をきれいに設定できる（らしい）。

【Day3】【Day4】CSS

・rgbaでカンマ区切りは古い。rgbスペース区切りと「/」で。

以前も書いたことありますが、色の指定方法。
rgbaはレガシーな書き方です。
色の指定にCSS変数を使った時の書き方を備忘で記載します。

//CSS

:root {
　--color_white: #ffffff;
  --color_white-rgb: 255 255 255;
}

.item {
  background: rgb(var(--color_white-rgb) / .7);　//← point!!
}

【Day5】レスポンシブ対応

Flex: 1;

いまだにしっくり覚えられてないflex:1;。
今回はflexの子要素が2つ。画像が固定値、テキスト部分が伸び縮みします。
この場合テキスト部分に flex: 1;を指定しないと、親要素いっぱいに広がりません。

子要素は幅が足りてませんが、今回親要素に背景がついていて幅いっぱいに広がっており、見た目はつけてもつけなくても変わりませんでした。でもつけたほうがいいの、、かな。まだちょっともやってます。

全体の左右のpaddingをどこにつけるか。

お題「ビューポートの幅を縮めた時にも、コンテンツの左右には 16px ずつの余白が保たれるようにしてください。」

コンテンツ幅を指定の通りにしているはずなのに指定より狭くなってしまい、flexがなんかしているのか。。。？と理解しきれていないflexのせいにしていたが、私のせいでした。

コンテンツに左右paddingに16pxをつけていて、その分狭くなっていました。コンテンツ幅に余白分を足さないといけなかった。
ところでこのpaddingをどこにつけるか。

パターン1：
左右の余白はセクション全体にpaddingで指定。コンテンツ幅には指定された値をそのまま使用。
パターン2：
コンテンツそのものにpaddingを指定し、コンテンツ幅はpaddingの値も含めた値を指定する（calc使ったり）。

どちらのパターンも存在する気がします。
今回の模範解答はパターン1、Dさんの直近の課題はパターン2でした。

あとがき

１時間でだいたいできれば、、って書いてたけど、２時間半くらいかかったし、見直しはもっとかかった。まだまだです。

カンプがFigmaとかXDだったら楽なんだろうけど。。画像なのがちょっと辛い。そこまでの精度は求められてないと思いますが、気になりだすと調整に時間がかかりますので、あまり気にしすぎず大体で作るのが良さそうです。

解説多いのありがたかったです。いろいろ復習になりました！
また同じような企画があれば、皆様もぜひご参加ください。