痔になりやすい生活習慣とは?

HTMLで箇条書きタグ
<ul>
 <li>箇条書き一列目</li>
<li>箇条書き二列目</li>
<li>箇条書き三列目</li>
</ul>

のタグをブラウザで見てみると

 ・箇条書き一列目
 ・箇条書き二列目
・箇条書き三列目

と、いうように三列目がずれてしまっています。三列目がずれないようにしたいと思っています。
タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。
どなたか教えていただけたらと思います。

A 回答 (4件)

提示いただいたソースでも、ずれなかったです。


考えられるのは、やっぱりfloatだと思うんですけど、
ページ全体のレイアウト等でのfloatは使っていませんか?
*html*
<div style="float:left;">

*css*
{float: left}

【例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
html,body{height: 100%;}

#zentai {height: 100%;}

#b {
width:30%;
background-color: silver;
float: left;
}

#c {
margin-left: 30%;
background-color: #e8e8e8;
}

dl.aaa {
margin: 0em 0em 3em 1em;
}
dl.aaa dt{
background: #aaa url(../common_images/b.gif) no-repeat left center;
padding: 0px 0px 0px 10px;
margin: 0.5em 0em 0em 0em;
}
dl.aaa dd{
border-bottom: 1px dashed #808080;
padding: 0em 0em 0.5em 0em;
}
dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #0000ff;
}
dl.aaa a{
color: #808080;
}
-->
</style>
</head>
<body>
<div id="zentai">
<div id="b">
<p>えへへ</p><p>えへへ</p>
</div>
<div id="c">
<dl class="aaa">
<dd>
<ul>
<li><a href="quality.html#qi1">箇条書き一行目</a></li>
<li><a href="quality.html#qi2">箇条書き2行目</a></li>
<li><a href="quality.html#qi3">箇条書き3行目</a></li>
<li><a href="quality.html#qi4">箇条書き4行目</a></li>
<li><a href="quality.html#qi5">箇条書き5行目</a></li>
<li><a href="quality.html#qi5">箇条書き6行目</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
この場合、箇条書き5行目からずれていると思います。

#b {
width:30%;
background-color: silver;
float: left;
}
これにheight: 100%;を足すとずれが無くなります。
一度ご確認ください。
    • good
    • 0
この回答へのお礼

上記コードを解析し、cssと照らし合わせてみたら解決しました。
左側にあるフレームのfloatにheight;900px;とつけたし、プレビュー画面とにらめっこしましたら、ずれがなくなりました。
ほんとに有難うございます。
ここまで丁寧に付き合っていただき、感謝しております。

お礼日時:2006/05/10 10:44

#2の訂正です・・・。



</dd>が抜けているのと、

dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #999999;
}
この部分を自分の見やすい色に変更したまま載せてしまいました・・・。

この回答への補足

#2の補足の訂正です。

1)
<dt><a href="ranking.html">あああ</a></dt>
<dd></dd>

は、関係がないタグです。

2)
<li><a href="quality.html#qi4">箇条書き4行目a></li>
”箇条書き4行目”を記入するときに</a>を書き間違えました。

補足日時:2006/05/09 13:44
    • good
    • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html lang="ja">
<head>
<title></title>
<style type="text/css">
<!--
dl.aaa {
margin: 0em 0em 3em 1em;
}
dl.aaa dt{
background: #aaa url(../common_images/b.gif) no-repeat left center;
padding: 0px 0px 0px 10px;
margin: 0.5em 0em 0em 0em;
}
dl.aaa dd{
border-bottom: 1px dashed #808080;
padding: 0em 0em 0.5em 0em;
}
dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #999999;
}
dl.aaa a{
color: #808080;
}
-->
</style>
</head>
<body>
<dl class="aaa">
<dt>
<dd>
<ul>
<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
<li>箇条書き三列目</li>

~略~

<li>箇条書き二十二列目</li>
</ul>
</dt>
</dl>
</body>
</html>

このような形ってことですよね?
私のほうでは、ずれることなくきちんと表示されるので
違うところに原因があるかもしれません。。。
実際のHTMLのほうのソース(ul部分)も教えていただけるともうちょっと原因追求できるかもしれません。

この回答への補足

先ほどの補足から迅速なご回答に感謝しております。ありがとうございます。ソース部分を載せさせていただきます。

<dt><a href="ranking.html">あああ</a></dt>
<dd></dd>

<dt><a href="quality.html">いいい</a></dt>
<dd>
<ul>
<li><a href="quality.html#qi1">箇条書き一行目</a></li>
<li><a href="quality.html#qi2">箇条書き2行目</a></li>
<li><a href="quality.html#qi3">箇条書き3行目</a></li>
<li><a href="quality.html#qi4">箇条書き4行目a></li>
<li><a href="quality.html#qi5">箇条書き5行目</a></li>
<li><a href="quality.html#qi6">箇条書き6行目</a></li>
<li><a href="quality.html#qi7">箇条書き7行目</a></li>
<li><a href="quality.html#qi8">箇条書き8行目</a></li>
<li><a href="quality.html#qi9">箇条書き9行目</a></li>
<li><a href="quality.html#qi11">箇条書き10行目</a></li>
<li><a href="quality.html#qi12">箇条書き11行目</a></li>
<li><a href="quality.html#qi13">箇条書き12行目</a></li>
<li><a href="quality.html#qi14">箇条書き13行目</a></li>
<li><a href="quality.html#qi15">箇条書き14行目</a></li>
<li><a href="quality.html#qi17">箇条書き15行目</a></li>
<li><a href="quality.html#qi18">箇条書き16行目</a></li>
<li><a href="quality.html#qi19">箇条書き17行目</a></li>
<li><a href="quality.html#qi20">箇条書き18行目</a></li>
<li><a href="quality.html#qi21">箇条書き19行目</a></li>
<li><a href="quality.html#qi24">箇条書き20行目</a></li>
<li><a href="quality.html#qi25">箇条書き21行目</a></li>
<li><a href="quality.html#qi26">箇条書き22行目</a></li>
</ul>
</dd>

補足日時:2006/05/09 13:32
    • good
    • 0

floatを使っていますか?


左側のブロックが右側のブロックに流れ込むとリストも流れ込んで、このようにずれることがあります。

右側のブロックのmargin-left、または左側ブロックのheightを一度調整してみてください。

この回答への補足

ご回答ありがとうございます。
floatはこのCSSでは使っていないようです。
このようになっています。
---以下ソースです---
dl.aaa {
margin: 0em 0em 3em 1em;
}
dl.aaa dt{
background: #aaa url(../common_images/b.gif) no-repeat left center;
padding: 0px 0px 0px 10px;
margin: 0.5em 0em 0em 0em;
}
dl.aaa dd{
border-bottom: 1px dashed #808080;
padding: 0em 0em 0.5em 0em;
}
dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #0000ff;
}
dl.aaa a{
color: #808080;
}
---
margin padding の値を調整すればよいのでしょうか。
よろしければまたご回答お願いします。

補足日時:2006/05/09 10:22
    • good
    • 0

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

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

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

Qリストマークの位置がずれている リストの文字が複数行になった時

IEとfirefoxで、リストマークの見え方が違ってしまってます。

例えば、
http://fortunehills.web.fc2.com/
のページにリストの表示があります。


画面左上に
「2009/6/30 火曜日」とありその下に、
株式のチャートアイコンがあり、その上にマウスを乗せるとズラリとリストがでます。
そのリストの2番目
「日興コーディアル証券|オンライントレード(日興イージートレード) 」というのがあり2行になってます。

で、そのリストマークが2行目の横に来てしまってます。下揃えになってます。


他にも、同じURLの
news内の「perfumelab」のリストマークも下揃えになてます。


IEで見ると下揃えなのですが Firefoxでみると、上揃えです。
IEでも上揃えにするには、どのようにするのが良いのでしょうか?

原因などが何かあるのでしょうか?

Aベストアンサー

下記の全称セレクタで"zoom: 1;"が指定されている事が原因みたいですね。

* {
margin:0;
padding:0;
zoom:1;
}

これがあることで、リストの複数行に渡るアイテムの場合、マーカーが下付になってします様です。これを外すと意図通り表示されます。
このzoomプロパティはIEの独自拡張の為、Firefox等では元々無視されています。

あとこれは余計なお世話ですが、

ul {
margin:0px;
padding:15px;
list-style-type:disc;
list-style-position:;
}

最後のlist-style-positionプロパティの値が空になっています。初期値を適用するなら、(今の指定は無意味ですので)プロパティごと削除しておくべきですね。
No.1の方も少し触れていますが、そのご指摘部分を初めとしてHTMLの構造にはかなり色々突っ込みどころがありますので、一度文法チェッカーにかけるなどして基礎から見直されてみた方がよろしいかと思います。

下記の全称セレクタで"zoom: 1;"が指定されている事が原因みたいですね。

* {
margin:0;
padding:0;
zoom:1;
}

これがあることで、リストの複数行に渡るアイテムの場合、マーカーが下付になってします様です。これを外すと意図通り表示されます。
このzoomプロパティはIEの独自拡張の為、Firefox等では元々無視されています。

あとこれは余計なお世話ですが、

ul {
margin:0px;
padding:15px;
list-style-type:disc;
list-style-position:;
}

最後のlist-style-positionプロパテ...続きを読む

Qリストに指定したマークの位置がずれてしまいます

特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。
safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。
リストマークのサイズは20×20です。

マークをlist-style-type: square;などにすると普通に表示されます。
非常に困っています。宜しくお願いします。

<style type="text/css">
<!--
body {
background-color: #333333;
background-image: url(images/left_background.jpg);
background-repeat: repeat-y;
width: 150px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FF6600;
text-decoration: none;
}
a:hover {
color: #FFCC00;
text-decoration: underline;
}
a:active {
color: #990000;
text-decoration: none;
}
-->
</style>

<style type="text/css">
<!--
ul {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
line-height: 40px;
font-size: large;
font-weight: bold;
list-style-image: url(images/arrow.gif);
list-style-position: outside;
}
#base {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
}
-->
</style>
<link rel="shortcut icon"href="/images/favicon.ico" />
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
.style24 {font-size: x-large}
-->
</style>
</head>

<body>
<div id="base">
<ul>
<li> <a href="main.html" target="mainFrame">Home</a></li>
<li> <a href="image.html" target="mainFrame">Image</a></li>
<li> <a href="flash.html" target="mainFrame" >Flash</a></li>
<li> <a href="logic.html" target="mainFrame" >Music</a></li>
<li> <a href="link.html" target="mainFrame"> Link</a></li>
</ul>
</div>
</body>

特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。
safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。
リストマークのサイズは20×20です。

マークをlist-style-type: square;などにすると普通に表示されます。
非常に困っています。宜しくお願いします。

<style type="text/css">
<!--
body {
background-color: #333333;
background-image: url(images/left_background.jpg);
background-rep...続きを読む

Aベストアンサー

list-style を、やめて background での表示ではダメでしょうか。

ul {
font-size: large;
font-weight: bold;
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}

li {
padding: 0 0 20px 40px;
background: url(images/arrow.gif) no-repeat 10px 2px;
}
/*
padding 20px の調整で line-height の代用、40px の調整で左からの位置を変えれます。
background 10px 2px の調整で画像の表示位置を変えれます。
*/

上記の方法がいやなら、無視してください。

Q箇条書きがずれて表示されてしまいます。

箇条書きで表される点がずれる(liタグ)
質問者:shige077 HTMLで箇条書きタグ
<ul>
<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
 ・・・
<li>箇条書き二十二列目</li>
</ul>

のタグをブラウザで見てみると

 ・箇条書き一列目
 ・箇条書き二列目
 ---(省略)---
 ・箇条書き二十一列目
・箇条書き二十二列目

と、いうように一番下の列がずれて表示されてしまっています。ずれないようにするにはどうしたらいいでしょうか。
タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。
どなたか教えていただけませんか?

Aベストアンサー

例えば、li要素がul要素の外に出てしまっていたり、HTMLに何らかの記述ミスがある可能性が高いと思います。
もう一度ソースを確かめてみてください。

CSSのfloatプロパティの指定された要素によって、ul要素が回り込んでいると(厳密には回り込みではないが)、そのような現象が発生するかもしれません。

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テーブル内の文字サイズを変更したい。

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

Aベストアンサー

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

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

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

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

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

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

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横並びdivで一部の初期高さがずれる理由について

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100px; height:33px;}
#test3{ width:100px; height:33px;}
#test4{ width:100px; height:33px;}
#test5{ width:250px; height:33px;}
#Form input{
margin:auto 0px;
font-size: 70%;
width: 150px;
}
#Form button{ font-size: 70%; width: 50px; }

[html]
<div id="hoge">
<div id = "head">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5">
<form id = "Form">
<input name="list"/>
<button>テスト</button>
</form>
</div>
</div>
</div>

この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。
また、divとdivの間に余計な隙間が作られてしまいます。
ここで分からないことは、
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?

等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100...続きを読む

Aベストアンサー

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lint

 lintの良いところは、理由と対策も示してくれる。それを読まなきゃダメです。芋づる式に色々な知識が見につきます。
 欠点は、文法上の誤りは指摘してくれるが、根本的なマークアップ自体はチェックしてくれない。例えば、
 <div><a href="/">トップ</a></div>
 <div><a href="/product">製品</a></div> 
 <div><a href="/manual">マニュアル</a></div>
はエラーにならない。「これはナビゲーションですし、並列な情報が並んでいるので順不同リストでマークアップするほうがよい」・・・なんては言ってくれないです。

>その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、をあらかじめ分かるようになっておきたい
 もっとも早いのは、仕様書を徹底的に読んでおくこと。すくなくとも全体の流れとどこを調べればよいか位は・・・。急がば回れ、変な「付け焼刃」で積み上げていくより、根本を理解してからのほうが圧倒的に上達は早いです。

>DIVで並べる想定の箇所がOL/LIに変わっておりますが、inline-block化してDIVを並べることそのものに問題があるということでしょうか?

★HTMLでこれが最も大事な--最重要なポイントなのです。
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 2)『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 DIVは、「文書の構造を補完するため」であって、「デザインのため」じゃありません。
 ところが、あなたが参考にされた多くのサイトのように実際には「デザインのため」に使用されている例がとても多い。理解されてこなかった!!。そのために
 3)『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
  そして、「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」(--著者は他により適切な要素がないときの最後の最後の手段としてDIV要素を使用することを強く推奨する。)
  となります。

 よって
>DIVで並べる想定の箇所が
 はHTMLを作成する上で最も犯してはならない誤りなのです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 どのようにプレゼンテーションするかはスタイルシートに任せて、ここはナビゲーションリストだから、そのようにマークアップするべき。
 誤解されないように!!断じてきれいに横に並べるというデザインのために「<div>ではなく<li>を使っている」わけではありません。・・・結果はそうであっても・・・DIVでも可能です。

 デザインを考えずにとにかく徹底的に文書構造を示すようHTMLを記述するというのは、HTMLをワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のひとつだと思って歩んでこられた方には、とてつもなく大きな壁だと思います。登山するのに道を誤って沢に下りてしまった---、元の道に戻るのは苦労します。
 しかし、私も含めて皆ここを乗り越えてきました。

 面白い例を紹介しておきましょう。Chrome以外のブラウザで!!(Chromeは代替スタイル扱えない)
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 このページを表示させてブラウザの[表示]→[スタイル(シート)]へ進み、色々なスタイルを選択してみてください。HTMLにプレゼンテーション的な要素はまったくないために、自在にデザインできるのです。印刷プレビューやウィンドウ幅を伸縮させたり、フォントサイズをCtrl + +/-で変更しても良いでしょう。

★まず仕様書を通しで読んでみましょう。
 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
 CSS 2.1仕様(日本語訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )


(解説)
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
 本来あるべきブロックがないために匿名ブロックが作られる。(HTMLの文法誤り)

2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
 ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
 改行やタブは空白文字ですから、ここに空白文字がひとつあるように整形される。
 よって、
 div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
  このフォントサイズを2pxにすれば2px空く

3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?
  上記が回答

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lin...続きを読む

Qinterface,extend,implementのちがい

お世話になります、

Javaを勉強しているのですが、
interface,extend,implementの使い分けがわかりません。

私の解釈としては、
(1)interfaceは、グローバル変数の定義、グローバルメソッドの定義(実装はしない)。

(2)extendは、extendクラスを親クラスとして親クラスの機能を使用できる。

(3)implementは…,implementもextendと同じような意味だと解釈しているんですが、違う点は、implementで定義してあるメソッドは、使用しなくても、実装しなければならないという点でしょうか?

とにかくこの3つのを使い分けるコツとかあれば教えてください。
よろしくお願いします。

Aベストアンサー

バラバラに理解してもしょうがないッス。

まず、
(1)interface と implements
(2)class と extends

が対応しているわけっす。

JavaはC++と違って、比較的言語仕様を「簡単」にしたので「多重継承」という
概念がないです。
多重継承っていうのは、複数のクラスを親クラスにして継承するってことですね。

たとえば、 「TextFieldクラス」と「Japaneseクラス」を多重継承すると、
「JTextFieldクラス」ができるっていうのが自然な考え方でしょう?

まぁ、例えば、日本語クラスであれば、getStringLength()メソッドなどが
あったほうが良いでしょうか。
このgetStringLength()メソッドは、2バイト文字も1バイト文字も「1文字」
と数えてくれると言う点で、まさに、日本語クラス用のメソッドだと言えるでしょう。

例えば、Java的に記述すると、、、
class Japanese {
public int getStringLength() {
  ・・・
return strlength;
 }
 ・・・
}

class TextField {
・・・
}

class JTextField extends TextField, extends Japanese {
・・・・
}

C++ではそのように実装するでしょう。
しかし、Javaにはこのような高度な機能はありません。

そこで、生まれた苦肉の策が、「interfaceとimplements」です。

interface Japanese {
public int getStringLength(); // interfaceは実装を含まない!
                 // すなわち「実装の継承」ができるわけではない。
}

class TextField {
・・・
}

class JTextField extends TextField implements Japanese {
・・・・
public int getStringLength() {
  ・・・
return strlength; //implementsの実装を「各クラスで」実装してやる必要がある。
 }
}


結局のところ、Javaでは、複数のクラスを親クラスには持ち得ないため、継承できなかったクラスは「各クラスで実装してやる必要性」があるのです。


ではどのように使うのが効果的か?

なまえのままです。「代表的なインターフェイス」にたいしてinterfaceを使うのが良いと思います。

例えば、プレイヤー系であれば、ビデオ・コンポ・ウォークマン・などにかかわらず、
interface controlpanel {
public play();
public stop();
public next();
public back();
}
というような基本的インターフェイスを「持っているべき」です。

こうすることで、それぞれのクラス宣言の際に、これらの「インターフェイスを持っているべきであり、実装されるべきである」ということを「強く暗示」することができます。
class videoplayer extends player implements controlpanel {
public play() {・・・}
public stop() {・・・}
public next() {・・・}
public back() {・・・}
}

こうすることで、同様のクラスを作成するユーザーは、
「プレイヤー系は、4つ操作が出来るコントロールパネルをインターフェイスとして持つべきなのだな!?」という暗示を受け取り、自分のクラスでもそれを模倣するでしょう。

class mp3player extends player implements controlpanel {
public play() {・・・}
public stop() {・・・}
public next() {・・・}
public back() {・・・}
}

また、これらのクラスを使用するユーザーも、「implements controlpanel」という
表記を見て、「4つの基本操作は押さえられているのだな!」という基本中の基本動作を抑えることが出来ます。

まとめると、クラスに「こういう特徴もたしてください!」「こういう特徴持ってますよ!」という一種の暗示的警告や方向性を与えることができるわけですね。

バラバラに理解してもしょうがないッス。

まず、
(1)interface と implements
(2)class と extends

が対応しているわけっす。

JavaはC++と違って、比較的言語仕様を「簡単」にしたので「多重継承」という
概念がないです。
多重継承っていうのは、複数のクラスを親クラスにして継承するってことですね。

たとえば、 「TextFieldクラス」と「Japaneseクラス」を多重継承すると、
「JTextFieldクラス」ができるっていうのが自然な考え方でしょう?

まぁ、例えば、日本語クラスであれば...続きを読む

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。


人気Q&Aランキング