今、HTML5とCSS3で必要とされる知識・テクニックをどのように使うか、その考え方も分かるオススメの本

スマホ向けのWebサイトが普及し始めた数年前から、HTMLとCSSの書き方は大きく変わりました。HTMLのタグやCSSの機能が変わったわけではありません。デスクトップとスマホの両方に対応するためには、それまでとは異なる考え方で実装する必要があります。

この「考え方」について重点が置かれ、HTMLの組み方からCSSの実践的なテクニックまで、基礎から詳しく解説されたオススメの本を紹介します。

本の表紙

一見、完全な入門書のように見えますが、初心者だけでなく、中級者にもお勧めしたい本です。基礎知識の解説は一通りシンプルにしっかり解説されており、知っている人は復習がてらさっと見て、知らない人は過不足なく学べます。

最新のHTMLとCSSの書き方、日本語の文字、コンポーネント、Flexboxを使ったレイアウトなどをどのような考え方で実装するのか、実践的な知識・テクニック・考え方を整理し、身につけることができます。

本のキャプチャ

いちばんよくわかるHTML5&CSS3デザインきちんと入門
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
SBクリエイティブ
発売日:
2016/10/27

Kindle版は、お値段が少しお得です。

そんな紙面をキャプチャで少しだけ紹介します。

本のキャプチャ

本書は10章構成で、1章では制作を始める前に知っておきたい基礎知識、2-9章ではHTMLとCSSを、最後の10章ではサイトを実際にします。

本のキャプチャ

1章ではWebの概要、制作環境などを確認しておきましょう。

本のキャプチャ

2章からいよいよ、本番です。
HTMLを書くために必要な基礎知識を身につけ、実際の例を見ながら実装方法を学ぶことができます。

本のキャプチャ

基礎知識はどの本でも大差ないと思いますが、本書では考え方も詳しく解説されているのが大きな特徴です。考え方を理解することで、例にはでてこない実装、新しい技術に対応するときでもきっと役立つと思います。

本のキャプチャ

CSSも単に基礎知識を学ぶだけでなく、適用する手順や考え方が大切です。どういうプロセスでそうするのかが分かります。

本のキャプチャ

4章以降は各要素・コンポーネント単位で実装を学んでいきます。4章では読みやすい行間の作り方、システムフォントやWebフォントを使ったフォント設定など、実務で役立つテクニックも満載です。

本のキャプチャ

コンポーネントやページのレイアウトでよく使うのがdiv要素です。情報をグループ化してまとめ、整理する要素の代表格と言えるでしょう。ただし無意味に使用していると、divだらけになってしまうことがあります。

本のキャプチャ

フォームの実装が苦手、という人も少ないないと思います。フォームで使用する各要素のデスクトップ・スマホでの実装を学ぶことができます。

本のキャプチャ

9章では、レスポンシブ対応のレイアウト・ナビゲーションを例に、実践的なコーディングについて学びます。

本のキャプチャ

2カラム・3カラムのレイアウトやナビゲーションはFlexboxを使った実装で、Flexboxについても基礎からやさしく解説されています。

本のキャプチャ

最後の10章ではここまで学んだ知識・テクニックを使い、実際のWebサイトを作成します。
本書で使用されているサンプルデータは専用サイトからすべてダウンロードできます。

いちばんよくわかるHTML5&CSS3デザインきちんと入門の目次

  1. Webサイトの仕組みを知ろう
  2. HTMLの基礎知識とマークアップの実践例
  3. CSSの基礎知識とページデザインの実践例
  4. テキストの装飾
  5. リンクの設定と画像の表示
  6. ボックスと情報の整理
  7. テーブル
  8. フォーム
  9. ページ全体のレイアウトとナビゲーション
  10. レスポンシブWebデザインのページを作成しよう

知識やテクニックも大事だと思いますが、もっとも身につけるべきなのは「考え方」です。知識やテクニックはぐぐれば、分かります。もちろん一冊にまとまっているだけでも便利ですが、その知識やテクニックをどのように使うかが重要です。
学ぶべきことがきちんと解説されている一冊です。

本のキャプチャ

いちばんよくわかるHTML5&CSS3デザインきちんと入門
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
SBクリエイティブ
発売日:
2016/10/27

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2024 coliss