初投稿

Tags: tag Example

人間の三大欲求は食欲、性欲、睡眠欲。 その中でも食欲は人によって生命維持のために必要とされ、動物系においては快感をもたらし、 優先して行動するようプログラムされておりますOwO

ooo

サイトの全体構造

このサイトは「iframe方式」で作られてる。つまり、ヘッダーとフッターを別のHTMLファイル(header.htmlとfooter.html)として作っておいて、それを各ページでiframeタグで読み込む仕組みだ。これの良いところは、ヘッダーやフッターを1箇所変更すれば全ページに反映されることだね。

各ファイルの役割

HTML系ファイル:

  • index.html - トップページ。サイトの紹介とか謎の数字の羅列が書いてある
  • profile.html - プロフィールページ。誕生日や趣味が書いてある
  • links.html - リンク集。相互リンクとかおすすめサイト
  • downloads.html - ダウンロードページ。作ったソフトの一覧
  • 404.html - エラーページ

CSS:

  • base.css - サイト全体のスタイル。Material Design 3のカラーシステムを実装してて、ライトモードとダークモードの両方に対応してる

JavaScript:

  • mwc.js - Material Web Componentsを読み込むためのスクリプト。ボタンとかアイコンとかのUI部品を使えるようにしてる

SVG画像: 各種SNSのアイコンとかUIで使うアイコンが入ってる

特に面白いポイント

1. Material Design 3の実装 base.cssを見ると、ライトモードとダークモードで色が完全に切り替わるようになってる。--md-sys-color-primaryみたいなCSS変数を使って、テーマカラーを一元管理してるんだ。

2. iframe方式の利点と欠点 利点は先に言った通り、メンテナンスが楽なこと。欠点は、SEO的にはあまり良くないことと、読み込みが若干遅くなることかな。でも小規模サイトなら問題ないレベルだよ。

3. Material Web Components mwc.jsでインポートしてる@material/webは、Googleが作ってる最新のWeb Components。<md-icon-button>とか<md-elevated-button>みたいなタグが使えるようになる。

改善できそうなところ

もし興味があれば、こんな改善もできるかも:

  1. パフォーマンス向上 - iframeのheightを300vhとか350vhにしてるけど、これだとフッターが画面の3倍の高さになっちゃう。実際の高さに合わせた方がいいかも

  2. リンク集の削減 - フッターのリンク集とアイコンがかなりサイトを重くしてる。

  3. アクセシビリティ - altテキストとか見出しの階層とかをもう少し整理すると、スクリーンリーダーを使う人にも優しいサイトになる