divパズル
ここでは、実際にテキストエディタを使ってコードを書いてもらいます。
この課題は「eclipse」 ではなく 「Sublime Text」で実施してください。
Step1: HTML・CSSの基本的な記述
今回はサンプルコードを用意しました。 それを見ながら学んで行きましょう!
ファイルは「3-1-3」 配下の 「div_puzzle」 の中になります。
下記のような、階層になっているかと思います。
●3-1-3 ←フォルダ名
○ div_puzzle←フォルダ名
■index.html ←ここにHTMLを書いていく
■CSS ←フォルダ名
■reset.css … 必ず読み込ませてください(説明は下記に)
■index.css … ここにスタイルの記述を書いていく
今回は【div_puzzle】 内にある、index.html index.css を使っていきます。
まず index.html を開いてみましょう。 下記のようになっているかと思います。
解説
まず、HTMLには文章構造というものがあります。
ウェブサイトは、一般的な構造として
- header
- main
- footer
で成り立っています。
header
主にウェブサイトではサイトのロゴが入っていたり、各ページへリンクするメニューが置かれてる部分です。
footer
主にウェブサイトでは各種のメニューや、コピーライトなどが書かれている場所です。
main
そして真ん中の水色と赤色の2つが並んでいる部分が 「main」です。
本来正式な名称は無いが、便宜上 「main」 としています。
商品を紹介する文章や画像が入っていたり、会社の情報が記載されていたりと、そのウェブサイト、ページにおけるメインのコンテンツとなる部分です。
こうした構成から、更に細かに区切って行くことでウェブサイトは成り立っています。
親と子の関係
今回は単純に「left」 と 「right」と名前をつけ、「main」の子要素とします。 親要素、 子要素とは以下のようなものです。
要素内に別の要素を入れ子にする状態を言います。
子要素は「インデント(字下げ) ・・・・」 をしておくと見返した際にわかりやすいですね。
wrapper
そしてこれらとは別に 「wrapper (ラッパー)」と呼ばれるものがありますが、その名の通り「wrapper」とは包むものを指します。
こうしておくことで、このページ全てを包む一番大きな要素が生まれたわけです。
このdivパズルであれば「出来上がったものを画面中央に表示させる」際に、このクラスにスタイルをあてることで、 他に影響なく実現できるのです。
このdivパズルではheader left right ・footerの4つのボックスが目に見える要素として出力されています。
ですが、実際には下記の図のようにleft ・rightを囲む親要素のmainがあり、全体の要素を囲むwrapper要素が存在しているのです。
慣れないうちはCSSをあてながらHTMLを書いていくというのも有りですが、HTMLの構造がなぜそうなるのかを意識して書いて行くと良いですね。
Step2: CSS
では、続いてCSSです。 テキストエディタで、 index.cssを開いて見ましょう。
すでに「header」 と 「footer」 には、スタイルを当てています。
補足
ちなみに「別々のセレクタに同じプロパティと値をあてる」 場合には以下のように書くことで簡略化することができます。
仕様の変更があった際にも一箇所を直せば、一括で複数箇所を同時に治せるというメンテナンス性の高さもあるので覚えておきましょう。
では次に「main」の中の 「right」 と 「left」にスタイルを当ててみましょう!
この状態で一度、 index.htmlを開いてみましょう!
このままだと 「main」 の要素が縦並びになって画像のようになりません。
このdivパズルではこの 「横並び」 が重要なポイントになっています。
HTMLの要素とは、上から順番に表示されるようになっているため、
CSSのプロパティを使って、 表示する位置を制御する必要があります。
今回の場合 float プロパティを利用して、left を指定
これでもう一度、 HTMLを更新してみましょう。
「main」の中身が横並びになりました。
ですが、今度は 「footer」 がどこかに消えてしまいました。
「float」プロパティは便利ですが、 使い方に注意しなくてはならないプロパティなのです。
そこで用いられるのが 「clearfix」 になります。
要素を横並びにするために 「float」 のプロパティを使うと 「float (浮く)」の名の通り、 要素が浮いてしまいます。
だから、 「footer」はfloatプロパティを使用した「right」と「left」の下に潜り込んでしまったわけです。
そこで 「floatを解除する (浮いている状態をもとに戻す) 」 ために clearfixを使います。
「clearfixクラス」 は 「floatを指定した要素の親要素」にあてます。
これで回り込みを解除することができます。
先程説明したとおり 「right」 と 「left」は「main」の子要素ですね。
つまり、ここで 「clearfix」 をあてるのは 「main」 ということになります。
index.htmlを下記のように記述しましょう。
すると下記のようになるかと思います。
これで「header」「main」「footer」 が縦並びに、 「main」の中の「right」と「left」 が横並びになりました。
このようにして縦並びと横並びを駆使してWEBサイトを構築していきます。
最後に「wrapper」 にスタイルをあてて、出来上がったものを画面の中央に寄せましょう。
通常のwebサイトは両端に余白があり、 要素は中央に寄っていることが多いです。
全体の要素を囲むwrapperに 「width」 を指定し、 「margin: 0 auto」で中央寄せができます。
すると下記のように、真ん中に表示されるようになります。 これで完成です!
補足
※「margin: 0 auto」 は 「width」が指定されていないと効かないので注意!
「float」と「clearfix」 の関係が少し特殊なので、この辺りをしっかりと理解しておくことが大事です。
課題: divパズル
ファイルは「3-1-3」 配下の 「div_puzzle_Check」 の中になります。
フォルダの中身と簡単な説明を書いたので、参考にして進めてください。
●3-1-3 ←フォルダ名
○ div_puzzle_check ← フォルダ名
■check.html ←ここにHTMLを書いていく
■CSS ←フォルダ名
■reset.css … 必ず読み込ませてください(説明は下記に)
■index.css … ここにスタイルの記述を書いていく
index.htmlとCSSを編集して、下記の表示になるようにしましょう。
補足reset.cssについて
Google ChromeやFireFox、Safari、IEなど各ブラウザにはデフォルトで決まっているスタイルがあります。
例えば、Google Chromeにはliタグに必ずmargin: 30px;、IEではmargin: 10px; といったような自分で指定していない
marginやpadding、font-sizeなどが勝手についてしまい、デザインがブラウザによって崩れてしまったりするわけです。
reset.cssファイル内の記述を見るとmargin: 0;などブラウザがデフォルトで持つスタイルを打ち消す記述がされているのでreset.cssを読み込むことでデザイン崩れを防ぎます。
まずは、 index.html を開きましょう。
最低限のHTMLは既に書いてあるので実際のコードはコメントの通り内に記述していってください。