この記事では、書籍『ほんの一手間で劇的に変わるHTML＆CSSとWebデザイン 実践編』をおススメする5つの理由を紹介します！
HTMLとCSSのスキルをレベルアップさせたい…
こんな人にはおススメの一冊です！
書籍の概要
- 著者：Mana（Webサイト制作のインストラクターとして活躍中）
- 発行：SBクリエイティブ株式会社
- 初版発行日：2021年3月6日
- 対象
- HTMLとCSSの基礎学習までを終えた人
- Webサイト制作のワンランク上のスキルを学びたい人
- 自由な装飾表現を用いてWebデザインを作りたい人
- アニメーションなど動きがあるサイトを作りたい人
- 効率よくコードを記述できる方法を知りたい人
HTML＆CSSの学習者が読むべき5つの理由
様々なタイプのWebページ作成スキルを身に付けられる
本書では完成している5つのタイプのWebサイトをもとにテクニックを解説してくれます。全て学習することができれば、5タイプのWebサイトを自力で再現できるようになります。
5つのサイトタイプはこちらです⇩
- ランディングページ
- ブログサイト
- コーポレートサイト
- イベントサイト
- ギャラリーサイト
これらの5つのサイトはいずれも実際のウェブページでよく目にするものばかりで、実践向きなものばかりです。
マスターすれば、実際の現場で活躍できる日がぐっと近づきます！
思い通りのWebデザインを実現する技術が詰まっている
HTML＆CSSの基礎的学習では、どうしてもWebサイト制作で実現できることが限られてしまいます。
しかし、この本のスキルをすべて習得すれば大抵のWebサイトはデザインできるようになります！
活用の幅が広く、実際の制作現場でも需要が高いテクニックが詰め込まれています。不規則形や斜めのデザイン、アニメーション、グラフなどレベルの高いWebサイトに必要なスキルばかりです。
得られるスキルは以下の記事にまとめています。書籍の内容をもとに製作したWebサイトも紹介しているので、レベルアップのイメージがしやすいと思います。
最低限のJavaScriptで動きのあるサイトが作れるようになる
通常、動きのあるWebサイトを作るにはJavaScriptが必要です。
しかし本書では、わずかなJavaScriptのコーディングだけで動きのあるWebサイトを実現しています。
サイトの動きはできる限りCSSのテクニックで実現し、できないものは既存のJavaScriptファイルを活用しています。
既存のJavaScriptファイルにアウトソーシングすることで、ほんの少しのJavaScriptコードだけで実現したい動きをサイトに取り入れることができます。グラフやスライドメニュー、アニメーションなどが該当します。
Webサービスの力を最大限借りて、最短距離でWebデザイン力を高めることができるのです。
JavaScriptアウトソーシング例⇩
- Chartist.js（グラフ作成用ライブラリ）http://gionkunz.github.io/chartist-js/
- luminous.min.js（ライトボックス実装）https://github.com/imgix/luminoushttps://github.com/imgix/luminous
コーディングを効率化するテクニックが学べる
デザインテクニックだけでなく、コーディング効率化テクニックも学ぶことができます。
コーディング効率化テクニックは自分で学んだり、他人から教えてもらう機会がなかなかないですよね。そんなテクニックすらこの本はカバーしてくれるのです。
本書では主に3つの効率化ツールとその利用方法を詳細に紹介しています。
3つのツール
- Emmet（エメット）
HTMLやCSSのコード入力をサポートしてくれるエディター用の拡張機能。コードを省略して記述できるので効率化につながる。 - calc関数
CSSで計算式の記述ができるようになる。要素のサイズを計算で導き出したいときに便利。 - Sass（サス）
CSSを便利に効率よく記述することができる。CSSのファイル管理もやりやすくなる。
サンプルサイトで習得がよりスムーズに
HTML&CSSの学習で、
上手なコーディングを見ながら学びたい…..
お手本がなくて学習が進まない…..
これらの悩みを持った経験がある人も多いと思います。
本書ではこれらの悩みは全く問題ありません！
本書は先述したように5つのサンプルサイトを参考にしながら解説が行われます。そしてそれらのサイトのコードは全て公開されており、だれでも無料でダウンロードできるのです。
完成されたコードに触れながら学習を進めることができるので、テキストの内容が理解しやすくなります。
また、サンプルサイト・コードがあることで以下のような学習もできます⇩
- サンプルコードを写経する
- コードをアレンジしてオリジナルサイトを作る
このように、サンプルサイトがあることで学習の幅が広がるのです。
まとめ：スキルアップにおすすめの一冊！
この記事では書籍『ほんの一手間で劇的に変わるHTML＆CSSとWebデザイン 実践講座』をおススメする5つの理由を解説しました。
5つの理由はこちらです⇩
- 様々なタイプのWebページ作成スキルを身に付けられる
- 思い通りのwebデザインを実現する技術が詰まっている
- 最低限のJavaScriptで動きのあるサイトが作れるようになる
- コーディングを効率化するテクニックが学べる
- サンプルサイトで習得がよりスムーズに
私はこの本でwebデザインの学習をしてスキルを大きく伸ばすことができました。この成長を皆さんにも経験してほしく、この記事を書きました。
ぜひ皆さんもこの本で新たなスキルを手に入れましょう！
