WEDのHP

Codestep（記事の下にURL）のHPからXDを見て作成。

作業時間

10時間ほど。

こんな感じ

学んだこと

line-height

：行ボックスの高さを指定。heightを同じ高さに設定すると文字が縦の真ん中にくる。

「line-height: 1px」は、文字の上下の余白を縮める役割。

vertical-align

：imgは下に空白ができるので、bottomでした揃えにして、空白をなくす。

align-items: center;　display: flexいるやつ。

：直接の子要素を中央配置（縦に）。

letter-spacing

：字間のスペース。

timeタグ

：時間や日にちを表すもの。検索エンジンに日時を認識してもらうことができるためのもの。(SEO対策)

justify-content: space-between;

：各アイテム均等に並べる。最初のアイテムは先頭により、最後のアイテムも末尾による。

justify-content: space-around;

：均等配置、両側は各アイテムの半分の大きさ、空く。

同じwitdthになるところは事前にwapperで指定しておく。

marginは0 autoだと余白もバランス取れる。

li {
      // 親要素を100%として3等分したwidthを持つ。
      width: calc(100%/3); // marginがない場合は、/3で良い.
		//ある場合は、その分引くと不要な余白はなくなる。 
    }

heightで高さ固定ではなく、余白を固定にする。（margin-bottom）

CSSのcontentプロパティ（選択したり、コピー＆ペーストできない。）

要素の前後に記事要素を使ってテキストや画像などのコンテンツを挿入する際に使用する。

※疑似要素

：HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素。

flex-wrap: wrap;

：フレックスアイテムを折り返しても良いか。

flex-direction: column;

：縦に並べる。flex解除。

＜自己解釈＞

重要なコンテンツのmax-widthは、ブレイクポイント（1024~1032とかにしておくとよさそう。）余白は自動調整にしておけば、体裁を保てそう。

.text {
    width: 45%;
    padding: 180px 5% 0 5%; 
    //可変%にしておくといい感じで縮んでも横の余白のバランス取れる？ 
    // h2のmarginを考慮。写真の真ん中辺からスタート。
  }

XDで見えないmargin（余白は）、topの位置とかの差で計算できる。

widthは基本的に%（余白のpaddingも）、ロゴやwrapper（max）は固定値のイメージ（？）。

code-step.com