デイトラ2期 DAY1 XDからヘッダーとメインビジュアルのコーディング【30DAYSトライアル2nd】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY1 XDからヘッダーとメインビジュアルのコーディング」について解説します。

【デイトラDAY1課題】XDからヘッダーとメインビジュアルのコーディング

DAY1の課題は「XDからヘッダーとメインビジュアルのコーディング」です。

Webコーディング関係の用語について【簡単な確認】

Webコーディング関係の用語について、簡単な確認・復習です。
理解のために自分の言葉でまとめます。

  • Webコーダー:Webサイトデザインを、HTML&CSS&JavaScriptなどを使い、模倣(再現)する仕事
  • デザインカンプ:Webサイトの見本図。カンプは「comprehensive(包括物)」の略。
  • モックアップ:デザインカンプと同じ意味
  • XD(Adobe XD):サービス/ソフトウェア。デザインカンプ(見本)を作るのに使う(Adobe XDについて
  • レスポンシブ:レスポンシブデザイン(PCやスマホで良い感じに表示されるデザイン)のこと
  • ヒーローイメージ:画面の一番上に大きな画像があるデザイン ※映画のポスターで、ヒーローが真ん中にデカデカと映っている感じかな?

課題「XDのデザインカンプをレスポンシブ込でコーディングしてください」を言い換えると、

 

「AdobeXDというサービスで作られた、

サイトの見本図を見ながら、

スマホやPCでもいい感じに表示されるように、

HTML&CSSで書き起こしてください」

 

ってことですね。

以下、DAY1の課題「ヘッダーとメインビジュアルのコーディング」を実践した時の記録です。

 

デイトラ実践記録(コーディング時のメモ)

ヘッダーは上部に固定

ヘッダーは上部に固定

→「position: fixed;」を使う

 

レスポンシブでスマホ、タブレットでもいい感じに表示

レスポンシブデザインのためには、メディアクエリを使います(@media…ってやつ)。

スマホ、タブレットを設定する時のピクセルですが、はにわまんさんの記事を参考にしました。

タブレットだったら、min-width: 480px
パソコンだったら、min-width: 768px

レスポンシブデザインサイトの作り方。たった2つのことを覚えておけば簡単に作れますよ! | HPcode

 

メイン画像(背景画像の指定)

メイン画像(背景画像の指定)ですが、私は、「background-image: url(~~)」を使いました。

画面サイズ小さくしたときにも、画像が真ん中にあるようにしたかったので色々と試しました。

結局、こんな感じで設定しました

  • sizeをcoverにする→縦横比保持
  • positionをcenterにする→基準位置を「真ん中」で維持
  • no-repeatにする→繰り返さない
  • attachment: fixedにする→背景画像の位置を固定(スクロールしても動かない)

【ソース】

background-image: url(“../img/mainvisual.png”);

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

 

その他細々した実装

その他細々した実装について

  • aタグを「text-decoration: none;」で装飾無効にする
  • fontに游ゴシックを指定する ※後述
  • a:hoverで「border-bottom:solid 3px #E81919」みたいな感じで指定する

こんな感じですかね。

ちなみにfontに游ゴシックを指定する方法ですが、下記の記事が面白かったです。

今回は練習なので良いですが、本番では色々なOS/ブラウザでの挙動を意識したほうが良いかもしれませんね。

游ゴシックや游明朝を CSS で指定する時の注意 | レコチョクのエンジニアブログ

 

ありがちなコーディングミスまとめ

ありがちなコーディングミスまとめです。

※Slackの質疑応答/Twitterで見たミスも勝手にまとめています。

 

変更内容が反映されない(リンクの色が変わらない)

原因としては、CSSの配置順番ミスでした。

Bootstrapを使おうと途中から思って、index.htmlの<head>にBootstrapのCSSを追加したのですが

<link rel=”stylesheet” href=”css/style.css”>

を他のCSSより上の方に書いてしまったせいで、上書きされませんでした。

※後に置いたCSSが強い(後勝ちです)

 

レスポンシブデザインがうまく動かない

これも、大きい順番(あるいは小さい順番)に記述していないことが原因で発生することがしばしば。

以前ちらっと書きました

CSSは上から順番に読み取るので、メディアクエリの指定順番は

モバイルファーストの場合は「小さい→大きい」
デスクトップファーストの場合は「大きい→小さい」
で書くようです。

 

なんかよくわからないけどヘッダーの横幅がおかしい

ヘッダーの横幅がうまく表示されない…みたいな問題も発生しているようです。

※Slackでも質問出ました

こちらの記事を参考に、box-sizingを見直すと良いかもしれません。

【CSS】box-sizing:border-boxの使い方|効かない時は?

 

ちなみに上記記事でも紹介されていますし、他のソースコードでよく見かける

*{ box-sizing: border-box}

という指定は、すべての要素(アスタリスク*)に対して、box-sizingをborder-boxにする(widthで横幅指定した時に、paddingとborderも含める)という意味です。

私も今回の課題では、コレを使ってます。

 

以上「XDからヘッダーとメインビジュアルのコーディング」というお話でした。

今回も毎日課題に取り組んでブログ記事更新しますので、復習&理解向上にどうぞ