ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 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 - 1 -

ホームページ制作 基礎編 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-2 -

ホームページ制作 基礎編 プルダウンメニューの挿入 (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 ページ全体の構成を確認する... 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 WEB サイトのレイアウト 87-3 -

ホームページ制作 基礎編 WEB サーバーへのアップロード 121 FTP アップロード... 121 サーバーとは 121 FTP とは 121 Dreamweaver を使った FTP アップロード方法 122 データの PUT と GET 123 サイトの同期... 124 サーバーのファイルとローカルのファイルの同期 124-4 -

ホームページ制作 応用編 (HTML5&CSS3 スマホサイト制作 )

ホームページ制作 応用編 ホームページ制作 応用編 目次 テンプレートとライブラリの利用 スライドショーの挿入 JQUERY 3 90 テンプレートを利用する... 3 JAVASCRIPT と JQUERY...90 テンプレートとは 3 JavaScript と jquery について 90 テンプレートを作成する 4 スライドショーを挿入する JQUERY プラグイ テンプレートを使ってページを作成する 7 テンプレートを修正 更新する 8 ンの利用...91 ライブラリを利用する... 9 jquery プラグインの入手 91 ライブラリとは 9 jquery プラグインの挿入 92 ライブラリを作成する 10 スライドショーを仕上げる 93 ライブラリを修正 更新する 13 フォームを作成する PHP レスポンシブデザイン 96 14 PHP とは...96 複数デバイスへの対応... 14 PHP とは 96 各デバイスの特徴 14 フォームを作成する...97 サイト作成時の留意点 15 BOOTSTRAP... 17 フォーム用ファイルの入手 97 Bootstrap とは 17 コードの修正 99 Bootstrap によるレスポンシブ WEB デザインの仕組み 21 フォームを仕上げる 103 レスポンシブ WEB デザイン... 24 サイトチェック 109 作成するサイトの確認 24 リンクチェック... 109 基本レイアウトの作成 25 ナビゲーションバーの設置 28 あらゆるリンクをチェックする 109 メインコンテンツのスタイル作成 35 サイトレポート... 110 スマートフォン専用サイトの作成 44 Web サイトのアクセシビリティをチェックする 110 JQUERY MOBILE... 44 サイトのソースチェック... 111 jquery Mobile とは 44 jquery Mobile の基本構造 45 Web サイトのソースチェック 111 スマートフォン専用サイトを作成する... 49 ショッピングサイトについて 113 基本ページの作成 49 各種ショッピングサイトサービス... 113 トップページの作成 54 About ページの作成 59 ショッピングサイトで利用できる各種サービス 113 Reference ページの作成 62 集客効果の高いショッピングサイト... 116 Contact ページの作成 1 65 Contact ページの作成 2 71 集客効果の高いサイトを運営するための留意点 116 ページのブラッシュアップ 80-1-

ホームページ制作 応用編 SNS 連携 121 SNS と WEB サイトとの連携... 121 各種 SNS について 121 Web サイトとの連携方法 122-2-