genkai-shobo.jp

1冊ですべて身につくHTML & CSSとWebデザイン入門講座


著者:Mana/著
価格:2,260円+税
刊行日:2019/03

出版社:SBクリエイティブ
ISBN:978-4-7973-9889-2
Cコード:0055
[単行本](電子通信)

Web界隈やデザイナーに大人気!



内容紹介

Web界隈やデザイナーに大人気!
Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の中の人、
Manaによる渾身のHTML+CSS+Webデザイン本

HTMLとCSSとWebデザインを一気にまるごと学べる
1つのサイトを実際に作りながら学んでいくやさしい作り

●対象読者
・これからHTMLとCSSを学びたい人
・Webデザイナーにないたい人
・この1冊で全部学びたい人におすすめ

もくじ

Chapter1 最初に知っておこう! Webサイトとデザインの基本
よいWebデザインとは
様々な種類のWebサイト
ユーザビリティとは
Webサイトのしくみ
デバイスの種類
ブラウザーの種類
制作の流れ
1.制作の流れ
2. 企画しよう
3. サイトマップ制作
4. ワイヤーフレーム制作
5. デザインを制作する
6. ファイルを用意する
7. Web上に公開する
制作をはじめる前に
制作環境を整える
エディターをインストールする
ブラウザーをインストールする
グラフィックツールを確認する

Chapter2 Webの基本構造を作る! HTMLの基本
1. HTMLとは
2. HTMLファイルを作ろう
3. HTMLファイルの骨組みとは
1.Doctype
2.lang
4. headとbodyについて知ろう
1.meta要素
2.head内に書く要素
5. 基本の書き方を身につけよう
6. 見出しをつけよう
7. 文章を表示しよう
8. 画像の挿入しよう
1.alt属性
2.src属性
9. リンクをはろう
10. リストを表示しよう
11. 表組みを作ろう
12. フォームを作ろう
13. 使いやすいフォームを作ろう
フォームのユーザビリティ
14. ブロック要素でグループ分ける
article, section, header, footer, main, aside, nav
15. divとspanでグループを分ける
16. よく使うHTMLタグリスト一覧

Chapter3 Webのデザインを作る! CSSの基本
1. CSSの役割とは
2. 基本の書き方を身につける
3. CSSを適応させる方法とは
4. 文字や文章の装飾する
font, line-height, ショートハンド…
Webデザインとタイポグラフィ
Webフォントを使う
文章をそろえる
文章の組版を整える
5. 色をつけよう
文字に色をつける
背景に色をつける
カラーコードで指定する
色名で指定する
上手に配色しよう
色の持つ印象とは
色相・明度・彩度とは
色のトーンとは
色の組み合わせを考える
各色をメインで使った参考サイト一覧
Column 配色ツール
6. 背景を彩ろう
image, repeat, position, ショートハンドを使う
背景画像を全画面表示する
写真素材をダウンロードできるサイト一覧
7. 幅と高さを指定する
width, heightで幅を指定する
Webサイト上で使う単位とは
8. 余白を調整しよう
margin, paddingの余白の概念とは
余白を使ってグループ化する
枠と文字の余白を作る
Column 余白を上手に使ったWebサイトとは
9. 線を引こう
borderを使う
線のデザインの効果的な使い方
10. レイアウトを組む
flex で横並びにする
grid でマルチカラムにする
Webサイトのレイアウトとは
読みやすいレイアウトとは
レイアウト別参考Webサイト一覧
Column floatのレイアウトについて
11. リセットCSSとは
12. クラスとIDを使った指定方法を理解する
13. ブラウザーのデフォルトCSSをリセットする
14. よく使うCSSプロパティリスト一覧

Chapter4 シングルページのWebサイトを制作する
1. シングルページとは
2. シングルページの制作の流れ
3. headの記述しよう
4. header部分の作成しよう
画面いっぱいに背景画像を設置しよう
画像の効果的なトリミングの仕方とは
5. コンテンツ部分の作成しよう
画像と文章の設置しよう
6. footer部分の作成しよう
7. ファビコンを用意しよう
8. シングルページのカスタマイズ例

Chapter5 2カラムのWebサイトを制作する
1.2カラムページとは
2. カラムページの制作の流れ
3. header部分の作成しよう
4. 横並びの設定をしよう(display: flex;)
5. メインエリアの作成しよう
6. サイドバーの作成しよう
7.レスポンシブに対応しよう
メディアクエリーの基本について
ブレークポイントについて考えよう
コンテンツを縦並びにしよう
8.カラムページのカスタマイズ例

Chapter6 マルチカラムのWebサイトを制作
1.マルチカラムとは
2. マルチカラムの制作の流れ
3. 全体の装飾をしよう
4.マルチカラムの設定をしよう(display: grid;)
Gridの設定
grid-template-columnsの設定
grid-template-rowsの設定
grid-gapの設定
5. コンテンツを入れよう
6.レスポンシブに対応しよう
Gridレイアウトをレスポンシブ対応しよう
repeatとは
auto-fitとは
7.マルチカラムのカスタマイズ例

Chapter7 外部メディアを利用する
1.コンタクトフォームサービスを利用する
2.地図を入れる
3.Facebookプラグインを挿入する
4.Twitterプラグインを挿入する
5.OGPの設定をする
6.動画の埋め込みをする
7.外部メディアのカスタマイズ例
HTMLタグ/CSSプロパティ一覧

Mana

日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。現在は全国各地でWeb関連のセミナーに登壇し、Webサイト制作のインストラクターとして教育に携わっている。ブログ「Webクリエイターボックス」は2010年日本のアルファブロガーアワードを受賞。