Intro
この前、初めて直島に行きました。
有名な安藤忠雄の地中美術館をも行きました。
この4人の作品しか展示しなかった美術館でした:
クロード・モネ、草間彌生、ジェームズ・タレル、ウォルター・デ・マリア
アートと美術館の建築物を完璧的に融合でき、
最高な美術館でした。
これがきっかけで、美術館の評価サイトを作ってみたいと思いました。
(今はもうたくさんより完成な美術館の評価サイトが存在していますが、
自分の手で作りたいです。)
codeの紹介
今回の成果物はcodepenを使い、HTML, CSS, Javascriptを使用しました。
そして、このwebアプリケーションは、2つJavaScriptライブラリを使いました:
jquery & vue.js
code-penのリンク
https://codepen.io/3luulm/pen/rNKLmGw
作ったwebアプリについての紹介
https://heroic-cannoli-2d121e.netlify.app
今回の成果物は2つページがあり、MUSEUMとHOMEです。
MUSEUMは地中美術館の評価ページで、HOMEは他の美術館ページを増やすときのリストまとめです。
自分の発想はCLICK FOR MOREを押すと、美術館の公式サイトに行けます。
下のところでレビュー書きましたら、記録を残ります。
また、元々はBootstrapのnavbarを使いましたが、
codepenのワークは全部分けっていますので、
どうやってhref用のURLを作成するのか解決できませんでした。
そのため、jqueryのライブラリで、こんなふうなタブを作りました。
感想
画面を綺麗くねれるために、CSSでの調整は時間かかりました。
そして、タブを作れるためにもgoogleでディスカッションサイトで調べました。
結局は他人のcodepenワークを見つけ、参考した後、自分のwebアプリケーションをできました。