教えて!goo限定 1000名様に電子コミック1000円分が当たる!!

リストの左余白の削除方法

解決済

  • 質問者：sora-ain
  • 質問日時：
  • 回答数：1件

<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「スタイル リスト」に関するQ&A： メニューと本文でリストのスタイルを変えたい

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

ul li {



の箇所を

ul {

にするだけ
    • good
    • 7
    • 件
通報する
この回答へのお礼

消せました！
自分の知識の無さに凹みました…orz

ulとliを一緒に指定してはダメなのですねぇ…。
とても勉強になりました。
ありがとうございました！

通報する
お礼日時：2007/11/06 13:21

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

「スタイル リスト」に関するQ&A： <ul>と<li>リストマークを消すのはどちら？

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

Q質問する（無料）

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

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

他の回答も見る

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか？

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか？

Aベストアンサー

整理すると
<div class="nav">
　<ul>
　　<li>
において、
div.nav{list-style-type:none;}
　では、リストマークは消えない。
　しかし、
<div class="nav">
　<ul>
　　<li>
　　　<div>
　　　　<ul>
　　　　　<li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

　仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )］より

　OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

　このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

　listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
　そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

　文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
　<ul>
　　<li>
において、
div.nav{list-style-type:none;}
　では、リストマークは消えない。
　しかし、
<div class="nav">
　<ul>
　　<li>
　　　<div>
　　　　<ul>
　　　　　<li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

　仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

他の回答も見る

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

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

あるボックス要素内（Ａ）に異なるボックス要素（Ｂ）をいれます。
この（Ｂ）を（Ａ）の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか？

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

Aベストアンサー

こんなのはどうかな？

position: absolute;
bottom: 0px;

他の回答も見る

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ｐタグによる段落間のアキ調整について

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

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

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

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

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に指定
　という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

他の回答も見る

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

他の回答も見る

Qul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul　liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか？

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします！


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

表示が上手くいかないのでお助け下さい。
ul　liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか？

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします！


【html】

...続きを読む

Aベストアンサー

>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか？

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか？

他の回答も見る

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

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

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

Aベストアンサー

<select style="width: 200px">

他の回答も見る

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質問する（無料）

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

人気Q&Aランキング

おすすめ情報