デイトラWeb制作中級編 Day9-10『デザインカンプからのコーディング』

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と+αで調べた事の備忘録です。

スポンサーリンク

Day9~10で学んだこと「デザインカンプからのコーディング」

【Day9】準備編・ヘッダーとメインビジュアルのコーディング

Web制作の仕事の流れ

1. ヒアリング
2. 仕様決定
3. デザイナーがデザインを作成
4. デザインデータから静的にコーディング
5. 案件によってはWPテーマ化など

6. 納品

・マークアップエンジニアが担当するのは主に4と5

ヘッダーとメインビジュアル

・sassの入力補完をしてくれるVSCode拡張機能(プラグイン)「SCSS Everywhere」を導入

【ロゴとメニューを横並びで配置➞”display: flex;”】

・両端に配置させるには、”justify-content: space-between;” が簡単だが、IEでバグが起きることが多いので、メニュー側から”margin-left: auto;” で押す形で実装する方が良い

positionとは?

「要素(ボックス)の位置を決める」ためのプロパティ。

このプロパティを使えば、思い通りの場所に画像を配置したり、画像に文字を重ねたり、ヘッダーを固定したりできる。

position: relative

本来の表示位置を基準に要素の場所を動かす時に使う

position: absolute

親要素を基準に要素の場所を動かす時に使う

親要素はrelativeにしておく

absoluteを使って位置調整するときは、親要素にposition:relative(またはfixed)を指定する。

これを忘れると基準位置がずれて思った場所に表示されない。

position: fixed

要素を特定の場所に固定する時に使う
(例:ヘッダーの固定)

「ウィンドウ全体」が基準となる。

要素の位置に関係なくtop: 0と指定したら画面の最上部に表示される。

 z-indexとは

z-indexは要素(ボックス)の重なる順序を指定するプロパティ。
値が大きいものほど前面(手前)に表示される。

positionプロパティにabsoluteやrelative、fixedが指定された要素でのみ有効。
z-indexが指定されていないと同じ階層の要素では、基本的にソース上で後から書かれた要素が前面へ表示される。

transform: translateとは

要素に動きをつけられる。

下線の引き方

text-decoration、border、擬似要素の3パターンで書ける。

疑似要素を使うメリット

  • CSSの記述だけで書ける
  • 下線の位置や長さを自由に決めれる

【Day10】横並びカードのコーディング

【カードをフレキシブルに改行させる➞”display: flex;”と”flex-wrap: wrap;” 】

・カードの幅を出す計算式➞(100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )

まとめ

初級編で学んできたはずなのに、いざ一人でコーディングとなると手が止まってしまいました。

回答例をみてコーディングし直しました。

よくわかっていなかった疑似要素や、position: relativeを使った要素の配置方法をだいぶ理解できました。

コメント

タイトルとURLをコピーしました