1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

*webアプリケーション*美術館の評価サイト

Last updated at Posted at 2022-11-04

Intro

この前、初めて直島に行きました。
有名な安藤忠雄の地中美術館をも行きました。

この4人の作品しか展示しなかった美術館でした:
クロード・モネ、草間彌生、ジェームズ・タレル、ウォルター・デ・マリア

アートと美術館の建築物を完璧的に融合でき、
最高な美術館でした。

これがきっかけで、美術館の評価サイトを作ってみたいと思いました。
(今はもうたくさんより完成な美術館の評価サイトが存在していますが、
自分の手で作りたいです。)

codeの紹介

今回の成果物はcodepenを使い、HTML, CSS, Javascriptを使用しました。
そして、このwebアプリケーションは、2つJavaScriptライブラリを使いました:
jquery & vue.js

code-penのリンク

https://codepen.io/3luulm/pen/rNKLmGw

作ったwebアプリについての紹介

image.png
https://heroic-cannoli-2d121e.netlify.app
今回の成果物は2つページがあり、MUSEUMとHOMEです。
MUSEUMは地中美術館の評価ページで、HOMEは他の美術館ページを増やすときのリストまとめです。

自分の発想はCLICK FOR MOREを押すと、美術館の公式サイトに行けます。
下のところでレビュー書きましたら、記録を残ります。

また、元々はBootstrapのnavbarを使いましたが、
codepenのワークは全部分けっていますので、
どうやってhref用のURLを作成するのか解決できませんでした。
そのため、jqueryのライブラリで、こんなふうなタブを作りました。

感想

画面を綺麗くねれるために、CSSでの調整は時間かかりました。
そして、タブを作れるためにもgoogleでディスカッションサイトで調べました。
結局は他人のcodepenワークを見つけ、参考した後、自分のwebアプリケーションをできました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?