デザイン – Head, Header
さて、前回に、 layout.tsx について話したと思います。今回からは実際にその中の一つ一つについて細かく説明していこうと思います。
初回から：
https://blog.probmkr.com/series/developing-hack-util-apps/be...
Head
外見の前に一つ大事なものがあります。それは Head 要素です。
（Next.js には、 next/head という Next.js 専用の Head コンポーネントがあるので、ここでは頭文字を大文字にしております。詳しくはこちらのサイトをご覧ください。next/head – Next.js）
Head 要素は目には見えませんが、とても大事な役割を果たします。
例えば、 Head 要素の中には title 要素がありますが、これはタブに表示される表題を設定することができます。
そして、もう一つのもっと重要な役割を果たします。それは、 Google で検索した時に表示される内容も表しているんです。また、 Twitter で投稿したときに、 OGP でのタイトルとしても機能します。
また、 OGP に関してはタイトルだけでなく、説明や、 URL 、画像なども指定できます。
そして、それら全ては Head 内で指定するのです。
最後に Head 内の構成をお見せします。（OGP設定前の2022/06/06時点）
- title
- meta name="description" content="A web app created by Probm.“
- link rel="icon" href="/favicon.ico"
さて、次から外見を作ります。
Header
とりあえず、外見はまずはヘッダから作り始めました。なぜなら、一番上にあるからです。
ヘッダは後で色々変更しやすいように、二つのコンポーネントに分けました。
src/components/header.tsx と src/components/headerContents.tsx です。
分けた理由は、保守性をよくするためですが、今のところこれのおかげで得をしたことはまだないですね（笑）
conponents/header.tsx には
<header>
<HeaderContents />
</header>しかありません。
（実際には、 id 属性やら class 属性やらついています。）
ヘッダの内容自体は HeaderContents の中にあります。
さて、 HeaderContents の中身お見せしましょう、としたいところなのですが、このシリーズはあくまで記録で、あまり長くダラダラと話したくないので、今回は簡単に説明するだけにします。
詳しく知りたいという方は私のディスコードサーバに来て一緒に話しましょう（笑）。
さて、本題に戻ります。
HeaderContents 内は、大きく分けて、左、中、右の三つの部分に分かれます。
左にはサイドバートグルボタン（サイドバーの開け閉めをするボタン）、真ん中にはこのページのタイトル、右にはユーザーアイコン1があります。
サイドバートグルボタンはもうその通りで、サイドバーの開け閉めをするためのボタンです。これには動くWebデザインアイデア帳さんに大変お世話になりました。
実際に参考にしたのはこちらです。
真ん中のページタイトルは、今のところ「上に戻る」機能があります。なぜなら、右下にはダークモードボタン、左全体にはサイドバーがあるから「上に戻る」ボタンの居場所がないからです。
右のユーザーアイコンは、将来作る予定のログイン機能が出来てから機能します。今は見かけだけです。
ちなみに、ユーザーアイコンは埋め込み SVG で、ちゃんとダークテーマやホワイトテーマにも対応しています。
ユーザーアイコンは、どうだろうねえ。多分実装するのは少なくとも3ヶ月後ですかねえ。
次回予告
今回は Head コンポーネントと Header コンポーネントについて解説しました。
以前は、 Bootstrap を使ってヘッダを作ったことがありましたので、どのように HTML タグを置くのかどうかは結構頭の中で理解できてたので割と作りやすかったのではないかと思います。
ただ、 CSS についてはゼロから書くのは今回で初めてです。
さて、ここまできて勘の良いかたはお気づきかもしれませんが、まだ CSS については一切触れていません。
実際にどういう CSS を書いているのかどうかは紹介するつもりはありません（GitHub レポジトリやウェブサイト自体を自分で見て確かめてください）が、次回は CSS の内容ではなく、ファイル分けの構造などについて紹介しようと思います。
最後まで読んでいただき、ありがとうございました。