説明は初心者向け、学ぶ知識はプロで通用するレベル、HTML5とCSS3が身につく良書 -いちばんやさしいHTML5&CSS3の教本

Web制作をこれから始めたいと考えてる人、Web制作のしっかりした知識を身につけたい人に、今必要とされているHTML5とCSS3の基礎力を磨くことができるオススメの本を紹介します。

いちばんやさしいのに、一番しっかりHTML5とCSS3のことが学べると思います。

本のキャプチャ

本書はWeb制作者に好評の「いちばんやさしいシリーズ」で、HTML5やCSS3が出版されるのを待っていた人も多いと思います。

初心者向けながらも、文章構造を意識した質の高いHTML、仕様に沿った利便性の高いCSS、メンテナンス性や作業効率に優れたコーディングをしっかりと身につけることができる一冊です。

書籍の表紙

いちばんやさしいHTML5&CSS3の教本
[Amazonでみる]
[楽天でみる]

著:
赤間 公太郎、大屋 慶太、服部 雄樹
出版社:
インプレスジャパン
発売日:
2016/3/21

紙面のキャプチャで、中身を少しだけご紹介。

誌面のキャプチャ

本書はB5変形判で、1ページがほぼ正方形。本を開きながらキーボードやマウスを操作しても、邪魔にならないコンパクトサイズです。
オールカラーのデザインは目に優しい色使いで、重要な箇所は一目で分かりますね。

誌面のキャプチャ

各レッスンの頭にある「このレッスンのポイント」も本書の大きな特長。
これまでの確認をしつつ、目的をもって読み進めることができます。

誌面のキャプチャ

全10章構成で、Webサイトの基本的な仕組みから、HTMLやCSSの基礎を学び、基本となるテクニックを使い、実務ベースのフローでページを作成していきます。
最初の1章では制作の準備をしていきます。

誌面のキャプチャ

2章からさっそくHTMLを学んでいきます。
HTMLの構造って言葉の説明だと分かりにくいと思うですのが、やさしいテキストと明確な図やイラストがあるので、勘違いすることなく、正しい知識を身につけることができると思います。

誌面のキャプチャ

そういえば昔は、要素とタグの違いが分かっていませんでした、、、
たまに現役の人でも用語を正確に使い分けていない人を見かけます。

誌面のキャプチャ

初心者にはちょっと難しいかもしれない、今すぐでなくても近い将来必ず役立つ知識は「ワンポイント」として解説されています。

誌面のキャプチャ

3章からはいよいよページの作成です。

誌面のキャプチャ

説明は初心者向けでやさしいですが、学ぶ知識はプロで通用するレベルで、非常にしっかりしています。

誌面のキャプチャ

ヘッダやナビゲーション、メインエリア、パンくずリスト、サイドバー、フッターなどのHTMLを作成していきます。

誌面のキャプチャ

3章では各ページの共通部分を作成したので、4章からは各ページの個別部分を作成します。こういった手順を採用している会社も少なくないでしょう。

誌面のキャプチャ

5章からはいよいよCSSで、一番ボリュームがあります。

誌面のキャプチャ

基本だけど、割と難しいことでも分かりやすく説明されています。

誌面のキャプチャ

基本が分かったら、レイアウトを学んでいきます。
レイアウトもものすごい高度なものではないのですが、基本がしっかりしていると、いくらでも応用が効きます。

誌面のキャプチャ

ページ上のいろいろな要素は、それぞれにあった実装方法でテクニックを学んでいきます。

誌面のキャプチャ

CSSアニメーションも派手なものではなく、実用的なちょっとしたアニメーションで、実装の仕組みを正しく理解することで、複雑なアニメーションにも対応できるようになります。

誌面のキャプチャ

ページの作成が一通り完了したら、スマホ対応です。
スマホ対応の仕組み、やり方、確認方法など、しっかり学べます。

誌面のキャプチャ

最終章ではSEOやソーシャルメディアなどで、GoogleやFacebookやTwitterへの対応も簡単にできます。

いちばんやさしいHTML5&CSS3の教本の目次

  1. Webサイトを作成する準備をしよう
    Webサイトが表示される基本的な仕組みを知りましょう
    Webサイト制作の大まかな流れを把握しましょう
    Webサイトの構成とデザインを決めましょう
    「Google Chrome」をインストールしましょう
    テキストエディタ「Brackets」をインストールしましょう
    ファイルの種類を表す「拡張子」を表示しましょう
    文字コードを理解しましょう
  2. HTMLの基本を学ぼう
    HTMLとは何かを知りましょう
    HTMLの基本構造を知りましょう
    タグの基本的な書き方を知りましょう
    代表的な要素について学びましょう
    ディレクトリとパスについて学びましょう
    HTMLを書いてみましょう
    Webページに画像を挿入してみましょう
    読みやすいHTMLを書きましょう
  3. 共通部分のHTMLを作成しましょう
    完成形をイメージしましょう
    ページの骨組みを作成しましょう
    ヘッダーとグローバルナビゲーションを作りましょう
    メインエリアとパンくずリストを作ろう
    サイドバーとフッターを作りましょう
  4. 共通部分から個別のページを作成しよう
    共通ページをもとにしてトップページを作成しましょう
    講座案内ページの表組みを作成しましょう
    ギャラリーページの画像リストを作成しましょう
    お問い合わせページのフォームを作成しましょう
  5. CSSの基本を学ぼう
    CSSとは何かを知りましょう
    CSSの基本構造を知りましょう
    セレクタについて理解しましょう
    CSSが競合するスタイルを解決する仕組みを知りましょう
    スタイルの継承について知りましょう
    文字の書式を設定するプロパティを知りましょう
    色の指定方法を知りましょう
    要素のサイズと間隔の指定方法を理解しましょう
    Webページの主なレイアウトパターンを知りましょう
    フロートを利用したレイアウト方法を理解しましょう
    ディスプレイを利用したレイアウト方法を理解しましょう
    ポジションを利用したレイアウト方法を理解しましょう
    CSSを書いてみましょう
  6. CSSで共通部分をデザインしよう
    タイプセレクタを使ってページ全体の書式を整えましょう
    ボーダーと背景でメインコンテンツの見出しを装飾する
    幅を設定してヘッダーエリアを整えましょう
    フロートを利用してグローバルナビゲーションを整えましょう
    メイン部分を2段組みにしましょう
    ボーダーと背景設定を組み合わせてサイドバー内を整えましょう
    グラデーションを利用して立体的なボタンを作りましょう
    フッターナビゲーションをインライン化して整えましょう
    疑似要素を使ってパンくずリストを整えましょう
    アニメーションによる視覚効果を追加してみましょう
  7. コンテンツのデザインを整えよう
    トップページのデザインを整えましょう
    講座案内の表組みを装飾しましょう
    ギャラリーの写真を格子状に並べましょう
    フォームを装飾してみましょう
  8. スマートフォンに対応しよう
    スマートフォンに対応する方法を知りましょう
    スマートフォンでの表示をパソコンで確認しましょう
    Viewpointを設定してWebページの表示方法を制御しよう
    メディアクエリでCSSを切り替えましょう
    Webフォントでアイコンを表現してみましょう
  9. Webサイトを公開しよう
    Webサイトを公開するサーバーを用意しましょう
    FTPクライアントを使ってファイルをアップロードしましょう
    Webサイトの品質を確認しましょう
  10. 機能を追加して集客しよう
    検索結果にWebサイトの情報が詳しく載るようにしましょう
    ブックマークやスマートフォン用のアイコンを設定しましょう
    ソーシャルネットワークを活用しましょう
    Googleマップを埋め込みましょう

「HTML5やCSS3の分かりやすい本はないですか?」と聞かれることがよくあるので、この本を紹介しようと思います。

書籍の表紙

いちばんやさしいHTML5&CSS3の教本
[Amazonでみる]
[楽天でみる]

著:
赤間 公太郎、大屋 慶太、服部 雄樹
出版社:
インプレスジャパン
発売日:
2016/3/21

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

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

top of page

©2017 coliss