Pythonと本と子供と雑談と

いつからはじめても遅くない

ウェブサイトを作るのに役立つサイト

f:id:mazarimono:20190424121617j:plain
Photo by Michael Tuszynski from Pexels

さて、最近JavaScriptなるものを勉強しておるわたくし。多分2カ月くらい経過しました。

ちょっとずつどう書くかみたいなのが分かってきた感じがありますが、これを使ってどうするか?って言われると「うーん。」とうなってしまいます。

おぼろげに「カッコ良いウェブサイト作りたいなー」って思っています。なので、それを実行に移したいと思います。

まずはカッコ良いウェブサイトを見る

まずはどんなサイトデザインが流行っていて、どんなことが行われているかをみたいところです。

色々なサイトが見られるところが良いなと思います。そのようなサイトのリンクを下に並べました。

muuuuu.org / 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

i/o 3000 / I/O 3000 | Webデザインギャラリー

the best designs / https://www.thebestdesigns.com/

これらのサイトでおしゃれ感を楽しみます。そうしていると、次にこれはどうやっているのかなぁ?というのが気になります。

部品がどうやって作られているのか?デベロッパーツールでみられるのでしょうけど、それだけだと見難いです・・・

コードが載っているサイトを見る

そう、色々なつくり方が載っているサイトがあります。なので、そこで色々とみてみましょう。

良いなぁと思ったのはcodepenです。ここはコードを書いて試すところとして走っていましたが、色々と作成されたものが置かれています。

下のような感じで、どんな動きをするのか試しながら、コードが見られます。実に勉強になります。

Image from Gyazo

こんな風に要素を触れるということを知っても、具体的にどう作るか分からないものなんですが、個々のサイトで色々と作品を見ると、活用のされ方が分かります。

codepen / https://codepen.io/

とても素敵。

しかし、これほど複雑なものを見てもあまりよく分かりません。なので、基礎的な部品のサンプルが載っているところがないかなぁ~と思って、色々調べていたのですが、この辺はSEOなねらい目のところなのか、あまりありません。

ということで、ベタにw3schoolのhowtoが一番良いのかなぁというのが今のところの実感です。

w3school howto / W3Schools How TO - Code snippets for HTML, CSS and JavaScript

まとめ

以上のような感じで、htmlとcssjavascriptでどんなものが作れるかを見る+どうやったら作れるか調べられるサイトをあげてみました。

ここが良いよーとかあったら教えていただけると幸いです。

JavaScript コードレシピ集

JavaScript コードレシピ集