このHTMLとCSSの構造を教えてください！

質問

http://www.apple.com/jp/downloads/
この中の下のほうにある「注目のダウンロード」の中にある部分(QuickCopyやAppleトレーニング Widgetなどのレイアウトです)を作ろうと思うのですが、自力ではうまく作れません。

divの後には普通idがきて、そして“"で指定をすればこのページだと6つのidが必要になるとおもうのですが、アップルのソースを開いてみると<div class="column first">というように
idを指定せずにいきなりclassをかけるやり方になっています。
自分は初めて見たのでどうなっているのかよくわかりません(初心者なもので…)。
CSSを含め、どのようになっているのか分かる方いましたら回答お願いします！

回答No.3

ran_2323

もしお使いのブラウザがFirefoxなら、「Web Developer（http://www.infoaxia.com/tools/webdeveloper/）」というツールをインストールしてみるといいと思います。
「CSS」→「スタイル情報を表示する」にチェックを入れれば、欲しい箇所だけのCSSを見ることができます。
CSSの構造を知る上でも便利なツールですので、お試しあれ。

回答No.2

noname#49614

もしかして質問者さんは

--------------
<div id="huga">
<div class="hoge">
～～～～～
</div>
</div
-------------

という風に、まずIDがあってその内側にCLASSとしならなければいけない、というふうに勘違いをされているのでしょうか。
そもそも「ID」は必須ではありません。よく、ページ内で一回だけの(一意的に決まる)場合がID、複数回使用する場合がCLASSと説明されます。
極端な話、IDなしCLASSのみでも出来るわけで、本やサイトによっては初心者には「全部をCLASSで」を勧めたりしています。

このページの場合「grid3col boxbottom」というCLASSを付けた<div>で６つの要素を囲み、「column first, column, column last」のCLASSをつけた３つの要素を並べて<hr>で区切りまた「column first, column, column last」という構造になっている…筈です(読み違いあったらすみません)。

回答No.1

shimix

>divの後には普通idがきて、そして“"で指定をすればこのページだと
>6つのidが必要になるとおもうのですが、

縦方向の位置指定などはないのですから、横方向の3カラム分（column first, column, column last）のclassでの指定でじゅうぶんだと思いますけど。なぜIDで個別に指定する必要があると思われたのでしょうか？