ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

テーブルを使えば、1行2列のテーブルに左に画像、右にリストを入れれば、横並びができるかとおもいますが、スタイルシートを使った場合、画像の横にリストをおこうとすると、どうしても下に流れてしまいます。divで、画像とリストを囲って、floatをつかって右、左とすればできるかもしれないかなとおもいましたが、もっと簡単にできる方法がありそうなんですが。。。
なにとぞよろしくお願いいたします。

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

A 回答 (1件)

imgタグの中に「style="float:left;"」


と記述するのが一番妥当なのではないでしょうか。
しかしウインドウの幅が小さいとテキストが
回りこまなくなるのが難点ですね。
因みに<br clear="all">で回り込みを解除出来ます
    • good
    • 0
この回答へのお礼

ありがとうございました、解決できました。

お礼日時:2005/04/02 18:56

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

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

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

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

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

Q箇条書きリストのすぐ横に画像を載せたい

初心者です。よろしくお願いいたします。

表題のとおりなのですが、

<img src="gazou.jpg" width="100" height="100" align="right">
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>

・・・と記述すると確かに箇条書きリストの右側に画像が表示されるのですが画像が右端に表示されてしまいます(当然ですが・・・)箇条書きリストの少し横あたりに画像を表示させたいのですがなにか方法があるのでしょうか。このような微調整はむずかしいのでしょうか。
よろしくアドバイスお願いいたします。

Aベストアンサー

No1の補足です。

●箇条書きに対し、画像が一つずつの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
</TABLE>

●箇条書きに対し、画像が一つだけの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%" rowspan="2"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
</TR>
</TABLE>
以上のような感じです。

No1の補足です。

●箇条書きに対し、画像が一つずつの場合

<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD width="46%">りんご</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
<TR>
<TD width="46%">みかん</TD>
<TD width="54%"><IMG border="0" src="gazou.jpg" width="43" height="39"></TD>
</TR>
</TABLE>

●箇条書きに対し、画像が一つだけの場合

<TABLE border="0" width="100%" cell...続きを読む

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リストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

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

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

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

<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は指定しましょう

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qliリストタグの背景色に色がつきません。このタグのどこが間違っているのでしょうか。

外部CSSに

.ffdddd_color {
background: #ffdddd;
}

とし記述していて、

HTML部分に

<li class="ffdddd_color">テーマA</li>

と記述しているのですが、
色がつきません。

何がいけないのでしょうか?

ちなみにテーマAと書いてあるのは
テーマBCDとリストがあり、

テーマA
文章
テーマB
文章
テーマC
文章
テーマD
文章

という風になっています。
ですので、テーマと書いてある部分だけに背景色をつけたいです。

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

Aベストアンサー

> 現在のHTML部分は <ul class="box">

での、"box"のCSSはどんな風ですか?

Qtable 幅固定で、端までいったら自動折り返し タグ

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所(勿論最後に</table>とかつきます)、幅は固定されるものの、width=750の大きさのラインで文字が折り返されず途切れてしまいました。
(メモ帳には「テストテストテストテスト」と打っていても、ページを開くと「テストテストテス」で文章が終了してたりする、ということです。)
また、table width="数字"や、パーセンテージで設定すると幅自体が固定されません。

検索で、半角英数字の連打(例:aaaa)は普通の設定だと折り返しされないと知ったため、「テストテストテスト」などの単語を連続して試しています。
最終手段の、<br>使用はなるべく控えたいと思っています。
上手く固定出来るタグを教えて頂けると嬉しいです。
宜しくお願いします。

クリックありがとうございます、また質問させて頂きます。
今メモ帳でホームページを作成中です。
素人質問かもしれませんが、お力貸して下さると助かります。

小説ページを作成しているのですが、その中でTABLEを幅固定して自動折り返しさせる方法がわかりません。
色々なサイト様を巡らせて頂き、

<table width="750" cellpadding="20" border="0" style="table-layout:fixed;">

↑こういうタグを打った所(勿論最後に</table>とかつきます)、幅は固定されるものの、width=750の大きさのラインで文...続きを読む

Aベストアンサー

以下のように指定すると改行されました。
ちょっと今のところ他に方法が思いつきません・・・

td {
word-break:break-all;
}

独自拡張なのでちょっと迷いますね。

Q画像横のテキストをセンターに配置したい

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキストが2行になると画像の下にずれ込みます。

しかし(2)のようにテキストをセンターに配置したいなと。
テキストは多くても2行でとどめるつもりなので、
1行でも2行でもセンターになるようにしたい。
ではと思ってまず思い浮かんだのが画像を「float: left」すること。
でもそうするとテキストがベースラインから回避できますが、
センターにはいかず、画像のトップと同じ位置に配置されます。

テキストが1行なら、反強制でPタグでくくって
「margin: top」で調整することもできるかと思いましたが、
2行分は設定したいのです。

ちなみに画像のサイズは指定しておりますが、
li自体には横幅の設定はしていますが高さ設定はしていません。
実質画像の高さが高さになることになります。

簡単にできることかと思っていたのですが、思いのほか苦戦しております。
ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキ...続きを読む

Aベストアンサー

いわゆるtableで言うところの、vertical-align="middle" ですよ。
難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style media="screen">
<!--
header nav ul{
list-style:none;
display:table;
border-collapse:separate;
border-spacing:3px;
width:200px;
margin:0 auto;
padding:0;
position:relative;
}
header nav ul li{
display:table-row;
}
header nav ul li a{
vertical-align:middle;
display:table-cell;
border:black 3px solid;
padding:2px 2px 2px 64px;
width:140px;
height:56px;
color:white;
background-color:black;
}
header nav ul li a:before{
position:absolute;
left:6px;
}
header nav ul li a[href="./a"]:before{content:url(./images/aa.gif);top:6px;}
header nav ul li a[href="./b"]:before{content:url(./images/bb.gif);top:75px}
header nav ul li a[href="./c"]:before{content:url(./images/cc.gif);top:144px}
header nav ul li a:hover{color:yellow;}
header nav ul li a:active{color:red;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="./a">あいうえおかきくけ</a></li>
____<li><a href="./b">こさしすせそたちつてとなにぬね</a></li>
____<li><a href="./c">のはひふへほ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
__<aside>
___<h2>Something aside</h2>
__</aside>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>

いわゆるtableで言うところの、vertical-align="middle" ですよ。
難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name=...続きを読む


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

人気Q&Aランキング