はじめてのウェブページ

締切済

質問者：-ROM
質問日時：2006/09/03 21:44
回答数：7件

はじめてのウェブページを作ってみました。
HTML ソースを見てみると、class 属性のあるタグがひとつもありません。でも、ページは思ったとおりにできています。div エレメントはいっぱいできました。
「だったらいいじゃん」とかではなくて、class 属性はどんなときに「必要があって使うのか」や「結果的に使うのか」を教えてください。

通報する

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

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.7

回答者： aqucent
回答日時：2006/09/04 02:03

#2です。

> 再度ですが、「class 属性を使おうとするときの共通概念」を教えてください。
えーと…、「意味を持たせる」という表現で説明したつもりですが、CSSの基本概念を知りたいという事でしょうか？
(すみません。何となくCSSは理解されているように見受けたので、観念的な表現をしてしまいました。)

仕様に基づく概念を知りたいのでしたら、以下を参考にどうぞ。

7.5.2 要素識別子: id属性とclass属性
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
セレクタ - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/sele …

IDと比較するならば。

・ID … 一意な識別子
・class … 分類型の識別子

IDは1つの文書に一度しか使えず、classは何度でも使える特徴があります。
IDは「一意な名前付け」を行うので、一度しか使えないと考えるとよいかと思います。
class は「分類名」なので、何度でも呼び出せます。

ちなみに、デザインを統一するために、クラスを使うのは本来の使い方ではありません。
クラス(ID)には、用途にあった意味を持たせてください。(この辺は、上記リンクに例が載っています)

> また、(idname).classname というのは <div id="idname" class="classname"> とは異なるものですか。
IDセレクタは、(idname).classname のようには宣言しません。
( DIV.note は、"DIV" はタイプセレクタ、".note" はクラスセレクタを示します。)

/* ID「idname」 */
#idname { ... }
/* class「classname」 */
.classname { ... }

のように、別々に宣言するか、子孫セレクタで統合するぐらいです。

# 少し勘違いされているようなので、classの前にCSSの概念から学ばれた方が良いかも、という印象を持ちました。

参考URL：http://hp.vector.co.jp/authors/VA022006/, http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 …

この回答への補足

理解するには時間がかかると思われます。
同カテゴリのもうひとつの問題のほうもなかなか深刻な問題です。

補足日時：2006/09/04 04:44

通報する

- 0
- 件

通報する

No.6

回答者： naokita
回答日時：2006/09/04 01:40

CSSは同じ様な装飾の文を作るのに簡単・便利ってだけです。

無理にclass別けしなくてもいいんです。
classを付けるとHTMLソースが少なくなったり、見やすくなったり、管理し易くなったり、クローラーが読みやすくなったり、表示やＳＥＯ的にも有利かな？

例）
class="111"（大きくて太い文字）
class="222"（赤い文字）
class="aaa"（筆記体）

等の文字列等が各所にある場合、わざわざfontやspanで
タグ打ちしなくても　これはclass="111" とか222とか
簡単になるだけです。だから同じ様なタグで作ってある場合は、classを指定した方が良い訳です。

HTMLだけでは難しい表示になると対応しきれなくなりますし、外部CSSならサブページにも対応したり、色が気に入らない場合は、毎箇所変更するよりCSS一箇所だけの変更でclass指定の文が一気に変更される便利な機能なのです。

例えば９月のカレンダーの日曜・祝日を赤色にしたい場合
<span class="222">3</span>456789
<span class="222">10</span>111213141516
<span class="222">1718</span>1920.....
これでＯＫ　赤色をオレンジにする場合はHTMLなら全部変更ですが、
CSSのspan.222{color: 赤；}の赤をオレンジに一箇所変更のみでＯＫって事です。
同じスタイルをCSSとclassで統一させるだけです。
他にも当然複合技も多々出来ますよ。

- 0
- 件

通報する

No.5

回答者： jammin#2
回答日時：2006/09/04 01:26

　#1です。

　説明不足でしたね。CSSと組み合わせて使うのは、当然id属性でも可能です。
　idを使うかclassを使うかの違いは、質問者様のこだわっておられた「使用指向概念」の違いだけです。
　もし同じidが一つのページに繰り返し出てきているのであれば、厳密には文法違反ですのでclassに書き換えるのが望ましいですが、文法違反だから表示がおかしくなるなどといったことはありません。
　（初めてということは多分ホームページビルダーなどのソフトを使用されていると思うのですが、ああいうソフトは文法をまるっきり無視しています。慣れないうちは気にしなくてもいいんですが、一応それを覚えておいてください）

　文字のサイズなどが所々変わっているというのは、個々の要素にstyle属性を使っているということでしょうか。
　エディターソフトは概ねそういう風に書きますね。
　この場合はclassやidでスタイルをどうにかする必要がありません。個々の要素にそれぞれスタイルがついているわけですから。

　classやidが必要なのは、<head>～</head>内や外部ファイルでcssを指定している場合です。
　本来cssはこのような方法で使用するもので、style属性の使用は文法的には不適切です。
　ある程度HTMLに慣れてからでないと難しいですが、いずれは文法や仕様書を意識して作れるようになってもらえればと思います。

　また、誤解されているかもしれませんが
DIV.note{font-size:8em;}
DIV.comment{color:blue;}
　というような表記は、<div>などのタグの中では使いません。
　これは<head>～</head>内や外部ファイルに書くもので、これをHTMLファイル内にある<div class="note">などの要素が呼び出すことで表示が変わります。

- 0
- 件

通報する

No.4

回答者： jammin#2
回答日時：2006/09/04 00:13

　#1です。

　どこまでの知識をお持ちなのかわからないので、初心者的なことから書きます。
　お気を悪くされませんようお願いいたします。

　もちろん「CSS イコール class 属性を使う」ではないんですが、言ってみれば「class属性を使うのは専らCSS関連で」ということでしょうか^^;
　少なくとも私はCSS絡みでしかclassは使いません。

　classという名前どおり、class属性には「その要素が何の役割を持つか」という事を書いて、同じclassの要素を同類項で括る意味があります。（日本語が適切か自信はありませんが）
　なので、例えばあるDIV要素が注釈ならnote、著者のコメントならcommentなどと自由に書けるわけです。
　id属性との違いですが、「同じ意味を持つ要素たち」につけるのがclassで、「ある意味を持った要素一個」を示すのがidです。

が、それだけでは通常ブラウザで見る上で変化が出ることはありません。

　例えば「通常の文章（classなし）」「注釈（class=note）」「著者のコメント（class=comment）」とあった場合に、それぞれ文字のサイズや色を変えたい場合があります。
　そういうときにCSSを用いて、

DIV.note{font-size:8em;}
DIV.comment{color:blue;}

　と指定すると、注釈は文字サイズが80%になり、コメントは文字色が青くなるわけです。

　class・id共に、おそらく本来の目的よりは、こういう用途の方が一般的です。もちろんクラス分けによって属性を変えるんですから、目的通りと言えばそうなんですが。

　うーん、うまくまとまりません。ごめんなさい。
　参考になればいいんですが…

この回答への補足

現実には class で属性を変化させるというのはわかりましたが、div id="" でも可能なのではないでしょうか。私のウェブページは、ところどころテキストの大きさや色が変わっていますが、class 属性はどのタグにもひとつも入っていませんし、何かのタグに属するテキストを一括して同じ属性にしていることもありません。

また、(idname).classname というのは <div id="idname" class="classname"> とは異なるものですか。

補足日時：2006/09/04 00:45

通報する

- 0
- 件

通報する

No.3

回答者： Seravy
回答日時：2006/09/04 00:09

初めてなのでまだまだよくわからない点が多くて当然ですよね。

しかし、class属性とはjamminさんが先述の通り、CSSでクラスを生成したときに使われます。
例えば、CSSファイル(またはページ内の記述に)
.example { text-decoration:underline; }
とあるとします。
すると、class="example"となっているタグ内では先ほどのスタイルが適用されます。これは複数のタグに使い回しをするときに便利です。
しかし、CSSはクラスを使わなくてもスタイルを適用する機能があります。
それは、このような感じです。
td { text-decoration:underline; }
これだと、tdタグ内のモノにスタイルが適用されます。また実際にtdタグを使用するときに何にも意識する必要はありません。単に<td>～</td>と記述するだけです。ただし、これは指定された(今回の場合はtd)というタグにしか使えません。

つまり、CSSを利用してもclassが必要でないときがあること、使いたいときに使う機能であると覚えてもらえば良いと思います。

・・divエレメントが沢山・・というとホームページビルダーのどこでも配置モードを思い出しますね。w
とにかく、理解していただけること、ウェブページの繁盛を祈っています。

- 0
- 件

通報する

No.2

回答者： aqucent
回答日時：2006/09/03 23:50

現在、どんな種類のセレクタを使用しているのでしょうか？

運用方法によって id, class が必要なかったりしますので、補足されると経験者からアドバイスがもらえるかと思います。

style属性を使わずに管理できるのなら、無理にclassを使う必要はないかと思います。

もし、style属性を使う要素があったら、class属性またはid属性に置き換えてみてください。
class,id は何らかの意味を持たせることで効果を発揮します。
ここはコンテンツの左部分だから <div id="left">、ここはコンテンツの右部分だから <div id="right"> という具合です。
この辺は id, class を有効に使っているサイトのソースを参考にされるとよいかと思います。

参考URL：http://fab51.com/info/css_design1.html, http://www.nextindex.net/

この回答への補足

div エレメントに id 属性が（使っていますではなく結果的に）入っています（自分で書いたわけではありません）。

再度ですが、「class 属性を使おうとするときの共通概念」を教えてください。

url のソースでは使用しようとする共通概念が説明されるわけではないです。

補足日時：2006/09/03 23:56

通報する

- 0
- 件

通報する

No.1

回答者： jammin#2
回答日時：2006/09/03 21:56

　こんばんは。

　class属性を使うのは主に、スタイルシート（CSS）でウェブページのデザインをする場合かと思います。
　例えば普通のフォントは黒、ある部分のフォントだけ白というようにしたい場合などに使いますが、詳しい説明はここでは難しいので、興味がおありでしたらCSS講座のサイトや本などもご覧になってください。
　ちょっと使えるようになれれば、サイトの模様替えが楽になったりHTMLファイルがすっきりして、なかなか楽しいですよ。

この回答への補足

はじめて作ったウェブページですが、CSS は使ってあります（div エレメントもいっぱいあります）。でも、class 属性が一切ないのです（もちろん、HTML ファイルのほうです）。
だから、「CSS イコール class 属性を使う」でもないと思うので、フォントの変更以外にもというか、もっと正確には、共通する使用指向概念を教えてほしいのです。

補足日時：2006/09/03 21:57

通報する