さて、最近JavaScriptなるものを勉強しておるわたくし。多分2カ月くらい経過しました。
ちょっとずつどう書くかみたいなのが分かってきた感じがありますが、これを使ってどうするか?って言われると「うーん。」とうなってしまいます。
おぼろげに「カッコ良いウェブサイト作りたいなー」って思っています。なので、それを実行に移したいと思います。
まずはカッコ良いウェブサイトを見る
まずはどんなサイトデザインが流行っていて、どんなことが行われているかをみたいところです。
色々なサイトが見られるところが良いなと思います。そのようなサイトのリンクを下に並べました。
muuuuu.org / 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
i/o 3000 / I/O 3000 | Webデザインギャラリー
the best designs / https://www.thebestdesigns.com/
これらのサイトでおしゃれ感を楽しみます。そうしていると、次にこれはどうやっているのかなぁ?というのが気になります。
部品がどうやって作られているのか?デベロッパーツールでみられるのでしょうけど、それだけだと見難いです・・・
コードが載っているサイトを見る
そう、色々なつくり方が載っているサイトがあります。なので、そこで色々とみてみましょう。
良いなぁと思ったのはcodepenです。ここはコードを書いて試すところとして走っていましたが、色々と作成されたものが置かれています。
下のような感じで、どんな動きをするのか試しながら、コードが見られます。実に勉強になります。
こんな風に要素を触れるということを知っても、具体的にどう作るか分からないものなんですが、個々のサイトで色々と作品を見ると、活用のされ方が分かります。
codepen / https://codepen.io/
とても素敵。
しかし、これほど複雑なものを見てもあまりよく分かりません。なので、基礎的な部品のサンプルが載っているところがないかなぁ~と思って、色々調べていたのですが、この辺はSEOなねらい目のところなのか、あまりありません。
ということで、ベタにw3schoolのhowtoが一番良いのかなぁというのが今のところの実感です。
w3school howto / W3Schools How TO - Code snippets for HTML, CSS and JavaScript
まとめ
以上のような感じで、htmlとcssとjavascriptでどんなものが作れるかを見る+どうやったら作れるか調べられるサイトをあげてみました。
ここが良いよーとかあったら教えていただけると幸いです。

- 作者: 池田泰延,鹿野壮
- 出版社/メーカー: 技術評論社
- 発売日: 2019/01/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る