こんにちは。おはるです。
itjoshi.hatenablog.jp
昨日こちらの記事をあげましたが、今回は後編となります。
前編で主にhtmlとは？cssとは？な知識について勉強したので、このあとはひたすら手を動かす！が大事かなと。
なんでもいいので自分で１から作ってみる
ある程度知識がついたら、あとは実践！ひたすら実践がいいと思います。
自分の時は入社後に研修があり、そこで課題としていくつか制作をして自分で1から作ってみるということをした記憶があります。周りは学校でwebやってました、な人も多く焦って帰ってからマックに行って勉強とかもしてたなあ…懐かしい。
本にそって作っていくとわかりやすい
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
…と言いつつ、私はあまりこういう系やったことありません…すみません！！本屋で見かけたときにぱらぱらと見ていて、あー楽しそうだなーと眺めるくらいでした…。
なのでこれがいいよ！とか詳しく説明ができないのですが、ワンステップごとに自分で理解をしていって進めるといいのでは、と思っています。こういうのって、結構このセクションではカフェっぽいサイトを作りましょう！みたいなテーマがあるのが多いのでそれに沿って作っていくと1ページ作れる…はず、です…！！！
CSS3 Design Bookはおすすめ
- 作者: 渡邉希久子
- 出版社/メーカー: ソーテック社
- 発売日: 2012/03/10
- メディア: 単行本
- この商品を含むブログを見る
その名の通り、CSS3に焦点を当てたレイアウトの作り方がまとまっている本です。正直初心者向けではないのかな～と思います。
というのも、CSS3はそれまでのcssに新しいプロパティ（機能）が追加されたものです。なのですが、ブラウザによっては対応していないものも。特にIEね！！！ほんとにいちど消えたらいいのに
なので、実際に業務で使うときはどこまでブラウザ対応をするかどうかでCSS3を使うかどうかが決まるのではと思います。
なので、最初に勉強するのにCSS3からやるのはあんまり初心者向けではないのかと。
ですが私は当時CSS3の意味が全く分かってなかったので、新しいほうがいいだろ！という安直さで買って勉強していました（笑）
でもこれ、CSSとしての基礎が押さえられているのでおすすめです！
1カラム・2カラムなどの段組みデザイン、ヘッダー・フッター・メニューの組み方、見出しのデザインなどなどページを作る上で必要なパーツの基本が分かります。
今見返すと、この本でわりと基礎を積めていたのかな～と感じます。
公開されているページを模写してみる
今公開されているページから画像だけを持ってきて、そっくり同じデザインで組むのも勉強になります。
自分で好きなデザインのページを作れる！
自分が作ってみたい！と感じたページを模写できるので、楽しく作業ができるかなと思います。また、公開されているものは今のトレンドのデザインだったりマテリアルデザインなど計算されいるデザインも多いので、作っているうちにデザインの勉強にも！
デベロッパーツールが超便利！！
模写のいいところは、どう組むのかわからないときはそのページのソースを見れば解決できるというところです。言ってしまえば、公開されているページが「正解」なので、それを見つつできるということですね。
そんなときに役立つのがデロベッパーツール。
ここではChromeで使用できる、Chromeデバロッパーツールについて紹介します。
]
こちらがデベロッパーツール。キャプチャ画像下部のものです。
そのサイトで使用されているhtmlやcssを確認したり、JavaScriptのエラーを確認できたりします。
こんな感じで、見出しを選択すると、その部分に適用されているcssが表示されます（キャプチャ黄色部分）。「ここってどう組んでいるのかわからない！」というときにこれを見れば一発です。
html・cssの変更もできます。html・cssファイルが書き換わるのではなくあくまでプレビューのみですが、リアルタイムで変更されるので微調整をしたり試しでコードを入れてみたり、ということができます。
個人的にはこれがものすごく便利です！
制作していると、コードを1行書いてファイルをアップしてブラウザで見てまたコードを直して…をいちいちやるのはちょっと面倒だなってときがあります。デベロッパーツールで調整をかけてしまって、その部分だけファイルに反映させるほうが効率的です。
※デベロッパーツールで変更したものがリアルタイムでファイルに反映されるやり方もありますよ！
デベロッパーツールの使い方はこちらに詳しく載っています。
www.buildinsider.net
まとめ
自分が使って便利だったものを中心に紹介しましたが、どうだったでしょうか？
もし、「これからwebを勉強したい！」というときにこの記事が少しでも参考になれば嬉しいです！
私自身、今回まとめていて最近しっかり勉強してないな…と感じたので、またちゃんと勉強しよう！と思います。そしたらまたここでアウトプットもできますしね。
恥ずかしながらできないことのほうが多いので、もっとできるようになりたい！ごりごりに動く今っぽいデザインのものとか作れるようになりたい！！
がんばります。それでは！