説明は初心者向け、学ぶ知識はプロで通用するレベル、HTML5とCSS3が身につく良書 -いちばんやさしいHTML5&CSS3の教本
Post on:2016年4月1日
sponsors
Web制作をこれから始めたいと考えてる人、Web制作のしっかりした知識を身につけたい人に、今必要とされているHTML5とCSS3の基礎力を磨くことができるオススメの本を紹介します。
いちばんやさしいのに、一番しっかりHTML5とCSS3のことが学べると思います。
本書はWeb制作者に好評の「いちばんやさしいシリーズ」で、HTML5やCSS3が出版されるのを待っていた人も多いと思います。
初心者向けながらも、文章構造を意識した質の高いHTML、仕様に沿った利便性の高いCSS、メンテナンス性や作業効率に優れたコーディングをしっかりと身につけることができる一冊です。
紙面のキャプチャで、中身を少しだけご紹介。
本書はB5変形判で、1ページがほぼ正方形。本を開きながらキーボードやマウスを操作しても、邪魔にならないコンパクトサイズです。
オールカラーのデザインは目に優しい色使いで、重要な箇所は一目で分かりますね。
各レッスンの頭にある「このレッスンのポイント」も本書の大きな特長。
これまでの確認をしつつ、目的をもって読み進めることができます。
全10章構成で、Webサイトの基本的な仕組みから、HTMLやCSSの基礎を学び、基本となるテクニックを使い、実務ベースのフローでページを作成していきます。
最初の1章では制作の準備をしていきます。
2章からさっそくHTMLを学んでいきます。
HTMLの構造って言葉の説明だと分かりにくいと思うですのが、やさしいテキストと明確な図やイラストがあるので、勘違いすることなく、正しい知識を身につけることができると思います。
そういえば昔は、要素とタグの違いが分かっていませんでした、、、
たまに現役の人でも用語を正確に使い分けていない人を見かけます。
初心者にはちょっと難しいかもしれない、今すぐでなくても近い将来必ず役立つ知識は「ワンポイント」として解説されています。
3章からはいよいよページの作成です。
説明は初心者向けでやさしいですが、学ぶ知識はプロで通用するレベルで、非常にしっかりしています。
ヘッダやナビゲーション、メインエリア、パンくずリスト、サイドバー、フッターなどのHTMLを作成していきます。
3章では各ページの共通部分を作成したので、4章からは各ページの個別部分を作成します。こういった手順を採用している会社も少なくないでしょう。
5章からはいよいよCSSで、一番ボリュームがあります。
基本だけど、割と難しいことでも分かりやすく説明されています。
基本が分かったら、レイアウトを学んでいきます。
レイアウトもものすごい高度なものではないのですが、基本がしっかりしていると、いくらでも応用が効きます。
ページ上のいろいろな要素は、それぞれにあった実装方法でテクニックを学んでいきます。
CSSアニメーションも派手なものではなく、実用的なちょっとしたアニメーションで、実装の仕組みを正しく理解することで、複雑なアニメーションにも対応できるようになります。
ページの作成が一通り完了したら、スマホ対応です。
スマホ対応の仕組み、やり方、確認方法など、しっかり学べます。
最終章ではSEOやソーシャルメディアなどで、GoogleやFacebookやTwitterへの対応も簡単にできます。
いちばんやさしいHTML5&CSS3の教本の目次
-
- Webサイトを作成する準備をしよう
- Webサイトが表示される基本的な仕組みを知りましょう
- Webサイト制作の大まかな流れを把握しましょう
- Webサイトの構成とデザインを決めましょう
- 「Google Chrome」をインストールしましょう
- テキストエディタ「Brackets」をインストールしましょう
- ファイルの種類を表す「拡張子」を表示しましょう
- 文字コードを理解しましょう
-
- HTMLの基本を学ぼう
- HTMLとは何かを知りましょう
- HTMLの基本構造を知りましょう
- タグの基本的な書き方を知りましょう
- 代表的な要素について学びましょう
- ディレクトリとパスについて学びましょう
- HTMLを書いてみましょう
- Webページに画像を挿入してみましょう
- 読みやすいHTMLを書きましょう
-
- 共通部分のHTMLを作成しましょう
- 完成形をイメージしましょう
- ページの骨組みを作成しましょう
- ヘッダーとグローバルナビゲーションを作りましょう
- メインエリアとパンくずリストを作ろう
- サイドバーとフッターを作りましょう
-
- 共通部分から個別のページを作成しよう
- 共通ページをもとにしてトップページを作成しましょう
- 講座案内ページの表組みを作成しましょう
- ギャラリーページの画像リストを作成しましょう
- お問い合わせページのフォームを作成しましょう
-
- CSSの基本を学ぼう
- CSSとは何かを知りましょう
- CSSの基本構造を知りましょう
- セレクタについて理解しましょう
- CSSが競合するスタイルを解決する仕組みを知りましょう
- スタイルの継承について知りましょう
- 文字の書式を設定するプロパティを知りましょう
- 色の指定方法を知りましょう
- 要素のサイズと間隔の指定方法を理解しましょう
- Webページの主なレイアウトパターンを知りましょう
- フロートを利用したレイアウト方法を理解しましょう
- ディスプレイを利用したレイアウト方法を理解しましょう
- ポジションを利用したレイアウト方法を理解しましょう
- CSSを書いてみましょう
-
- CSSで共通部分をデザインしよう
- タイプセレクタを使ってページ全体の書式を整えましょう
- ボーダーと背景でメインコンテンツの見出しを装飾する
- 幅を設定してヘッダーエリアを整えましょう
- フロートを利用してグローバルナビゲーションを整えましょう
- メイン部分を2段組みにしましょう
- ボーダーと背景設定を組み合わせてサイドバー内を整えましょう
- グラデーションを利用して立体的なボタンを作りましょう
- フッターナビゲーションをインライン化して整えましょう
- 疑似要素を使ってパンくずリストを整えましょう
- アニメーションによる視覚効果を追加してみましょう
-
- コンテンツのデザインを整えよう
- トップページのデザインを整えましょう
- 講座案内の表組みを装飾しましょう
- ギャラリーの写真を格子状に並べましょう
- フォームを装飾してみましょう
-
- スマートフォンに対応しよう
- スマートフォンに対応する方法を知りましょう
- スマートフォンでの表示をパソコンで確認しましょう
- Viewpointを設定してWebページの表示方法を制御しよう
- メディアクエリでCSSを切り替えましょう
- Webフォントでアイコンを表現してみましょう
-
- Webサイトを公開しよう
- Webサイトを公開するサーバーを用意しましょう
- FTPクライアントを使ってファイルをアップロードしましょう
- Webサイトの品質を確認しましょう
-
- 機能を追加して集客しよう
- 検索結果にWebサイトの情報が詳しく載るようにしましょう
- ブックマークやスマートフォン用のアイコンを設定しましょう
- ソーシャルネットワークを活用しましょう
- Googleマップを埋め込みましょう
「HTML5やCSS3の分かりやすい本はないですか？」と聞かれることがよくあるので、この本を紹介しようと思います。
献本の御礼
最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
