デザイン – Footer

2022-06-11Hack Util Apps 開発記録

さて、前回のデザインでは Head, Header について話しました。

今回では Footer についてお話しします。

初回から:

Footer

私は Header と聞いたら次に思い浮かぶのは Footer です。

なので、 Header を作り終えたら次は Footer を作り始めました。

Footer も同様、自作コンポーネントです。

そして、これも Header みたいに、 src/components/footer.tsx と src/components/footerContents.tsx に分けて作りました。理由も Header と同じです。

Footer は今のところ(2022/06/11時点)上と下で二つの部分からなっています。

まず、上の部分はソーシャルリンクです。今は、 メイン(笑)ウェブサイト, このブログ, GitHub, Twitter があります。

これらは一番左に寄せています。真ん中に寄せちゃうと無駄に存在感があって、「この人、図々しいな」と思われてしまうかもしれないからです。

えなに?もとから図々しいだって?  君、黙るんだなキリッ。

そして、下にはコピーライトがあります。とりあえずみんなコピーライト貼ってるので自分も張ってます。貼ってないと何が起こるか正直よくわかってませんが。

(ちなみに、コピーライトマーク「©」をクリックすると共産主義テーmおっと誰かが来たようだ)

基本的に Footer はこんなもんです。

あとは、特にいうものがあるとすれば、ダーク・ライトテーマボタンですかね。このボタン、後ほど説明するんですが一番下にスクロールすると Header の一部のように見えるような配置にしてあるんですよね。

次回予告

今回はフッタについて説明しました。さて、ヘッダ、フッタと続き次に何が来るのかというと、その間に挟まってるメインコンテンツです。

次回はそのメインコンテンツのラッパ、あるいはコンテナについて話そうと思います。

次回: