webデザイン初心者へおくる！自分が勉強するときに役立ったものまとめ前編

こんにちは。おはるです。
このブログの名前にもある通り、一応IT女子なのでそれっぽい話題を書いてみようかと！

私は学生時代webではなく、グラフィックデザインを勉強していました。なので入社するときはhtml？文書構造？CSS3って普通のCSSとどう違うの？状態。

そんな時自分がフロントエンドを勉強するのに役だったものを紹介したいと思います。
はてな界隈はwebをやっている人が多いイメージなので、もしかしたらこんなの知ってるわーな話かもしれませんが（笑）もしもこれから始めてみようかな！って方がいたら参考になれば嬉しいです。

なお、htmlとcssの学習に絞った記事になっています。
※私が勉強したのは2013年あたりなので、少々情報が古いかもしれません

まずは手を動かしてみる

最初にやったのは超有名なドットインストール。基本無料のサービスです。
http://dotinstall.com/

どんなサービス？

HTML入門やCSS入門などのコースがあり、各コースには約8本～30本程度の動画があります。この動画、1本がすべて3分間なのでとにかくさくさく見れます。
html入門だったら、まずテキストを開いてheadタグを書いてみて…というところから始まります。動画がエディタの画面になっているので、それを見つつ一緒に書いていくとすごくわかりやすいです。※私が見たのは旧html入門になっており、今は別のhtml入門コースがあるみたいなので、学ぶ順番は少し違うかも。

こんな感じでたくさんコースがあります。html・css以外の言語のレッスンもあるので別の言語やってみたい！という時にもいいです。

ちなみに私は当時通学中に動画を見て家で見返して自分で書いてみる、という感じで勉強していました。

勉強のとっかかりとしておすすめ

なお、ドットインストールは「言語全く知らないけど勉強したい！」って時にいいと思います。3分間の動画が8～30本なので、どうしてもその言語のすべてを説明しているわけではありません。「へーこういうふうに書くとこうなるのかーふんふん」ってくらいに勉強のはじめとしてやるのがおすすめです。

手を動かすならProgateも良い

prog-8.com
無料で始められるプログラミング学習サービスのProgate（プロゲート）です。

こちらは指示にそってコードを入れていくと、最終的に1ページできあがるよ！という感じで実際に手を動かして学ぶサービスです。ドットインストールは自分でエディタ開かなないといけないですが、これはブラウザ内にコードを入れる部分がありブラウザ1つでできちゃいます。

実際の画面はこんな感じ。ここにあるコードを全て書くというわけではなく、ベースがあって一部穴あきになっているので（フッターを作る、だったらその部分だけ記述がないなど）、左にある指示を元に入れていきます。

これの何が良いって、やってくうちに1ページできちゃう！ってところです。
おお、なんかWebデザインしてる感がある！！とテンションが上がります。特に応用編は今っぽいデザインなので、自分でやっててもテンション上がりました（笑）

勉強していた当時はやってなかったけど、Progateおすすめです。

書籍でhtmlとは？CSSとは？な知識を得る

自分で手を動かしてなんとなーくこうなってるのね、と概要を掴んだら原理を勉強するのがおすすめです。

前述のサービスだけではやっぱり全体のことを網羅してないし、そもそもの言語の理解が不十分かなと思います（なんでhtmlとcssで分けるの？とか。htmlの文書構造とか）。ここを理解しているとこうすればこういうものができるのか！など色々作っていく時に役立つのかなと。

おすすめの本

基礎から覚える、深く理解できる。 Webデザインの新しい教科書

私が当時読んでいたのはこちら。「基礎から覚える、深く理解できる。 Webデザインの新しい教科書」です。
インターネットとWWWの歴史といった概念的なところから、CSSのプロパティの説明など実際に作業するときのことまで全体的に網羅されています。htmlもcssもどのタグ・プロパティでどういうことができるのか書いてあるので、それぞれどういうことができるのか理解するのに役立ちます。

本のデザイン自体がシンプルでかわいいので個人的には読みやすかったです。

今から読むなら改訂版のほうがいいかも

Webデザインの新しい教科書　改訂新版　基礎から覚える、深く理解できる。

今年の2月に発売された改訂版です。
HTML5をベースにした説明や、レスポンシブwebデザインやSVGなどについても書かれているようなので、今から読むならこちらのほうがいいかもしれません。

まとめ

思っていたよりも長くなってしまったので2つに分けようと思います（笑）
ここまでは知識としてhtml・cssを知る、という感じでしょうか。ある程度知識を入れたらあとは自分で作ってみることが良いと思うので、次回は作って見るときにおすすめなものを紹介できたらと考えています！

それでは！