バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

ホームページ制作基礎講座

コースの概要

HTML5とCSS3

HTML5とCSS3を使ったホームページの作り方を3時間×4回のレッスンで学ぶ講座です。
ホームページ制作会社を有するバンフーグループの研修部署が実際の社員研修のカリキュラムをベースに作り上げた講座で、未経験の方でもしっかり基礎が身に付きます。

ホームページ作成に特別なソフトはいりません

ホームページ制作には、専用のアプリケーションも存在しますが、基本的にはWindowsやMacintoshを持っていれば各OSに標準搭載されているソフトだけで作成できます。

ホームページ作成ソフトを使う予定の方も、HTMLとCSSの基本文法を知っておかないと正しくアプリケーションソフトを扱えません。

この講座は以下のような方におすすめです

  • 小・中規模のホームページを作りたい
  • 既存のホームページの更新・管理を行いたい
  • 制作会社にサイト制作を発注するためにベーシックな知識を身につけたい
  • ホームページ制作ソフトを使うための基礎知識を固めたい

レッスンの内容

ホームページ制作基礎講座の4回のレッスンでは、それぞれ以下のような内容が学べます。

〇ホームページ制作基礎入門

初回に受講していただく「入門」のレッスンでは、ホームページを初めて制作される方向けに、ホームページを作る流れからご紹介していきます。
このレッスンを通して、まずはHTMLとは?CSSとは?をしっかり理解できるようになります。

▼内容を詳しく見る

ホームページが見える仕組み

ホームページを作る人は、インターネットの仕組みを理解する必要があります。

ここではまず、ホームページがどのような仕組みでユーザーの画面に表示されるのか?その上で自分は何を作ればいいのか?を理解していただきます。

HTMLとは?CSSとは?

ホームページを作成する時に必ず出てくる言葉「HTML」と「CSS」

ここでは、HTMLとは何か?CSSとは何かを学習します。HTMLという言葉がどういった言葉の略称なのか?といったテスト勉強的な理解ではなく、HTMLやCSSがホームページ作成の中でどういった役割を担っているのかといった本質的な意味を学習します。

基本文法の理解

HTMLの基本文法を学習します。

ホームページを作る際には必ず書かなければいけないソースコードがあります。そのソースコードの意味を1つ1つ丁寧に解説していきます。タイピングが苦手な方向けにコピーペーストで使える素材もご用意しておりますのでご安心ください。

画像の挿入

ホームページに画像を挿入する方法を学びます。

実はホームページの画像は表示されればOKというわけではありません。ホームページは様々な環境で見られています。

例えば視覚障がい者が使っているソフトで画像の内容を伝えるにはどうすればいいのか?

そういったすべてのユーザーに等しく情報を伝えていくための「アクセシビリティ」の考え方もここでご紹介していきます。

リンクの指定

他のページへ移動するリンクの設定を行います。

文字にリンクを設定する場合、画像にリンクを設定する場合、それぞれ設定を行います。

またリンクの指定を行う場合に知っておくべきパスの仕組みをわかりやすい図解でじっくりと説明いたします。

CSSの準備

ページに装飾を加えるためのCSSの仕組みを説明し、装飾の準備のためCSSファイルの作成を行います。

▽このレッスンで学べること

  • ホームページが見える仕組み
  • ホームページを作るための準備
  • HTMLとCSSの役割の理解
  • HTML5とは何か
  • HTMLの基本文法
  • 文書へのマークアップ
  • 画像の挿入とアクセシビリティ
  • リンクの指定
  • CSSファイルの準備

〇ホームページ制作基礎A

「A」のレッスンでは、CSSによるページ装飾の基礎をしっかり学びます。入門で作成したページを装飾を加えて魅力的な見やすいデザインにグレードアップしていきます。

▼内容を詳しく見る

文字への装飾

CSSの基本文法の練習と共に文字に対する装飾を行います。

文字の色、大きさ、フォントの変更、行間の調整、位置揃え、太さの変更などなどページ装飾をするうえでは欠かせない装飾を次々と練習します。

さらにOS間やブラウザソフト間での表示の違いなどの注意点もしっかり理解していきます。

クラスとID

ページのデザインが本格化してくると、クラスとIDを利用する必要が出てきます。

ここでは、クラス、IDとは何か、どのように使い分けるのかを理解していただいたうえで実際にページに組み込んでいきます。

DIVボックス

ここからいよいよページ全体のデザインを組み上げるレイアウト作業に入ります。

ページレイアウトの基礎中の基礎であるDIVボックスの扱いを勉強します。

なぜ必要なのか?どのようにして作成して制御するのか、HTMLとCSSを書きながらしっかり身につけていきます。

表の作成

ホームページに挿入する表のことを「テーブル」と呼びます。

HTMLとCSSでのテーブルの作り方は少し複雑です。

表の構造と照らし合わせながら、HTMLとCSSをひとつひとつ記述して自分の思い通りのテーブルが作成できるように練習を行います。

▽このレッスンで学べること

  • 文字の装飾(色・サイズ・フォント・行間など)
  • クラスとIDの違いと使いどころ
  • DIVボックスの作成と制御
  • 表(テーブル)の作成と装飾

〇ホームページ制作基礎B

「B」のレッスンでは「シングルカラム」と呼ばれるレイアウトを作成しながら、レイアウト作業を行う上でのルールと注意点を学びます。

▼内容を詳しく見る

レイアウトを組み上げる際の注意と準備

ここではレイアウトを組み上げていく上で知っておくべき知識を身につけます。

ブラウザのデフォルトスタイルのリセット方法、ボックスの幅と高さの基準とその変更方法などなど、ここでの知識が後々「崩れない堅牢なレイアウト」を組み上げるための大切な基本となりますのでしっかりと勉強していきましょう。

シングルカラムレイアウトの作成

最近ではスマートフォンやタブレット向けのデザインで多く採用されている「シングルカラム」と呼ばれるレイアウトを組み上げていきます。

レイアウトの骨格を作りながら、古いブラウザソフトへの対応方法も学習します。

余白の指定

見やすいレイアウト、美しいレイアウトを実現するには余白の適切な指定が必要不可欠です。

CSSで設定できる外余白、内余白の指定を理解し、ソースコードの記述に非常に便利なショートハンドで効率のいい記述方法も学びます。

ここでの余白の指定がレイアウトの美しさをぐっと引き立てます。

ナビゲーションの作成

ページ内でユーザーがページ間を移動するためのメニューのことを「ナビゲーション」と呼びます。

ここではマウスポインタを乗せた時に色が変化する使いやすいナビゲーションの作り方をご紹介します。

ページごとの装飾の変更

複数のページから成り立つWebサイトでは、各ページに共通する装飾部分もあれば、ページごとに装飾が変わる場所もあります。

この「ページごとに装飾を変える」にはどうすればいいのか?をご紹介します。

▽このレッスンで学べること

  • デフォルトスタイルのリセット
  • ボックスの幅と高さの基準とその変更
  • レイアウトの骨格の作り方
  • 古いブラウザへの対応方法
  • 内余白と外余白の指定方法
  • ショートハンドの記述方法
  • ナビゲーションの作成
  • ロールオーバーの指定
  • CSSシグネチャ

〇ホームページ制作基礎C

「C」のレッスンは、いよいよ本格的なレイアウト作成に入ります。複雑なレイアウトを組み上げていく大事なカギとなる「フロート」の仕組みを理解し「2カラムレイアウト」というレイアウトにチャレンジします。

▼内容を詳しく見る

フロート

複雑なレイアウトを可能にしてくれるフロート。

ここでは、画像の横に文字を回り込ませる作業を例にとりながらフロートを適用する練習を行います。

この技術を習得することで実現できるレイアウトの幅がぐっと広がっていきます。

2カラムレイアウト

前述のフロートで実現できるレイアウトの1つが「2カラムレイアウト」です。

2カラムレイアウトを組み上げていく際の注意点も含めて実際に作業をしながらお話をしていきます。

レイアウトが自分の手で組みあがっていく手ごたえを感じられるレッスンです。

スライドショーの実装

トップページで多く採用されている写真が一定時間で自動的に切り替わるスライドショー

そのスライドショーの実装方法からカスタマイズの方法までをご紹介します。ページに動きをつけていきましょう。

アップロード

作成したホームページを世の中に公開するにはアップロードという作業が必要になります。

ここではアップロードに必要なアプリケーションの設定から実際のアップロードの方法までをご紹介します。

▽このレッスンで学べること

  • フロート
  • 画像の横に文字を回り込ませる
  • 2カラムレイアウト
  • 横型ナビゲーションの作成
  • スライドショーの実装とカスタマイズ
  • アップロード

レッスン受講の流れ

この講座は、HTMLとCSSの文法を基礎から順序立てて習得していきます。そのため、以下の通り、「入門」→「A」→「B」→「C」の順での受講をおすすめいたします。

受講の流れ

お申込み

ホームページ制作基礎講座では、以下のいずれかのお申込みが可能です。

▽入門(最初の1回)のみ受講

入門のみを受講

4回のレッスンのうち、1回目のレッスンだけをご受講いただけます。
レッスンを気に入っていただき「残りも受けてみたい」と思っていただけた場合は、(全4回)へ差額でご変更いただくことが可能です。

講座名 ホームページ制作基礎入門
レッスン回数 1回
学習時間 3時間(3時間×1回)
対応OS Windows / Macintosh
価格(税別) 12,000円(税込:12,960円)

ホームページ制作基礎講座(入門のみ)に申し込む

▽ホームページ制作講座(全4回)を受講

全4回のレッスンを受講

「入門」「A」「B」「C」4つのレッスンを一通り受講していただける講座です。
4回のレッスン中、2レッスンは再受講で受けなおしていただくことが可能です。
→再受講について

講座名 ホームページ制作基礎講座
レッスン回数 4回
学習時間 12時間(3時間×4回)
対応OS Windows / Macintosh
価格(税別) 42,000円(税込:45,360円)

ホームページ制作基礎講座(全4回)に申し込む

その他ホームページ制作基礎が学べるコース

ホームページ制作基礎と他の講座を組み合わせた料金お得なパックやコースをご用意いたしました。

WEBパック

ホームページ制作の基礎と実践をセットにしたパックです。

ホームページ制作の基本中の基本であるHTML5とCSS3でのコーディングを身に着けた上でAdobe Dreamweaverというアプリケーションを使ったサイト制作を学びます。
ホームページを作りたい方、リニューアルしたい方、自社サイトの更新管理を担当される方に最適なパックです。

→このパックに含まれる講座

  • - ホームページ制作基礎講座
  • - ホームページ制作実践講座

このパックの詳細を見る

DTP&WEBマスターコース

バンフートレーニングスクールの常設講座がすべて学べるコースです。

印刷物からホームページの制作まで行えるオールラウンドクリエイターを目指す方向けのコースです。

→このコースに含まれる講座

  • - イラストレーター講座
  • - フォトショップ講座
  • - イラストレーター&フォトショップ実践講座
  • - インデザイン講座
  • - ホームページ制作基礎講座
  • - ホームページ制作実践講座

このコースの詳細を見る

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ