外部CSSでHPを作成しています。
基本的なことかと思いますが、調べてもどうしてもうまくいかないので
皆さまのお力をお貸しください。
左右にボックス(で良いのでしょうか?)を置き、その中にテキストを入れています。
それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。
固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。
どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか?
また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか?
どうぞご教授ください。
よろしくお願い致します。
/*CSSファイルの記述*/
.waku1{
border : solid 1px #999999;
border-bottom: none;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}
.waku2{
border : solid 1px #999999;
border-left: none;
border-bottom: none;
width :335px;
line-height: 160%;
word-break: break-all;
}
.waku3{
border : none;
border-bottom: solid #999999 1px;
border-top: solid #999999 1px;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}
.waku4{
border : none;
border-bottom: solid #999999 1px;
border-top: solid #999999 1px;
border-left: none;
border-bottom: none;
width :335px;
line-height: 160%;
word-break: break-all;
}
.clear{
clear : left;
}
/*HTMLファイルの記述*/
<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku1"></div>
<div class="waku2"></div>
<div class="clear"></div>
<div class="waku3"></div>
<div class="waku4"></div>
<div class="clear"></div>
No.6ベストアンサー
- 回答日時:
こんにちは
16pxということは1行分のスペースですね
<div class="clear">↓</div>
<div class="clear"></div>↓
他の</div>↓<div>の間
矢印の部分に全角スペースが入っていませんか?
もしくは<div class="clear"></div>にしているとか?
それ以外だとちょっと分からないので新規で質問してもらえますか?
コピペして作ってるならここのアドレスを貼り付けて
改変してるならご自身のソースをつけて
作成しているエディタ(ホームページビルダーとかNotePadとか)
利用ブラウザ(IE6とか)を添えて・・・
僕も理由が知りたいですので(^^)
何度もご回答ありがとうございます!
確認しましたがスペースはどこにも入っていないようでした。
leap_dayさんのアドバイス通り、新規で質問してみます。
まだ隙間の問題はありますが、ここまで来れたのもleap_dayさんのおかげです。
本当に色々とありがとうございました^^
No.5
- 回答日時:
こんにちは
サイトからprototype.js (1.6.0)をダウンロード(1.5.0 1.5.1でもバージョンが違うだけでほぼ同じです)
┣html(フォルダ)━test.html
┣css(フォルダ)━test.css
┗prototype.js
【test.css】
.waku1{
border : 1px solid #999999;
border-bottom: none;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}
.waku2{
border : 1px solid #999999;
border-left: none;
border-bottom: none;
width :335px;
float : left;
line-height: 160%;
word-break: break-all;
}
.waku3{
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
width :150px;
float : left;
background-color : #e8e8e8;
line-height: 160%;
}
.waku4{
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
width :335px;
float : left;
line-height: 160%;
word-break: break-all;
}
.clear{
clear : left;
}
【test.html】
<link rel="stylesheet" href="../css/test.css" type="text/css">
<script type="text/javascript" src="../prototype.js"></script>
<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] -1 + "px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] -1 + "px"; }
}
}
//--></script>
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1"></div>
<div class="clear"></div>
<div class="waku1" id="w2"></div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4"></div>
<div class="waku2" id="w5">antidisestablishmentarianism antidisestablishmentarianism</div>
<div class="clear"></div>
<div class="waku3" id="w6"></div>
<div class="waku4" id="w7"></div>
<div class="clear"></div>
で試してもらえますか?
>1px
floatしたものとそうでないものの間に出来る消せない(?)隙間です
またFirefoxやOperaではそうでないものがfloatの下に入り込んでwaku2、waku4のwidthが違うものになるみたいです
.waku2 .waku4にもfloat:left;を入れて下さい
>function内の『-1』
border分高さ取得のときに余分に足されてるみたいですので追加しました
>word-break: break-all;
これはIE専用なので一応注意してください
Firefox,Operaでは枠をはみ出して表示されるか手前で改行されます
id="w5"で長い単語を入れていますが
IEでは『antidisestablishment』で改行されますが
Firefox,Operaでは単語を1回ずつ2行で表示されます(→右に100pxほどの隙間が出来る)
>javascript使用の設定
javascriptの使用は許可していますか?
隙間が出るということはIEだと思うので
『ツール』『インターネットオプション』
『セキュリティ(タブ)』『レベルのカスタマイズ(ボタン)』
『スクリプト』『アクティブスクリプト』『有効にする』のラジオボタンはチェックされていますか?
ご回答ありがとうございます!
教えていただいたように、
test.cssとtest.htmlを作成して確認しました。
ものすごく近づいたようで、それぞれ左右の高さが合ってきました。
が、w1・w2とw3・w4などの上下に16pxの隙間ができてしまいました。
(キャプチャーをとってはかったのですが…)
それ以外は問題なさそうです。
左右の隙間もちゃんと埋まっていました。
この上下の隙間をどのようにしたらなくせますか?
どうかご教授ください。
よろしくお願いいたします。
No.4
- 回答日時:
こんにちは
色々やってみたのですがちょっと分かりかねますね・・・
<div class="clear"></div>があるのでid="w3"はid="w1"の下に配置されるはずなのですが・・・
[cgi-binなどのフォルダ]
┣htmlファイル
┣CSSファイル
┗prototype.js
になっていますよね?
外部CSSファイルのようなので以下の<link rel>の『href="●●.css』のみその外部CSSファイルの名前に変えて<body>内にコピペして試してみてもらえますか?(正規には<lin rel ~ //></script> は<head>内に入れるようになりますが<body>内に入れても機能はしますので)
※外部CSSファイルの中身は質問のものだけになってます
IE6,Firefox2,Opera9でいつも試しているのですが表示されてたのですが(--;)
<link rel="stylesheet" href="./●●.css" type="text/css">
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] +"px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] + "px"; }
}
}
//--></script>
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1"></div>
<div class="clear"></div>
<div class="waku1" id="w2"></div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4"></div>
<div class="waku2" id="w5"></div>
<div class="clear"></div>
<div class="waku3" id="w6"></div>
<div class="waku4" id="w7"></div>
<div class="clear"></div>
ご回答ありがとうございます。
お礼が遅くなり申し訳ありません。
教えていただいたコードを埋め込んだところ、今度は少し近づいたようです。
ファイルはフォルダごとに分けて格納してあり、
├index.html
├htmlフォルダ
├imagesフォルダ
├cssフォルダ
└prototype.js
となっています。
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div> ←ここと
<div class="waku2" id="w1"> </div> ←ここはすっきりきれいにできましたが、w2の枠線が下まできません
<div class="kaijo"></div>
<div class="waku1" id="w2"> </div> ←ここは右エリアの分heigthが伸びず、1行分のままです
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div> ←ここはきれいに3行分伸び、枠線も問題なく表示されました
<div class="kaijo"></div>
<div class="waku1" id="w4"> </div> ←ここと
<div class="waku2" id="w5"> </div> ←ここはきれいに表示されていますが、左エリアと右エリアの間に1px程度の隙間があります。
<div class="kaijo"></div>
<div class="waku3" id="w6"> </div> ←同上
<div class="waku4" id="w7"> </div> ←同上
<div class="kaijo"></div>
タイトルにしようと思っている左エリアには薄く背景色をつけているのですが、
w2は1行分しか色が着いていなく、また枠線も伸びていません。
上記が今現在の状況なのですが、ほかにどこを直せば良いでしょうか?
何度も申し訳ないのですが教えていただけるとうれしいです。
よろしくお願い致します。
No.3
- 回答日時:
> Aはタイトル、Bに文言と言う感じです。
> 理想はBに入れた文言の列分、Aのタイトルheightも伸びる
そりゃぁ、定義つきリスト(DL)でしょう。
DTの幅を指定して、それプラス間隔分をDDのleft-marginにする。それだけだ
と行がずれてるので、DDをrelativeで1em上に持ち上げる。でなけりゃ、float
させといてDDの後ろでclearする。
そんな感じで出来ますよ。論理的もAとBがきちんと対応して、一番読みやすい
はず。
ご回答ありがとうございます。
DLタグを使ったことがなく先ほど調べたのですが、
(http://www.tagindex.com/html_tag/list/dl.html)
細かい指定の方法が分かりません…。
こちらのサイトを見るとなんとなくできそうな気もするのですが、
(http://www.stylish-style.com/csstec/hi-level/dl- …)
>DDをrelativeで1em上に持ち上げる
がよく分かりません…。
もう少し詳しく教えていただけるとうれしいです。
よろしくお願い致します。
No.2
- 回答日時:
こんにちは
>テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか?
こちらの方はちょっと答えられませんが・・・(--;)
prototype.jsというのをダウンロードして(Archivesのところのを右クリックで『ファイルに保存』、htmlと同じフォルダに保存します)
http://www.prototypejs.org/download
【<style>~</style>は省略してます。付け加えてください】
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript"><!--
window.onload=function() {
idh= new Array();
for(i=0;i<8;i++) {
var item = $('w'+i+'');
var ret = Element.getDimensions(item);
idh[i]=ret.height;
}
for(i=0;i<4;i++) {
j=i*2;
k=j+1;
if(idh[j] < idh[k]) { document.getElementById("w"+j+"").style.height=idh[k] +"px"; }
if(idh[j] > idh[k]) { document.getElementById("w"+k+"").style.height=idh[j] + "px"; }
}
}
//--></script>
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
<div class="waku2" id="w1"></div>
<div class="clear"></div>
<div class="waku1" id="w2"></div>
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>
<div class="clear"></div>
<div class="waku1" id="w4"></div>
<div class="waku2" id="w5"></div>
<div class="clear"></div>
<div class="waku3" id="w6"></div>
<div class="waku4" id="w7"></div>
<div class="clear"></div>
のようにすればできると思います
<div>の数が増えれば『id="w●』を追加していって
for(i=0;i<8;i++) をその個数に変更(8の部分)
for(i=0;i<4;i++) を個数の半分に変更(4の部分)していけばいいと思います
ご回答ありがとうございます!
教えていただいたサイトからダウンロード・保存し、
<script language="JavaScript"></script>の間に書き込みました。
そしてその下にありました
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div>
から
<div class="clear"></div>をペーストしてみたのですが、
<div class="waku1" id="w0">id="w1"を<br>2行の高さに</div> ←ここはちゃんと2行の高さになりました。
<div class="waku2" id="w1"> </div>←ここは最初のwaku1の横に1行分の高さにくっつきました
<div class="clear"></div>
<div class="waku1" id="w2"> </div>←ここは最初のwaku1の横・waku2の下にくっつきました。(入り込んだ、という感じです)
<div class="waku2" id="w3">id="w3"を<br>3行の<br>高さに</div>←ここはwaku1の下に表示されたのですが、なぜか幅も広がっています。
<div class="clear"></div>
<div class="waku1" id="w4"> </div>←ここ以降は何も入っていないせいか、きれいに表示されています。
<div class="waku2" id="w5"> </div>
<div class="clear"></div>
<div class="waku3" id="w6"> </div>
<div class="waku4" id="w7"> </div>
<div class="clear"></div>
このように表が崩れているように見えるのはどうしてですか?
申し訳ないのですが、もう一度教えてください。
お返事が少し遅くなるかもしれませんが、
必ずお礼いたしますので、よろしくお願い致します。
No.1
- 回答日時:
縦に沢山。
横は2つ縦方向に見た時に1段ずつで左右を合わせたい
というなら
それの用途的には「表」になっているのではないだろうか。
表、それを実現する最も正しい方法は「table」タグを使う事。
因みに固定サイズでないのなら自動調整はjavascriptでも使わない限りは 今のところやりようが無いと思うよ。
そうです、そうです!
excelの表のようなものを作っています。
AとBを使って15行程度の表です。
Aはタイトル、Bに文言と言う感じです。
理想はBに入れた文言の列分、Aのタイトルheightも伸びる、です。
tableを使ってやっていたのですが、
文言を入れるとほかが崩れてしまうところがあって、
(作り方が悪いのかな…)
できればCSSですっきり作りたいなと思って質問させていただきました。
CSSで難しいようでしたらtableに戻してみます。
ご回答ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フッター上部に謎の隙間
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSS <div>の入れ子が反映さ...
-
チェックボックスの背景色って...
-
Ctrl+F(検索)の窓を出したいの...
-
htmlのstyleのposition:relativ...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
TABLEの高さを固定したいのですが…
-
SafariでもBGMを流す方法という...
-
youtubeをHPに載せたいです。
-
[CSS] 常にフッターは下部に表...
-
3点リーダーの作り方
-
Flickity で画像にリンクを貼る...
-
HTMLですCSSです この画像のよ...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで、リンクURLの一致を確...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報