<p>と<p>と<p>の三つの使い方なんですが・・・？

質問

素朴な質問なのですが、<p>で段落の設定をCSSからした場合、段落によって左より、センター、右よりといったふうに、段落ごとに表示された位置を決める場合は皆さんどうされていますか？

やはりclassでそれぞれleft、center、lerftとかを決めているのでしょうか？

表示位置,CSSの設定方法に疑問を持ったので、皆さんの意見をお聞かせいただければ、参考にさせていただきたいと思います。

意味が分かりにくいでしょうか？

回答No.10

taseki · ベストアンサー

つまらない質問だなんて思っていませんよ。誰でも一度はぶつかる壁な気もします。
こういうことって思想というか理念的な部分が大きいので、技術屋さん個人がそれぞれ確立していく部分なんでしょうね。
「結局、人それぞれ」なんて言ったら身もフタもありませんが…（苦笑）。
そのためにも、少しでも参考になればと思います。

前置きが長くなりましたが…、以下のご質問。

> >やはりインライン（STYLE属性）が妥当な気がします。
>
> そうですか、もしそれらの定義が頻繁にバンバン出てきた場合にでもでしょうか？

バンバン出てきたら、それはもう「イレギュラー」ではないのですから、“場合によっては”クラスを定義してもいいと思います。CSSのポリシー的な面でも技術的な面でも、正しいと思います。
あくまでもCLASS＝分類で、分類されないもの＝イレギュラー、ということです。
ただ、class="xxx" と書くのと style="align:right" と書くの、大差ない気がしますが…。
「場合によっては」と書いた意味は、まさにそこです。「バンバン出てくる」のが「論理的な意味で同じものが」なのか、「単に右寄せが」なのかが大事だと思います。
重要なのは、クラスの定義方法として「論理的」であるべきで（名前も範囲も）、他の方もおっしゃっているように「見ばえ」に基づいたものはNGなわけで、CSSの根本的な理念とは違ってしまい本末転倒でもあります。
ちなみに、イレギュラーなもののためにIDというセレクタがあるわけで、IDで定義するかインラインで書くかはその内容次第で、私ならやはり align:right 程度ならインラインが妥当かなと思います（これは人それぞれ）。
あるいは、ページの中では1つだけど、全ページに必ず1つある、たとえばページヘッダー・フッターなどは、それこそ外部CSSファイルを使い各ページで同じID定義を共有すると便利ですよね。

ところで、

> >それを踏まえて、あえてクラスにしたいなら、
>
> 特に私はしたいとは思ってないのですが、頼まれたりした場合結構皆さんめちゃくちゃな注文をしてきます。

クラスにする・しない、クラス名にまで注文をつけてくるお客さん、そんなに多いですか？
結果的に右寄せなどの要求を実現していれば、ほとんどのお客さんは内部のコードまでは気しないのでは。
たまにテンプレートや表記規則を指定してくる顧客はいますが。
また「すでに商品名は強調されてるけど、特にこれはウチの主力商品なので、さらに太く大きい文字にして」なんていうのはありがちなパターンですが、まさにイレギュラーとして捉えられます。

蛇足になりますが…
「技術は宗教的な面を持つ」と言うように、技術屋を少し長くやっていると得てして、コードを少しでもエレガントに、だとか、ポリシーに基づいた記法や考え方で、などの思いが強まってきますよね。賛否両論あるでしょうが、私自身は、少なくとも技術の根底にある基本理念は、少なくともプロの技術屋にとっては、常に大切であると考えています。
たとえばクラスにしなければならないなら、せめてクラス名を「right」としてしまわずに「note」とか「AddInfo」とか、むりやりでも付けて自分を納得させます（笑）。

つい余計なことまで…、すっかり長くなってしまい失礼しました…。

お礼

tasekiさんありがとうございます。

>バンバン出てきたら、それはもう「イレギュラー」ではないのですから、“場合によっては”クラスを定義してもいいと思います。CSSのポリシー的な面でも技術的な面でも、正しいと思います。

そうですよね、何回も出てくる場合はイレギュラーじゃないですもんね！

>せめてクラス名を「right」としてしまわずに「note」とか「AddInfo」とか、むりやりでも付けて自分を納得させます（笑）。

いい考えかも入れません！無理やりでも意味づけが出来れば自分も少しは納得が出来る気がします。ありがとうございました

回答No.9

taseki

私なら、align:right ぐらいならCSSをインラインで書きます。つまりSTYLE属性で指定します。
<p style="align:right">
こんなものにいちいちクラスを定義していたら…、たとえば「赤字」とか「太字」、borderを付けるだけ、なんていうのまで定義することになって、CSSの利点であるメンテ性などを考えると本末転倒なのでは…。
それとも、ご質問の「設定をCSSからした場合」というのはCSS→CSS外部ファイルのことをおっしゃっていますか？もしそうなら的外れな回答ですみません。

ただ、勘違いしている人が結構いて、CSSは外部ファイルにすべき、あるいはそれが高等テクニックみたいに思い込んでる人もいます。
あくまでもCSSというのは、文書本体のデータとビジュアルに関するデータを分離することが大きな目的で、その分離というのは「論理的に」であって「物理的に」ではないです。
だからこそ、指定方法は状況に応じて複数の手段を用意してあって、インライン、セレクタ、またクラス、ID、状況依存セレクタなどを使い分けるように設計されています。
そして外部CSSファイルは単に実装レベルの違いでしかありません（複数HTMLで使いまわせるとかロードするデータ量を減らせるとか）。そういう意味では、あまり意味のない定義が多い助長されたCSS外部ファイルは、本来の意味からも無駄なのではないでしょうか。

それを踏まえて、あえてクラスにしたいなら、
クラスの名前に「論理的な意味」を付けるべきで、そうすることでCSSのポリシー的にも解決するのではないでしょうか。
具体的には、たとえばコメントを書いた日付の部分を右寄せにしたい場合、「CommentDate」なんていう論理的な意味を持つクラス名を（多少むりやりでも）つけておけば、その内容が「右寄せだけ」であろうが「右寄せ＋小フォント…」であろうが、たまたまそうなだけで、CSS本来の理念としては間違っていませんし、メンテ性も可読性も上がります。

とは言え、やはり私は「イレギュラーなもの」にまでクラス定義する時点で、意味がおかしい気がしてしまうのですが…（クラス＝分類であって分類されないものを含まない）。
やはりインライン（STYLE属性）が妥当な気がします。

お礼

tasekiさん、私のつまらない質問に、ご丁寧なご解答有難うございます。でも私は結構悩んでます。

>「設定をCSSからした場合」というのはCSS→CSS外部ファイルのことをおっしゃっていますか？

はい！外部ファイルのことです。

>データを分離することが大きな目的で、その分離というのは「論理的に」であって「物理的に」ではないです。

そうですよね、私も重々承知しているつもりなのですが・・・。

>それを踏まえて、あえてクラスにしたいなら、

特に私はしたいとは思ってないのですが、頼まれたりした場合結構皆さんめちゃくちゃな注文をしてきます。

>やはりインライン（STYLE属性）が妥当な気がします。

そうですか、もしそれらの定義が頻繁にバンバン出てきた場合にでもでしょうか？

回答No.8

pingu98

度々失礼します^-^;
また思いつきました(笑)。
やっぱ現状ではidでの指定が良い気がしてきました。
自分の過去のソースなど見返すと、DHTML的なページのCSSでやっぱり似たような場面があって、その時はidで解決してたみたいです(自分の事なのに忘れてました)。
ただ、自分的にはそのp要素だけにidがつくのが嫌だったらしく、律儀にp001、p002、p003…、と全部にidつけてました。頭が下がります…ぉぃ。

ただ確認したところ、既にMozillaはCSS2の豊富なセレクタ(隣接セレクタや属性セレクタ等々)にほとんど対応しているみたいですね。将来的にはわざわざその為だけのidやclassを指定しなくても指定ができるようになるかと思います。

あと、ここまでやっちゃうとやりすぎな気もしますが、例えば基本的にはCSS2のセレクタでがっつり指定しておいて、CSS2のセレクタが効かないIE6以前にはJavaScriptでDOMを使ってアクセスしてstyleを適用させる・・・とか。でもメンテナンス性は著しく低下してしまいますね。

お礼

pingu98さん、毎度有難うございます。

>その時はidで解決してたみたいです(自分の事なのに忘れてました)。

なるほどidですか、それは考えにありませんでした。

>その時はidで解決してたみたいです(自分の事なのに忘れてました)。

非常に待ち遠しいです。

>CSS2のセレクタが効かないIE6以前にはJavaScriptでDOMを使ってアクセスしてstyleを適用させる・・・とか。

はは！確かに出来ますが、メンテナンスは訳が分からなくなっちゃいますね。・・・もういっそのこと、要望通り、好き勝手させてしまおうとも考えます。いっその事THMLにバリバリ書き込んでやろうかと・・・。

回答No.7

pingu98

＞今度は<p>という物の存在の意味がなくなってしまうと思うのですが・・・。

いやいや、<p></p>全体を<div>で囲むのです。

<div class="section">
<h2>ヘッドライン</h2>
<div class="layout_right">
<p>パラグラフ</p>
</div>
<p>パラグラフ</p>
<p>パラグラフ</p>
</div>

ただ、div要素の定義をW3C勧告で再確認すると、やっぱりあくまで文書構造の付加の為に提供されているのであって、レイアウト上の観点しか意味をなさないdivは付加すべきでないみたいですね。
つまり、div.sectionは正当だけどdiv.layout_rightは不必要な構造ですものね。
んー、うまくいきません。。

お礼

pingu98さん度々感謝します。

>いやいや、<p></p>全体を<div>で囲むのです。

なるほど入れ子にしてしまうのですね！

>ただ、div要素の定義をW3C勧告で再確認すると、

そうなんですよね！文法を無視してしまえばなんでもこい、なのですが・・・、小さなことですが現在の私には大きな悩みです。

回答No.6

pingu98

んー、該当p要素をdivで囲ってdivにCSS指定がスマートではないでしょうか。

あまり詳しくないですけど、divはデフォルトで意味が与えられておらず、レイアウトの為や論理構造の新たな追加に使えるっていうのが定義だったような気がしますので、
<div class="right">も悪くはないかなぁと。

私も、自分のサイトならいいですけど、人のサイトだと結構悩みます。その文章の論理構造は文章そのものを書いた人じゃないとわからないですからねぇ。。
ということで、私の場合は、将来誰か他の人間が私の書いたHTMLを編集する時に意味が分かりやすくメンテナンスがしやすい、という観点を基準に作ってます。

お礼

pingu98さん有難うございます。

>んー、該当p要素をdivで囲ってdivにCSS指定がスマートではないでしょうか。

そうなのですが、今度は<p>という物の存在の意味がなくなってしまうと思うのですが・・・。あくまでもそれらは段落であって<p>なのは間違いないのです。

それを<div>で対応してしまうと、その文章は段落ではなくなってしまう気がするのですが、どんなものでしょうか？？？

回答No.5

taba

#2です。

現実問題として、ブラウザによってもCSSの表示バグなどもあり、どこまでこだわるかは非常に難しいところですよね。
私は仕事でサイト作成をしたことはありませんが、もしおっしゃるような状況で、お金のために妥協するなら（笑）、
<p class="left"></p>
とかしちゃうでしょうね。

基本的には説得を試みると思いますけど。これはデザインの問題と言うより、コンテンツの構成の問題だと思いますし。

#4の方が書かれているように、一部分の色を変えたいことがあったりしますが、それを
<span class="blue"></span>
とかするのはおかしくて、やっぱり
<em></em>
であるべきですよね。それは、色を変えたいのではなくて、強調するためだからなわけです。

構成の決まっている記事であれば、pタグじゃなくてdivタグで意味のあるクラスを作るほうが良いと思います。仮に右寄せとかセンタリングしたい部分が、意味ある区分なのであれば。

お礼

tabaさん、度々ありがとう御座います。

><p class="left"></p>
とかしちゃうでしょうね。

やはりそうするしかないですよね？したくないですが・・。

>これはデザインの問題と言うより、コンテンツの構成の問題だと思いますし。

まさにそうなんです！！しかしホームページを知らない人は何でも出来る、自由自在に希望通りにしてもいいのだ！と思っています。確かにそうなのですが・・

><span class="blue"></span>
とかするのはおかしくて、やっぱり

この問題も非常に身近に感じます。確かにただ目立たせる為に（強調の意味は無く）文章の一部を赤に変えてみたり、青に変えてみたりと・・・。

現状はそれこそ<span class="red"></span>などという形をしぶしぶとっています。

やはり説得してもらうしかないでしょうか？

回答No.4

ao_

技術的に答えると、やはりそれぞれにid名かclass名を付けることを考えます。同じ親要素の中でそういった指定をするにはこうするしかないと思います。
例えば、その3段落にそれぞれ別の色を指定したい時も同じような疑問にぶつかりませんか？そのためのidとclassだと思います。HTMLでもCSSでも何の問題もありません。pを使っている時点で構造化されているはずです。
もし親要素がそれぞれ別のものならセレクタで解決でき、これにこしたことはないと思いますが。

ちなみに私ならデザインの時点でそういった問題を避けます。

回答No.3

9arabi

＞<p>でも左に来て欲しい段落もあれば、右によって欲しい段落もあるはずです。
ひとかたまりのパラグラフを右や左やに移動したいと考えるときは、素直に<div>に入れています。
１つの文章の中で、パラグラフごとに行ったり来たりはないと思うので、右や左に動くなら、パラグラフだけでなく、全体の文章にも切れ目があるということですよね。

<div>
<p class="left"></p>
<p class="right"></p>
<p class="center"></p>
</div>
とかいうのは、あり得ないと思います。

イラストや写真が横に来るから、このパラグラフは右寄せ、左寄せ、などとなるのであれば、素直にfloat:leftなどを使うと思いますし。

お礼

ありがとう御座います。

><div>
<p class="left"></p>
<p class="right"></p>
<p class="center"></p>
</div>

そうですよね、私もそう思います。

>イラストや写真が横に来るから、このパラグラフは右寄せ、左寄せ、などとなるのであれば、素直にfloat:leftなどを使うと思いますし。

float:leftなども、もちろん使うのですが、これだけでは解決できない部分があるのですが・・・。

回答No.2

taba

＞<p>でも左に来て欲しい段落もあれば、右によって欲しい段落もあるはずです。

段落というのは原則として一連の文章の中で設定されるものだと思うので、その中で右の寄ったり左に寄ったりというのは普通は無いと思います。
例えば特定のブロック（構成上のブロック）の文章だけ右寄せにしたい場合（ブログの中で本文は左寄せだが、プロフィールの部分は右寄せにしたい等）などは、相対的な指示をすればよいのではないかと思います。
.profile p
など。

質問の意図を取り違えてますでしょうか？

お礼

tabaさんありがとう御座います。

>段落というのは原則として一連の文章の中で設定されるものだと思うので、その中で右の寄ったり左に寄ったりというのは普通は無いと思います。

個人で作成し、自分で文法に気をつけていればそうだと思います。しかし、人から頼まれたり、お客さんだったら簡単に、見た目の雰囲気で考えます。

ですので、決まりというものが分からないのだと思います。それを断ってもお客さんは納得できないでしょうし、したがらない私たちの意味がわから無いと思います。「ただココだけをセンターよりにして欲しいだけなのに」とか思っています。

こういう場合を想定したとき皆さんはどうなさいますか？

回答No.1

yy_y

直接の回答ではありません．

>やはりclassでそれぞれleft、center、lerftとかを決めているのでしょうか？
HTMLとCSSに規格を分けることにした趣旨からして，たとえばclass="left"などと書くことは望ましくないと思います．結局HTMLの上でデザインを指定していることになってしまっているからです．

お礼

そうですよね・・・、そこで私も悩んでおります。

<p>でも左に来て欲しい段落もあれば、右によって欲しい段落もあるはずです。

この様なときの指定の仕方がいまいち理解できないです・・。