プロが教えるわが家の防犯対策術!

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

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

A 回答 (2件)

初心者の方だと思います。


 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。
    • good
    • 0

スタイルシートに



ul{
list-style-type:none;
margin:0px;
padding:0px;
}

li{
margin:0px;
padding:0px;
}

HTMLに

<ul>
<li><img src='./a.png' alt='a'></li>
<li><img src='./b.png' alt='b'></li>
<li><img src='./c.png' alt='c'></li>
<li><img src='./d.png' alt='d'></li>
</ul>

こんな感じでどうでしょうか。
画像の間隔はmarginの値で調節できます。

例なのでリストのタグ全体にスタイルシートが効いていますが、実際にはclass指定するとかしてください。

ただ、この場合隙間無く画像が並ぶはずなのですが、私の環境では隙間が開いてしまったので、もう少し突き詰めてみないといけないですが・・・。
    • good
    • 0

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

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

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

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

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

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方の隙間が開く。

Q画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。

隙間無くくっつけたいのですがどうすればいいのでしょうか。



以下htmlです。

<img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br />
<img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br />
<img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" />

<br />で改行せずくっつけてタグを並べても同じ結果でした。

よろしくお願いします。

Aベストアンサー

スタイルシートで次の1行を入れてください。

img { vertical-align: bottom; }

QHTML&CSS DIVをぴったりと縦に並べたい

HTML&CSS初心者です。
下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、
「見出し002」の上のマージンがうまく取れずに困っています。

.box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、
「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、
MacのSafariとFirefoxでは、余白の差が出てしまいます。(Safariの方が余白が大きい)
<br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。

ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、
下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に
変な膨らみを持たせたくありません。

どなたか解決法を教えて下さい。よろしくお願い致します。

【HTML】
<div id="main">
<div class="mds01"><h3><em>見出し001</em></h3></div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p><br style="clear: both;" />
</div>

<div class="mds02"><h3><em>見出し002</em></h3></div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

</div>

【CSS】
/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
background: #FFFFFF;
height: auto;
}
/*各見出し*/
.mds01 h3 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
.mds02 h3 {
background: url(img/mmds02.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
/*ボックス*/
.box {
margin: 0px;
padding: 0px;
height: auto;
width: 587px;
clear: left;
}
/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}
#main .box h5 {
font: bold 14px "MS Pゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
}
.txt {
font: normal 13px/16px "MS Pゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}
em {
visibility: hidden;
}

HTML&CSS初心者です。
下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、
「見出し002」の上のマージンがうまく取れずに困っています。

.box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、
「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、
MacのSafariとFirefoxでは、余白の差が出てしまいます。(Safariの方が余白が大きい)
<br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わ...続きを読む

Aベストアンサー

ちょっと整理して、ブロック要素に赤いborderを付けました。
ブラウザで見ると、赤い枠で囲まれたブロック要素は指定どおりになっているかと思います。
imgがboxからはみ出ていますね。なぜかというのは参考URLを見るとわかります。
この状態だと、<div class="box">の高さを決めているのは
その中の<h5>と<p>の合計の高さです。ブラウザのデフォルトスタイルは差があるので、それで高さが変っているのではないでしょうか。

<!-- htmlここから -->

<div id="main">

<h3 id="mds01"><em>見出し001</em></h3>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<h3 id="mds01"><em>見出し002</em></h3>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

</div>

<!-- htmlここまで -->


/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
border: 1px solid red;
}

/*各見出し*/
#mds01 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
border: 1px solid red;
}

/*ボックス*/
#main .box {
width: 587px;
clear: left;
border: 1px solid red;
}

/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}

#main .box h5 {
font: bold 14px "MS Pゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
border: 1px solid red;
}

#main .box p.txt {
font: normal 13px/16px "MS Pゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}

参考URL:http://www.techdego.com/2007/01/floatcssclearfix.php

ちょっと整理して、ブロック要素に赤いborderを付けました。
ブラウザで見ると、赤い枠で囲まれたブロック要素は指定どおりになっているかと思います。
imgがboxからはみ出ていますね。なぜかというのは参考URLを見るとわかります。
この状態だと、<div class="box">の高さを決めているのは
その中の<h5>と<p>の合計の高さです。ブラウザのデフォルトスタイルは差があるので、それで高さが変っているのではないでしょうか。

<!-- htmlここから -->

<div id="main">

<h3 id="mds01"><em>見出し001</em...続きを読む

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ホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qhtmlで画像を2個ずつ並べていきたいです

htmlでホームページを作っています。
リンクつきのバナーをページに2個ずつ
□  □
□  □
↑このような感じで並べようと思い、
<img align="left" src="画像url" alt="名前" border="0">
<img align="right" src="画像url" alt="名前" border="0">
で並べてみました。
横の間隔はこれでうまく言っているのですが、
これを縦に並べていく時、上のバナーと下のバナーがくっついてしまいます。
そこにも一行分くらいの間隔を開けたいです。どうすればいいでしょうか?

Aベストアンサー

連投ご無礼します。
ご質問の件だけなら、imgタグ内に hspace="20" vspace="20" でできますね。
数値は適当に試してください。
表でcellpading="20"とかcellspacing="20" とかでも可能かと思います

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング