今週は、前回ちょっとだけ触れたmarginの書き方について。
前回
------------------------
margin-left:auto;
margin-right:auto;
------------------------
と書いたものは
------------------------
margin:0px auto;
------------------------
と書けます、と書いていました。（前回の記事はこちらから）
　
marginは書き方が何通りかあります。
覚えれば、何個も同じようなソースを書かなくてもよくなるので絶対便利ですよ！

まず、marginは4箇所指定できます。
top、bottom、right、left　です。
上下左右を一気に指定したい場合
margin:数値;
と書いてやれば、上下左右同じ数値が入ります。



ですね。
でもこれでは『上と下はそんなに余白いらない･･･』なんていう場合困ってしまいます。
そんな時は、
margin:上下数値 左右数値;
と書いてやればいいのです。
上下数値と左右数値の間に半角スペースを入れて下さいね。
数値を区切ってやることで、指定を分けているのです。



こうすれは、上下は5px、左右は20px分の余白が指定されたことになります。
『いやいや、それぞれ違う数値を指定したいんだよ！』という場面のほうが実は多かったりします。
そんな時は、
margin:上数値 右数値 下数値 左数値;
と書いてやれば、それぞれ違う数値を指定してやれます。
上から順番に時計回りにまわっていくので覚えやすいと思います！



こうです。もしこれをちゃんと書こうと思ったら
------------------------
margin-top:2px;
margin-left:10px;
margin-bottom:5px;
margin-left:20px;
------------------------
と書かなければいけません。
書く量が明らかに増えてしまいますし、書くのが面倒くさいですよね！
これはpaddingもborderでもまったく同じように書く事が出来ます。
marginと同じように、下図のように時計回りに指定することができます。



絶対に便利！ですので、もし一つ一つ書いていたソースがあれば是非試してみてくださいね☆

ではまた次回！

今回は、絶対便利！ページ全体を画面の中央に揃える方法です。
タグの中にある幅を指定したボックスを、
画面の中央に揃えてみましょう。

まず、タグに



というスタイルシートを指定します。
widthは任意の幅でいいので、必ず指定して下さい。

margin-left:auto;にあるように、autoとは
左の余白（margin）を自動的に空ける』
という意味です。
ですので、左と右にautoを指定しているので、
左右の余白を自動で割り振り空けますよ』
という意味になります。
divに横幅を指定してやることで
bodyの横幅からdivの横幅を引いた残りの幅を、
自動で左右の余白をあてているのです。
なので、画面の中央に揃っているのです。
今回の書き方は分かりやすく左と右に分けて書きましたが、
margin:0px auto;と書いても同じ意味になります！

ただ、実はこれだけではIEで表示出来ない場合があります。
そこでタグにスタイルシートを指定します。



と入れてみてください。
これでどのブラウザでも画面中央揃えになることができます！

しかし！！
こうするとbodyの中に書いたものが全てcneterになってしまう、
つまりdivの中に書いた文字や画像も全部中央に寄ってしまうんですね。
なので、タグのスタイルシートに



を追加してあげて下さい。
これで、divの中に文字を書いても画像を入れても全部左に寄って表示されます。

これで完成です。
ウィンドウの幅を変えてみても
常にdivに囲まれた範囲が中央に位置しているはずです。
白背景では分かりにくいと思いますので、divの背景に色をつけてやると
分かりやすいと思います。
これは絶対に便利！ですので、是非使ってみてくださいね☆

今回は前回の続きを書いて行きたいと思います。
前回は、スタイルシートを記述する上で用いられる「id」と「class」の
違いを簡単にお話しました。
--------------------------------------------------------
「id」→一ページ中に同じ名前は一度しか記述出来ません
「class」→一ページ中に同じ名前でも、何度も記述出来ます
--------------------------------------------------------
ここまでは、前回お話した内容でした。
idとclassは役割があり、使い分けることで理解しやすくなるのですが
別に全部classでデザインしても問題はありません。

ですが、例えばHTMLでたくさんスクロールしないと
見えないホームページになってしまい、
下まで行き着いた後、一番上に戻るのは結構大変です。
そこで、同じページの一番上に戻る、というリンクを貼りたい場合。

例えば、一番上にheaderという名前のdivをidで指定したとします。
idは、#header　というように決めた名前の前に「#」と書きましたね。
ですので、



と書いてやれば、同一ページのが
書かれた場所まで戻ってくれるリンクが作成出来ます。
これが「idは一ページに一回しか書けない」と言った理由です。
idには、ページ内の位置を特定出来る役割もあるのです。

以上のことから、
ヘッダーやフッターにような、　一ページ内で一度しか使わない場所に、
idを指定すると、理解しやすくなる、
ということがわかっていただけたでしょうか？

使い慣れてくるとその便利さがわかると思います。
ぜひ一度試してみてくださいね。

スタイルシートを記述する上で用いられる「id」と「class」。
きっと聞いたこと、見たこと、使ったことがあると思います。
ではこの二つ、どんな違いがあるのかご存知ですか？
実はそれぞれに役割があり、使い分けることで理解しやすくなります。

------------------------------------------
「id」→一ページ中に同じ名前は一度しか記述出来ません
「class」→一ページ中に同じ名前でも、何度も記述出来ます
------------------------------------------

id、は一ページに一度しか使えません。
div要素を用いてページのレイアウトの例で見てみましょう。

まず、一番上にロゴやボタンを設置するheaderという名前にしたdiv。
となります。
次にサイドに情報を入れるためのdiv、これはsidebarと名前をつけてみました。

となります。
メインとなる本文を入れるdivは、mainにしてみます。

ですね。
最後、一番下に配置するdivをfooterとしてみます。
となります。
この場合、headerもfooterも一ページ内に二回出てくる事はありません。
このような場合にidを使います。
idを使う場合、#header　というように、決めた名前の前に「#」と書いて
スタイルシートを記述するようにします。

idに対してclassは、一ページに何度も書くことができます。
例えば


こんな感じです。

１つずつのにclassを指定することで、
それぞれのに違うスタイルシートを適用させることが出来ます。
また、一度使ったclassを他の要素に使うことも可能です。
文字の色や大きさを統一したい時等に使えますね。

classを使う場合、.note　というように、決めた名前の前に「.」と書いて
スタイルシートを記述するようにします。
もちろん全てにclassを適用してデザインすることも可能ですが……
次回にもう少し詳しくお話することにします。

ではまた次回！

今週より、ホームページを制作する上でちょっと便利！と思うような
ソースのレシピを書いていきたいと思います。

JavaScriptを使いたい！
と思って一つのHTMLファイルにJavaScripのソースを貼りつけてみる…
いくつもやりたいことが出てくるとソースが長くなってきますよね。
見辛くなりますし、ほかのページで使いたい時にもう一度同じようにコピーして
使いたいHTMLファイルにペーストを繰り返さなければならない…。
なんていう手間が少し出てきます。
そんな時は外部にJavaScriptを記述したファイルを置き、
<script>タグ内で【src】オプションを用いてURLを読み込み実行する、
ということが可能です。
---------------------------------------------
<script language="javascript">
<!--
スクリプト文
//-->
</script>
　----------------------------------------------
htmlファイル内に直接記述した場合、大元のソースはhead要素内に
このようなソースをペーストすることになると思います。
まず、これの<!--　の後ろから　//-->の前までをコピーします。
上記サンプルソースでいうと【　スクリプト文　】ですね。
次にメモ帳等のエディタで新規のファイルを作成し、これに先程コピーしたソースを貼りつけます。
現在、このファイルには【　スクリプト文　】の1行しか書かれていないはずです。
半角英数字8文字以内でしたらお好きなファイル名で結構ですし、
このファイルはHTMLではなくJavaScriptなので「.js」という拡張子にして保存してください。
あとはHTMLファイルのhead要素の範囲内に

<script src="ファイル名.js" type="text/javascript"></script>

と追加します。これで終了です！
別のJavaScriptも追加したい！と思ったら
追加したいソースの<!--　の後ろから　//-->の前までをコピーし、
先ほど保存したjsファイルを開いて続きにソースをペーストして上書き保存してあげましょう。
これで沢山のページを作って同じ動きをさせたい場合でも簡単に出来ますね！
次回も、出来るとちょっと便利！な事を書いていきたいと思います。