Half-Retirean's Lazy Life Diary / ダラダラ余生日記

最近思ったこと: やりたいことだけやるって幸せなことだ

ホーム 連絡をする 同期する ( RSS 2.0 ) Login
投稿数  984  : 記事  4  : コメント  42107  : トラックバック  277

ニュース

My Website

初心者向けのサイトです。

C# と VB.NET の入門サイト

最近のできごと

暇人28号FX

Sponsored Link1

Sponsored Link2

Archive

書庫

全角スペースで、段落開始をインデント (字下げ) している方が多いみたいですが、
インデント (字下げ) のような修飾は、<p> 要素に含むべき '内容' ではないと思います。

段落先頭のインデント (字下げ) は、CSS で定義すべきだと思います。

# もちろん、掲示板など使えない場所は除きます。
# 整形済みの <pre> 要素も除きます。

やるならば、<div> 要素内で限定させましょう。
<p> 要素自体に id や class を使ってはいけません。(id は 1 つしか使えないので論外ですが)
CSS を使う旨みが損なわれてしまいます。

CSS

#main p {
    text-indent : 1em;
}

HTML

<div id="main">
  <p>
    そんな事より1よ、ちょいと聞いてくれよ。スレとあんま関係ないけどさ。
    このあいだ、近所の吉野家行ったんです。吉野家。
    そしたらなんか人がめちゃくちゃいっぱいで座れないんです。
  </p>
</div>

結果

そんな事より1よ、ちょいと聞いてくれよ。スレとあんま関係ないけどさ。このあいだ、近所の吉野家行ったんです。吉野家。そしたらなんか人がめちゃくちゃいっぱいで座れないんです。

でも、私は使っていません。(ヲイ)
縦書きはともかく、横書きの字下げがどうしても好きになれないんですよ。
私は、適当な位置の「句点」「読点」で、改行してしまうので、返って見難くなってしまいます。

投稿日時 : 2006年6月8日 9:45

コメント

# re: 段落開始のインデントは CSS で定義 2006/06/08 12:32 シャノン
> <p> 要素自体に id や class を使ってはいけません。

こりゃー別にいいんじゃないかなーと思う昨今。

先日、class 属性にはスペース区切りで複数の値を指定できると知ってちょっと感動した。多重継承ですネ。

# re: 段落開始のインデントは CSS で定義 2006/06/08 12:39 じゃんぬ
> こりゃー別にいいんじゃないかなーと思う昨今。

ここだけを引用されちゃうと、ちょっとつらい。
「やるならば」ね。(やる == インデントを CSS で実装)

# re: 段落開始のインデントは CSS で定義 2006/06/08 14:46 シャノン
すべての p 要素にインデントつけてもいいんじゃない? てこと。
推奨はしないが反対もしない。

# re: 段落開始のインデントは CSS で定義 2006/06/08 14:50 じゃんぬ
??? すべてではないでしょう。
そのための div 要素 + id です。

たとえば、<div id="main"> は記事を書くところなので、

#main p { text-indent:1em; }

で、適用しますが、

<div id="left"> はサイド メニューなので、適用しないしされない。

HTML の保守を考えても、
p.hoge { } より、#hoge p { } を使うべきだと思います。

# re: 段落開始のインデントは CSS で定義 2006/06/08 20:12 シャノン
なんか噛み合っていないのかなぁ。
あるサイトの製作者が「p 要素にはどこにでも一律インデントを入れるぞ」って決めたら、俺にはそれを否定する根拠がないって話。
p#id でも p.class でも同じ。
別にそういうサイトがあってもいいんじゃないの? というだけのこと。

> HTML の保守を考えても、

ってのは、class の指定漏れを防ぐためっていう理由?

# re: 段落開始のインデントは CSS で定義 2006/06/08 20:36 じゃんぬ
> なんか噛み合っていないのかなぁ。

"すべて" という言葉が、かみ合わなかったのではないでしょうか。

> p#id でも p.class でも同じ。

これこそ、かみ合っていないように思えます。
私が挙げたのは、「#id p」です。(.class p でも良いですが)

私の "<p> 要素自体に" を噛み砕きますと、
「複数からなる p.class」を想定しています。

> ってのは、class の指定漏れを防ぐためっていう理由?

編集の時にも置換の時にも手間なんですね。
私は、class だらけの HTML も CSS もゴメンですね。

字下げが必要な部分は、文章が集中するところだと思います。
そして、段落がある毎に class 属性指定なんて、見た目も悪いです。

# re: 段落開始のインデントは CSS で定義 2006/06/09 0:38 シャノン
整理しましょう。

あるサイト製作者の方針を仮定します。

方針1:
「p には特に id も class もつけなくとも、無条件で字下げを行う」というものがあったとすると…俺の意見は「勝手にすれば?」です。製作者がそう決めたのなら、俺がとやかく言うことではない。

方針2:
「特定の p のみ字下げを行うために、p#id とか p.class を使うぞ」というものがあったとすると…やはり同じです。俺は賛成も反対もしない。する根拠がない。

方針3:
「特定の p のみ字下げを行うために、#id p とか .class p を使うぞ」というものがあったとすると…大して変わりません。
方針2とどっちがいいかというと、まぁ若干3のほうがいいかもしれませんが、強いて言えばというレベルで、2と3を比べるなら3にすべきだという程に強くは言えません。

# re: 段落開始のインデントは CSS で定義 2006/06/09 0:39 シャノン
> やるならば、<div> 要素内で限定させましょう。
> <p> 要素自体に id や class を使ってはいけません。
> CSS を使う旨みが損なわれてしまいます。

俺には、これほどまでに強い口調で言う根拠が無いんです。
参考までに、理由をお聞かせ願えませんか。

# re: 段落開始のインデントは CSS で定義 2006/06/09 7:39 じゃんぬ
> 強いて言えばというレベルで

だったら、素直に 3 にしますよね。
強いて言えばでも、十分な理由じゃないですか。
物事を選択する時、強いて言えばレベルで決まることは多々あります。

自分が良いと思うべき方法があるのに、
大して変わらないという理由で、敢えて 2 にする必要はないです。

> 俺には、これほどまでに強い口調で言う根拠が無いんです。

そもそも、意見に反対する気はないのであれば、
これほどまでに強く拘る必要もないんじゃないでしょうか。

それと、そこまで強い口調で書いたつもりはありません。
絶対に使うべきでないというより、「より良い方法を使うべき」という気持ちです。
否定的に書いたのは、「素直な方法を選択すべきですよね?」という気持ちが強いからです。

素直でないと強く言えるのは、やはり毎度指定するのが、美しくない、手間だからです。

インデントを必要とするような物書きをする場合、
それはある程度、段落があることを意味します。
つまり、<p> 要素が無数にあるということです。

<div>
 <p class="indent"> ... </p>
 <p class="indent"> ... </p>
 <p class="indent"> ... </p>
 <p class="indent"> ... </p>
 <p class="indent"> ... </p>
 <p class="indent"> ... </p>
</div>

美しくないですよね。
親要素の id や class で指定した方がわかりやすいです。
(CSS だけを見た時も、サイトのイメージとマッチしやすい)

# re: 段落開始のインデントは CSS で定義 2006/06/09 9:03
> p#id でも p.class でも同じ。
> p#id でも p.class でも同じ。
> p#id でも p.class でも同じ。

これを強く言う根拠もわからない。

# re: 段落開始のインデントは CSS で定義 2006/06/09 12:17 シャノン
> 素直でないと強く言えるのは、やはり毎度指定するのが、美しくない、手間だからです。

了解しました。
強く言ったかどうかはさておき、理由が知りたかっただけなので、これで満足です。

2006/06/08 14:50 の投稿で

> HTML の保守を考えても、

と書かれていますが、最後が「も」であることから、これは副次的な理由で、何かもっと重要な理由があるのだと深読みしていました。

最初の投稿で

> CSS を使う旨みが損なわれてしまいます。

とありましたので、「CSS を使う旨み」って何かな、と。

>> p#id でも p.class でも同じ。
> これを強く言う根拠もわからない。

勘違いされているかもしれませんので補足します。
これは「p#id でも p.class でも #id p でも .class p でも同じ」という意味ではありません。
「p#id でも p.class でも無条件 p でも、俺には否定する理由がないという点で同じ」ということです。

# re: 段落開始のインデントは CSS で定義 2006/06/09 12:58 はいこーん
ありゃwもう終了ですかwww

>と書かれていますが、最後が「も」であることから、これは副次的な理由で、何かもっと重要な理由があるのだと深読みしていました。

重複しないこと。簡素でムダがないこと。美しいこと。
言語を問わず、かなり重要じゃないですかね。
トリッキーなものは当然除外だけど、今回は一般的というか、DIVを使って上位要素に委譲するのは推奨されている手法じゃなかったかな。
ひとつのパターンかもしんないけど。

Web Masterの勝手って意味ではどうでもいいことですが、推奨したくなるパターンだと思う。
特に今回のような範囲が広そうなインデントについては。

>とありましたので、「CSS を使う旨み」って何かな、と。

これで合ってるかどうか不安だけれど。
逆にCSSを使わない場合を想定するとわかるのかな。
STYLE属性で全部やる場合に比べて、CSSにすると一元管理できて手間もないわけですね。
わざわざタイプする手間もなく、CSS側での変更がすぐ適用されるわけです。

って、この観点で言うと旨みの説明にならないからって、ここで終わってしまったのがダメなのかな、と。
タイプと一元管理をもっと追求すると、親要素に委譲するとタイプも一元管理ももっと楽になるってことだと思う。

どうせCSSを使うなら旨みを最大限に引き出しましょうが正しいんじゃないかな。
プロパカンダに近いような微妙さは確かにあるね。

でね、これで合ってなかったら僕が一番恥ずかしいww

# re: 段落開始のインデントは CSS で定義 2006/06/09 13:13 じゃんぬ
> でね、これで合ってなかったら僕が一番恥ずかしいww

大丈夫です、合ってます。

もうひとつ加えるなら、レイアウト変更の時の融通ですね。
レイアウト変更を考えている人の多くは、<div> 要素による、
Box-Style のパターンを使っていることが多いです。
(最近の Blog も、そういうのが多いですね)

静的サイトの場合、レイアウト変更をする時に楽なんです。
レイアウトとして箱を追加する場合も、削除する場合も楽なんです。

ただ、これはそういうパターンを使わない人にとっては関係のない話ですね。

# re: 段落開始のインデントは CSS で定義 2006/06/09 13:28 シャノン
> って、この観点で言うと旨みの説明にならないからって、ここで終わってしまったのがダメなのかな、と。
> タイプと一元管理をもっと追求すると、親要素に委譲するとタイプも一元管理ももっと楽になるってことだと思う。

そこまで突っ込めませんでしたね。
といっても、一元管理の重要性は十分にわかっているつもりなので、近々、ASP.NET 2.0 のマスターページに近い仕組みを自分で作ろうと思って(いるだけで製作は停滞して)いますが。

ただ、それは「一元管理の旨み」であって「CSS の旨み」ではない。
「CSS の旨み」は「HTML を文書記述に専念させることが出来る」であって、その点から見れば、「各段落に class 指定」でも、十分に論理的な記述ではある、と思っていました。

> レイアウト変更を考えている人の多くは、<div> 要素による、Box-Style のパターンを使っていることが多いです。

ほほぅ。
ただ、レイアウト変更を念頭において設計することは、HTML の理念からすると賛否両論ありそうですね。

# re: 段落開始のインデントは CSS で定義 2006/06/09 13:45 じゃんぬ
> 「CSS の旨み」は「HTML を文書記述に専念させることが出来る」であって

厳密には、HTML の文書記述ではないですが、毎度 class 指定するよりは、
さらに「より専念できる」という旨みを引き出すことになるかと思います。

> ただ、レイアウト変更を念頭において設計することは、
> HTML の理念からすると賛否両論ありそうですね。

確かに、ここから先は W3C 信者派かどうかで変わるでしょうね。

しかし、レイアウトの変更を念頭に置くことと、
テキスト ブラウザでの表示も考えておくことはイコールになることが多いです。

このあたりは、やり始めて 3 ヶ月ほどで感じることが出来ました。
ASP.NET だと、あんまり考えてないというか、考えていると進捗が悪くなるんですが...w

Post Feedback

タイトル
名前
Url:
コメント: