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

Question

素朴な質問なのですが、

で段落の設定をCSSからした場合、段落によって左より、センター、右よりといったふうに、段落ごとに表示された位置を決める場合は皆さんどうされていますか？やはりclassでそれぞれleft、center、lerftとかを決めているのでしょうか？表示位置,CSSの設定方法に疑問を持ったので、皆さんの意見をお聞かせいただければ、参考にさせていただきたいと思います。意味が分かりにくいでしょうか？

taseki · Accepted Answer

つまらない質問だなんて思っていませんよ。誰でも一度はぶつかる壁な気もします。
こういうことって思想というか理念的な部分が大きいので、技術屋さん個人がそれぞれ確立していく部分なんでしょうね。
「結局、人それぞれ」なんて言ったら身もフタもありませんが…（苦笑）。
そのためにも、少しでも参考になればと思います。

前置きが長くなりましたが…、以下のご質問。

> >やはりインライン（STYLE属性）が妥当な気がします。
> 
> そうですか、もしそれらの定義が頻繁にバンバン出てきた場合にでもでしょうか？

バンバン出てきたら、それはもう「イレギュラー」ではないのですから、“場合によっては”クラスを定義してもいいと思います。CSSのポリシー的な面でも技術的な面でも、正しいと思います。
あくまでもCLASS＝分類で、分類されないもの＝イレギュラー、ということです。
ただ、class="xxx" と書くのと style="align:right" と書くの、大差ない気がしますが…。
「場合によっては」と書いた意味は、まさにそこです。「バンバン出てくる」のが「論理的な意味で同じものが」なのか、「単に右寄せが」なのかが大事だと思います。
重要なのは、クラスの定義方法として「論理的」であるべきで（名前も範囲も）、他の方もおっしゃっているように「見ばえ」に基づいたものはNGなわけで、CSSの根本的な理念とは違ってしまい本末転倒でもあります。
ちなみに、イレギュラーなもののためにIDというセレクタがあるわけで、IDで定義するかインラインで書くかはその内容次第で、私ならやはり align:right 程度ならインラインが妥当かなと思います（これは人それぞれ）。
あるいは、ページの中では1つだけど、全ページに必ず1つある、たとえばページヘッダー・フッターなどは、それこそ外部CSSファイルを使い各ページで同じID定義を共有すると便利ですよね。

ところで、

> >それを踏まえて、あえてクラスにしたいなら、
> 
> 特に私はしたいとは思ってないのですが、頼まれたりした場合結構皆さんめちゃくちゃな注文をしてきます。

クラスにする・しない、クラス名にまで注文をつけてくるお客さん、そんなに多いですか？
結果的に右寄せなどの要求を実現していれば、ほとんどのお客さんは内部のコードまでは気しないのでは。
たまにテンプレートや表記規則を指定してくる顧客はいますが。
また「すでに商品名は強調されてるけど、特にこれはウチの主力商品なので、さらに太く大きい文字にして」なんていうのはありがちなパターンですが、まさにイレギュラーとして捉えられます。

蛇足になりますが…
「技術は宗教的な面を持つ」と言うように、技術屋を少し長くやっていると得てして、コードを少しでもエレガントに、だとか、ポリシーに基づいた記法や考え方で、などの思いが強まってきますよね。賛否両論あるでしょうが、私自身は、少なくとも技術の根底にある基本理念は、少なくともプロの技術屋にとっては、常に大切であると考えています。
たとえばクラスにしなければならないなら、せめてクラス名を「right」としてしまわずに「note」とか「AddInfo」とか、むりやりでも付けて自分を納得させます（笑）。

つい余計なことまで…、すっかり長くなってしまい失礼しました…。

taseki · Answer

私なら、align:right ぐらいならCSSをインラインで書きます。つまりSTYLE属性で指定します。
<p style="align:right">
こんなものにいちいちクラスを定義していたら…、たとえば「赤字」とか「太字」、borderを付けるだけ、なんていうのまで定義することになって、CSSの利点であるメンテ性などを考えると本末転倒なのでは…。
それとも、ご質問の「設定をCSSからした場合」というのはCSS→CSS外部ファイルのことをおっしゃっていますか？もしそうなら的外れな回答ですみません。

ただ、勘違いしている人が結構いて、CSSは外部ファイルにすべき、あるいはそれが高等テクニックみたいに思い込んでる人もいます。
あくまでもCSSというのは、文書本体のデータとビジュアルに関するデータを分離することが大きな目的で、その分離というのは「論理的に」であって「物理的に」ではないです。
だからこそ、指定方法は状況に応じて複数の手段を用意してあって、インライン、セレクタ、またクラス、ID、状況依存セレクタなどを使い分けるように設計されています。
そして外部CSSファイルは単に実装レベルの違いでしかありません（複数HTMLで使いまわせるとかロードするデータ量を減らせるとか）。そういう意味では、あまり意味のない定義が多い助長されたCSS外部ファイルは、本来の意味からも無駄なのではないでしょうか。

それを踏まえて、あえてクラスにしたいなら、
クラスの名前に「論理的な意味」を付けるべきで、そうすることでCSSのポリシー的にも解決するのではないでしょうか。
具体的には、たとえばコメントを書いた日付の部分を右寄せにしたい場合、「CommentDate」なんていう論理的な意味を持つクラス名を（多少むりやりでも）つけておけば、その内容が「右寄せだけ」であろうが「右寄せ＋小フォント…」であろうが、たまたまそうなだけで、CSS本来の理念としては間違っていませんし、メンテ性も可読性も上がります。

とは言え、やはり私は「イレギュラーなもの」にまでクラス定義する時点で、意味がおかしい気がしてしまうのですが…（クラス＝分類であって分類されないものを含まない）。
やはりインライン（STYLE属性）が妥当な気がします。

pingu98 · Answer

度々失礼します^-^;
また思いつきました(笑)。
やっぱ現状ではidでの指定が良い気がしてきました。
自分の過去のソースなど見返すと、DHTML的なページのCSSでやっぱり似たような場面があって、その時はidで解決してたみたいです(自分の事なのに忘れてました)。
ただ、自分的にはそのp要素だけにidがつくのが嫌だったらしく、律儀にp001、p002、p003…、と全部にidつけてました。頭が下がります…ぉぃ。

ただ確認したところ、既にMozillaはCSS2の豊富なセレクタ(隣接セレクタや属性セレクタ等々)にほとんど対応しているみたいですね。将来的にはわざわざその為だけのidやclassを指定しなくても指定ができるようになるかと思います。

あと、ここまでやっちゃうとやりすぎな気もしますが、例えば基本的にはCSS2のセレクタでがっつり指定しておいて、CSS2のセレクタが効かないIE6以前にはJavaScriptでDOMを使ってアクセスしてstyleを適用させる・・・とか。でもメンテナンス性は著しく低下してしまいますね。

pingu98 · Answer

＞今度は

という物の存在の意味がなくなってしまうと思うのですが・・・。いやいや、

全体を

で囲むのです。

ヘッドライン

パラグラフ

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

pingu98 · Answer

んー、該当p要素をdivで囲ってdivにCSS指定がスマートではないでしょうか。あまり詳しくないですけど、divはデフォルトで意味が与えられておらず、レイアウトの為や論理構造の新たな追加に使えるっていうのが定義だったような気がしますので、

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

taba · Answer

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

とかしちゃうでしょうね。基本的には説得を試みると思いますけど。これはデザインの問題と言うより、コンテンツの構成の問題だと思いますし。 #4の方が書かれているように、一部分の色を変えたいことがあったりしますが、それをとかするのはおかしくて、やっぱりであるべきですよね。それは、色を変えたいのではなくて、強調するためだからなわけです。構成の決まっている記事であれば、pタグじゃなくてdivタグで意味のあるクラスを作るほうが良いと思います。仮に右寄せとかセンタリングしたい部分が、意味ある区分なのであれば。

ao_ · Answer

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

9arabi · Answer

＞

でも左に来て欲しい段落もあれば、右によって欲しい段落もあるはずです。ひとかたまりのパラグラフを右や左やに移動したいと考えるときは、素直に

に入れています。１つの文章の中で、パラグラフごとに行ったり来たりはないと思うので、右や左に動くなら、パラグラフだけでなく、全体の文章にも切れ目があるということですよね。

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

taba · Answer

＞

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

yy_y · Answer

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

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

つまらない質問だなんて思っていませんよ。

私なら、align:right ぐらいならCSSをインラインで書きます。

度々失礼します^-^;

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

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

#2です。

技術的に答えると、やはりそれぞれにid名かclass名を付けることを考えます。

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

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

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

似たような質問が見つかりました

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

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング