乃木坂46の4thアルバム「今が思い出になるまで」がついに発売されました！今回発売に際して、公式の特設サイトが開設されています。
乃木坂ちゃんの公式Webサイトはちょっと古い感じ（苦笑）ですが、こちらの特設サイトはクオリティが高くて、とてもきれいです。少し画質を落としたgifアニメですが、次のような感じです。
モバイルでみても綺麗なデザインとなる、いわゆるレスポンシブウェブとなっています。
HTMLのソースをみると色々な技術を使っているようなので「調べて何かブログを書こうかな」とTwitterでつぶやいたところ、情報系の学生さんから「自分の趣味で知識を深められると思うと楽しみ」とコメントをいただいたので、紹介記事を書いてみます。
HTML、CSS、JavaScriptについて
Webサイトの開発技術についてゼロベースから解説するとキリがないので、HTML、CSS、JavaScriptはある程度知っていることを前提とします。全く知らない方に向けて平たく説明すると、HTMLはWebサイトのページを作成するための技術(マークアップ言語)、CSSはWebサイトのデザインを整える技術、JavaScriptはWebサイトに動きやロジックを持たせるための技術(プログラミング言語)です。
基礎的な書籍はたくさんありますが、個人的にはFirefoxを作っているMozillaが出している以下のドキュメントで十分だと思います。
HTMLのコードをみる方法
ツールが必要で大変なのでは？と思う方もいるかもしれませんが、Google ChromeやFirefox、Edge/IEなどのブラウザは開発者モードというスイッチがあり、誰でも簡単にHTMLをみることができます。F12キーを押すだけです。（スマホだとできず、PCのみです）
モバイル表示
スマホなどのモバイル表示を確認したい場合は以下で切り替えられます。
実際に切り替えるとこんな感じです。
モバイル端末の切り替え
端末の種類も選べるので、色々なプレビューがテストできます。就活先の会社のサイトがもしモバイル表示とかしてなかったら、ちょっと気にしたほうがいいかもしれませんね（ォィ
要素の選択
実際のページにある要素がHTMLのどこに定義されているのか、目で追うのは大変です。開発者モードで以下をクリックするとWebサイトの要素を選択して、そのHTMLタグをフォーカスしてくれるので、これで簡単にマッピングが取れます。
さて、これでHTMLを読む準備ができました。ちなみに、この開発者モードはCSSやJavaScriptもみれます。
「今が思い出になるまで」のサイトで使っているもの
一般的にCSSやJavaScriptの定義は通常、次のように定義して、ファイルを取り込みます。
<link rel="stylesheet" href="hoge.css"> <script src="hoge.js">
乃木坂ちゃんのサイトをみると、以下の定義でtypeを明示していました。
<link rel="stylesheet" type="text/css" media="screen" href="xxxx.css"> <script type="text/javascript" src="http://stats.g.doubleclick.net/dc.js"></script>
イマドキのHTML5ではtypeは書かずに定義できます。
（参考：head には何が入る? HTML のメタデータ - Web 開発を学ぶ | MDN）
以上より、これらのファイル名をみることで、おおよそ、どんな技術・ライブラリを使ってみるのかみえるので、紹介します。（定義は
タグの中にあります）vivus.js
SVG画像にアニメーションを加えてくれるライブラリです。
アクセスしたとき最初に出てくる「N46」のアニメーションで使っています。
slick
carouselと呼ばれる画像などを切り替えるためのライブラリです。
slick - the last carousel you'll ever need
こんな感じ。
以下の部分などで使っています。
Webフォント
サイトのフォントはGoogleフォントの「Noto Sans JP」でした。
Google Fonts + Japanese • Google Fonts + 日本語
フォントは要素を選ぶと表示されます。
style.cssで定義されていました。
以上、「今が思い出になるまで」の特設サイトが利用している技術の紹介でした。便利なOSSライブラリを使ってモダンなWebサイトを作ってますね。
おまけ
最後に宣伝ですが、私が作った大園桃子さんのファンサイト「ももさいと」もモダンな技術を使って開発しました。特設サイトにはさすがに負けますが、心を込めて桃ちゃん風に可愛く仕上げたのでみてもらえると嬉しいです。
少しですが、技術的なことを以下でまとめています。
