MdNCORPORATION

HTML+CSSワークショップ 手を動かして学ぶWebデザイン

藤川 麻夕子 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2017-04-28
仕様 B5変形判/432P
ISBN 978-4-8443-6660-7
Webサイトのデザイン制作をはじめて学ぶ方に向けて、HTML+CSSとサイトの作り方をゼロから解説した書籍です。サイトを作るうえで必要となる「道具」の説明やHTMLとCSSの基本から、シンプルなページ構成のWebサイトを制作する方法、制作したサイトに現場で実際に使われている技術を取り入れるところまでをカバーしました。 本書の大きな特長は2つです。1つ目は、「座学」と「実践」の2通りを交えた構成になっている点。解説を読みながら、サンプルファイルを使ってソースコードを書いたり、Webブラウザに表示させたりすることで、サイトを作るノウハウがゼロから身につきます。2つ目は、「いまの技術」に焦点を合わせていること。HTML、CSSの過去や未来の話ではなく、制作現場でいま使われている内容に絞って解説しています。プロの目指す方の入門書としてはもちろん、自分でソースコードを書くことがなくてもディレクションする立場にある方、業務ではなく個人でHTML+CSSを習得したい・Webサイトを作りたい方などにも、活用いただける内容になっています。

■ページ見本










目次



■Introduction Webサイトを制作する前に
01 Webサイトを作る業務の流れ
02 Webサイト制作にはどんな人が関わるのか?

■Lesson 1 Webサイトを制作する準備
01 HTMLとCSSを書くのに必要なもの
試してみよう 違う種類のブラウザでWebページを見てみよう
02 コンピューターと会話しよう
03 Bracketsをインストールしよう
試してみよう Bracketsで「ライブプレビュー」を表示してみよう

■Lesson 2 HTMLとCSSの役割を理解する
01 HTMLの基本を学ぶ
02 HTMLファイルの基本構造
03 CSSの基本構造
04 CSSのセレクタを理解しよう
05 値につける単位と色の指定方法
06 CSSの適用方法とセレクタの優先順位

■Lesson 3 HTMLでマークアップを行う
01 マークアップをはじめてみよう
02 「見出し」を意味するh1〜h6要素
03 p要素で「段落」を指定する
04 Webブラウザで表示してみよう
05 囲まないタグ「空要素」
06 画像を意味するimg要素
試してみよう img要素で画像の幅・高さを指定してみよう
07 リストを作るul要素・ol要素
試してみよう 「入れ子構造」のリストを作ってみよう
08 表組みを作るtable要素
09 a要素でリンクを設定してみよう
10 head要素内に記述する要素
11 HTMLのコメント

■Lesson 4 CSSで見た目を制御する
01 CSSのリセット
02 文字の見た目を制御する
03 画像の見た目を制御する
試してみよう 画像をインスタント写真風の見た目にする
04 リンクテキストの見た目を制御する
05 背景を制御する
06 余白を制御する
07 リストの見た目を制御する
08 テーブルの見た目を制御する
09 CSSのコメント

■Lesson 5 HTMLでWebページの構造を作る
01 ブロックレベルとインライン
02 HTML5で登場した考え方
03 HTMLで文書構造を作る
04 構造を作るHTMLを書いてみよう

■Lesson 6 CSSでレイアウトを制御する
01 Webページのレイアウトの基本
試してみよう いろいろなサイトの幅を調べてみよう
02 ページ全体のレイアウトを調整する
03 CSSで段組みを作る
04 floatプロパティを使うレイアウトの注意点
05 positionプロパティで要素をレイアウトする

■Lesson 7 実践:Webサイトを作る
01 HTMLで共通部分の中身を作る
02 HTMLでメインコンテンツを作る
03 CSSで共通部分の見た目を調整する
04 CSSでトップページの見た目を調整する

■Lesson 8 実践:問い合わせフォームを作る
01 フォームに関するHTMLの要素
02 HTMLでフォームの構造を作る
03 CSSでフォームの見た目を調整する

■Lesson 9 応用:現場の技術を取り入れる
01 Webブラウザの表示の違いを制御する
02 表現の幅を広げるWebフォント
03 レスポンシブWebデザインの基本知識
04 Webアクセシビリティの基本と考え方

■Lesson 10 応用:JavaScriptで動きを表現する
01 JavaScriptの基本と特徴
02 JavaScriptで画像をスライドさせる

■Lesson 11 応用:SNSや他サービスとの連携
01 GooleマップをWebページに埋め込む
02 Facebookのページプラグインを表示する
03 Facebook・Twitterのシェアリンクを設定する

巻末:用語索引
巻末目的別索引

お詫びと訂正

『HTML+CSSワークショップ 手を動かして学ぶWebデザイン』
 お詫びと訂正のお知らせ
このたびは、『HTML+CSSワークショップ 手を動かして学ぶWebデザイン』をご購入いただきまして、誠にありがとうございます。

本書の解説内容にあるソースコードの一部に誤りがございました。

class属性値「gNavi」は、ul要素ではなくnav>要素に付与されるのが正しい記述となります。
(誤)
<nav>
<ul class="gNavi">
</ul>
</nav>

(正)
<nav class="gNavi">
<ul>
</ul>
</nav>
該当箇所は下記の通りです。

・246ページ 【図12】左図・右図
・295ページ【図2】
・296ページ【図5】
・299ページ【図10】左図・右図

・247ページ 本文1行目
(誤)
【図12】のul要素のclass属性値「gNavi」は

(正)
【図12】のnav要素のclass属性値「gNavi」は

修正したPDFを用意させていただきましたので、ご利用いただけますようお願い申し上げます。

修正PDFのダウンロード
teisei.pdf(約1MB)

ご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫びいたします。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊