BOOK Studio947
狩野祐東・狩野さやか著書

スラスラわかるHTML&CSSのきほん

狩野祐東著／SBクリエイティブ刊
256ページ 本体1900円＋税 ISBN-13: 978-4797372960

出版社 amazon 電子Kindle版

スラスラわかるHTML&CSSのきほん 第13刷増刷、遂に4万部突破へ 2017-07-13

スラスラ、リフロー版、合本版登場！ 2017-05-30

本書の紹介 お知らせ コラム ダウンロード 正誤表
『スラスラわかるHTML&CSSのきほん 第2版』誕生しました！

いちばんやさしい。ずっと使える。

小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版！ 基本のタグからフォーム、レイアウトを調整するためのCSSの活用まで、 ずっと使える知識がぎゅっと詰まっています。

『スラスラわかるHTML&CSSのきほん』は、これからHTML&CSSを学習したいという方が、いちばんやさしく、楽しく作業を進めながら、正しい知識を身につけられることを目標に書きました。

本書では、「KUJIRA cafe」という架空のカフェを紹介する計7ページの小規模なWebサイトを制作します。制作をとおして基本のHTMLとCSSを使いながら、Webサイトの公開まで行います。詳しい操作説明と詳細な解説で作業につまづくこともなく、また実習が終わったころには応用力もつきます。

学習用サンプルサイト公開中 サンプルデータ（SBクリエイティブ）

こんな人におすすめ

・これからWebサイト制作をはじめる人
・HTMLを少しかじったことがあるが、基礎からきちんと知りたい人
・CSSやフォームの使い方まで身につけたい人
・達成感を味わいながら楽しく学習したい人

本書を紹介してくださっているサイトやオンラインの書評など

いくつかのサイトに書評が掲載されています。入門書をお探しの方は参考になさってください。また、紹介してくださった方々、どうもありがとうございます。

目次

chapter01　Webサイト制作を始める前に

01　Webサイトとその構成要素

  • 1　Webサイトは複数のWebページの集合
  • 2　一度に表示される画面一つひとつがWebページ
  • 3　Webページを構成するファイル

02　Webブラウザの機能と種類

  • 1　Webブラウザの機能
  • 2　ブラウザでローカルファイルを開く
  • 3　Webブラウザの種類

03　Webサイトを公開するまで

  • 1　Webサイト制作の流れ

04　制作に使うソフトのインストール

  • 1　OSの初期設定を変更する
  • 2　テキストエディタをインストールする
  • 3　FTPクライアントをインストールする

chapter02　HTMLの基礎

01　HTMLはWebページを制作するための言語

  • 1　HTMLの特徴とその役割
  • 2　HTMLは世界標準の言語

02　HTMLの基本的な書式

  • 1　基本の書式と名称
  • 2　タグの記述は半角で
  • 3　インデント
  • 4　空要素

03　親子、子孫、兄弟の関係

  • 1　親要素、子要素
  • 2　先祖、子孫
  • 3　兄弟

04　HTMLのバージョンと書式の違い

  • 1　バージョンによってHTMLの書式は少しずつ異なる

chapter03　制作の準備と基本のHTML

01　Webサイト制作の準備

  • 1　データを整理するためのフォルダを作成する
  • 2　「images」フォルダに画像をコピーする
  • 3　index.htmlファイルを作成する

02　すべてのHTMLドキュメントで必要なタグ

  • 1　HTMLを記述してみよう
  • 2　<head>タグの内容を記述する
  • 3　正しく記述できたか確認してみよう

chapter04　見出し、段落、リスト

01　見出し

  • 1　ロゴの場所を確保して、ニュースの見出しを挿入する

02　段落

  • 1　ニュースの短い記事を挿入する

03　非序列リスト

  • 1　ナビゲーションメニューを作成する

chapter05　リンクと画像の挿入

01　リンク

  • 1　ナビゲーションメニューとロゴにリンクを挿入する

02　外部サイトへのリンク

  • 1　ニュース記事の一部にリンクを挿入する

03　画像の挿入

  • 1　ロゴを画像に差し替え、キービジュアルを挿入する

04　文字実体参照

  • 1　フッターを作成する

05　要素のグループ化

  • 1　キービジュアル、フッターをグループ化する

06　id属性、class属性

  • 1　CSS適用への準備をする

07　コメント文

  • 1　ヘッダー／メイン／フッター部にコメントを挿入する

chapter06　2ページ目以降を効率的に作成する

01　index.html以外のファイルの作成

  • 1　index.htmlから2ページ目以降のHTMLファイルを作成する

02　段落にテキストと画像を含める

  • 1　店舗案内の見出しを追加する
  • 2　段落に画像を含める
  • 3　画像と一緒にテキストも含める

03　テキストの修飾

  • 1　あいさつ文のテキストを修飾する

04　ページの特定の場所にリンクする

  • 1　index.htmlのニュース項目へリンクする

05　テーブル

  • 1　店舗情報のテーブルを作成する（1）
  • 2　店舗情報テーブルを作成する（2）

06　序列リスト

  • 1　access.htmlを作成する

07　CSS適用を考えた要素のグループ化

  • 1　menu.htmlを作成する
  • 2　メニュー一覧のテーブルを作成する
  • 3　メニューの紹介写真を掲載する
  • 4　menu.htmlを仕上げる
  • 5　menu2.html、menu3.htmlを作成する

chapter07　CSSの基礎

01　HTMLにスタイル機能を提供するCSS

  • 1　CSSの特徴とその役割
  • 2　HTMLと同様、W3Cが世界標準仕様を策定している
  • 3　HTMLとCSSの関係

02　CSSの基本的な書式

  • 1　基本の書式と名称
  • 2　例外的な書式　@ルール
  • 3　コメント文

03　セレクタ

  • 1　セレクタの種類

04　継承

  • 1　プロパティ値の継承

05　CSSを記述する場所

  • 1　CSSを記述できる場所

06　CSSファイルを作成する

  • 1　外部CSSファイルを作成する

07　HTMLファイルとCSSファイルをリンクする

  • 1　style.cssへのリンクを設定する

chapter08　CSSでページのスタイルを調整

01　背景色

  • 1　ページ全体の背景色を変更する

02　テキスト色、フォントサイズ

  • 1　見出しのテキスト色を指定する
  • 2　フォントのサイズを指定する

03　マージン、パディング、ボーダー

  • 1　下線を引く
  • 2　上下に余白を作る

04　行送りの調整

  • 1　ニュース記事の行送りを指定する

05　テキストのリンク色

  • 1　ニュース記事に含まれるリンクのスタイルを調整する

06　ブロックレベル要素の行揃え

  • 1　ロゴ画像をウィンドウの中央に配置する
  • 2　リンク付きイメージのボーダーを消す

07　ブロック表示／インライン表示の変更

  • 1　ナビゲーションメニューのリスト項目を横並びにする

08　背景に画像を指定

  • 1　ナビゲーション全体のスタイルを作成する

09　カスケード順序

  • 1　ナビゲーションメニューのリンク色を変更する

10　背景画像の繰り返し

  • 1　フッターに背景画像を適用する

11　ページ全体の中央配置

  • 1　ページ全体を中央に配置する

12　ページに固有のスタイルを適用

  • 1　キービジュアルの上にマージンを作り、ニュース記事同士のマージンをなくす

chapter09　フロートとテーブルのスタイル

01　フロート

  • 1　あいさつ文のスタイルを調整する（1）
  • 2　あいさつ文のスタイルを調整する（2）

02　テーブルの整形

  • 1　テーブルの外側にボーダーを引く
  • 2　セルにパディングを設定し、見出しセルには背景色を付ける

03　2コラムレイアウト

  • 1　2つのブロックを横に並ばせる

04　ショートハンドの値の省略

  • 1　menu.htmlのスタイルを調整する

05　＜練習＞access.htmlのスタイルを作成しよう

  • 1　地図の画像を中央揃えで配置する

chapter10　フォームの作成

01　フォームの基礎知識

  • 1　フォームの機能
  • 2　HTMLにできること、できないこと
  • 3　フォーム関連のタグ

02　contact.htmlの概要

  • 1　contact.htmlの動作
  • 2　result.htmlをコピーする

03　フォーム領域

  • 1　contact.htmlにフォーム領域を作成する

04　プルダウンメニュー

  • 1　お問い合わせ種別を選択するプルダウンメニューを作成する

05　ラジオボタンとチェックボックス

  • 1　初めての問い合わせかどうかを尋ねるラジオボタンを作成する
  • 2　どこでこのカフェを知ったかを答えてもらうチェックボックスを作成する

06　テキストフィールド

  • 1　お問い合わせ件名を入力するためのテキストフィールドを作成する

07　テキストエリア

  • 1　お問い合わせ内容を入力するためのテキストエリアを作成する

08　送信ボタン

  • 1　送信ボタンを作成する

09　ラベル

  • 1　プルダウンメニューにラベルを付加する
  • 2　ラジオボタン、チェックボックスにラベルを付加する

10　フォームのスタイルと属性セレクタ

  • 1　フォーム、コントロールのスタイルを調整する

chapter11　Webサイトの公開

01　Webサイト公開までの手順

  • 1　Webサーバーの契約
  • 2　FTPクライアント

02　FTPクライアントの設定

  • 1　FileZillaにWebサーバーの接続情報を登録する

03　Webサーバーに接続

  • 1　登録したWebサーバーに接続する

04　ファイルのアップロード

  • 1　「cafe」フォルダのすべてのファイルをアップロードする

05　Webサイトの最終確認

  • 1　ブラウザでWebサイトにアクセスする

著書一覧