2ndのDAY9の課題は「XDからヘッダーとメインビジュアルのコーディング」になります。
2ndの課題は実際のWebコーダーの仕事に合わせて前編でAdobe XDのデザインカンプからコーディングで進めていくようです。
「Adobe XDが必要なのかよ・・・」
と思った方。ご安心ください。Adobe XDにはオンラインツールがあり、デザインカンプの閲覧や要素サイズの確認などが可能となっており、これを使って課題を進めていかれるようなので、現時点でAdobe XDを購入する必要はありません。
Adobe XDの使い方もはにわまんさんがちゃんと記事にしてくれています。
Adobe XDのデザインカンプをURLで共有するメリットと使い方（※コーダー視点）
目次
DAY1で作成するデザイン
このデザインのヘッダーとメインビジュアル(画像とメッセージ、ボタン）を作っていきます。
指定されてる条件は以下の3点です。
- ヘッダーは上部固定
- レスポンジブでスマホ、タブレットでもいい感じに表示
- スマホ時のメニュー(メニュー1等)は(ひとまず)非表示
この条件にはもちろん「答え」は提示されていません。DAY0の記事にも書かれていたように自分で「答えを出す」必要があります。
これはやり甲斐がありそうですね。
ヘッダー
まずはヘッダーの作成です。
なんとか今までの記憶で完結することができました。
とか言いながら、はにわまんさんのレイアウトの基本である.innerの中央寄せを覚えよう！はすごい参考になりました。自分はこの記事で言われるinnerをいつもcontainerとしてクラス定義をしてましたが、なんとなくしっくり来てなかったのが、ようやくしっくりきた気がします。
一回ブログでもまとめたんですけどね。全然身についてなかったみたいです。
メインビジュアル
次はメインビジュアルの作成ですが、これも記憶の中で完結できたのでホッとしています。
レスポンシブ化
最後にレスポンシブ化です。
今回は以前Twitterで見つけたフォントサイズの指定方法を試してみました。
レスポンシブサイトの『font-size』を『rem』で指定するベストな書き方
詳細はリンクを見ていただきたいのですが、この方法を使用すればルート(htmlタグ)のフォントサイズを変更するだけで全体的なフォントの比率をコントロールし、それでも違和感を覚える箇所だけ個別にフォントサイズを指定していけばよくなるのでレスポンシブ化の対応がやりやすくなるはずです。
ブレークポイントの設定ははにわまんさんのレスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベストを参考にさせていただきました。
PC。
タブレット。
スマホ。
画像だとタブレットのほうがでっかく見える・・・。
余裕があったらったらやるやつ
レスポンシブ化までがDAY1の課題となっていますが、余裕がある場合に試してみるメインビジュアルやヘッダーのパターンがいくつか用意されています。
メインビジュアル：ヒーローイメージ
一番最初に表示される画面が画面いっぱいに画像（今回の場合はメインビジュアル）で覆われているデザインのことを言うらしいです。
自分で実装を試して見ましたが、メインビジュアルの高さを「vh」という単位で指定することで実装できました。
「vh」については自分も過去記事でも取り上げてますが、CSSでフルスクリーン(全画面) ＋ 縦横中央配置レイアウトを作る【3ステップ + おまけ】も参考になります。
ヘッダー：ブロック
ナビゲーションメニューの各項目がブロックようにヘッダーの高さに合わせた四角になるイメージですね。
これはaタグをinlen-blockに変えて、paddingの調整でいけました。
本当は【CSS】枠線を要素内側に引くための３つの方法に記載されているようなやり方が良いんでしょうけど、そもそもulタグを使ってなかったので、今回は無理矢理実装した感じになってしまいました。
でも、無理矢理でも実装できることが大事なはず！！
ヘッダー：グローバル
ヘッダーがロゴとナビゲーションメニューの2行に分かれているタイプのヘッダー。
headerタグの中にロゴ、ナビゲーションメニュー用のsectionタグを用意して、それぞれを配置することでクリア。
ヘッダー：3カラム
ロゴ、ナビゲーションメニュー、連絡先などの3カラムで構成されているヘッダー。
Flexboxを使用してクリア。
ヘッダー：中央
中央にロゴがあり、その左右にロゴをまたいでナビゲーションメニューとなっているヘッダー。
ナビゲーションメニューの間にロゴを入れて中央揃えでクリア。
感想・まとめ
いくつか怪しい箇所はありましたが、30DAYSトライアル1stと個人的に行っていた模写コーディングの経験で問題なくクリアできました。
Adobe XDのオンラインツールもはにわまんさんの有料noteの模写コーディングをした際に使用していたのも大きかったですね。
余裕があったらのパートはググりながらでしたが、一応全て「答えを出す」ことはできました。
でもまだまだ序の口というか1stの復習レベルの内容だと思うので、気を引き締めていきます。
自分のDAY1のソースコードはGitHubに上げていますので、詰まった時などの参考にどうぞ(参考になるかは分かりませんが)。
https://github.com/Jyu2Jr6/30daystrial-2nd/tree/day1
