＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。
ホームページ制作覚えたてで忘れやすいこと
私もまだまだ勉強中ですが、マリオデザインはホームページ制作に興味をもっているかたに勉強会を月に数回行っています。ご不明点や、やりたいことをお聞きし、講義させていただいています。
そこで、勉強会でよくでる質問、以前教えてもらったけどこれどうしたらよかった？？などのことを簡単にまとめてみました。
覚えたての頃のあるある的な内容になっておりますので簡単に読んでいただければと思います。
- 全体を中央表示にさせたいがならない
- padding（内側の余白）とborder（枠線）はwidth（横幅）やheight（高さ）に足し算して計算する
- 色が何か変なんですけど
- 変な隙間がどうしてもなくならない
- 変更したのに変更がweb上で反映されない
1.全体を中央表示にさせたいがならない
現在のホームページのほとんどは中央表示で作成されています。中央表示についてよくある質問を紹介します。
一般的に中央表示をさせる方法は一番外側の要素にＣＳＳで指示して中央表示にします。
一番外側の要素がdivでＩＤ名wrapならば下記のようにＣＳＳでwrapに指示します。
#wrap{
margin:0 auto;
}
上記が一般的な中央表示の仕方だと思います。上記を日本語で説明すると0は上下の外側の余白を指示しているので、上下の外側の余白は0です！ということになります。
autoは左右の外側の余白を指示しているので、左右の外側の余白は自動で調整して左右均等にして！という感じになります。
しかし上記のＣＳＳの指示では不十分ですね。
width（横幅）の指定もしてあげないといけません。
覚えたての頃は、中央表示はmargin:0 auto;を入れるということは忘れないように覚えられるのですが、
width（横幅）が忘れがちになります。width（横幅）が入っていないとdivなどの要素は初期値で横幅100％ですので
上記で説明したautoの、左右の外側の余白は自動で調整して左右均等にしてが発動されません。（100%だとぴったりで余白がないため）
例で横幅が960pxの場合は下記のようになります。
#wrap{
margin:0 auto;
width:960px;
}
これでwrapは中央表示になります。上記の横幅を指定するのを忘れるというのは質問でよく受けますので、
覚えたての方で、中央表示にならない方は、横幅の指定をしているか確認してみてください。
2.padding（内側の余白）とborder（枠線）はwidth（横幅）やheight（高さ）に足し算して計算する
次に忘れやすいのはpadding（内側の余白）とborder（枠線）の計算方法です。
padding（内側の余白）とborder（枠線）はwidth（横幅）やheight（高さ）に足し算しなければいけません。
例を挙げます
#wrap {
width:300px;
padding:0 20px;
height:300px;
background:#000;
}
上記を日本語で説明すると横幅は300pxで
内側の余白は上下は0で、左右は20pxで
高さが300pxで 背景は黒です。になります。
覚えたての頃は、横幅300pxで指定しているので300pxと思ってしまいがちですが
実質のwrapの横幅はpadding（内側の余白）で左右20pxが指定されているので
300+20+20で340pxになっています。
高さはpaddingは左右にのみ指定してあるので300pxのままです。
ボーダーの場合も計算方法は同じです。
例を挙げてみます。
#wrap {
width:300px;
border:#F00 solid 20px;
height:400px;
background:#F00;
}
上記を日本語で説明すると横幅は300pxで
ボーダー（枠線）は四方向に赤色の実線で20pxづつ枠線をつけて
高さは400pxで
背景は黒です。になります
上記の場合の実際の横幅は
widtの300+ボーダー左の20+ボーダー右の20で340pxになります。
高さも実際は
heightの400px+ボーダー上の20+ボーダー下の20で440pxになります。
レイアウト崩れの原因になりますので、paddingとborderは
widthやheightに足し算して計算することをを頭に入れておきましょう。
こちらの質問はpaddingの質問よりborderを足し算し忘れたときによくいただく質問ですので特にborderには気をつけておいてください。
3.色が何か変なんですけど
次によくある質問は色が何か変なんですけどです。
もうすでにピンときている方もいると思いますが、
マリオデザインの講義は基本的にみなさんホームページビルダーやドリームウィーバーなどをインストールされたノートＰＣを持参されてこられます。
上記のホームページビルダーやドリームウィーバーなどのエディターを使用していると、間違った記述をしたりした場合、色を変えて教えてくれます。
とても親切な機能で、便利なのですが、覚えたての頃は色の変化に気づく余裕もないので、レイアウトが大幅に崩れたりして気が付くことが多いと思います。
これは覚えたてのころもよくありますが、少し自信がついてきて手打ちでタグをうち始めた時に一番よく出るミスだと思います。
私も手打ちに変えた時はよくミスをしていました。最近は手を抜き初めてコピペがおおいですが・・・。
そこでよくある記述ミスを上げてみたいと思います。
まず一番多いと思われるのが”(ダブルコーテーション)だと思います。
ＩＤの指定やimgのsrc・aタグのhrefで使用しますが、いつの間にか片方しかないとかよくあるので注意しましょう。
<div id="wrap"> <a href="#"><img src="img/test.png" alt="test" /></a> </div>次は閉じタグです。
閉じタグも入れ子をたくさんしたりするといつの間にかどれがどの閉じタグかわからなくなってしまいますので
コメントアウトなどを活用して忘れないように記述していきましょう。
<div id="wrap">
<div id="cont">
<div id="topic">
コメントアウトを活用してミスを減らしましょう
</div>
<!--topicの閉じタグ -->
</div>
<!--contの閉じタグ -->
</div>
<!--wrapの閉じタグ -->
次に忘れやすいのはＣＳＳの閉じ記号系です。;(セミコロン)や｝（波括弧）です。基本的に閉じる系を忘れやすいのかなと思います。
#wrap {
width:300px;
border:#F00 solid 20px;
height:300px;
background:#F00;/*特に最後のセミコロンが忘れやすいような気がします*/
}/*ここもチェック*/
初めのころは色の変化に気がつきにくいので、ブラウザチェックなども頻繁に行い、レイアウトが崩れてないかチェックしながら作業を進めていくとミスが減るのかなとおもいます。
4.変な隙間がどうしてもなくならない
次は変な隙間がなくならないです。
こちらの質問にはいろいろな原因があると思いますが、ほとんどの場合は、初期値の余白に邪魔をされていることがほとんどです。
いくつかのタグには初期値があります。初めから余白がついているものや、文字が大きいもの、リストマークがついているものがほとんどです。
ですので一般的にサイトを作り始める時はすべての初期値を0（何もない状態）に戻して作成していくと変な余白がでたり、大きな文字が出てきたりしないと思います。
初期値を元に戻すＣＳＳをネット上でいろいろな方が提供してくれていますので、皆さんにあったリセットＣＳＳを使用してみてください。
リセットＣＳＳなどで検索すると詳しい説明と、ＣＳＳサンプルがたくさん出てきます。
5.変更したのに変更がweb上で反映されない
最後は変更したのに変更がweb上で反映されないです。こちらもよくある質問です。
よくある原因の一つにアップロードをしていないです。
変更は完了しているが、アップロードをするのを忘れている場合です。
当たり前のようなことですが私も初めのころはよくアップロードをするのを忘れていました。
次の原因はアップロードしているが変更したページを保存していないです。
こちらが一番多い原因だと思います。
先日も何回アップロードしても変更が反映されませんと質問をお受けしたので、後ろで見ておきますのでもう一度やってみてくださいというやり取りがありました。
後ろで見ていると、変更をしっかりとされ、アップロードの仕方も間違っていませんでした。しかし変更を加えたページが保存されていませんでした。
上記の質問はよくいただくのですが、ＦＴＰソフトの使い方の間違えも1割ぐらいありますが、9割は変更を加えたページを保存せずにアップロードして変更が反映されないことがほとんどです。
ですので変更が反映されない場合は、保存をちゃんとしているのかも確認してみてください。
例外ではキャッシュが邪魔をし変更が反映されない場合もあります。フラッシュが特に多いと思います。上記の確認をしてそれでも変更が反映されない場合は、Ｆ５を連打しそれでも反映されない場合は、一度使用しているブラウザのキャッシュを 消去してみてください。これでほとんどの場合は反映されると思います。
まだまだたくさんありますが、特によくある質問ということでここまでにしたいと思います。
コメントを残す