これからの季節に親子でハイキング! >>

上部の上の部分の余白を消したいのですが
イマイチソースの使い方が分かりません。
TOPマージンを使えばよいとの事ですが
どのように使えばいいのでしょうか?

そのページには画像があって、
画像をなるべく上部に載せたいのです。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

>テーブルで囲った画像にでは余白を消して


>一番上部に持って行くことができません。

<TABLE>タグのCELLSPACINGとSELPADDINGを0にすれば余白は消えますよ。
    • good
    • 2
この回答へのお礼

消えました!ありがとうございます!

お礼日時:2003/01/11 13:38

<body style="margin-top:0px" topmargin=0>



topmargin=n …IE2以上
style="margin-top:n" …IE3以上/ネスケ4以上
の対応ですので、
IEは2以上ネスケは4以上の対応です。

この回答への補足

早速のレスありがとうございます。
まとめてお返事させていただきますが
どのやり方も文字はきちんと余白を消せますが
テーブルで囲った画像にでは余白を消して
一番上部に持って行くことができません。

こちらはIE6なんですけど、
何かこちらのやり方に問題があるのでしょうか?

補足日時:2003/01/10 17:49
    • good
    • 1

Body タグに topmargin=0 を追加すればokのハズです。

    • good
    • 0

スタイルシートで、例えば以下のようにしてみたらどうでしょう。



body {margin-top:0px;}

これは、上部のマージンを0ピクセルにするという意味です。
0のところにはマイナスの数値を入れることもできます。
-5pxとかやってみて、仕上がりを見ながら調整したらどうでしょうか。
    • good
    • 0

初めまして。



マージンの設定はBODYタグの中で行いますが、IEとNCでは対応しているタグが異なります。
その為に、双方のブラウザで認識する書き方をしなければなりません。ちょっと面倒でしょうが一例としてこんな書き方をして確認してみてください。

<BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

一応解決できると思いますが、一部のブラウザ(バージョンによる?)では、これでも1ピクセルの隙間が出来てしまうことがあります。その辺の厳密な調整と言うことであればあとは1ピクセルまでのデザイン性を考慮してレイアウトすると言うことになってしまいますね。おっと、1ピクセルの隙間が出来やすいのはネットスケープです。
    • good
    • 0

<BODY TOPMARGIN=0>


で、上部の余白を消す事が出来ます。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSで余白とパディングに”0”を指定したのに上部に余白ができてしまう

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。
そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。
IE6では空白がないのですが、FIREFOX2だと空きます。
分かる方いらっしゃったら教えて下さい。
ソースはこれです↓
【html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css" media="all">@import url("school2.css");</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1><img src="images/Logo03.gif" width="310" height="90" /></h1>
</div>
</div>
</body>
</html>


【css】
body {
background: #E0FFCE;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
height: 800px;
width: 800px;
border: 1px solid #009999;
background: #FFFFFF;
}
#wrapper #header {
background: url(images/Backheader3.gif) no-repeat;
margin: 0px;
padding: 0px;
height: 120px;
border-bottom: 6px double #009999;
}
#wrapper #header img {
margin: 0px;
padding: 0px;
}

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。
そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。
IE6では空白がないのですが、FIREFOX2だと空きます。
分かる方いらっしゃったら教えて下さい。
ソースはこれです↓
【html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http...続きを読む

Aベストアンサー

h1のスタイル設定がないのが原因ですね。
CSSをやると最初の方でつまずく代表例のようなパターンです。
h1にも余白0などの数値を設定することで余白がなくなるはずです。

Qヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

QHTML タグ セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に2行2列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、OSはWinXP、ブラウザはInternet Explorer6です。

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qhtml,css初心者です。ヘッダーの余白について

ヘッダーの余白について教えて下さい。


どうしてもヘッダーの上部分に余白ができてしまいます。
HTMLとCSSをはります。

bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="font.css" type="text/css">
</head>
<body>
<div id="header"><!--/ #header -->
あいうえお
</div>
</body>
<html>




CSS


#header{
width: 980px;
margin: 0 auto;
background: #fff;
text-align: left;
}




宜しくお願いします。

ヘッダーの余白について教えて下さい。


どうしてもヘッダーの上部分に余白ができてしまいます。
HTMLとCSSをはります。

bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script...続きを読む

Aベストアンサー

body全体にも標準でマージンがあるので、bodyタグに対してmarginを0にセットすれば余白はなくなります。

body {
margin: 0 auto;
}

これでヘッダー上部分の余白がなくなります。
ご参考まで。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Q

現在cssを独学で勉強中です。
どなたか解るか方、教えてください。

<div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト
しようとしています。

下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の
上下に20pxくらいの空欄ができます。
これを出ないようにする方法はありますでしょうか?
というか、記述としては合っているのでしょうか?
一応いろんなサイトを参考にして記述してはいます。

また、IEとfirefoxでは空欄の出方が違います。
たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると
ありがたいのですが...

空欄は"margin-top"を「-20px」とかにするとなくなるのですが
今度はSafariでその分要素自体が小さくなってしまいます。

宜しくお願いします。


---HTML(一応DTDの部分から載せておきます)---------
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="test3.css" />
<title></title>
</head>
<body>
<div id="container">

 <div id="boxA">
 A(ヘッダ)
 </div>

 <div id="wrapper">

  <div id="boxB">
  B(メインカラム)
  </div>

  <div id="boxC">
  C(サイドバー1)
  </div>

 </div>

 <div id="boxD">
 D(サイドバー2)
 </div>

 <div id="boxE">
 E(フッタ)
 </div>

</div>

</body>
</html>


--- css -----------------------

body {
text-align:center;
margin-top: 0px;
}

#container {
width:800px;
height: 800px;
margin-top: 0px;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color: #33FF66;
}

#boxA {
width:100%;
height: 150px;
background-color: #9999CC;
}
#wrapper {
width:620px;
height: 200px;
float:right;
background-color: #33CC00;
}

#boxB {
width:440px;
height: 200px;
float:left;
background-color: #999933;
}

#boxC {
width:180px;
height: 200px;
float:left;
background-color: #FF9966;
}

#boxD {
width:180px;
height: 200px;
float:right;
background-color: #996699;
}

#boxE {
width:100%;
height: 150px;
clear:right;
background-color: #33CCCC;
}

現在cssを独学で勉強中です。
どなたか解るか方、教えてください。

<div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト
しようとしています。

下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の
上下に20pxくらいの空欄ができます。
これを出ないようにする方法はありますでしょうか?
というか、記述としては合っているのでしょうか?
一応いろんなサイトを参考にして記述してはいます。

また、IEとfirefoxでは空欄の出方が違います。
たぶんIEのバグなんでし...続きを読む

Aベストアンサー

> 余分な空白が原因でした。

そうでしたか…それでは崩れる筈ですね。

> ソースを見易くする為のインデントをスペースでしていました。通常はタブでするんですね。

いえ別に「インデントはタブでしなければならない」と決まっているわけではないです。
ソースを見やすくするやり方には、個人ぞれぞれの好みがあったりしますので、質問者様が今までやられていた様にスペースでインデントを入れる方もいらっしゃいますよ。また、中にはインデントを好まず、改行やコメントタグを適所適所に入れる事で(自分的に)見やすくしている人もいますし。出自がプログラマーのコーダーの人は、タブ・インデントを好まれる場合が多い様に思えます。
ですから、質問者さまがスペース・インデントの方が使いやすければそれでも全くかまいません。
ただし…

> 全角にならぬよう気をつけていましたが、タブの方が確実で、正しいやり方だったのですね。

という事は一理あるかもしれません。もしスペースでインデントを入れる場合は、予めオーサリング・ツール(HTMLエディタ)上で全角/半角スペースが視認できる(全半角スペース挿入部分が単なる空白ではなく、がそれぞれ違った”記号”で表示される様にする、という事です。高機能エディタであればまず備えている機能です。)様な設定にしておくのが賢明です。そうすれば全角スペースの挿入が一目瞭然になりますので、間違いを防げます。

> こういうタグの勉強以前に、HTMLでの制作の常識というか、

「制作の常識」というのはちょっとあまりにも抽象的ですので、これが正解・これが間違い、と単純に決められるものではないですが…ユーザビリティとかアクセシビリティといったキーワードでググってみると大体の感じが掴めるかと思います。

> 規則というかそういうのがわかるようなものってないでしょうか?

「規則」に関しては、まずは仕様書を読む事が一番お奨めなのですが、何せ学術書ですのでビギナーの方には解説の用語からして専門的過ぎてわかりにくい感じがするかもしれません。一応、翻訳のリンク集として下記などがありますが。

【仕様書の翻訳サイト】
http://www.w3.org/Consortium/Translation/Japanese

もう少し平易に解説しているサイトなども沢山ありますので、仕様書を読みこなす為の準備段階としてまずはそういったサイトを幾つか熟読されると良いかも。ANo.2の方が引用された(引用の仕方自体は適切とは言い難かったですが…)サイト(http://www.tohoho-web.com/html/)などは、随分古くからある有名なものですね。今となってはちょっと情報が古い感も否めませんが、ビギナーにわかりやすい解説ではあります。
ほんの一例として、以下のサイトも挙げておきます。

【HTML、CSS等の解説サイト】
http://www.tagindex.com/
http://w3g.jp/

> 例えばタグの読み方なんかそうですよね。なんて読むのか全然わからないので自分で読み方決めたりしてますが、正しい読み方とかあるのでしょうか?

勿論、適切な読み方がありますよ。例えばaタグを「エイ(エー)タグ」じゃなくて「アタグ」とか読まれたらなんのこっちゃ、という感じにはなりますね。例えば、上記で挙げたサイトには発音ガイドなんかも載ってますよ。

【要素型名 発音ガイド】http://w3g.jp/xhtml/dic/element_pronunciation
【属性名 発音ガイド】http://w3g.jp/xhtml/dic/element_pronunciation

こういったHTMLのリファレンス・サイトがいくらでもありますから、ご自分で使いやすいものをブックマークしておいて常に参照されると良いでしょう。

>> ただ、このCSSを見ると、各ボックスの高さが...(以下省略)
> トップページを想定してレイアウトしています。なので、画像を入れるつもりです

画像であれば縦横サイズが固定値で決まってますからまあ、あの様なレイアウトでも可能ではありますが…
ただ、その画像が「何を意味するか」という事によって適切なマークアップは変わってきますよ。divというのは本来論理的意味を持たないブロック要素のタグですので、もしもその「トップページ」の各画像がメニュー・ボタンの様な役割でしたら、マークアップはdivよりもulなどのリストの方が相応しい事になります。ulはリストという論理的な意味を持ちますので、メニューやナビゲーションをマークアップするのに(少なくとも現時点では)おそらく最も適切な要素とされています。HTML側でまず論理的に相応しいマークアップをした上で、装飾的要素(スタイル)をCSSで与えて行くのが適切な制作方法です。

> 個人的にはブラウザごとに対策が必要なのでテーブルとうまく組み合わせて作りたいとは考えておりますが、

うーん…テーブルというはその名tableの示す通り、論理的な意味は「表」なんですよ。CSSが浸透していなかった時代にはtableをレイアウトの用途で使用することで段組や複雑なレイアウトを実現させていましたが、HTMLという論理的文書の仕様上では本来の意味から大きく逸れた間違った使い方だったんですね。でも今は、CSSの実装に関してモダン・ブラウザならまあ大体のところは対応できていますので、適切な(X)HTMLとCSSの組み合わせで大概のレイアウトは可能ですよ。それでは実現できない様なより複雑なデザイン性を望むのであれば、むしろあとはFlashなどにまかせるべきですし。
ですので、次の問いに対しては:

> テーブルとcssを組み合わせてという考え方はどうなんでしょうか?

私個人の考えですが、一からCSSを学ぼうとなさっているのなら、この際、思い切ってテーブル・コーディングとも決別された方が中途半端にならないと思います。floatとpositionあたりの性質・理屈をきちんと理解して的確に使いこなせる様になれれば、色々なレイアウトにも対応できる様になりますよ。

> これまではfireworksを使ってロールオーバーメニューを作り、Dreamweaverでテーブルの中に組み込んでいました。

前半はそのままでかまいませんが、後半は脱テーブルにトライされてみては。

> でもjavascriptや画像ファイル名などでやたらhtmlが長ったらしくるので悩んでいます。(省略)cssでロールオーバーメニューを作るとちょっと味気ないので、あまり使いたくないのですが、

?そうですか?Dreamweaverの「長ったらしく」なるJavaScriptってMM_なんたら…ってやつですよね。あのスクリプトで与えている程度の動きでしたらCSSでのロールオーバーで充分代用できると思うのですが。それに、やたらがちゃがちゃと動きがある事が見ている側にとって必ずしも良い印象を与えるわけではないですよ。返ってわずらわしいとかマイナスのイメージを持たれる場合もあります。
※ぶっちゃけた話、(そこがリンクの箇所だとわかる仕様であれば)ロールオーバーだって無くても閲覧する上では全然困らないものですし。

> 今回の事で、色々勉強になりましたので、もう一度やり直してみます。

とにかく、急がば回れのことわざじゃないですが、基本から正しい知識を習得し、理解をしながら、地道に積み上げて数をこなして行くのが一番だと思います。

> 余分な空白が原因でした。

そうでしたか…それでは崩れる筈ですね。

> ソースを見易くする為のインデントをスペースでしていました。通常はタブでするんですね。

いえ別に「インデントはタブでしなければならない」と決まっているわけではないです。
ソースを見やすくするやり方には、個人ぞれぞれの好みがあったりしますので、質問者様が今までやられていた様にスペースでインデントを入れる方もいらっしゃいますよ。また、中にはインデントを好まず、改行やコメントタグを適所適所に入れる事で(自分...続きを読む


人気Q&Aランキング