CSSで空けた文頭の全角スペースを無くす方法

質問

下のサイトの「特徴」と「サービス」の蘭の「・」の左端にスペースが空いています。これは、CSSで全ての蘭の左端に全角スペースを空けていることに加えて、「・」の元々の余白スペースがあるためですが、CSSで空けた左端のスペースをこの部分だけ指定して無くすことはできるのでしょうか？

http://co-work-ing.com/detail/osaka/detail-osaka-antenna.html

他の蘭は左端に全角スペースを空けたままにしたいです。ご教授のほどよろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

＞たしかにご指摘いただいたように、この10px空ける設定を取り消せば一つ一つにclassなどで空白欄を設定すればいいですが、

table.tableDetail tbody tr td{padding-left:0;}
table.tableDetail tbody tr+tr td{padding-left:10px;}

をどこかに書き加えるだけ

　class名なんか触る必要はないはずです。

　classなど使い方間違ってませんか？
　classは、DIVの項目に書かれているように「id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ものであってデザインのためじゃないです。
　またtableでしたら、
<table class="tableDetail">
　<tbody>
　　<tr>
　　　<th scope="row" abbr="特徴">特徴</th>
　　　<td colspan="2">
　　　　<ul>
　　　　　<li>集中したい時、ゆったりしたい時、その日の気分で自由に席を選ぶ。</li>
　　　　　<li>ニュースタイルのカフェスペース！ </li>
　　　　</ul>
　　　</td>
　　</tr>
・・・・・・・・
となるべきです。
　文書構造さえ、きちんとマークアップされていれば
th[abbr="特徴"]+td{padding-left:0;}
ですんだはずです。

お礼

ご回答いただきまして、ありがとうございました。

大変参考になりました。もう一度基礎から作り直します。

大変お詳しい回答をありがとうございました。

回答No.4

noname#206842

ご存じだとは、思いますが、CSSは後出し、じゃんけんと同じです。
提要したいHTMLの記述箇所に、<span style="-1em;"></span>で対応すればいいのでは？・・・
ただし、対応しないブラウザが考えられるので、ハックを充てる必要があるかも？

お礼

もう一度基礎から勉強し直します。ご回答いただきまして、ありがとうございました。

回答No.2

noname#206842

ソース拝見しましたが、ひどい！テーブルレイアウトを使用するのであれば、summaryの記述が必要ですし、ソース事態にも間違いが数か所あります。
cssで設定したいのであれば、1文字分開けたい部分のCSSに、padding-left:1em;を記述すればいいのでは？・・・
不要な部分には、このｃｓｓを対応させなければいいだけのことでは？・・・

各classをか言っておけば済むことです。
まずは、基本を完璧にマスターされたほ方がいいのではないでしょうか？・・・

参考URL：

http://validator.w3.org/

お礼

nanden1548さん、ご回答いただきましてありがとうございます。

ソースの不備のご指摘をいただきまして、ありがとうございました。おっしゃる通り、参考URLで見ると酷いものでした。こちらも少しずつ改善していきます。

文字の書き始めの左端を詰めたいという件ですが、今現在は左端を全て10px空けるようにしています。この状態を維持したまま、特定の場所で左端を詰めて文字を書きたいです。たしかに、今現在の設定を解除して、全ての場所で左端を詰める状態にして、空白を作りたい場所だけclassで設定すれば事済むのですが、今回は今現在の設定を維持したまま左端を詰める方法がないのかご質問させていただきました。

お忙しいなか恐縮ですが、再度ご回答いただければ幸いです。よろしくお願いします。

回答No.1

ORUKA1951

＞この部分だけ指定して無くすことはできるのでしょうか？
だったら、その部分だけ指定すれば良いです。
table.tableDetail tbody tr td{padding-left:0;}
table.tableDetail tbody tr+tr td{padding-left:10px;}
HTMLには文書構造以外書かないようにしないと、せっかくスタイルシートを導入して「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」をする意味がない。こんな複雑なスタイルシート描かなければならない羽目になる。
　HTMLソース見ないとスタイルシートかけないし、HTML見てもどこに何が書いてあるかわからない。

お礼

ORUKA1951さん、ご回答いただきましてありがとうございます。

今現在、文字の書き始めは全て10px空けるようにスタイルシートで設定しています。たしかにご指摘いただいたように、この10px空ける設定を取り消せば一つ一つにclassなどで空白欄を設定すればいいですが、今現在の設定のままで左端を詰める方法はないでしょうか？

具体的に言いますと、文字の書き始めは全て10pxの空白ができる設定を維持したまま、特定の場所だけ空白を作らずに左詰めで文字を書きたいです。

もしよろしければ、再度ご教授いただければ幸いです。よろしくお願いします。