【9日】きょうの学習ログ

復習メモ

• FlexBox
• positionプロパティ
• align-items
• <span>
• インライン要素とブロック要素

FlexBox

要素を横並びや縦並びに綺麗に整列させる際に便利な、CSSのレイアウト手法の一つ。
FlexBoxを使用する際には、まず親要素のdisplayプロパティをflexに設定すべし。そうすることで、「この親要素にはFlexBoxを適用する」と宣言することができ、その子要素を綺麗に整列させることができるようになる。

ファイル名

<div class="parent">
  <p>子要素</p>
  <p>子要素</p>
  <p>子要素</p>
</div>

ファイル名

<div class="parent">
  <p>子要素</p>
  <p>子要素</p>
  <p>子要素</p>
</div>

positionプロパティのabsoluteとrelative

absoluteを使用する際には、以下の点に注意しよう

基準となる親要素のpositionプロパティをrelativeに設定しておくこと

※「absoluteを設定したのにうまく配置できない」という場合、このrelativeの設定を忘れていることが多い

align-items

flexアイテムを縦軸で見たときに「上下のどこで揃えるか」を指定するプロパティ

インライン要素とブロック要素

きょうの学習内容

JavaScript

• 変数
• データ型
• 演算子
• 条件分岐

サンプルコード

以下のコードを理解するのに時間がかかった。

ファイル名

let number1 = 100;
let number2 = "100";
let boolean_flag = "false";

if (number1 > 100) {
  number1 = 200;
} else if (number1 !== number2) { 
  boolean_flag = true;
  number1 += 300;
} else {
  boolean_flag = true;
  number1 = 300;
}

if (number1 >= 400 && boolean_flag) {
  console.log("判定A");
} else {
  console.log("判定B");
}

つまりこういうことだろうかと咀嚼して理解した。

判定A	判定B
number1が400以上の場合	number1が400未満の場合

感想

今日は少し長文になった。普段Notionでメモしているのだが、Zennで自分で言語化してまとめて発信するのも勉強になるのかもしれない。（とは言っても、記事のコピペが非常に多いが）