ホームページ制作【基礎編】（HTML5・CSS3 コーディング）

ホームページ制作 【基礎編】

- 1 -

ホームページ制作 【基礎編】 目次

はじめに 5

はじめに ...................................................... 5

本教材について ······················································ 5

WEBサイト制作の概要 ................................. 5

Web サイト制作の流れ ············································· 5 サイト制作に必要なプログラミング言語 ···························· 6

HTML 7

HTML について ........................................... 7

HTML について ····················································· 7 HTML の記述方法 ················································ 7 HTML の解説 ······················································ 8

CSS 9

CSS について............................................... 9

CSS とは ····························································· 9 CSS の適用方法 ··················································· 9 セレクタの種類 ······················································ 11 CSS の記述方法 ·················································· 12

DREAMWEAVER について 14

DREAMWEAVERについて ............................ 14

Dreamweaver とは ··············································· 14 Dreamweaver の起動 ··········································· 14 新規 HTML ファイルを作る ······································· 15 新規 CSS ファイルを作る ·········································· 16

DREAMWEAVERのインターフェイス（操作画面）

............................................................... 18 画面各部の名称 ··················································· 18 ドキュメントウィンドウの操作 ········································ 19 パネルグループの操作 ·············································· 20 ワークスペースの操作 ··············································· 22

サイトの管理 ............................................. 23

Web サイトのフォルダー（ディレクトリ）構造を考える ·········· 23 サイトの管理でサイトを設定する ·································· 24 サイト管理のメリット ················································· 25

HTML タグと CSS（基本） 26

学習の準備 ............................................... 26

学習の準備 ························································ 26 CSS ファイルを作る ················································ 26

文章を入力する（Pタグ・BRタグ） ............... 27

p（段落）・br（改行）········································· 27

CSSでの装飾（FONT-FAMILY・FONT-SIZE・

LINE-HEIGHT） ........................................ 27

CSS デザイナーパネルの使用方法 ······························ 27 CSS ファイルへの直接入力 ······································· 29 セレクタの確認 ····················································· 30 font-size（フォントサイズ） ······································ 30 line-height（行間） ············································ 31 font-family（フォントの種類） ································· 31 CSS の編集について ·············································· 32

語句の強調（STRONGタグ・EMタグ） ......... 33

strong（重要性を表す）・em（アクセントをつける） ······· 33

CSSでの装飾（COLOR・FONT-WEIGHT・

TEXT-DECOLATION） ................................. 34

color（文字色） ················································· 34 font-weight（フォントの太さ） ································· 35 text-decolation（文字装飾） ································ 35

見出し（タイトル）を付ける（Hタグ） .......... 36

h1～h6（見出し） ··············································· 36

CSS での装飾（BORDER・MARGIN・PADDING）

................................................................ 37 border（ボーダー） ·············································· 37 padding（内部余白）·········································· 38 margin（外部余白） ··········································· 39

リンクをはる（Aタグ） ................................. 40

a（リンク） ························································· 40 相対パスと絶対パス ··············································· 42

CSSでの装飾（TEXT-ALIGN・

ホームページ制作 【基礎編】

- 2 -

BACKGROUND・BORDER-RADIUS） ............ 43

疑似クラス ··························································· 43 text-align（横方向の文字揃え） ····························· 43 background（背景） ··········································· 44 border-radius（角の丸め） ···································· 45

リストを作る（UL/OL/LIタグ） ..................... 46

ul/ol/li（リスト） ··················································· 46

CSSでの装飾（LIST-STYLE） ................... 47

リストマーカーの位置：list-style-position····················· 47 リストマーカーの形：list-style-type····························· 47 画像のリストマーカー：list-style-image ······················· 47 一括指定：list-style ············································ 47

定義リストを作る（DL,DT,DDタグ） ............. 48

dl/dt/dd（定義リスト） ··········································· 48

CSSでの装飾（WIDTH・HEIGHT・

OVERFLOW） ........................................... 49

width（要素の幅）・height（要素の高さ） ················ 49 overflow（はみ出る内容の表示方法） ······················· 49

CSS の応用（BACKGROUND・TEXT-SHADOW）

............................................................... 50 background（背景） ··········································· 50 text-shadow（文字の影） ····································· 51 共通のマージン設定 ················································ 51

HTML タグと CSS（画像とメディア） 52

画像を挿入する（IMGタグ） ...................... 52

img（画像） ······················································ 52

CSSでの装飾（BOX-SHADOW） ................ 53

要素を中央に揃える方法（margin の応用） ················ 53 box-shadow（ボックスの影） ··································· 53

メディアを挿入する（AUDIOタグ・VIDEOタグ・

SOURCEタグ） .......................................... 54

video（映像）・source（メディアのファイルを指定）········ 54 audio（音声） ··················································· 55

HTML タグと CSS（テーブル） 57

テーブルを作る（TABLEタグ） ..................... 57

table/tbody（テーブル） ········································ 57 caption（キャプション） ·········································· 57 tr/th/td（行とセル） ············································· 58

セルの選択と文字の入力 ............................. 59

デザインビューでのセルの選択 ····································· 59

テーブルの編集 ........................................... 60

行・列の追加と削除 ··············································· 60 セルのマージ ························································ 61

CSSでの装飾（BORDER-COLLAPSE・

VERTICAL-ALIGN） ................................... 62

border-collapse（セルのボーダー表示方法） ··············· 62 vertical-align（縦方向の文字揃え） ······················· 62

HTML タグと CSS（フォーム） 63

フォームを作る（FORMタグ） ....................... 63

フォームについて ···················································· 63 form（フォーム） ················································· 64

テキストフィールドの挿入（INPUT） .............. 65

input（テキストフィールド） ····································· 65 テキストフィールド：<input type="text"> ···················· 65

チェックボックスとラジオボタンの挿入

（CHECKBOX・RADIO） ............................. 67

checkbox（チェックボックス） ···································· 67 label タグ ··························································· 68 radio（ラジオボタン） ············································ 68

ホームページ制作 【基礎編】

- 3 -

プルダウンメニューの挿入（SELECT・OPTION）

............................................................... 69 select/option（プルダウンメニュー） ···························· 69

テキストエリアの挿入（TEXTAREA） ............ 70

textarea（テキストエリア） ······································ 70

ボタンの挿入（BUTTON） .......................... 71

button（ボタン） ·················································· 71

CSSでの装飾（実習） ............................. 72

実習の解答 ························································· 72

HTML タグと CSS（その他） 76

コメントの入力 ........................................... 76

HTML のコメント入力 ············································ 76 CSS のコメント入力 ················································ 76

インデント .................................................. 77

インデントについて ··················································· 77

その他のタグ（META・SCRIPT） .................. 78

DOCTYPE宣言文 ··············································· 78 head（ヘッダー情報） ············································ 78 meta（メタデータ） ··············································· 79 title（タイトル） ··················································· 79 link（外部ソース） ··············································· 80 script（スクリプト） ··············································· 80

HTML タグの分類 81

ブロックレベル要素とインライン要素 ............... 81

ブロックレベル要素とインライン要素 ······························· 81 div（ブロックレベル要素） ········································ 82 span（インライン要素） ·········································· 82 ボックスモデル ························································ 82

HTML5 におけるタグの分類（コンテンツモデル）

............................................................... 84 HTML5 におけるタグの分類 ····································· 84 article（記事）と section（セクション） ······················ 85

WEB サイトのレイアウト 87

ページ全体の構成を確認する ....................... 87

ページを構成する要素 ············································ 87

大枠をレイアウトする ................................... 88

事前準備 ··························································· 88 共通プロパティの設定 ············································· 88 display（要素の表示形式） ·································· 90 レイアウト要素を配置する（HTML） ························· 91 レイアウト要素を配置する（CSS） ····························· 94 要素を横並びにする（float）··································· 96 要素を横並びを解除する（clear） ···························· 97

ヘッダーの作成 ........................................... 98

ヘッダーの全体像を確認する ····································· 98 address（問い合わせ先） ····································· 98 ヘッダーの要素を配置する（HTML） ························· 98 ヘッダーを仕上げる（CSS） ····································· 99 position（ボックスの配置方法） ······························· 99 font-style（イタリック・斜体） ································· 100 電話番号とフォームへのリンクを横並びにする（display:inline-block） ····································· 101

グローバルナビゲーションの作成 ................... 103

グローバルナビゲーションの全体像と要素の配置 ·············· 103 Emmet を使ったタグの挿入····································· 103 グローバルナビゲーションを仕上げる（CSS） ················· 105 vertical-align（縦方向の位置揃え） ······················ 105 display（要素をテーブルに変換する） ······················· 105

サイドメニューとフッターの作成 .................... 107

サイドメニューの全体像と要素の配置 ·························· 107 サイドメニューを仕上げる（CSS） ····························· 109 background:linear-gradient（背景のグラデーション） ·· 109 CSS デザイナーパネルを使ったグラデーションの設定 ·········· 110 ナビゲーション部分の装飾 ········································ 111 問い合わせ枠の装飾 ············································· 113 フッターを仕上げる ················································ 115

サイトを仕上げる ....................................... 116

作業の流れと事前準備 ·········································· 116 各ページを仕上げる ·············································· 119

ホームページ制作 【基礎編】

- 4 -

WEB サーバーへのアップロード 121

FTP アップロード ..................................... 121

サーバーとは ······················································· 121 FTP とは ·························································· 121 Dreamweaver を使った FTP アップロード方法 ············· 122 データの PUT と GET ··········································· 123

サイトの同期 ........................................... 124

サーバーのファイルとローカルのファイルの同期 ·················· 124