はじめての無料でできるホームページ作成 最新HTML5+CSS入門

HTML5とCSSを使ったホームページの制作手順を、初心者にもわかりやすく解説した入門書です。インターネットが普及し、大量のデータを処理するためにCPUが高速化され、SNSやスマートフォンの誕生などインターネットの進化・多様化にあわせ、ホームページをよりシンプルに構築できるHTML5が誕生しました。本書は、HTML5とCSSを使って、無料でホームページを作成する方法をわかりやすく解説しています。ホームページの基本から、テキストの入力、写真や動画、音声の掲載、表組み、リンク、レイアウトの調整、ホームページの公開と無料サービスを利用した機能の追加など一通りの知識を丁寧に解説しています。練習用サンプルファイルのダウンロードサービス付き。

【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3875.html

CHAPTER 1 ホームページの基本
1 インターネットとホームページの概要
インターネットとは
ホームページとは
2 ホームページが表示されるしくみ
ホームページが表示される流れ
ホームページを公開するには
3 無料ホームページサービスとは
無料ホームページサービスを利用する
いろいろな無料ホームページサービス
4 ホームページ作成の流れを知っておこう
テーマを決めよう
掲載する項目を書き出そう
ホームページの構成を決定しよう
ホームページを具体的にイメージしよう
ホームページで使いたい素材を用意しよう
HTMLファイルをつくろう
スタイルシートでホームページのデザインを定義しよう
ホームページをWebサーバーにアップロードしよう
5 HTMLとスタイルシートの役割を理解しよう
HTMLとスタイルシートの役割
HTML5でできること
スタイルシートでできること
ホームページの構造を理解しよう
6 ホームページの基本的な構成を知っておこう
ホームページの基本的な構成
ホームページの基本的なレイアウト
7 ホームページ作成の準備をしよう
本書で作成するホームページ
専用のフォルダーを作成する
拡張子を表示させる
メモ帳のアイコンをタスクバーに登録する
FC2ホームページのアカウントを取得する

CHAPTER 2 ホームページの基本構造を定義しよう
8 HTML5を理解しよう
HTML5とは
タグとは
タグの属性を理解しよう
9 HTMLファイルを作成しよう
HTMLファイルを作成する
ファイルをHTMLファイルとして保存する
HTMLファイルをメモ帳で開く
HTMLファイルを上書き保存する
10 ホームページの基本構造を定義しよう
ホームページを表示する領域を定義する
ホームページのヘッダーの領域を定義する
サイドバーの領域を定義する
メインコンテンツの領域を定義する
フッターの領域を定義する
ホームページの状態を確認する

CHAPTER 3 ホームページにテキストを入力しよう
11 ホームページの見出しを設定する
ホームページのタイトルを設定する
サブタイトルを入力する
12 箇条書きリストを作成するには
テキストを箇条書きにする
階層のある箇条書きを設定する
番号付き箇条書きを設定する
下層の項目を番号付き箇条書きにする
13 セクションを設定する
セクションを示す要素
ブログセクションを作成する
14 ホームページに記事を書いてみよう
テキストに段落を設定する
テキストに複数の段落を設定する
任意の位置で改行する
単語やセンテンスにタグを付けよう
単語やセンテンスを強調する
15 HTMLファイルを複製する
index.htmlをコピーする

CHAPTER 4 ホームページに写真や動画、音声を掲載してみよう
16 ホームページに画像を表示させてみよう
ホームページに使用できる画像ファイルの形式
画像へのリンクを設定する
画像の代替テキストを埋め込む
代替テキストをWebブラウザーで確認する
17 ホームページに動画を表示させてみよう
ホームページに動画を表示させる
動画に再生コントロールを表示させる
再生が始まるまで表示される画像を指定する
18 ホームページに音声ファイルを挿入しよう
ホームページに音声ファイルを挿入する
音声ファイルをリピート再生させる

CHAPTER 5 表（テーブル）をつくろう
19 表（テーブル）の基本を覚えよう
表のしくみを理解する
表の領域を定義する
表の行とセルを設定する
表に罫線を表示する
テーブル関連要素の廃止された属性
20 セルを連結する
見出しセルを追加する
縦のセルを連結する
1行分の要素を追加する
横のセルを連結する

CHAPTER 6 リンクを設定しよう
21 リンクを理解しよう
リンクを設定できる対象
リンクの種類
22 ファイルにリンクを設定するには
gallery01.htmlへのリンクを設定する
リンク先のWebページを開く
他のサブページへのリンクを設定する
画像にリンクを設定する
23 外部のページにリンクするには
リンク先に外部のホームページを指定する
リンクを確認する
24 メール送信のリンクを設定するには
メール送信のリンクを設定する
動作を確認する
25 特定の部分へのリンクを作成する
ページ内の特定の部分へのリンクを設定する
動作を確認する
メニューを他のHTMLファイルにコピーする

CHAPTER 7 スタイルシートでレイアウトを整えよう
26 スタイルシートとは
3種類の記述方法
HTMLファイルとスタイルシートを関連付ける
スタイルを指定する方法
HTMLファイルにスタイルシートを宣言する
27 ボックスの基本を理解しよう
ボックスの構造を理解しよう
ボックスのサイズを指定しよう
ボックスに背景色を設定しよう
ボックスの色をカラーコードで指定する
ウィンドウのサイズに対する割合でボックスのサイズを指定する
内容に合ったサイズに自動調節する
28 ボックスのマージンを設定しよう
ボックスのマージンを個別に設定する
四方のマージンをまとめて設定する
上下と左右のマージンをまとめて指定する
marginプロパティでマージンを指定する
ウィンドウの左右中央にボックスを配置する
隣り合うボックスのマージンは重なる
29 ボックスのパディングを設定しよう
パディングを個別に設定する
パディングを個別に設定する
パディングをまとめて設定する
上下と左右のパディングをまとめて設定する
上・左右・下のパディングを設定する
paddingプロパティでマージンを指定する
30 ボックスのボーダーの設定を変更しよう
四方のボーダーをまとめて設定する
個別にボーダーを設定する
31 2段組みのレイアウトを設定しよう
段となるボックスを作成する
ボックスを2段組みに配置する
32 ホームページのレイアウトを整えよう
一般的なホームページのレイアウト
index.htmlのレイアウト
要素をまとめるボックスを中央に配置する
ヘッダー、サイドバー、メインコンテンツを配置する
フッターの配置と色とサイズを指定する
各要素のサイズと配置、色を指定する

CHAPTER 8 テキストのスタイルを設定しよう
33 テキストに色を設定しよう
段落の文字の色を変更する
タイトルの色を変更する
34 リンクの色を変更してみよう
未アクセスのリンクの色を指定する
アクセス済みのリンクの色を指定する
35 テキストのサイズを設定する
文字のサイズをポイントで指定する
文字のサイズをキーワードで指定する
36 フォントの種類を変更しよう
フォントの形式を指定する
特定のフォントに変更する
37 テキストの書式を変更してみよう
テキストを太字で表示しよう
フォントの太さを数値で指定する
テキストを斜体で表示する
テキストに下線を引く
テキストに取り消し線を引く
テキストに上線を表示する
テキストに影を付ける
テキストの影を黒くする
38 フォントのスタイルをまとめて指定する
fontプロパティでスタイルをまとめて設定する
フォントの太さとサイズと種類をまとめて変更する
39 テキストの配置を指定する
テキストを中央に配置する
ブログのタイトルを右揃えで表示する
40 テキストの体裁を整えてみよう
行間をポイントで指定する
フォントサイズを基準に行間を調節する
字間を調節する
段落の先頭にインデントを設定する
41 箇条書きの行頭記号を変更してみよう
行頭記号を■に変更する
行頭記号に数字を設定する
行頭記号に設定できる記号
行頭記号をローマ数字に設定する
行頭記号にアルファベットを指定する
行頭記号に指定できる数字と文字
42 行頭記号の位置を指定する
行頭記号をボックスの内側に配置する
行頭記号をボックスの外側に配置する
43 行頭記号の設定をまとめて指定する
行頭記号「■」をボックスの内側に配置する
行頭記号を大文字ローマ数字に変更しボックスの外側に配置する
44 箇条書きの行頭記号に画像を表示させる
行頭記号に画像を表示させる

CHAPTER 9 画像と表のスタイルを設定しよう
45 画像や動画のサイズを設定する
画像のサイズを変更する
画像のサイズを指定する
46 画像の配置を設定する
写真を相対配置で移動する
相対配置とは
絶対配置とは
写真の重なり順を変更する
47 テキストの回り込みを設定する
表を画像の右に回り込ませる
テキストを画像の左側に回り込ませる
48 背景に画像を表示する
ホームページの背景にイラストを表示する
article要素の背景にイラストを表示する
49 背景画像の表示方法を指定する
背景画像の繰り返し表示を解除する
背景画像を横方向に敷き詰める
背景画像を縦方向に敷き詰める
背景画像を敷き詰める
背景画像を固定する
50 表の表示方法を指定する
テーブルのサイズを固定してセルのサイズを調節する
テーブルのサイズを自動調整する
51 表の罫線の表示形式を設定する
罫線を1本のラインで表示する
罫線を幅のあるラインで表示する
52 表の罫線の幅を設定する
罫線の幅をまとめて設定する
縦と横の罫線の幅を個別に変更する
53 セルのスタイルを設定する
セル内のテキストの配置を指定する
セルの背景色を設定する
セルの縦位置を指定する
セルの文字色を変更する

CHAPTER 10 ホームページを公開しよう
54 ホームページを公開するには
ホームページを公開するしくみ
アップロードする前に確認すること
フォルダー全体のサイズを確認する
55 ファイルマネージャーでアップロードする
ディレクトリを作成する
HTMLファイルをアップロードする
画像ファイルをアップロードする
56 アップロードを確認する
ファイルマネージャーでプレビューを確認する
リンクの動作を確認する
57 ファイルエディタでHTMLを修正する
間違った表示を見つける
HTMLを修正する
不要なファイルを削除する
ファイル名を変更する
58 FFFTPをインストールする
FFFTPをダウンロードする
FFFTPをインストールする
FC2のWebサーバーの情報を確認する
59 FTTPでアップロードする
FTPパスワードを設定する
Webサーバーの設定を行う
Webサーバーにファイルをアップロードする

CHAPTER 11 無料サービスを使って機能を追加しよう
60 ホームページに掲示板を設置しよう
FC2掲示板に利用登録する
FC2掲示板の機能を設定する
ホームページに掲示板へのリンクを設定する
61 問い合わせフォームを設置しよう
メールフォームを作成する
ホームページにメールフォームを設置する
62 プロフィールにプロフを利用しよう
プロフを作成する
プロフへのリンクを設定する
63 ホームページにチャット機能を追加しよう
FC2チャットを利用するための準備をする
FC2チャットをホームページに設置する

資料0
1 HTML5要素一覧
2 カラーコード＆カラーネーム