CSSで「なかなか良いんじゃね？」っていうデザインが出来た話
自己紹介
令和3年に自分の個人サイトを運営しております。ShoyoFILMSと申します。
（良かったら見てね。崩れてたらすみませんがコメントで教えてください）
https://fujiformat.com/
※気分でデザインが変わってる可能性があります。
せっかくだから色んなアイディアや技術の試験場にしようと日々手を入れているわけですが、
トップページは前から「雑誌風」にしようと思ってました。
雑誌風デザインとは
雑誌風とは真ん中にドーンとビジュアルがあって周りに各ナビゲーションがあるデザインの事。
最近のWebではヒーローバナーという大きな画像がトップに載ることがありますが、
それだとナビゲーションが下に押し下げられてしまうのが嫌だったのでこうしました。
今はコンテンツ等を更新して「新刊」が出る度リンクの色を新しい物にするぐらいですが、いずれ
背景の自画像を更新したり、別の絵を用意したりしたいですね。
あと自分のアプリとかを作ったら右端の下あたりに並べる予定です。
世の中がマテリアルデザインとかを採用してる時に、これを出すのはあれですが趣味なので許容してください
作り方
センタリングした領域にposition:absolute;で色々固定してるだけです。
レイヤーの重なりをz-indexで調整しないとナビゲーションとか押せなくなるので注意
一見オシャレですが、position:absolute;を使いまくってるので使ってないサイトに比べると若干重いかも。
スマホ対応
※PCとスマホで違うページが出るようになってます。
スマホ版は画面が細長いと画像とナビゲーションが被ってしまうため、背景を半透明の黒にして
視認性をアップしました。タブレット向けに1段階のレスポンシブ対応も入れてます。
最後に
対応するかはわかりませんが、こうした方がいいとかあったらコメントに書いてください。
あともし私も個人サイトまだ運営してるよって方がいたら、ぜひ連絡を。
情報交換したり、令和の個人サイトリンク作りましょう！