HTML5+CSS3 　手を動かしてマスターする　WEBデザイン／プログラミング動画講座

このレクチャーではプログラミングのソースコードを書くうえで必須となるエディタについて説明し、つぎに制作を効率的に行うための画面配置など制作環境について説明します。つかいやすい環境を整えることは上達の第１歩です。自分にあった制作意欲がわく環境を整えておきましょう。

ここからは実際のhtmlとCSSの文法のお話しです。このレクチャーではhtml言語の基本についてタグを例にとって説明します。タグはhtmlのソースコードを書くうえで最も基本的な事項です。

ここでは実際に簡単な文章を使って、この文章にタグを書き込んで見ます。タグがどんな成り立ちと役目を持っているかがよく理解できると思います。

つぎにタグを書き入れた文章をブラウザで表示してみて、タグがどのように働いたかを見てみます。この作業でタグの基本的な使い方が分かります。

このレクチャーではまたタグを書くときの規則についても説明しています。タグを書くときに守らなければいけないこと、見やすくするための書き方なども説明しています。

このレクチャーではCSSの記述方法についての解説を行います。文法的で少し硬い話ですが、ごく基本的なことなのでこの程度は覚えておくようにしましょう。

このレクチャーでは先のレクチャーで書いたCSS文書を例のhtmlファイルに適用させてデザインがどう変わるかを見てみます。

さらにCSSスタイルシートの内容を変更して、それがブラウザで再び開いたときにどう変化するかを見て、CSSファイルがhtmlファイルに与える効果を確認します。

CSSの効果が実際によくわかる例ですから是非やってみてください。

ここから実際のページづくりに入ります。このレクチャーではHTMLのソースコードを書くうえで最初に構造的に書くことが決められている事項について説明します。

同時にこれから練習用に制作するホームページのサイトを新しく準備します。

HTMLソースコードを書くうえで必須となるhead要素について説明します。この例ではtitle要素、meta要素、リンク要素をhead要素に書き込みます。

ここからは実際にホームページ上で見える部分の制作です。まずページの中で最も大きい部分であるbody要素についての説明です。

body要素のCSSの設定を少し変えて見て、ブラウザで確認することでbody要素が画面上でどのように見えるかを学びます。

最初に完成した見本とワイヤーフレームを見ながらindex.htmlの大まかな構造を検討します。最初に全体の構成をつかんでおくことで自分が今どの段階の作業をしているかが分かりやすくなります。

body要素のおおまかな設定を行います。body要素はあとで画像を入れて細かい設定を行いますが、このレクチャーでは次のcontainerを配置するために事前に簡単な設定を行っておきます。

初めて自分で設定するボックス、container要素をhtmlページ内に配置します。タグを書いてボックス要素をページ内に配置する方法を学びます。

次に配置したcontainer要素の大きさや位置などを細かく設定するためにCSSスタイルシートに設定を書き込みます。ここでスタイルシートの書き方を学びます。

container要素をページの中央にCSSで配置する方法を学びます。floatとmarginプロパティを設定してボックスをページ中央に配置するテクニックです。

要素に名前をつけて作る際につかうidとclassの違いについて学びます。どんなときにidを使い、どんなときはclassを使うかを説明しています。

このレクチャーではbody要素の上部に画像を使って罫線を引く方法を説明しています。

このレクチャーで実際にbody内に線を引くコードを書きます。CSSの設定で小さな画像を貼り付け、その画像を水平方向にリピートさせて横に１本の長い線を描きます。

ここではページで使うフォントの設定をCSSで行います。WEBページで使うフォントを指定し、見えにくいフォントは使わないように設定する方法を学びます。

ここではcontainer要素の中にheader, main, footerの３つのボックスを置きます。html5からはこの３つの要素はデフォルトで設定されるようになりました。これらをhtmlテキスト内に書き込み配置します。

header, main, footerをCSSスタイルシートで設定します。大きさ、位置、余白の設定などを行い内容をすぐに書き込めるように設定しておきます。

header部分の細かい仕上げをします。用意されたワイヤーフレームを見て内容を検討し、Logo_areaとNavi_areaの２つの大きなボックスを配置します。

Logo_areaに画像を挿入し、その位置をCSSで設定する方法を学びます。

配置された画像にhtml内でリンクを設定する方法を学びます。

Navi_areaに画像を配置して位置をCSSで設定し、さらにその画像にリンクを設定します。

Global_Navi部分の設定を始めます。ワーヤーフレームで構造を確認しておき、リスト項目のul要素とli要素を配置して、文字を入力します。

ul要素をCSSで設定して、文字の位置を調整する方法を学びます。

li要素のCSS設定を行ってそれぞれの文字が間隔を空けて配置されるよう細かく調整します。

文字にロールオーバーのリンクを設定します。CSSだけでロールオーバーを設定するのは少し技術的には高いハードルですが、この方法を学びます。

WEBの規格で使用されるパスの指定方法を学びます。相対指定と絶対指定の方法を学び、画像やページのurl指定の規則を理解します。

このレクチャーではmain要素内の最上部に画像を配置し、さらにその下にSide_navi, Main_box, Banner_boxの３つの要素を配置します。

Side_navi, Main_box, Banner_boxのCSSを設定し、この３つのボックスが横に一列に並ぶように配置させる方法を学びます。

３つのボックスがうまく横に一列に配置されない場合の原因と対処法を学びます。これは初心者の方によく起きるミスなので特に説明します。このときブロック要素とインライン要素という要素の違いについても学びます。

ここからSide_navi部分の設定に入ります。最初はulとliのリスト項目を配置します。

ulとli要素のCSSを設定します。大きさや位置を設定し、li要素には背景で画像を挿入します。

liのhtml要素に画像を配置し、マウスオフのときに見えるようにします。

リンク部分にマウスがオンのときに画像が切り替わるようにCSSで設定します。CSSを使ったロールオーバー設定が完成します。

リンクボタンのうち、トップページの画像のみが初期設定でマウスオンの画像になり、他のリンクボタンの画像がマウスオフになるようにhtmlで設定します。

トップ以外のリンクボタンがマウスオンで画像が変化するようにCSSを設定します。これですべてのボタンのロールオーバーが完成します。

main要素の最上部に置いた画像とheader部分の間に少し隙間があるのでこれを修正します。隙間の原因と対処方法を学ぶことでボックスの幅の計算方法を知ります。

このセクションで行う作業を、ワイヤーフレームとサンプルを見ながら構造を確認して検討します。

Main_box要素にあらかじめ入力されているテキストを流し込みます。

流し込んだテキストをマークアップします。このときIDとCLASSについて実際に使い分けて要素をつくります。

マークアップした部分の要素のCSSを設定します。特にこのレクチャーではタイトル部分の細かい設定を行います。

イメージを挿入し、イメージとテキストの間に間隔を空けてレイアウトする方法を学びます。

ここまででできたタイトル部分の要素やボックスの要素を使って新着情報のテキストをマークアップします。このレクチャーでは本文の部分をマークアップします。

ひきつづき新着情報部分のマークアップをします。ここでは小タイトルのMainBox_newsを主に設定します。

Banner_boxの制作をします。Banner_boxは写真のみの配置なので難しいところはありませんが、写真を同じ要素を使って間隔を空けて配置する方法を学びます。

トップページの最後のfooter要素を設定し、テキストを入力してこのページを完成させます。

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

トップページをベースにして新しく会社概要ページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

Subpage_TitleのCSS設定を行い、デザインを整えます。

同じようにしてCorporate_titleのCSS設定を行い、デザインを整えます。

table要素の概要を説明し、html内にtableで使用するテキストを挿入します。

挿入したテキストにtableのマークアップを行い、tableの行のデザインを整えます。

table要素のCSS設定を行います。このときhtml内にCSSプロパティの設定を書き込む方法も学びます。

このページはトップページとサイドナビの部分が共通ですが、マウスオンのときに動作するボタンがトップページと異なります。これを再設定します。

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

会社概要ページをベースにして新しくモデルハウスページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

さらにこのページで使うテキストを用意された素材からコピーし、挿入します。

テキストをマークアップし、MainBox_item要素のCSS設定をします。

Item_title要素を配置し、CSSを設定してタイトルを完成させます。

さらにタイトル下の、Item_box,とItem_text要素を配置し、CSSを設定してMainBox_subのボックスを完成させます。

サイドナビの部分を再設定しこのページを完成させます。

モデルハウスのページをベースにして新しくお問合せformページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

完成済みのサンプルページを見てform機能の概要を学びます。

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

htmlにformタグとpタグを書き込みます。p要素は最初の「お名前」の入力を求める行です。まずこの行をしっかり作ります。

p要素にCSS3でグラデーションを設定します。CSS3から登場したグラデーションの機能の学習です。

送信機能の重要な部分であるlabel要素とinput要素をhtmlページ上に配置し、その機能を説明します。

input要素のCSSを設定します。input要素には角丸のデザインを行います。これもCSS3でできるようになったデザインです。併せてベンダープレフィックスの記述方法についても学びます。

さらにinput要素にドロップシャドウを加えます。これもCSS3を使った設定です。

メールアドレスの入力を受け付ける機能をinput要素に加えます。あらかじめ見本の文字を入力しておくプレースホルダーの機能についても学びます。

郵便番号とご住所などの入力部品はテキストの入力と同じなので最初のお名前と同じ方法で設定します。

性別の入力を受け付けるラジオボタンを設定します。ラジオボタンは二者択一形式のボタンです。どちらかが選ばれるともう一方が解除される仕組みです。

チェックボックスはラジオボタンとちがって複数選択が可能なボックスを設置します。

送信機能の最後に送信ボタンとリセットボタンを設定します。リセットボタンではボタンをクリックするとそれまで入力した項目すべてが空白に戻る設定のボタンです。

最後にすべてのページのリンク先urlを設定して、リンクがうまく働くかを確認してサイトの完成です。