電子書籍のように縦書きで横にスライドして読めるウェブサイトを構築したいと思い組んでみました。
（多くのサイトを参考にしています）
出来上がったサイトはこちら→ 目次ページ
※スマホでアクセスしてください
構造としてはdivを横に並べて左にスライドしていく仕様を採用しました。1ページごとにdivを分けないといけないので力技ですが、個人的にはこのコードが一番良さそうでした。
そもそも私の場合はウェブデザイナーではないためhtmlとcssしか分かりません。ブログ「ものづくりの話」はWordPressで組んでいますが本質的には理解していません。この制約のもと、どうにか電子書籍のようなサイトを組みたいと思案しました。
こだわった点としては左下のボタンでダークモードに変更できることです。
文章をウェブサイトで読む際に、とくに夜は眩しいと感じることがありますので白黒を反転できるダークモードは欲しいなと思い実装しました。
ただし動的なサイトではありませんのでリンクをまたぐとダークモードの引継ぎはできません。この辺りは改善の余地がありますが個人的には満足しています。
白黒反転アイコンについてはAdobe IllustratorやPhotoshopを参考にしました。
色について深堀しますと、基本的に#fffや#000は強すぎるためここぞというとき以外は使いません。白いページについても、背景が完全な白の場合眩しすぎるため若干黒を入れて目に優しくしています。
工夫点としてアクセスした際に迷わないように3秒ほど左に矢印を設けました。
右上をメニュー、右下を目次としたのですが、右上のメニューのこだわりとしては、オープンした際に本文が少し暗く擦りガラス状にぼけるところです。結構簡単に実装できて嬉しかったです。
ウェブサイトのコーディングは1ピクセルごとに完璧に制御できるので、本業である工業デザインに通じるところがあり、とても好きです。
（デバイスが多すぎて最適解はなかなかありませんが）
ウェブデザインは検索すると多くの先駆者が様々な実験をしていることを容易に学べることも面白い分野だと思います。ソースコードがオープンなのもいいですよね。誰もがその知識へ簡単にアクセスできます。
その上で大切なことは、それらをどのように活かし構成し自分のオリジナルを確立できるか。
これはプログラミングに限らず、あらゆる分野に通じることだと思います。
すべての創造は模倣から始まる。