最大35,000円進呈!IPoEはOCN光

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="left">

</div>
と、
<div class="right">

</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。

ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか?
詳しい方がいましたら、よろしくお願いします。

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

A 回答 (3件)

幅を設定しましょう。


今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・

問題点:
1、トップ画像よりも大きな枠にする。または、画像を小さくする。
2、メイン=レフト+ライトの幅に収まるようにする。

1、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px; ではなく、 width: 800px; 程度にしましょう。

2、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}

左width: 400px;+右width: 400px;=合計800px ←この値より小さくする事。
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございます。とても参考になりました。

お礼日時:2012/11/22 17:46

他の方への回答と混同していました。


先に示した回答のように
<div class="section">
 <div class="section">
  <h3>見だし</h3>
   ・・・・・
 </div>
 <div class="section">
  <h3>見だし</h3>
   ・・・・・
 </div>
</div>
として、
div.section{position:relative;}
div.section div.section{
width:50%/* 49%くらいのほうが良い */
float:left;
}
33%以下にすると、三つ並びますし、最小幅を決めておくとウィンドウ幅によって横に並んだり縦に並びます。
float:leftに続いてfloat:right;は、とってもまずいです。
説明済みです。

.left と言う書き方はCSS1の時代の名残です。CSS2以降は、基点となるセレクタにつなげるセレクタを書くことになっています。
div.section ----- これは、要素セレクタdiv[class~=section"]と同じ意味
と書くのがルールです。
.sectionは、*.sectionを省略したものとみなされるだけです。もし書くなら
*.sectionとかく癖をつけましょう。
 断然その方がわかりやすいはずです。
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございます。とても参考になりました。

お礼日時:2012/11/22 17:45

先に回答しました。


CSSのセンタリングが、「div」で何故か出来ない - ホームページ作成ソフト - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7786505.html#a2 )
のサンプルHTMLを試してください。

float:leftをいずれにも指定するほうが良いです。

 これでうまく表示されるなら、他のところに原因があります。
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございます。とても参考になりました。

お礼日時:2012/11/22 17:45

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

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

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

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

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の方も修正する方法でもよけ...続きを読む

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSのセンタリングが、「div」で何故か出来ない

下記のアドレスのホームページについてです。
http://sky.geocities.jp/thanksv0358/index.html#
HTMLで、

<body>
<div id="main">

</div>
</body>

とし、CSSで

#main{
text-align:center;
margin-left:auto;
margin-right:auto;
text-align:left;
}

としたにもかかわらず、何故かセンタリングができません。
今回、最初の<!DOCTYPE~の部分から全部、自分で書いてみました。
詳しい方がいましたら、よろしくお願いします。

Aベストアンサー

HTMLを書いたら、まずAnother HTML Lintなどでチェックしておきましょう。
HTMLが間違っていると、期待したスタイルが適用されません。
★さすがに、今日この頃---strictで作成しましょう。Transitionalやframesetは使わない。
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」---1999年勧告

HTMLにとても多くの間違いがあります。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<mata>じゃなくて<meta>です。

※text-alignはテキストの配置です。ブロックは配置されません。(IE6にはバグもmargin:0 autoでは中央になりませんから、昔はやむなく、IEのバグtext-alignでブロックが中央に配置されてしまうを利用していました。

[HTML4.01strict+CSS2.1]
★ウィンドウ巾に関わらず常に中央に表示されます。subsectionはスマホなど小さなディスプレイでは縦に並びます。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でチェック済み
タブは_に置換してあるので戻すこと。
#mainとかleftとかrightは使うべきじゃありません。先で左右を変えてくなったらどうするのですか?

<!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>サンプル0</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: #FF99CC;}
div.header,div.section,div.footer{
width:70%;margin:0 auto;min-width:0;
}
p.pr img{width:100%;height:auto;display:block;}
div.section div.section{width:50%;float:left;min-width:200px;}
div.footer{clear:left;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>大見出し</h1>
__<p>四季折々の品をお届けします。</p>
__<p class="pr"><img src="/images/1.jpg" width="787" height="300" alt=""></p>
_</div>
_<div class="section">
__<h2>What's New</h2>
__<ul>
___<li>12/11/07 モダン特集のページを追加しました。</li>
___<li>12/11/01 ラテン特集のページを追加しました。</li>
___<li>12/10/24 ポイントレッスンを追加しました。</li>
___<li>12/09/16 写真を更新しました。</li>
___<li>12/08/30 「ポジションについて」を更新しました。</li>
__</ul>
_</div>
_<div class="section">
__<h2>今月のおすすめ</h2>
__<div class="section">
___<h3>見出し3</h3>
___<p>「ウォーク」集中レッスン期間</p>
___<p>体重をしっかりと移動させましょう。</p>
___<div class="section">
____<h4>フィガー</h4>
____<ul>
____<li>オープン・ヒップ・ツイスト</li>
____<li>アイーダ(フォールアウェイ)</li>
____<li>アドバンスド・ヒップ・ツイスト</li>
____<li>クカラチャ</li>
____<li>ロープ・スピニング</li>
____<li>フェンシング</li>
____<li>リバース・トップ</li>
____<li>オープニングアウト・フロム・リバース・トップ</li>
____<li>キューバン・ロックス</li>
____<li>サイド・ステップ</li>
____<li>オープニングアウト・トゥー・ライト・アンド・レフト </li>
____</ul>
___</div>
__</div>
__<div class="section">
___<h3>見出し3</h3>
___<p>しっかりとリズムに乗りましょう。</p>
___<div class="section">
____<h4>フィガー</h4>
____<ul>
_____<li>クローズド・チェンジ</li>
_____<li>ナチュラル・ターン</li>
_____<li>リバース・ターン</li>
_____<li>コーナー・チェンジ(チェック・バック)</li>
_____<li>アウトサイド・チェンジ</li>
_____<li>ヘジテーション・チェンジ</li>
_____<li>ナチュラル・スピンターン</li>
_____<li>ウィスク</li>
_____<li>バック・ウィスク</li>
_____<li>シャッセ・フロム・PP</li>
_____<li>ベーシック・ウィーブ </li>
____</ul>
___</div>
__</div>
_</div>
_<div class="footer">
__<address>&copy; Copyright (c)2012 TITLE. ALL Right Reserved. mailto:*****</address>
_</div>
</body>
</html>

HTMLを書いたら、まずAnother HTML Lintなどでチェックしておきましょう。
HTMLが間違っていると、期待したスタイルが適用されません。
★さすがに、今日この頃---strictで作成しましょう。Transitionalやframesetは使わない。
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」---1999年勧告

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 {

にするだけ

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

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 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング