ホームページ作成のツボとコツがゼッタイにわかる本

概 要

ホームページは、テンプレートを使えば簡単に作れる時代になりました。しかし、テンプレートに頼りすぎると、ありきたりなページしか作れませんし、本当に大切な知識も身につきません。本書は、はじめてホームページを作る人が自分の頭で考えてホームページを作れるように、体系的にわかりやすく解説した入門書です。架空の会社のホームページを作りながら、HTMLやCSSの基礎からモバイル対応、検索エンジン対策まで学べます。

著者 中田亨
価格 本体2400円(税別)
ISBN 978-4-7980-4777-5
発売日 2016/9/30
判型 B5変
ページ数 324
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

第1章 いまさら聞けないホームページの仕組み

1-1 ホームページの仕組み

ホームページが表示される仕組み

サーバーとは?

IPアドレスとドメイン

DNSサーバーとは?

IPアドレスやドメインはどうやって決めるの?

ホームページを構成するファイルとプログラム言語の役割

1-2 ホームページ作成に必要な環境を準備しよう

レンタルサーバーを申し込むのはいつ?

テキストエディタを用意しよう

ホームページの効率的な作成方法

画像編集ソフトを用意しよう

本書で使う画像データについて

第2章 ホームページの作成手順を知っておこう

2-1 ホームページの掲載内容を決める

ホームページの作成手順

ホームページで伝えたいことを整理しよう

ホームページの掲載内容の決め方

2-2 ページの構成を決める

ホームページの構成図とは?

ホームページの構成図を決めるコツ

2-3 ワイヤーフレームを作成する

ワイヤーフレームとは?

2-4 デザインを作成する

デザインの作業範囲

デザインに使うソフトは何がオススメ?

色を付けたい部分は必ずしも画像にしなくても良い

2-5 素材を用意する

画像をパーツに分けよう

2-6 HTMLでページの構造を作成する

ページをブロックに分ける

ブロックをHTMLの構文に置き換える

HTMLの構造化が大切な理由

2-7 CSSでページの装飾を作成する

HTMLに目印をつける

CSSで見栄えを定義する

2-8 動作と表示を確認する

確認ポイント3箇条

2-9 ウェブサーバーへアップロードする

FTPを使う

第3章 HTMLでホームページを作ってみよう

3-1 サンプルの紹介

完成版のダウンロード先

ページの構成と完成イメージ

段階的に作成していく

共通部分を見つける

3-2 共通部分

HTMLの基本テンプレート

HTMLの基本タグ

テンプレートを書いてみよう

HTMLにコメントを記述する

HTMLタグに名前をつける

共通部分の作成①(ヘッダーエリア)

共通部分の作成②(メニュー)

共通部分の作成③(フッターエリア)

HTMLの完成

3-3 トップページ

テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

HTMLの完成

3-4 事業内容ページ

テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

HTMLの完成

3-5 会社概要ページ

テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

HTMLの完成

3-6 プライバシーポリシーページ

テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

HTMLの完成

3-7 お問い合わせページ

テンプレートをコピーしよう

完成イメージを見ながらHTMLの骨格を考えよう

Googleフォームをページに埋め込もう

HTMLの完成

第4章 CSSでホームページを装飾しよう

4-1 スタイルシート(CSS)の基本ルール

CSSの基本原理を知っておこう

3通りの指定方法を使い分けよう

複合セレクタを使ってHTMLとCSSをシンプルにしよう

CSSの基本的な書式

4-2 HTMLとCSSを関連付けよう

ブラウザにCSSファイルの場所を伝えよう

ブラウザごとの見栄えの違いを吸収するリセットCSSを組み込もう

CSSの優先順位

CSSの重ね合わせ

4-3 共通部分

CSSの基本テンプレート

CSSの基本プロパティ

テンプレートを書いてみよう

HTMLにCSSをリンクさせよう

共通部分の作成①(共通セクション)

共通部分の作成②(レイアウトセクション)

共通部分の作成③(ヘッダーセクション)

共通部分の作成④(グローバルナビゲーション)

共通部分の作成⑤(コンテンツセクション)

共通部分の作成⑥(フッターセクション)

共通部分の作成⑦(フッターナビゲーション)

共通部分のCSSの完成

4-4 トップページ

HTMLに目印(セレクタ)をつける

スタイルを記述する

4-5 事業内容ページ

HTMLにCSSを関連付ける

スタイルを記述する

4-6 会社概要ページ

HTMLにCSSを関連付ける

HTMLに目印(セレクタ)をつける

スタイルを記述する

4-7 プライバシーポリシーページ

HTMLにCSSを関連付ける

HTMLに目印(セレクタ)をつける

スタイルを記述する

4-8 お問い合わせページ

HTMLにCSSを関連付ける

HTMLに目印(セレクタ)をつける

スタイルを記述する

第5章 レスポンシブウェブデザイン

5-1 レスポンシブの定義とは?

レスポンシブウェブデザインの意味

レスポンシブウェブデザインを支える代表的なCSS

5-2 モバイル対応を実現する3つの手法と選択の基準

モバイル対応を実現する3つの手法

3つの方法の使い分け

5-3 レスポンシブウェブデザインで気を付ける3つのポイント

リキッドレイアウトを効果的に活用する

画像とテキストを使い分ける

タップ領域のサイズ

5-4 全てのデバイスで同じように見えるための設定

ビューポート(viewport)を設定しよう

5-5 画面のサイズに応じてレイアウトを切り替える

メディアクエリを使ってみよう

メディアクエリ対応版のサンプル

第6章 最後の仕上げ「検索エンジン対策」

6-1 検索エンジン対策とは?

ホームページとインターネット検索の関係

これだけはやっておきたい3つの検索エンジン対策

6-2 検索結果に表示されるタイトルと説明文の設定

検索ロボットはここを見ている

タイトルと説明文を適切に設定しないとどうなるの?

タイトルと説明文を設定しよう

6-3 アクセス解析の設置

アクセス解析を行う目的とは?

Google アナリティクスを設置しよう

6-4 サーチコンソールへの登録

サーチコンソールとは?

サーチコンソールへの登録方法

Column

ホームページ作成の実務で気を付けるポイント①

ホームページで使う長さの単位は「px」

ホームページ作成の実務で気を付けるポイント②

フリー素材は利用規約を確認しよう

画像のファイル形式について

なぜ、ブロックをさらにブロックで囲むの?

メールフォームの入手と設置

変更に強いCSSの修正方法

ボックスモデルを理解しよう

ベンダープレフィックスとは?

CSSファイルの数を減らしたほうがよい理由

ホームページのアイコンを設置しよう

PR

秀和システム