テーブルを使えば、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と関連する良く見られている質問

QOutperform? Underperform?

Outperform? Underperform?

素朴でド素人な質問で恐縮です。
1.株の世界でoutperform、underperformと使いますね。株の世界は全く未知ですが、特定の銘柄の利回りが良くなりそうなときにoutperformといい、逆がunderperformと言うようですね。
その理解でよいのですね?

2.なんでoutperformのoutとunderperformのunderが対になるのでしょうかね?outとinの対、overとunderの対なら分かるのですが、お馬鹿な質問ですが、なんででしょうかね?

3.株以外にもこの言葉は使いますよね?どんな使い方しますか?

Aベストアンサー

outperform は 「抜きん出る」 という普通の使い方からの転用で、underperform の方は活動が鈍いという意味の語からの転用と思われます。
後者の場合、標準よりも 「下回る」 という意味合いがあると思われます。標準より上は 「普通」 の領域で、それに 「達しない」 ということを意識して under- が付いたものと想像します。
前者は、「普通」 の範囲を 「外れている」 というところから out- が付いたもので、両者は in と out とか、over と under とか、そういう対置の意識から用いられたのではないのだろうと考えます。

Q幅違うメニュー(リスト)、floatで横並びで背景画像でテキスト飛ばしたいが・・

お世話になります。

メニュー(リスト)のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。
マウスオーバーすると、画像がかわるようにしたいです。
どうか、何が問題なのか、教えてくださいませ。

★メニューのwidthは、全てちがいます。
★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。
 マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。
★リストは、横並びにしたい。

【HTML】

<div id="gNavi">
<ul>
<li id="01"><a href="#">メニュー1</a></li>
<li id="02"><a href="#">メニュ-2</a></li>
<li id="03"><a href="#">メニュ-3</a></li>
<li id="04"><a href="#">メニュ-4</a></li>
<li id="05"><a href="#">メニュ-5</a></li>
<li id="06"><a href="#">メニュ-6</a></li>
</ul>
</div>

【CSS】

#gNavi {
width:513px;
height:14px;
}
#gNavi ul{
list-style: none;
margin: 0;
padding: 0;
height: 14px;
overflow: hidden;
}
#gNavi li {
float:left;
margin:0;
padding:0;
}
#gNavi li a{
display:block;
height:100%;
width: 100%;
height: 0 !important;
height /**/: 14px;
background:url(../images/gNavi/gNav.gif) no-repeat;
text-decoration:none;
text-indent:-7777px;
}
#gNavi li a:hover{
background:url(../images/gNavi/gNav_ov.gif) no-repeat;
}
#gNavi li#01 a{ background-position: 0 0; width: 52px; }
#gNavi li#02 a{ background-position: -52px 0; width: 71px;}
#gNavi li#03 a{ background-position: -123px 0; width: 105px;}
#gNavi li#04 a{ background-position: -228px 0; width: 93px;}
#gNavi li#05 a{ background-position: -321px 0; width: 93px;}
#gNavi li#06 a{ background-position: -414px 0; width: 99px;}

#gNavi li#01 a:hover {background-position: 0 0;}
#gNavi li#02 a:hover {background-position: -52px 0;}
#gNavi li#03 a:hover {background-position: -123px 0;}
#gNavi li#04 a:hover {background-position: -228px 0;}
#gNavi li#05 a:hover {background-position: -321px 0;}
#gNavi li#06 a:hover {background-position: -414px 0;}


(何か、他に必要な情報があれば、言ってください!)

お世話になります。

メニュー(リスト)のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。
マウスオーバーすると、画像がかわるようにしたいです。
どうか、何が問題なのか、教えてくださいませ。

★メニューのwidthは、全てちがいます。
★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。
 マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。
★リストは、横並びにしたい。

【HTML...続きを読む

Aベストアンサー

#gNavi li a{(省略)}の定義に不適当なものがあるからだと思われます。

#gNavi li a{
(省略)
height: 0 !important;
height /**/: 14px;
(省略)
}

これだと、結果として<a>の高さは0になってしまい、背景画像が表示される領域がなくなってしまいます。
おそらく、質問者様は「テキストを表示させない」という別々の手法の2種類をごちゃ混ぜにした上で必要な部分を削除してしまったのではないかと思われます。"#gNavi li a"に対して"text-indent:-7777px;"を定義済みですから、これでテキストは表示領域から追いやられます。一方、上記の様にheightの高さを無くして表示させなくする手法をとった場合には、なくなった高さの替わりに上方向への余白としてpadding-topに高さと同じ値を与えてやらねばなりません。質問者様の定義では肝心のpadding-topの定義が抜けてしまっていますし、もとよりtext-indentでテキストの表示対策をしているので、上記の定義自体が不要です。ちなみに、text-indentのマイナス値はテキストに対してのみ有効、背景画像には無関係ですので、この定義自体は本件の不具合とはなりません。

上記の箇所を削除するだけでも不具合はなくなりますが、ちょっと無駄な構成・定義になっているので、できるだけシンプルになる様、改良してみたサンプルです。id名はNo.1の回答者様ご指摘の通り、頭に"N"をつけて数字で始まらない様に変更してあります。
表示確認はIE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XPです。サンプルの通り書式はXML宣言有り、エンコーディングはEUC-JPです。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!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" href="./css/common.css" type="text/css" media="all" />
<title>サンプル</title>
</head>

<body>

<ul id="gNavi">
<li id="N01"><a href="#">メニュー1</a></li>
<li id="N02"><a href="#">メニュ-2</a></li>
<li id="N03"><a href="#">メニュ-3</a></li>
<li id="N04"><a href="#">メニュ-4</a></li>
<li id="N05"><a href="#">メニュ-5</a></li>
<li id="N06"><a href="#">メニュ-6</a></li>
</ul>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
ul#gNavi{
width: 513px;
height: 14px;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul#gNavi li {
float: left;
margin: 0;
padding: 0;
}
ul#gNavi li a {
display: block;
width: 100%;
height: 100%;
background: url(../images/gNavi/gNav.gif) no-repeat;
text-decoration: none;
text-indent: -7777px;
}
ul#gNavi li a:hover {
background:url(../images/gNavi/gNav_ov.gif) no-repeat;
}
(以下の指定はオリジナルのままでよいので省略)
----------------------------------------------------------------------
div#gNaviの領域が子要素ulと全く同じなので、ulに直接幅と高さを定義すればdivは不要となり、HTMLのマークアップもCSSの定義もすっきりします。

こういうテキストを非表示にさせる技の様な、ちょっとひねった仕掛けを使う場合は、まず「どういう理屈でそうなっているのか」を理解してからでないと、ぐちゃぐちゃになるだけですよ。その気になればいろんなところから凝ったレイアウトのサンプルを持ってこれるお手軽な時代ですが、ただコピペして使えばいい、というものではないのできちんと「理屈」を勉強なさって下さい。

#gNavi li a{(省略)}の定義に不適当なものがあるからだと思われます。

#gNavi li a{
(省略)
height: 0 !important;
height /**/: 14px;
(省略)
}

これだと、結果として<a>の高さは0になってしまい、背景画像が表示される領域がなくなってしまいます。
おそらく、質問者様は「テキストを表示させない」という別々の手法の2種類をごちゃ混ぜにした上で必要な部分を削除してしまったのではないかと思われます。"#gNavi li a"に対して"text-indent:-7777px;"を定義済みですから、これでテキストは表...続きを読む

Qbeneathとunderの違いがどうしてもわかりません。

beneathとunderの違いがどうしてもわかりません。解説書によって書いてることが違うのはなぜ?ですか。
「この建物の地下には徳川秘宝が眠っている」の文でなぜbeneathなのでしょうか?underじゃだめですか?
「あの看板の下に立ってる人だよ」のときなぜbeneath?
underじゃだめですか?
それと、underneathもあります。これはunderとどう違いますか?

Aベストアンサー

このような場合、大型辞典と英英辞典を調べるのが一番よいと思います。また、類語辞典や用例辞典で例文をあたり、理解を深めるようにするといっそう効果的です。また例文がある場合は、その例文が持っている意味合いはすべて用法に反映されているものとして、活用できます。「under a tree」という例文があったとき、「木の枝の下で枝に覆われて」という意味がunderの理解の手助けとして含まれています。

以下、参考になりそうな辞書をリストしましたので、図書館などで調べられてはいかがでしょうか。
1. Collins COBUILD English Dictionary for Advanced Learners (輸入CD ROM版)
2. Oxford Advanced Learner’s Dictionary (OALD: オックスフォード現代英英辞典[開拓社])
3. Practical English Usage (オックスフォード実例現代英語用法辞典[研究社出版])
4. Webster’s New Dictionary of Synonyms (ウエブスター同義語辞典[丸善])

4で[below]の項を引くと次のようにでています。(原文は英文ですので要訳してあります)

Below, under, beneath, underneath は、他のものあるいは他の位置にくらべて相対的に低い位置にあることを意味する。

Below(aboveの反対語)は、直下に限らずある物よりも低いところに位置している物に用いる。

Under(overの反対語)は、上下方向の意味で下のほう(below)にある物に用い、その物が他の何物かによって覆われているという含みがある。

Beneathはbelowとunderのいずれとも同等の意味である。

Underneathはunderやbeneathの代わりに用いられることが多い。ただし全面的ないしはほぼ全面的な隠蔽状態を暗示したい場合に、underneathを使うのが望ましい。

これから見ますと、underで表した徳川財宝はその足許だけに存在するような感じになります。これをbeneathで表せば「この下一帯に(広がって)存在している」というニュアンスになるのではないでしょうか。看板の下の人は、underでもよいと思いますが、underの「上下方向での下」を嫌ってbeneathにしたのではないでしょうか。

以上ご参考になれば幸いです。

このような場合、大型辞典と英英辞典を調べるのが一番よいと思います。また、類語辞典や用例辞典で例文をあたり、理解を深めるようにするといっそう効果的です。また例文がある場合は、その例文が持っている意味合いはすべて用法に反映されているものとして、活用できます。「under a tree」という例文があったとき、「木の枝の下で枝に覆われて」という意味がunderの理解の手助けとして含まれています。

以下、参考になりそうな辞書をリストしましたので、図書館などで調べられてはいかがでしょうか。
1. Col...続きを読む

Qdivをfloatを使って横に配置するときの隙間;;

divとdivをfloatを使って横に並べて配置したのですが
5pxくらいの隙間ができてしまいます
{margin:0;}では変化ないのですけど
テーブルを使って配置しない限り、隙間は消えませんか?

Aベストアンサー

<div>のかわりに<span>を使ってみるとかどうですか?

divはブロック要素ですが、spanはインライン要素なのでちょいと振る舞いが違います。

あと、前後に改行とかスペースとかが入ってると駄目な場合もあります。
一つ目の要素の</div>と二つ目の<div>を並べて書くといいかも。

Qunderをどう訳すか?

You are under no obligation to buy this.

この英文は、「あなたはこれを買う義務がない」というニュアンスだと思うのですが、
underをどう訳すかがひっかかります。
underをどう訳しますか?

Aベストアンサー

under an obligation to ~
で、「~する義務がある」という熟語になっているようです。

それはわきへ置いておいて、ガチガチの直訳をすると、

あなたは、これを買うべき義務のもとにはいない。

まあ、ふつう、こんな表現はしないでしょうけれどね。

Qfloatで左と右の長さを揃えたい!

CSSでFLOATを使って、左(サイド)と右(メイン)を作成しました。
複数のhtmlがあり、内容によってメインの長さ(height)が違います。

(1)メインの長さに合わせてサイドの長さを揃えたいのですが、
ひとつのCSSで出来ますか?

お分かりになる方ご教授下さい。
よろしくお願いしますm(_ _)m

Aベストアンサー

CSSだけでも出来ない事もないのですが、jsでやる方が簡単なのでその方法を紹介します。

下記サイトがそのjsをダウンロード出来るサイトです。
http://blog.webcreativepark.net/2007/07/26-010338.html

デモページつきで解説してくれてるサイト
http://css-happylife.com/log/javascript/000170.shtml
http://www.css-lecture.com/log/javascript/001.html

上記サイトのどれか見たら直ぐに使い方は分かると思います。

Qunderの使い方

Mr.Jackson woke up early to ensure that he would start his day ( ) schedule.

(A) before (B) ahead of (C) advance (D) under

答えは(B)ahead of です。

(B) と迷って(D) のunderでスケジュールのもとに みたいに捉えてDにしてしまいました。
何故、underだと不適合なのかご教授いただきたくお願いします!!

Aベストアンサー

出題者はおそらく under schedule を選ぶ者がいるのではないかという予想を持って選択肢に入れたのではないかと思います。
ahead of schedule は schedule という語にまつわる表現の1つです。

「予定どおり」 なら on schedule
「予定より遅れて」 なら behind schedule
「予定より早く」 なら ahead of schedule

これらはいわば3点セットです (辞書にもこの3つは出ていると思います)。
英語を母国語とする人たちはそれら3つを場合に応じて使い分けているわけで、我々はそれを覚えるしかありません (無理やり、存在しない表現を作り出すつもりなら話は別ですけれども、テストの場合には実際に用いられている表現に従うしかないでしょう)。

「スケジュールのもとに」 つまり 「スケジュールにのっとって」 という意味の文にしようとすれば、on schedule という表現を選ぶことになりますが、その選択肢はないので、改めて考えてみると、「早起きした」 ということから、「予定より早め」 という意味の文ではないか、と考えると、ahead of schedule という表現がそれに合うし、選択肢にもあるということで (B) が正解ということになります。

出題者はおそらく under schedule を選ぶ者がいるのではないかという予想を持って選択肢に入れたのではないかと思います。
ahead of schedule は schedule という語にまつわる表現の1つです。

「予定どおり」 なら on schedule
「予定より遅れて」 なら behind schedule
「予定より早く」 なら ahead of schedule

これらはいわば3点セットです (辞書にもこの3つは出ていると思います)。
英語を母国語とする人たちはそれら3つを場合に応じて使い分けているわけで、我々はそれを覚えるしかありません (無理...続きを読む

Qdiv要素の左寄せ、中央寄せ、右寄せについて教えて下さい

ホームページを作っています。
今、更新履歴を表示するボックスを作りました。

<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div>

このように作っています。
これを中央寄せさせたいのですが、うまく中央寄せされません。
方法を教えて下さい。よろしくお願いいたします。

Aベストアンサー

外枠は、ページ内で中寄せ
枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ

<style>
aside.diary { overflow:auto; width:300px; height:100px; border:thin solid gray; }
aside.diary { display:block; margin:0 auto; } /* 外枠を中寄せ */
aside.diary { text-align:center; } /* 枠内の文章を中寄せ */
aside.diary ul { list-style:none; padding:0; margin:1ex; }
aside.diary ul li { text-align:left; } /* 箇条書きを左寄せ */
</style>

<aside class=diary>
<b>探査機日程</b>
<ul>
<li>2015-07-14 : 冥王星に接近
<li>2014-08-25 : 海王星軌道を通過
<li>2011-03-18 : 天王星軌道を通過
<li>2008-06-08 : 土星軌道を通過
</ul>
</aside>

外枠は、ページ内で中寄せ
枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ

<style>
aside.diary { overflow:auto; width:300px; height:100px; border:thin solid gray; }
aside.diary { display:block; margin:0 auto; } /* 外枠を中寄せ */
aside.diary { text-align:center; } /* 枠内の文章を中寄せ */
aside.diary ul { list-style:none; padding:0; margin:1ex; }
aside.diary ul li { text-align:left; } /* 箇条書きを左寄せ */
</style>

<aside class=diary>
<b>探査機日程</b>
<ul>
<li>...続きを読む

QUnder no circumstances can we lose the next game.

Under no circumstances can we lose the next game.
「どんなことがあっても、今度の試合に負けるわけにはいかない」

という例文がありました。

これは、
Under no circumstances / can we lose the next game.
の / の位置で切って考えれば良いのでしょうか?
(読むときは、そこで少し間を空けるのでしょうか?
 書くとき、カンマをつけても良いのでしょうか?)

また、その場合、can we となっているのは強調の倒置ですか?

もしそうなら、
Under no circumstances we can lose the next game.
でも正しいですか?
それとも、Under no circumstances とくれば、
can we と続くのが自然な流れですか?

宜しくお願いいたします。

Aベストアンサー

単なる強調ではなく、「否定的な語が文頭に現れたときの倒置」です。
詳しくは「否定 倒置」で検索すれば山のような説明が出てくるでしょう。
ここでは簡単な例だけ挙げておきます。

1.否定語が文頭に来る
I have never been to America.
 → Never have I been to America.
Not a single paper did he write.
「論文は一本も書かなかった」

2.否定的な語が文頭に来る
I seldom saw her.
 → Seldom did I see her. 彼女に会うことはめったになかった.
Only later did she realise what had happened.
「何が起きたか気づいたのは後になってからだった」

Q横スクロールを右から左へ・・・

すみません。以前過去ログで見つけたと思ったのですが
見つけられなかったため新しく質問させていただきます。

横に長いHPを作成するとき、普段は左から右にスクロールして
全体を見ていくという形になっていますが、それをページを開いた
時に一番右側の画面が表示されて、そこから左にスクロールさせて
全体を見ていくという構成にしたいと思ってます。

そのようなことはできるのでしょうか??
よろしくお願いします。

Aベストアンサー

JavaScriptを使えばできますよ。
試しにサンプルを作ってみました。

■スクリプト
<SCRIPT LANGUAGE="JavaScript">
<!--
function GoRight ()
{
window.scroll(1000, 0);
}
//-->
</SCRIPT>

■<BODY>タグ
<BODY onLoad="GoRight()">

あとは

window.scroll(1000, 0);

の部分をseapassionさんのデザインされたサイトのサイズに合わせて変更するだけです。
()内は、それぞれX座標とY座標のスクロール値です。


人気Q&Aランキング