「HTML5/CSS3 モダンコーディング」を読んだ。
これまでは、HTMLやCSSをBootstrapに頼ったり、とりあえずググってなんとなく解決したり、という危うい感じで書いてきました。
しかし、このままでは良くないと思い、フロントコーディングの基礎を得るために「HTML5/CSS3 モダンコーディング」を読んでみました。
フロントコーディングの流れを知ることができた
チュートリアル形式で0からHTMLとCSSを組み立てていくため、フロントコーディングの全体感を把握することができました。
実践的なだけあって、どこから手を付けていけばよいのか、どういう考えでどういうコードを書けばよいのか、そういう知見を体験しながら得られる本でした。
「思い通りの見た目」を実現するための実践的なテクニックを得られた
box-sizingの使い方::before・::afterの有効な活用方法positionの使い分けtransformとtransitionを使って変化のあるデザインを実現する- ...etc
こうしたテクニックや知識を、必要になった時に必要な分だけ得ながら、サクサクと心地よく進めることができたのが良かったです。
この本を進めていく際に準備すると良いもの
emmet
Emmet — the essential toolkit for web-developers
HTMLを省略記法で書いて、その場でHTMLに変換してくれるツールです。
この本ではHTMLをたくさん書いていくため、いれておくと便利です。
多数のエディタにプラグインが提供されているため、お使いのエディタで探してみると見つかるかもしれません。
参考までにVimとEmacsのプラグインだけ貼っておきます。
browsersync
Browsersync - Time-saving synchronised browser testing
特定のディレクトリ下のファイルが更新された時に、ブラウザの更新をしてくれるツールです。
特に設定ファイルを書かなくても使えるツールだったため、今回のような静的コンテンツだけをコーディングしていく用途には適していました。
得られた気づき
写経の効用って、書き方の勘をつかむだけじゃなくて、ほどよくサボっていくために、界隈のツールセットを整えていけるところにあるんじゃないかと思った
— otakumesi🍞 (@otakumesi) 2017年12月24日
コードの写経って、なんだかんだで面倒くさくなるんですよね。
そのタイミングで、いい感じにサボるために界隈の便利ツールを探して導入したりしてました。
そして、写経が終わってる頃には便利ツールを利用できる環境ができあがっていて、さらに便利ツールの使い方をわかっている状態になっていて、「良さ（うまい言葉が見つからない）」を感じました。
写経には、そういう効果もあるんだなと気が付いて、改めて写経って良い勉強方法だなと思いました。
