記事一覧

『新潮文庫の100冊 2015』に学ぶWebサイトデザイン



目次


新潮文庫の100冊

ハローみなさん、エジソンです。

秋といえば読書の秋。みなさんは本を読んでいますか?

僕は、本を読むのが好きで、暇な時間を見つけては、読書に勤しんでいます。先日近所の本屋に行くと、新潮文庫の文庫 100冊 コーナーが設置されていました。面白そうな本が幾つかあったので、中でも気になったものを一冊手に取り購入してみました。

この、『新潮文庫の100冊』はWebサイトとしても、PRされており、以下のページから確認することができます。

新潮文庫の100冊 - 公式
そもそも新潮文庫の100冊って何? - Wikipedia

ちなみに、僕が書店で購入した本は、米澤穂信のボトルネックです。

http://100satsu.com/detail/index.html?book128781?dangerous

新潮文庫の100冊にラインナップされている『ボトルネック』は、『新潮文庫の100冊』の中では、”ヤバイ本”としてカテゴリ分けされています。ヤバイというのが、今風の言葉で中々良い感じですね。この本に関しては、つい先日読了しました。

感想はというと、モヤっとした読後感ですが、伏線やメタファーともいうべき考察の種が作品の随所に蒔かれていて、読後に考察サイトを訪れ、他の読者の感想を見ていくのも、楽しみ方の一つでしょうか。

本エントリで、本書の感想を長々と語るのは主題から外れてしまうので、あらすじを3行で説明してみます。
  • 主人公がパラレルワールドに迷い込む
  • 本来いるはずの主人公がパラレルワールドには存在しない
  • 逆に本来いるはずのない人間が存在する世界

パラレルワールドとか、異世界とか、SF要素にワクワクする人にはオススメできる一冊かもしれません。

オシャレなサイトは学びの宝庫

というわけで、新潮文庫の100冊の公式サイトが、オシャレ(可愛い感じ)で良い感じでした。オシャレなサイトは学びの宝庫。上達の道も模倣から。

エンジニアならば、後学のためにソースを読んで仕組みを学ぶべき!という謎のモチベーションに駆られたので、ざっくりと、解析してみることにします。本当にざっくりと…。

公式サイトを開くと、Quntaというロボットが登場します。このロボットを主役にしたミニストーリーを軸にして、いろいろな本を紹介していくというサイトに仕上がっているようです。

トップページのキャプチャを貼り付けてみました。以下をご覧ください。



ポップで可愛い雰囲気のサイトで、他にはないユニークさを感じましたので、さぞ高度な仕組みでサイトが構築されているのではないかという印象を持ちましたが、ブラウザの解析ツールを駆使して分析すると、意外とそうでもないことがわかりました。

以下をご覧ください。赤枠で囲んだ場所が、position: fixed というスタイルが付与されています。このスタイルを付けると、ブラウザをスクロールしても、常に定位置に要素が表示されます。



以下は、メニュー表示時の画面です。左側にせり上がってきたメニューは、position: fixedが付与されつつ、z-indexで他の要素よりも前面に表示されるようにしています。さらに、メニュー表示時には、left: 0pxで、非表示時には、-275pxとすることで、メニューの開閉を表現しているようです。



このようにしてみると、高度な技術を使用して構築されたサイトかと思いきや、一つずつの技術はシンプルなものであることがわかりますね。

このように、ブラウザの解析ツールを使用すれば、簡単に要素のスタイルを調査することができます。解析ツールは主要ブラウザには大抵付属されているので、皆さんも気になるサイトがあれば調査してみると良いかと思います。

このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント

プロフィール

EZOLABブログへようこそ。
EZOLABは、札幌のソフトウェア会社です。

http://ezolab.co.jp