やったこと

frontend教材の最終課題に取り組んだ。

Molecules/Messageの作成

• flex-direction: 主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定する
  ```css /* 行のテキストの方向に配置 */ flex-direction: row;

/* と同様だが、逆向き */ flex-direction: row-reverse;

/* 積み重なるように配置する */ flex-direction: column;

/* と同様だが、逆向き */ flex-direction: column-reverse;

- `line-height`: **テキストの行間を設定するために使用**  
```css
/* 単位のない値: この値を要素のフォントサイズに
掛けたものを使用する */
line-height: 3.5;

• font-weight: フォントの太さ (あるいは重み) を指定

Molecules/NewsAndEventsTitle

margin: 0 auto;で要素が中央ぞろえになる仕組み

余白を左右均等に割り当てることで要素が中央寄せされている

marginの正しい理解

margin と auto と width の関係

• marginに対して、autoを設定した場合は数値は0になる
• しかし、横幅(width)を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を算出する

marginの相殺
特定のケースだと、相殺が起きないなどトリッキーな動きをする
相殺は、数値の大きい方が適用される

Molecules/NewsAndEventsMore

inlineについて

• block: 要素が横までいっぱいに広がり、縦に並んでいく
• inline: 要素が平ぺったく横に並んでいく
• inline-block: 要素の並び方はinline的で、要素の中身はblock的

Molecules/Card

transitionについて

• transitionプロパティは:hoverや:activeなど、要素が変化するためのトリガーが必要
• transitionで設定できるプロパティ
  • transition-property: 指定要素の度のプロパティにアニメーションを適用するかを定義する
  • transition-duration: アニメーションの時間を定義する
  • transition-delay: アニメーションを開始するタイミングを定義する
  • transition-timing-function: アニメーション変化の度合を定義する

Molecules/Plan

<dl><dt><dd>タグについて

• 「description list(dl）= 説明リスト」
• 「description term(dt）= 説明する言葉」
• 「definition / description(dd）= 定義分もしくは説明文」

「*」: すべての要素にスタイルを適用する全称セレクタ
「>」: 指定した要素の直下にある要素にスタイルを適用

width: auto;とwidth: 100%;の違い

1. ブロック要素かインライン要素での違い

ブロック要素の場合

• width: auto;
  • 横幅　＝　親要素の幅いっぱい
• width: 100%;
  • 横幅　＝　親要素の幅いっぱい

インライン要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　コンテンツ分（widthは効かない）

インラインブロック要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　親要素の幅いっぱいまで広がる

Qiita

nth-child
要素:nth-child(値){スタイルの内容}