https://labs.cybozu.co.jp/blog/akky/tags/%E6%B7%B1%E6%B5%B7/ Recent content in 深海 on akky@サイボウズラボ・ブログ Hugo ja Sun, 08 Dec 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/ Sun, 08 Dec 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/ <p><a href="https://neal.fun/deep-sea/">The Deep Sea</a>は、深海の生物を紹介するウェブサイトです。</p> <p>面白いのは、深さを縦長のウェブページで表現しているところ。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-1.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-1_hu_ebb7181f0d9fc3cc.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-1_hu_8569dd9b0e8055b8.webp 768w, https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-1_hu_7577996575e5cc80.webp 1185w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-1.png" width="1185" height="752" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>スクロールダウンすると、海の深さが少しずつ深くなっていき、その深さで観察される生物が表示されます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-2.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-2_hu_b9f90cf5a1530580.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-2_hu_cc6068c5a317ed71.webp 768w, https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-2_hu_589710c5ccd4c5cf.webp 1021w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2019/12/the-deep-sea-on-a-long-long-webpage/the-deep-sea-2.png" width="1021" height="522" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>生物の名前やその特徴の紹介文などはすべてテキストなので、Chrome ブラウザの翻訳機能を使えば自動翻訳の日本語でも読むことができます。</p> <p>それにしても、このページ、長い長い。ページの最後は、<a href="https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AA%E3%82%A8%E3%82%B9%E3%83%86_%5c%28%E6%BD%9C%E6%B0%B4%E8%89%87%5c%29">1960年にマリアナ海溝の最深部に到達したトリエステ号</a>のチャレンジを紹介しています。</p> <p>via <a href="https://geekologie.com/2019/12/a-website-that-allows-you-to-scroll-to-t.php">Geekologie</a></p>