デベロッパーツール＝検証ツール＝開発ツール

テキストの大きさや配置を変更してプレビューできる

テキストの配置→削除を押して選択することができる

良い感じで出来たら、元のファイルにコピペして採用する。

パディング→内側の余白
マージン→外側の余白

↓

紐づきの確認　Open In New Tab

反映されているか確認

CSSファイルに下準備を書く

準備

↓

確認→文字がグレーになっている

CSS：擬似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

参考サイト

CSS：擬似要素系セレクタ

  • first-letter 擬似要素（要素の 1 文字目を指定）
  • first-line 擬似要素（要素の 1 行目を指定）
  • before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

参考サイト

カラーをコメントアウト→コメントアウトされて色が元（黒）に戻った

CSSセレクタのチートシート｜37パターンを一覧で解説

■一番最初の文字を赤くする

DIVタグの一番最初も赤くなる

→first of typeは一番最初のものに適用される

疑似～は何番目など個別に変化をつけるときに使用する。
WPは最新投稿などがあるので、最新投稿のみの見出し文字をテキストを赤にしたりできる（自動で）
そういう時に使う。

テーブル（表組）の作り方について

  • テーブル（表組）の作り方
  • table 要素（表全体の定義）
  • caption 要素（主題の定義）
  • tr 要素（1 行範囲の定義）
  • th 要素（見出し項目の定義）
  • td 要素（データ項目の定義）
  • border-collapse プロパティ（隣接セルの表示方法）
  • border-spacing プロパティ（隣接セルのボーダー間の間隔）
  • table-layout プロパティ（セル幅の決定方法）
  • vertical-align プロパティ（垂直方向位置指定）
  • display を用いたテーブル構造

参考サイト

→テーブルは別日。

テーブルタグ

フォーム（入力）の作り方について

  • フォーム（入力）の作り方
  • form 要素（フォーム作成）
  • label 要素（入力項目キャプション）
  • input 要素（フォーム構成部品）
  • button 要素（ボタン）
  • select 要素（セレクトボックス）
  • datalist 要素（入力候補選択肢）
  • optgroup 要素（セレクトボックス選択肢グループ）
  • option 要素（セレクトボックス選択肢）
  • textarea 要素（複数行テキスト編集項目）

→要素→Tagの意味

参考サイト

→フォームも別日

■フレックスレイアウト（横並びのレイアウト）

  • フレックスレイアウトの作り方
  • display（Flex コンテナ作成）
  • flex-direction（Flex アイテム並び順）
  • flex-wrap（Flex アイテム折り返し）
  • flex-flow（Flex アイテム並び・折り返し一括指定）
  • justify-content（Flex アイテム水平位置）
  • align-items（Flex アイテム垂直位置）
  • align-content（Flex アイテム行の垂直位置）

参考サイト

新しいファイルを作成
リンクはstyle.cssから引っ張ってくることを指定して…

親と子供（2人）を書く→html

CSSファイルにも親と子供のサイズ、色を書き込む

縦並びになる（デフォ）
検証ツールでdisplayでflexを入れてみる→確認出来たらhtmlも編集

参考サイトを見てほかの配置も確認してみよう！

↑ここまでの先生の見本

■自分でhtmlを書き込んで再現

縦。これから横並びへ。

■縦並び→横並び　
フレックスを親に適用すると子供は横並びになる

CSSファイルのoya(親)の下に

display: flex;　

のコードを入れてあげると子が横並びになる

今日もお疲れ様！

お昼はまたジョギングしました！
運動不足解消！
また朝からぱん焼いちゃった（今日は祝日だからご飯作んないと…）

ジョギングしたら、またクラスメイトと遭遇しちゃった今日でした。

これからトレーニング2をやります、html難しい・・・英語は好きなのだけど・・・

一つ目のトレーニング終了しました！