2025年12月11日 CSSでヘッダーとフッダーをデザインしてみる

こんにちは．本日は昨日に引き続きCSSを触っていこうと思います．特に今日はJelly Chem全体で使うヘッダーとフッダーのデザインをやっていきたいと思います．
Jelly Chem全体で反映させるCSSなので，style.cssというファイルを作成して，それを編集していく形で作っていこうと思います．

ヘッダー

まずはヘッダーからですが，そもそものHTMLに素となるデータがない以上は作りようがない．しかし今触っているhtmlファイルに書き込みを行っては，全体に反映させるのはとても大変になってしまう．そのため各デザイン部に独立したhtmlファイルを用意し，それを読み込む形で統一的にデザインを反映させていこうと思います．というわけでとりあえずheader.htmlを作成しました．
その後header html内で適当に作った画像にhyper linkを与えて，画像をクリックすることでホームに飛べるようにしてみました．

htmlで置いてみたヘッダー

HTMLのみ書いてみた場合

しかし，これでは流石に不格好極まりないので，これをcssで編集していきます．
cssでは昔購入した本を完全に真似する形で書いてみました．すると以下のような感じで上手くいきました．

CSS導入後

一旦はこんな形でいいでしょう．まだ記事も全然ないので，これから追加していくに従って適切な形にしていこうと思います．

フッダー

全くおんなじ要領でフッダーを作成していこうと思いましたが...まだ必要そうにはないので見送ります．特許を取っているわけでもありませんし．

というわけで本日は一旦ヘッダーを作れたということで終わりにしますが，最後に全ページに先に作成したheader.htmlをSSIというもので組み込んでおき，正常に写ることを確認しましたが、これが無茶苦茶大変でした...もう疲れたので寝ます．では．