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

概 要

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

著者 Studio ノマド
価格 本体1580円(税別)
ISBN 978-4-7980-3875-9
発売日 2013/7/30
判型 B5変
色数 4色
ページ数 240
CD/DVD
対象読者 入門
シリーズ はじめての...
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

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 カラーコード&カラーネーム

PR

秀和システム