こんにちは、マサ( @Masayuki_Hirai )です。
僕もお世話になっている「30DAYSトライアル」ですが、『コーダーとして企業と仕事可能なレベルになるためのカリキュラム』編が2月16日よりスタートしました。
https://twitter.com/showheyohtaki/status/1096341310905053185
この記事ではDAY1.課題のポイントをまとめていくので、これから取り組む方の参考になれば幸いです。
タップできる目次
DAY1.課題の概要
https://twitter.com/showheyohtaki/status/1096580459348148225
まずはDAY1.課題の概要から。
今回は「デザインカンプ」と呼ばれる「サイトの見本設計図」を見ながら、模写コーディングをおこなってゆきます。
課題の詳細は、講師である「はにわまん」さんの以下の記事をご覧ください。
ちなみに「XD」とは「Adobe XD」の略で、Adobe社が提供しているWebサイトやモバイルアプリのデザインに適したUX/UIソリューションです。
DAY1.課題のポイント
ヘッダーを上部に固定
「ヘッダーを上部に固定」するには、ヘッダーのCSSセレクタにて「position: fixed;」を記述すればオッケーです。
要素を横並びにする方法
ヘッダー内の要素を横並びにする方法ですが、今回は「Flexbox」を使ってみました。
「Flexbox レイアウト」は、親要素のCSSに「display: flex;」を指定するだけで、簡単に子要素を横並びにすることができます。
おすすめ記事：CSS Flexboxのチートシートを作ったので配布します｜Webクリエイターボックス
ちなみに、カエルを移動させるゲームを通じて「Flexbox」を学べるサイトもあるので、興味のある方はぜひ遊んでみてくださいね ♪
おすすめサイト：Flexbox Froggy
リセットCSSの重要性
僕がDAY1.課題に取り組んだ際、背景画像にわずかな隙間ができて困ってしまいました。
Chromeのデベロッパーツールで確認したところ、「user agent stylesheet」(ブラウザごとにデフォルトで用意されたCSS)にmarginが設定されていたのが原因でした。
そこでリセットCSSを記述したところ、きちんと表示できるようになりましたよ。
おすすめ記事：初心者向けリセットCSSを自作する手順まとめ｜creive
box-sizing: border-box; の適用
CSSのデフォルトは「box-sizing: content-box;」となっており、要素の幅や高さにpaddingやborderが含まれないのですが、それだと細かい位置の調整がすこし面倒。
しかし「box-sizing: border-box;」と記述すれば、paddingやborderが要素に含まれるようになるので、レイアウトが楽にできるようになります。
僕は以下のサルワカさんの記事を参考にして
* {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
と、全ての要素（*）に対してborder-boxが適用されるようにしました。
参考記事 :【CSS】box-sizing:border-box の使い方｜サルワカ
レスポンシブでいい感じに表示
レスポンシブデザインを調整する時のブレークポイントですが、今回は以下の記事を参考にして
- PC ⇒ インナーの幅まで
- タブレット ⇒ インナーの幅から768px (iPadの横幅) まで
- スマホ ⇒ 767px未満
という感じで設定してみました。
おすすめ記事：レスポンシブのブレークポイントの決め方｜HPcode
DAY1. まとめ
今回の課題のデザインはシンプルなものなので「楽勝だぜ！」と思っていたのですが、いざ取り組み始めると全然うまくいかず泣きそうになってしまいました…(笑)
やはりコーディングは、基礎をしっかり固めることが大切ですね。
というわけで、お互いに「30DAYSトライアル」を頑張ってゆきましょう！！
【 おすすめセール情報 】
楽しくデザインを学べる『なるほどデザイン』のKindle版が、現在セール中につき55%オフの972円になっています。
豊富な作例を見ながらデザインを学べる良書なので、興味のある方はぜひチェックしてみてくださいね ♪
関連記事 :【DAY1】XDからヘッダーとメインビジュアルのコーディング【#30DAYSトライアル2nd】｜エンジニアステップ
コメントを残す
コメントを投稿するにはログインしてください。