Reactでなんか作ってみよう会 ①header編(1/3)

改めてチャレンジ(これの冒頭部分)。

見様見真似で作ってみる、というよりは開発者ツールで覗き込んだソースやCSSから知識・経験を充足させることが目的。チャレンジというか学習。

レイアウトを再確認

<header>クラスが思ったより小さい。星空や樹木は範囲外らしい。

上段と下段に分かれている。下段は…なんだ？<nav>タグなんて初めてみたぞ。

参考：【初心者向け】navタグの意味や正しい使い方を徹底解説！

ただの<a>とかだけでも実現できるけど、ちゃんと<nav>使ったほうが「構成がきちんとしている」と認識され、SEOとかに有利、ってことだろうか。こういうのどこでみんな学ぶんだろう。

上段/下段の更に細かい内容は各々のパートで確認していく

headerを作る

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

ここはベースのままでいいかな。

App.css

.App-header {
  background-color: var(--color-redContainerDim);
  color: var(--color-gray0);
  display: grid;
  grid-template-columns: minmax(auto, 1100px);
  justify-content: center;
  padding-top: 8px;
}

例によってまたわからないところを調べていく。

var(--color-redContainerDim), var(--color-gray0)

開発者ツールで見たところ、それぞれ--color-~~がリンクになっており、たどると色を定義しているcssに辿り着いた。

Qiita全体で使用する色をどこかで予め定義しておくことで統一感を出しているっぽい(かなりの色数が登録されているけれども)。で、cssに:rootで定義するものってなんだ？

参考：:root
参考：【CSS】:rootやvarとは何か？好きな変数名でカスタムのプロパテを作成する方法を実例で解説（プロパティ名の2本線, 初心者, わかりやすい）

なるほど、そんな便利なものが。これは是非使ってみたい。
定義する場所は…index.cssでいいのかな。

index.css

:root {
  --color-red80: #970404;
  --color-gray40: #bcbdbd;
}

App.css

.App-header {
  background-color: var(--color-red80);
  color: var(--color-gray0);
  display: grid;
  grid-template-columns: minmax(auto, 1100px);
  justify-content: center;
  padding-top: 8px;
}

display: grid;

参考：【CSS Grid Layoutの基本】display: gridの使い方を解説
参考：CSS Grid で使える minmax() 関数を理解する -『CSS』

せ、せっかくflexを学習してきたのに新しい考え方が…！

えーとつまりは

App.css

.App-header {
  display: grid;
  grid-template-columns: minmax(auto, 1100px);
  justify-content: center;
}

ここが1つの固まり？

• gridタイプで
• 列は1個で
• 列幅は最大1100px、最小はセルができる最小サイズ
• gridを要素の中央に配置

って理解かな。

padding-top: 8px;

<header>の内側、上部に8pxの余白を設ける。
内側なので<header>のbackground-color: var(--color-red80);の影響を受ける、という理解。

動かしてみよう

> cd qiita-advent-like
> npm start

お、よし。なんか良さそう。
さぁgridの中に上段/下段の要素を追加していこうか

header/上段を作る

行の中には2つの<div>が存在している。みたい。まずは箱だけ用意。もちろんもっといい名前があると思うけど仮名です。取り急ぎ。

App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="App-header-upper">
          <div className="App-header-upper-left"></div>
          <div className="App-header-upper-right"></div>
        </div>
      </header>
    </div>
  );
}

んでこの上段自体にもスタイルが作られているので見ていく

App.css

.App-header-upper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0px 32px;
}

align-items: center;

参考：【CSS】フレックスボックスのalign-itemsプロパティの使い方を徹底解説！！

つまりは何もいじっていないflexなので今回は縦方向に対して中央揃え。

display: flex;

参考：【CSS】要素を横並び・縦並びにする。display:flexの使い方を実例で解説

<div className="App-header-upper"></div>の中に作られた<div>は横並びになる。
ついでに以下が気になったのでメモ。

これはflexboxの中の要素のcssを指定するalign-itemsというプロパティがデフォルトでstretch（引き伸ばす）になっているため。（normalでも同様になる）

justify-content: space-between;

参考：代表的なjustify-contentと、特徴。

今回は2要素しかないので両端に設置される、のみ。

padding: 0px 32px;

内側、左右部に32pxの余白を設ける。以下の画像の黄色の部分。

header/上段/の左側を作る

ココ！(コ゚ー☆ジャス風に)

App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="App-header-upper">
          <div className="App-header-upper-left">
            <a href="#" class="style-001">Qiita Advent Calendar</a>
            <a href="#" class="style-002">Qiitaトップに戻る</a>
          </div>
          <div className="App-header-upper-right"></div>
        </div>
      </header>
    </div>
  );
}

流石に全部意味のあるクラス名考えるのしんどくなってきたので手抜き。
ここまで書いて思ったけどこれReactというかCSSのお勉強だな。まぁいいか。

App.css

.App-header-upper-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

gap: 24px;

参考：gapの余白指定が便利！gridとflexでできる新しいCSSレイアウト手法

CSSのアイテム配置(レイアウト)調整方法多すぎワロタ

えーと、この要素内に配置した要素の間を24px空けると。

この紫色の部分。

header/上段/の左側/の左側

本物だと.svgで作られたロゴをfillで着色しているけれど、今回は文字で代替させていただく。
参考：SVGアイコンの色をCSSで変更する

App.css

.style-001 {
  height: 16px;
  color: #ffffff;
  font-weight: 700;
}

ついでにリンクの下線も消しておく

App.css

a {
  text-decoration: none;
}

header/上段/の左側/の右側

ちょっと文字小さめにする感じ。

App.css

.style-002 {
  height: 16px;
  color: #ffffff;
  font-size: 10px;
}

よ、よし！ここまで！
次回は上段の右側！
次々回は下段のnav！