書評・要約

【mana著】『HTML&CSSとWEBデザイン』の内容と身につく技術を解説

Pocket

 

HTMLとCSSの教本として大人気の『HTML&CSSとWEBデザイン』をご存じですか?

私はWEB制作会社に入社する前にこの本を買って、実際にサイトを作成していました。図も多くてわかりやすく、この一冊で基本から応用まで身につけることができます。

今必須のスキルであるレスポンシブ対応(見る端末によって画面構成を変える)などのも載っています!

Amazonでもランキング1位の本なので、1度は手に取ってみてください。

こんな方におすすめ

  • HTMLとCSSの基本を学びたい方
  • デザインの基本が学びたい方
  • レスポンシブについて知りたい人
  • 実際にWEBページを作成しながら勉強したい人

Amazonで本をみてみる

「HTMLとCSSとWEBデザイン」ってどんな本?

本書で学べること

  • WEBの仕組み、HTMLの基本、CSSの基本
  • 実際に1つのWEBサイトを制作する
  • スマホにも対応できる「レスポンシブ」書き方
  • 「Flexbox」や「CSSグリッド」などの最新技術
  • 配色やレイアウト、タイポグラフィといったデザイン知識

WEB制作に必要な基本的な知識は、この1冊で学ぶことができます。

さらに、デザインの知識も学べるので、他の本よりもより洗練されたデザインのWEBページを作成できるようになります。

前半は、WEBの仕組み、HTMLの基本、CSSの基本を学び、後半はそれらを使って実際にWEBページを作成していきます。

手を動かしながらWEBページを作ることで、知識の習得が格段にはやくなります。

説明も丁寧で、図も多く、初心者に最適な1冊となっています。

WEB系の教本で1位にランクインしているため、多くの人から支持されています。

著者について

著者のManaさんは、現在多くのWeb関連のセミナーに登壇し、インストラクターとしてWeb制作のインストラクターとして教育に携わっている方です。

日本で2年間グラフィックデザイナーとして働いた後、カナダにあるWeb制作学校を卒業し、オーストラリアやイギリスの企業でWebデザイナーとして活躍していました。

2010年には、優れたブロガーを表彰・紹介する「アルファブロガーアワード」を受賞している方です。

ja.webcreatormana.com

こちらはManaさんのポートフォリオになります。

本書の内容

本書の構成

CAPTER1 最初に知っておこう!Webサイトの基本

  • Webページの種類とそれぞれの特長
  • ユーザビリティの基本
  • Webサイトの仕組み
  • 制作の流れ
  • 制作する前準備

Webサイトを作ろうと思っていも、何から始めていいのかわからない方が多いと思います。

本書は以下の内容になっているため、基本~実際のWEB制作まで効率よく学ぶことができます。

CAPTER2 Webの基本構造を作る!HTMLの基本

  • HTMLの作成方法
  • HTMLの基本(タグの種類やテンプレートのタグについて)
  •  基本のタブについて(h1やimgなど)
  • チェックボックスやセレクトボックスなどの基本の装飾

この章ではHTMLの基本を身に付けることができます。

よく使うタグについての説明が分かりやすく、初心者の方でも理解できる内容になっています。

章末にはよく使うタグの一覧が載っていいて便利です!

CAPTER3 Webのデザインを作る!CSSの基本

  • CSSの作成方法
  • CSSの基本
  • よく使うプロパティの説明(font-sizeやcolorなど)
  • 配色の仕方や色の持つ特徴
  • 余白の使い方(marginやpaddingの使い方)
  • ラインの引き方やリストの装飾
  • classやidの使い方
  • flexboxの使い方(複雑なレイアウトを簡単に作成できるやり方)

CSSの基本からflexboxを使った、今どきのレイアウトの組み方を学べる章になっています。

flexboxの使い方については、特に丁寧な説明と画像を組み合わせており、とてもわかりやすいです。

習得すると表現の幅が広がるので、楽しいです。

CSSもよく使うプロパティをまとめてあるのでそちらも参考になりました!

CAPTER4 フルスクリーンのWebサイトを作成する

  • フルスクリーンの制作方法(画像や動画を使用して画面全体を表示する方法)
  • headerの作成
  • ボタンの作成
  • CSSを使用し背景画像の加工

フルスクリーンの制作手順の中で、今まで学んできたことが多く出てきます。

復習を兼ねて、一度教本通りに制作してみて2回目は自力でサンプルを見ながら 作っていくのがおすすめです。

最初は中々スムーズに構築できませんが、前のページやネットで調べながら根気よく続けてみましょう!

CAPTER5 2カラムのWebサイトを制作する

  • 2カラムのWebページの制作方法(垂直方向に区切ってレイアウトを組むこと)
  • カラムの制作手順
  • フッターの制作方法
  • positionの使い方
  • レスポンシブに対応させる方法

カラムの使い方をマスターすれば、ブログ型などに対応できるようになるため、非常に幅が広がります。

やってみると簡単なので、教本をみて一度作成してみましょう!

レスポンシブに対応させる手順も載っているので、実践でどのように対応させていくのかここの章で学びます。

CAPTER6 タイル型のWebサイトを制作する

  • タイル型のWeb制作手順
  • CSSグリッドを使用してのレイアウト変更
  • タイル型のカスタマイズ方法(1番目の写真を大きくするなど)

ここではよくメニュー一覧サイトにあるような、料理の写真が横に3列ほど並び、スクロールしていくとメニューの一覧が把握できるようなWebページを学びます。

例としては、このようなサイトです。

メニュー一覧

出典:HTML&CSSとWEBデザイン P229

タイル型の基本的な構造を覚えれば、応用を聞かせ色々なスタイルに変化させられるのでマスターしましょう。

CAPTER7 外部メディアを利用する

  • テキストやメールアドレスを書き込めるようにするやり方
  • グーグルマップの埋め込み方
  • ツイッターやFacebook、YouTubeのプラグインの埋め込み方法
  •  グーグルマップのカスタマイズ方法

最後の章になります。

ここではお問合せページを制作します。

外部メディアの載せ方もここで学ぶので、サイトの幅が広がります。

まとめ

1冊終わるころになると、基本は習得できている状態になります。

後は、ひたすら模写コーディングや実際にWEB制作して力をつけていくしかありません。

しかし、この本で学んだ基本知識があるかないかで大きく違うので、まずはこの本で知識を身につけてから挑戦するのがベストです。

 

WEB制作会社に転職したい方は、実際に私が行った流れや方法を解説した『未経験者がWEB業界に転職する方法』をご覧ください。

-書評・要約

© 2021 Yaya Blog Powered by AFFINGER5