学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / ウェブ制作チュートリアル

★ウェブ制作チュートリアル

| ​チュートリアルの概要

このチュートリアルでは、架空の企業サイトを制作しながら、HTMLとCSSの使い方を学習していきます。 手順通りに制作を進めていただければ、以下のサンプルサイトと同じものが完成します。
サンプルサイト:ウェブサンプル株式会社
全30章なので1日1章すすめれば約一か月でHTMLとCSSがそこそこ身に付きます。​

| ​チュートリアルの目次

第1章 ウェブサイトの制作を始める前に

  • どんなウェブサイトを作るのか
  • ウェブサイトの目的
  • 制作環境の用意
  • ウェブサイトの保存場所を作る

第2章 HTMLファイルを作成する

  • ​HTMLファイルを作成する
  • ブラウザでの表示確認
  ▶︎この段階のサンプルサイト

第3章 HTMLで情報の意味付けをする

  • ウェブページのタイトルを付ける
  • 見出しを付ける
  • テキストを記述する(段落・改行・区切り)
  • コピーライト表記を記載する​
  ▶︎この段階のサンプルサイト

第4章 CSSで文字スタイルを指定する

  • CSSファイルを作成する
  • 文字サイズの指定
  • ソース中の改行、半角スペース、タブ
  • フォントの指定
  • 行の高さの指定
  • 文字色の指定
  • CSSソース中にコメントを入れる
  ▶︎この段階のサンプルサイト

第5章 リスト要素でメニューを作る

  • ​リスト要素
  • HTMLソース中にコメントを入れる
  • リストマーカーを消す
  • リスト項目を横に並べる
  • idセレクタによるスタイル指定
  ▶︎この段階のサンプルサイト

第6章 メインメニューのリンクを指定する

  • 仮のリンク先ページを作る
  • ハイパーリンクを指定する​
  ▶︎この段階のサンプルサイト

第7章 メインメニューのスタイリング

  • メニューのサイズを指定する
  • リンクの背景色と文字色を指定する
  • 余白、センタリング、下線消し
  • マウスが乗ったら色を変える
  • リンク部分に背景画像を指定する
  ▶︎この段階のサンプルサイト

第8章 背景色を指定する

  • ウェブページ全体の背景色の指定
  • 背景色を指定する範囲をdiv要素で囲む
  • メインコンテンツ部分の背景を白くする
  • ボックス幅の指定とボックスのセンタリング
  • ブラウザの初期スタイルのリセット
  • 余白を指定して表示位置を調整
  • ボックスサイズの算出
  ▶︎この段階のサンプルサイト

第9章 背景画像を指定する

  • ​背景に使用する画像の用意
  • ウェブページ全体の背景画像の指定
  • 特定ボックスへの背景画像の指定
  • ブロックボックスとインラインボックス
  ▶︎この段階のサンプルサイト

第10章 画像の表示

  • ロゴ画像を表示する
  • ヘッダ部分のスタイリング
  • 一枚画像でユーザーの想像力を喚起する
  • 画像の表示位置の調整
  • 「新着情報」の画像を表示する​
  ▶︎この段階のサンプルサイト

第11章 フロート配置

  • ​画像のフロート配置
  • フロート配置のクリア
  ▶︎この段階のサンプルサイト

第12章 ページ内リンク

  • リンク先の指定
  • リンクの移動先にid名を付ける​
  ▶︎この段階のサンプルサイト

第13章 段組みレイアウト

  • ​div要素で左右カラムをまとめる
  • floatプロパティでカラムを横に並べる
  • フロートのクリア
  ▶︎この段階のサンプルサイト

第14章 サブメニューのスタイリング

  • サブメニューのスタイリング
  • 最初の子要素にだけスタイル指定する
  • マウスカーソルを乗せたときに変化を与える​
  ▶︎この段階のサンプルサイト

第15章 見出しのスタイリング

  • ​h2要素のスタイリング
  • h3要素のスタイリング
  ▶︎この段階のサンプルサイト

第16章 内容挿入・余白調整

  • 内容挿入によるアイコン表示
  • インフォメーション部分の余白調整
  • p要素のスタイリング
  • hr要素のスタイリング
  • フッタ部分のスタイリング​
  ▶︎この段階のサンプルサイト

第17章 テーブル(表)を作成する

  • HTMLファイルを複製する
  • 複製ファイルの内容を書き換える
  • テーブル(表)の作成
  • 地図の表示
  ▶︎この段階のサンプルサイト

第18章 テーブルのスタイリング

  • table要素にクラス名を付ける
  • テーブル用のCSSファイルを作成する
  • テーブルのスタイリング
  • セル同士の隙間を無くす
  • 地図部分のスタイリング
  • 備考情報の部分のスタイリング
  • CSSにおけるスタイルの継承ルール
  ▶︎この段階のサンプルサイト

第19章 フォーム入力画面を作成する

  • HTMLファイルを複製する
  • フォーム入力ページの作成
  • テーブル向けスタイルシートを適用する
  • 入力欄の関連付け
  • 入力必須の指定とプレイスホルダーの表示
  • 「メールでのお問合せ」の部分などを作る​
  ▶︎この段階のサンプルサイト

第20章 フォームのスタイリング

  • フォーム用のCSSファイルを作成する
  • フォーム部品のスタイリング
  • ユーザーの操作に反応を返す
  • 送信ボタンを画像ボタンに変える
  • 画像ボタンのスタイリング
  • input要素のスタイルを属性値で指定し分ける
  ▶︎この段階のサンプルサイト

第21章 フォームサービスを利用する

  • インターネット上のフォームサービス
  • iframeを埋め込むHTMLファイルを作成する
  • iframeでフォームサービスを埋め込む
  • お問合せページのHTMLファイルを作成する
  • フォームサービスからHTMLコードを取得する​
  ▶︎この段階のサンプルサイト

第22章 動画を表示する

  • ​HTMLファイルを複製する
  • 動画を掲載する
  ▶︎この段階のサンプルサイト

第23章 スマートフォンへの対応

  • スマートフォンでPCサイトを表示する
  • meta要素でビューポートを指定する
  • ビューポートを適当に書き換えてみる
  • メディアクエリでスタイルシートを切り替える
  • ウィンドウ幅によるスタイル切り替えのテスト
  ▶︎この段階のサンプルサイト

第24章 スマホサイト向けスタイル

  • ​スマホ向けCSSファイル
  • スマートフォン向けテーブルのスタイリング
  • サブページもスマートフォン対応にする
  ▶︎この段階のサンプルサイト

第25章 メールリンク、TELリンク

  • メールリンクを指定する
  • TELリンクを指定する
  • スマホで自動的にTELリンクさせない​
  ▶︎この段階のサンプルサイト

第26章 印刷用のスタイル

  • ​印刷用のCSSファイルを新規作成する
  • メディアがprintの場合に印刷用CSSを適用する
  • 印刷用スタイルシート
  • スタイル指定の記述を短くしてスッキリさせる
  • サブページにも印刷スタイルを適用する
  ▶︎この段階のサンプルサイト

第27章 アクセスアップのための対策

  • meta要素で適切な文字コードを指定する
  • ウェブページのタイトルは重要
  • meta要素のdescriptionとkeywords
  • キーワードを重要な要素としてマークアップ
  • キーワードの自然な配置
  ▶︎この段階のサンプルサイト

第28章 ウェブサイトの公開

  • 独自ドメイン名の取得
  • ウェブサーバーの選定
  • FTPソフトの入手
  • FTPソフトの設定とサーバーへのFTP接続
  • ファイルのアップロード
  • 様々なブラウザで動作確認
  • バリデーションでHTMLとCSSをチェック
  • 検索エンジンへの登録
  • オリジナルアイコンfaviconを指定する
  ▶︎この段階のサンプルサイト

第29章 HTML・CSSソース全文

  • ​HTMLソース全文
  • CSSソース全文
  • 最後に、CSS無しで表示してみる
  ▶︎この段階のサンプルサイト

【番外編】 第30章 PHPでメール送信フォームを作る

  • フォーム入力ページを作成する
  • 送信されたデータを受け取る
  • 変数に代入する
  • 受け取ったデータを安全な文字列に変換する
  • 未入力チェック機能をつくる
  • 未入力チェック機能を洗練させる
  • [前のページへ戻る]ボタンをつくる
  • 入力チェック機能を完成させる
  • メール送信処理ページを作成する
  • メール送信フォームを完成させる
  • メール送信フォームのソース全文

| ​チュートリアルの概要

サンプルサイト:ウェブサンプル株式会社
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ