世界でいちばん簡単なHTML5&CSSのe本 [最新版] HTMLとCSSの基本がわかる本

概 要

イラストとコラムを交えつつ丁寧な解説で、ホームページの作り方が楽しく学べる世界でいちばん簡単なHTML5とCSSの教科書です。ホームページやブログの作成には、HTMLでページの見出しや画像の埋め込み、段落の指定などを設定し、CSSで文字の大きさや色、配置などのデザインを決めなければなりません。本書は、HTMLやCSSの知識がなくても、実際にWebページを作りながらHTMLとCSSの使い方を学べる入門書です。HTMLでページの骨格を決め、CSSで見栄えの設定をしていくので、それぞれの役割がわかりやすくなっています。また、HTML5やCSS3で新たに採用された要素もわかりやすく体系的に解説しています。サンプルファイルのダウンロードサービス付き。

著者 金城俊哉
価格 本体1400円(税別)
ISBN 978-4-7980-3884-1
発売日 2013/8/27
判型 A5
色数 4色
ページ数 276
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Chapter 1 HTMLって何だろう

Section 01 そもそもHTMLって何?

HTMLの「H」と「T」と「M」と「L」

Section 02 HTMLのタグを書き込んでみよう

タグでマークアップしてみよう

ドキュメントの枠組みを作ればWebページの完成

Section 03 CSSでページの見栄えを設定しよう

CSSで文字のサイズと色を指定する

HTMLドキュメントでCSSファイルを読み込む

Section 04 HTMLのタグの役割

HTMLのタグを付ける意味

HTMLドキュメントとCSSファイルを別々にするメリット

Section 05 HTMLの書き方のキモ

HTMLタグの構造

改行や半角スペース、タブの扱い

コメントを入れる

Section 06 HTMLとCSSのバージョン

HTML4.01とXHTML1.0

現在の主流はCSS2.1+CSS3の一部

Chapter 2 HTML事始め…HTMLドキュメントの作成

Section 01 HTMLドキュメントの骨格を記述しよう

HTMLドキュメントを作成する

HTMLのバージョンを記述する

HTMLドキュメントの構造を定義する

Section 02 HTMLドキュメントの情報を入力しよう

meta要素の記述

ページに関する情報の記述

ページのタイトルの入力

Section 03 HTMLドキュメントを保存しよう

HTMLファイルとして保存する

Section 04 テキストを入力しよう

どんなテキストを入力するの?

実際に入力してみよう

ブラウザーで表示してみよう

Chapter 3 Webページ全体の枠組みを作る…構造化

Section 01 Webページの構造を決めよう

Webページの構造を示す要素

Section 02 見出しを設定しよう

ブロックレベル要素

見出しを設定する

Section 03 段落を設定しよう

段落を設定するp要素

p要素の効果

Section 04 箇条書きを設定しよう

リスト関連の要素を適用した箇条書きの設定

Section 05 HTMLをグループ化しよう

HTML要素をブロックとしてまとめるdiv要素

Chapter 4 ページ全体のスタイルを設定する

Section 01 まずはCSSの書き方をマスターしよう

CSSを記述する

Section 02 セレクタを使ってCSSを適用しよう

Section 03 CSSファイルをHTMLドキュメントに組み込んでみよう

CSSファイルの作成と保存

CSSファイルを読み込むための記述

Section 04 ページの全体の余白を設定しよう~~

マージンとパディング

まずは「ボックス」について知ろう

マージンの設定

パディングの設定

ページのマージンとパディングの設定

Section 05 ページの全体の背景色を設定しよう

まずは色の設定方法から

背景色の設定

Section 06 表示サイズを設定しよう

Webページの横サイズを設定するCSSルールの作成

Chapter 5 各パーツのスタイルを設定する

Section 01 ヘッダーのサイズと背景色を設定しよう

ヘッダーのサイズと背景色を設定しよう

Section 02 ヘッダーの回りにボーダーを表示しよう

ボーダーのスタイルを設定するプロパティ

Section 03 ヘッダーの背景イメージを設定しよう

Section 04 ヘッダーのフォントと行揃えを設定しよう

フォントサイズの設定

テキストの表示位置の指定

Section 05 ナビゲーションメニューをページの左側に

配置しよう

ナビゲーションメニュー用のCSSルールの作成

ナビゲーションメニューのサイズと背景色の設定

ボーダーの設定

フォントの設定

フロートによる2段組レイアウト

Section 06 メインコンテンツをページの右側に配置しよう

メインコンテンツ用のCSSルールの作成

メインコンテンツの外観を設定する

フロートの設定

Section 07 フッターのサイズを設定してページ下部に配置しよう

フッター用のCSSルールの作成

フロートの回り込みを解除する

フッターのスタイルの設定

Section 08 見出し1(h1要素)のスタイルを設定しよう

テキストを途中で改行する

見出しのテキストの一部にスタイルを適用できるようにする

h1要素とインライン要素commentに適用するスタイルの設定

Section 09 その他の見出しのスタイルを設定しよう

見出し2(h2要素)~見出し3(h3要素)と本文に適用するスタイルの設定

Section 10 本文のスタイルを設定しよう

p要素にid名を設定する

本文に適用するCSSルールの作成

本文に適用するスタイルの設定

Chapter 6 イメージの配置とナビゲーションメニューの作成

Section 01 イメージを配置してみよう

イメージを配置する

Section 02 イメージを右にフロートさせよう

Section 03 ナビゲーションメニューにリンクを埋め込もう

リンクの設定

Section 04 箇条書きの書式を解除する

箇条書きのスタイル設定

Section 05 リンクボタンを作成しよう

リンクボタンの作成

リンクボタンのスタイル設定

Section 06 ボタンがポイントされると色が切り替わるようにする

擬似クラス

Section 07 メール送信用のリンクを作成しよう

a要素のhref属性に「mailto:」を設定する

Section 08 ページ全体をセンタリングさせる

「margin:auto」を設定してページ全体をセンタリングする

Chapter 7 HTML5対応ページの作成(1)(HTML編)

Section 01 ページの基本構造の設定とテキストの入力

ドキュメントタイプ、html要素、head要素、body要素の記述

イメージの表示サイズの指定

body要素の入力とマークアップ

Section 02 ブロック要素の設定

ブロック要素の設定

Section 03 HTML5のタグでページ内を構造化する

セクションを示す要素

セクションを示す要素

セクションを設定する

Chapter 8 HTML5対応ページの作成(2)(CSS編)

Section 01 基本要素のスタイルを設定する

Webページの基本要素のスタイル設定

Section 02 ページ全体をセンタリングさせる

Webページのコンテンツ全体の表示幅と表示位置の設定

Section 03 ヘッダーのスタイル設定

ヘッダーコンテンツに適用するCSSルールの作成

Section 04 ナビゲーションバーのスタイル設定

ul要素に適用する基本スタイル

オーバーフローの設定

ナビゲーションの項目をブロック状にして並べて表示する

a要素のスタイルを設定してナビゲーションバーを完成させる

Section 05 メインコンテンツとサイドバーを2段組で表示する

メインコンテンツとサイドバーのスタイル設定

Section 06 サイドバーの要素をブロック状に表示する

Section 要素をブロック型にして縦に並べる

ボックス要素の角を丸くして影を付ける

ボックスに影を付ける

サイドバーのイメージと見出しのスタイル設定

Section 07 フッターのコンテンツを3段組で表示する

フッターのスタイル設定

Chapter 9 テーブルの作成

Section 01 シンプルなテーブルを作ってみよう

テーブルの構造

Section 02 セルを連結してみよう

セルを連結する

Section 03 ボーダーのスタイルを設定する

テーブルのスタイル設定

Section 04 キャプションを付けてセルをグループ化する

テーブルを構造化する

Chapter 10 HTMLの要素とCSS

Section 01 テキストに関連するブロックレベル要素

テキスト関連のブロックレベル要素の使い方

HTML5で導入されたテキスト関連のブロックレベル要素

Section 02 テキストに関連するインライン要素

テキスト関連のインライン要素の使い方

Section 03 フォント関連のCSS

Section 04 テキスト関連のCSS

Section 05 背景の設定

背景色の設定~background-colorプロパティ

背景イメージを表示する~background-imageプロパティ

背景イメージの繰り返しを指定する~background-repeatプロパティ

背景イメージを固定する~background-attachmentプロパティ

背景イメージの表示位置を指定する~background-positionプロパティ

背景イメージのサイズを指定する~background-sizeプロパティ

Section 06 相対配置と絶対配置

ボックスレベル要素の配置方法を指定する~positionプロパティ

相対配置で表示位置を指定する

絶対配置で表示位置を指定する

Section 07 インライン要素に画像と背景色を表示する

用語索引

コラム

大文字を使う? それとも小文字?

インターネットはどうなっている?

Webサーバー

Mac版「テキストエディット」の設定

address要素の使い方

コメントを入れる

Webページを公開する

クラスセレクタとidセレクタを使い分けよう

テキストエディター

イメージファイルの指定

ナビゲーションメニューの作成

HTML5の新要素を旧バージョンのIEに認識させる

古いブラウザーにCSS3の仕様を適用させる

テキストの拡大表示に対処する

ハードディスクに保存したWebページの画像が表示されない!

FTPクライアント

キャプションをテーブルの下部に表示する

絶対配置を利用した段組みレイアウト

デフォルトスタイルシート

ruby未対応のブラウザーへの対応

上下のマージンが隣接している場合はどうなる?

パーセンテージで高さを指定する場合

background-sizeを古いFirefoxやSafariに対応させる

PR

秀和システム