information
about
モノトーンの一体型ページです。(1/11)端折りすぎたので説明を追加しました。ソースまでスクロール
色指定にカスタムプロパティを使ってみました。CSS/* 基本設定 */直下の:rootでカラーコードを変更すると、ページ全体の色を変えられます。(一部変わらない部分もあります)
main contents
バナー風画像は自動でサイズ調整されます。切り取り位置は上下左右とも中央で指定しているので、変更する場合は個別にクラスを付けてobject-positionを上書きしてください。
navigation
セクションに応じてナビゲーションのスタイルが変わります。
ページ内スクロールに使うidはlink_~の形で指定してください。
最後のclass="box"要素はmin-heightを80vhにしています。/* 段落、余白 */の.box:nth-last-of-type(1)~を削除で解除できます。※該当ボックスをリンクのスクロール先にしていた場合はナビゲーションが変化しないことがあります。
mobile
スクロールでナビゲーションが格納されます。
参考元
メニューのスタイルを変える(ツーブロッカ様)
ページ内スクロール(TechAcademyマガジン様)
jQueryのレスポンシブ(ヤッテモータース様)
source & image
source code
pc
zipファイルをダウンロード
内容ファイル:以下に掲載しているものすべて(メニューアイコンはsvg版を同梱)
head
body
image
main
背景画像
(↑背景色#454c53※このページで使用)
(↑透過バージョン)
元画像をダウンロード(Pixabay)
ファビコン
mobile
novel