2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。
しかし、画像と文字の間(1列目と2列目の間)に余分な空白ができてしまいます。
margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。
htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか?
また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。
divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。
<!-- htmlのコード -->
<body>
<table width="700" border="0" >
<tr>
<td><center>
<img src="img/top_image.png" />
</center></td>
</tr>
<table class="table001">
<tr>
<td rowspan="2"><img src="img/aaa.bmp" /></td>
<td><h2>このサイトのごあんない</h2></td>
</tr>
<tr>
<td><p>このサイトは~~~~~~</p></td>
</tr>
</table>
<div style="margin-top:10px"></div>
<table class="table001">
<tr>
<td rowspan="3"><img src="img/bbb.bmp" /></td>
<td><h2>このサイトのごあんない2</h2></td>
</tr>
<tr>
<td>
<p>このサイトは~~~~~~</p>
<p>また、このサイトの~~~~~~。</p>
</td>
</tr>
<tr>
<td>
<p>問い合わせ</p>
<p>電話番号 000-000-0000</p>
</td>
</tr>
</table>
</body>
/* CSSのコード */
body {
background-color:#6C6;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
font-size: 0.8em;
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS P Gothic",sans-serif ;
}
#pageBody {
width: 760px ;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
table.table001{
background-color: #E8FECF;
width: 700px;
margin-left: auto;
margin-right: auto;
white-space:normal;
}
h2{
padding-left: 10px;
background-color: #009900;
width: 180px;
color:#FFF;
font-size: 1.1em;
height: 25px;
line-height:25px;
}
No.4ベストアンサー
- 回答日時:
最初の画像がどんな文字を置き換えたものかがわからないのと、2番目以降の画像の意味もわからないので、想像でしかありませんが、
HTML自体は下記のように、簡単になります。
これだったら、わざわざWebオーサリングツールを使う必要はなく、HTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )、すなわちテキストエディタで十分です。
★最後に全体を書いておきます。
★画像にはalt属性が必要です。
『height属性とwidth属性は、ユーザエージェントに対して画像やオブジェクトの大きさに関する概念を知らせるので、ユーザエージェントは画像やオブジェクトに割り当てる空間を予約し、そのデータが届くのを待っている間も文書のレンダリングを継続できる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
ポイント
1)マージンはそのブロックのマージンを書きます。元もとのHTMLでしたらtable+teble{margin-top:10px;}でよいのですよ。
意味は、tableに続く(並んだ)tableの上にマージン10pxと言う意味です。
2)HTMLにはデザインに関する記述は一切無い(特に二番目)ので、どのようにも、デザインできます。まったくデザインを変えることも簡単です。今回はウィンドウ幅をどのように変えても中央に配置されますが、これをウィンドウ幅を変えたら追随して表示も変化させてスマホなどに対処させるとかも
<body>
<div class="header">
<h1><img src="img/top_image.png" width="700" height="40" alt="見だし(タイトルと原則同じ)" ></h1>
</div>
<div class="section" id="message">
<h2>このサイトのごあんない</h2>
<p>このサイトは~~~~~~</p>
</div>
<div class="section" id="message2">
<h2>このサイトのごあんない2</h2>
<p>このサイトは~~~~~~</p>
<p>また、このサイトの~~~~~~。</p>
<div class="footer">
<h2>問い合わせ</h2>
<address>電話番号 000-000-0000</address>
</div>
</div>
</body>
</html>
あるいは最初の画像も文書にとって背景でしたら
<body>
<div class="header">
<h1>見だし(タイトルと原則同じ)</h1>
</div>
<div class="section" id="message">
<h2>このサイトのごあんない</h2>
<p>このサイトは~~~~~~</p>
</div>
<div class="section" id="message2">
<h2>このサイトのごあんない2</h2>
<p>このサイトは~~~~~~</p>
<p>また、このサイトの~~~~~~。</p>
<div class="footer">
<h2>問い合わせ</h2>
<address>電話番号 000-000-0000</address>
</div>
</div>
</body>
</html>
[全体]
★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済みのHTML4.01strict+CSS2.1です。
★タブは_に置換してあるので戻してください。
<!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">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{
background-color:#6C6;
font-size: 0.8em;
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS P Gothic",sans-serif ;
}
h1,h2,p{margin:0;}
div.header,div.section,div.footer{
width: 700px ;margin: 0 auto;
background-color: #FFF;
}
h1{font-size:30px;line-height:10px;}
div.section{
width:640px;/* 左に置く画像幅分引いたもの */
padding-left:60px;/* 左に置く画像幅分 */
}
div.section{background:url(img/aaa.png) repeat-y #E8FECF;}
div.section+div.section{background:url(img/bbb.png) repeat-y #E8FECF;}
div.footer{width:640px;background-color:#E8FECF;}
div.section p,div.footer p{
margin:0 1em;
text-indent:1em;
line-height:1.6em;
}
h2{
padding-left: 10px;
background-color: #009900;
width: 180px;
color:#FFF;
font-size: 1.1em;
height: 25px;
line-height:25px;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><img src="img/top_image.png" width="700" height="40" alt="見だし(タイトルと原則同じ)" ></h1>
_</div>
_<div class="section" id="message">
__<h2>このサイトのごあんない</h2>
__<p>このサイトは~~~~~~</p>
_</div>
_<div class="section" id="message2">
__<h2>このサイトのごあんない2</h2>
__<p>このサイトは~~~~~~</p>
__<p>また、このサイトの~~~~~~。</p>
__<div class="footer">
___<h2>問い合わせ</h2>
___<address>電話番号 000-000-0000</address>
__</div>
_</div>
</body>
</html>
こんなに詳細にご回答くださいまして本当にありがとうございます!!!
リンクも1つ1つ参考にしながら、この記載の通り作り直してみます。
Web制作初心者で1人で行き詰まっていましたが、おかげさまでとても勉強になりました。
本当にありがとうございました(*^_^*)
No.3
- 回答日時:
img要素の width と height 属性について
両方共必須属性ではありませんので書かなくても良いのですが、次のようなメリットがあります。
画像が表示される前にページのレイアウトが決まるので、画像以降にある内容が先に表示され、画像がロードし終わるたびに画面がズルズルと動くことが防げます。
私的に、HTMLエディタを使用すると、表示させたい画像ファイルを指定するだけで width も height の値も自動で入るのでわざわざ書くという作業はしたことがありません。
無知な質問にご回答いただき感謝いたします。
画像の大きさの指定は必須属性ではないけれど、指定するとご記載の現象を防ぐことができるんですね。とても参考になりました。
会社にはDreamweaverCS4があるのですが、今回の作業は私用なので自宅で行っており、すべてタグ打ちしています。エディタでは自動でwidthもheightも入るんですね。知らなかったです。
ご親切にありがとうございました(*^_^*)
No.2
- 回答日時:
拝見する限りでは、tableでデザインされているようですが、この方法は今ではほとんどされていません。
「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
それはさておき、table関連のプロパティには、
table-layout、border-collapse、border-spacing、empty-cells、caption-side
のプロパティがあります。
tableのセル間のスペースは
border-collapseを使用します。
border-collapse:collapse;
で結合ボーダーモデルになります。separateだとセル間が離れます。separateがデフォルトです。
border-spacingはseparateを選択したときのセル間のスペースです。
empty-cellsは、内容のないセルの表示方法です。separateのときに内容のないセルにボーダーを描くか描かないかです。
また、セルもpaddingを指定できます。またpもデフォルトでマージンを持ちますから
table p{margin:0;}
td,th{padding:0;}
で余白はすべて消えます。
詳しくは、
★17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
など・・・長いです。頭が痛くなります。
なお、いくつか誤りがあります。
1) ページレイアウトの目的で表を用いてはなりません。
2) <center>は非推奨です。スタイルシートを使いましょう。
3) bmpは画像フォーマットとして使うことができません。jpeg,gig,pngにしましょう。
(1)のtableを使用しないについては、ご希望でしたら簡単なサンプルを書きます。HTMLもスタイルシートも数分の一以下になり、シンプルでわかり易く検索エンジンにも最適なものになるでしょう。
この回答への補足
詳細なご説明ありがとうございます!とても参考になりました。
今回のレイアウトを表を使わず作ることができるならば、ぜひそうしたいです!お手数ですがサンプルを教えていただけないでしょうか??(>_<)
また、centerが非推奨ということですが、cssでmarginの左右にautoを設定するということですか?
なお、もし今回のレイアウトの場合で、四角の角を丸くしたい場合はtableを使うのがベストでしょうか?
もしかすると、依頼主からそのようなリクエストが来るかもしれないのですが、とりあえず表を使わない方法で作っておきたいと思います。
質問続きでお手数をおかけしまして大変恐縮ですが、ご回答をお待ち致しております。
No.1
- 回答日時:
td に横幅(width)の指定がないので画像がピッタリ収まっていないのと、テーブルに border-collapse: collapse; が指定押されていないため、画像左に余白ができると思います。
画像にも width と height の指定がないので、そのソースでは確認できません。
テーブルの上下間隔は、
table.table001{
margin-top: 10px;
border-collapse: collapse;
}
上記のように margin-top: 10px; でも追加すればいいです。
画像ファイル形式は web 上で使用する場合 bitmap はやめましょう、jpeg , gif , png にしてください。
テーブルの入れ子を使用する場面ではないと思うので、見直しも必要かと思います。
早速のご回答ありがとうございます。
テーブルに border-collapse: collapse; を指定し、td に横幅(width)の指定をすることで、それぞれのテーブルの余白が統一され綺麗になりました!
また、テーブルの上下間隔も、margin-top: 10px;を入れることで解決しました。
単純なことができておらずお恥ずかしい限りですが、自分で気づくことができなかったため本当に助かりました。ありがとうございました。
画像の width と height については、用意されていた画像が大きかったため、ペイントで縮小してブラウザで見やすい大きさにしたものを指定しため、あえてサイズは指定しませんでした。もしご指摘がある場合はご回答いだけると嬉しいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
-
スクロールボックスを中央に配...
-
画像イメージの上下左右、欲し...
-
CSSで画像を同じ位置に重なり合...
-
tableタグで作るような表をCSS...
-
font-sizeが効かない
-
<div>と<div>の間の10px程の...
-
インラインスタイルシートで見...
-
Internet Explorer 6による不具合
-
W3Cのソースコードの検証サービ...
-
【HTML&CSS】フッター下部の余...
-
widthやheightの数値に単位(px...
-
ディスプレイのサイズに合わせ...
-
どう変更してもIE6だけCS...
-
CSSがなぜかfont-sizeだけ効か...
-
<hr>要素を点線で表示した場合...
-
CSSを使ってスクロールバーつき...
-
IE6にてliタグに対してposition...
-
cssで投稿した画像を中央に表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報