２カラムレイアウトや、３カラムレイアウト、position:absoluteを使ってのヘッダや
サイドバー配置や、他にも色々。
理想のWEB標準のページを、本では見るだけではなく実例でたくさん見てみたいです。
HTMLソースとCSSを見て勉強します。
No.2
260
34
13pt
重なっているかもしれませんが..
実例でたくさんとのことなので、最近はてブでもでてましたが 「W3C準拠なクールデザインリンク集「W3C Sites」」
http://phpspot.org/blog/archives/2006/10/w3cw3c_sites.html
で
http://www.w3csites.com/sites_thumbs.asp
が紹介され、いろいろなサイトのサムネイルが一挙に見ることができます。
以前の質問で、フレームをスタイルシートで
http://q.hatena.ne.jp/1157914431
で紹介されたサイトも、いろいろあると思います。
No.3
100
20pt
Open Source Web Design - Download and upload free web designs.
サンプルがたくさんあります。
ソースを見るだけでもよいお手本になるのではないでしょうか。
No.4
10
13pt
実例と言うことならここなんてどうでしょう。「web creaters」という雑誌のサイトです。
また、解説ということなら「YEAR OF THE CAT」と言うサイトが勉強になります。レイアウトの崩れについて高い意識を持って書かれています。
No.5
10
40pt
「Web標準の教科書」でも有名な益子貴寛さんのサイトです。
ソースなど私も実際かなり参考にしました。
その他、海外の紹介サイト
http://www.cssbeauty.com/gallery/
などをたまに巡回しています。
みなさん、本当によいサイトを紹介してくださいますが、この益子さんのサイトが今のところ一番自分の意図していたサイトです。
色々なテクニックを紹介したり、芸術的に良くできているのではなく、実利に叶ったサイト構成でWEB標準としても良くできている。昔（今も）テーブルレイアウトされがちな商用サイトをWEB標準で作り、そして運営がうまく行っている。
そんなサイトをまず丸パクリしてから自分の物にしていきたいと思っていました。
益子さんのサイトは、あの本（愛読しています）を書いた方のサイトだけあって見事なWEB標準だと思います（商用サイトって感じではないですけど）。パクリます。
大手サイトがあまり出てこないので、まだまだWEB標準は"標準"じゃないんですね。
No.6
40
20pt
デザインリンクデータベースは検索項目が豊富です↓
http://www.designlinkdatabase.net/datas/0/0/0/0000_01/0/-1/0/0/0...
CSSが主体のサイト検索ならこれで、そのほかにも色、Flash、テイストなどなど、たのしいですよ。
得票数の高いサイトを見ると、確かに見ごたえがあります。
漫然とサイトが並べられているのではなく、どれを見るべきかわかってよかったです。
No.9
41
ここでベストアンサー
ありがとうございます！こう言うのが見たかったです。
大手のサイトでテーブルレイアウトを使っていない物を始めて見ました。（わたしが知らないだけですが。）
ポイント多めにつけさせてもらいますね。
追加：gooもテーブルレイアウトではなくCSSでうまく作っていますね。
No.10
450
13pt
ここではCSSのレイアウトを40種類集めたサイトを紹介されています。
http://gigazine.net/index.php?/news/comments/20060520_css40layou...
No.11
26034
30pt
＃２の回答者です。(２回目)
ご質問の趣旨からいうと、これも参考になると思います。
各自治体サイトのアクセシビリティを調査したもので、ここのレーダーチャートの
レイアウト（右下）の項目で点数のいいもの「京都府、名古屋市、堺市など」を
見ているというのはどうでしょうか？
http://www.u-works.co.jp/jichitai/
評価のコメントも、サイト作りには役に立つと思います。
そうです、こう言うのです。
2回目のご紹介ありがとうございました。
おかげさまで、希望していたタイプのお手本サイトも、予想外だけれど勉強になるテクニック集のサイトなどもたくさん紹介してもらえ、増えてきました。
これらをパクったり勉強すれば相当力がつくと思っています。
ちなみに私はこういうWEB標準サイトが良いのだろうと思っているのですが、一般にはそうじゃないんですかね？
まだテーブルレイアウトのサイトが多いですよね。
No.12
3239
13pt
良いお手本と言えないかもしれませんが、ちょっと変わった感じ？
HTMLのソースが結構整ってて見やすいかも。
ただ、CSS表記がまだIEのみ対応なのかNCとかでみると仕掛けが上手くいってませんね。
ブラウザ振り分けで位置調整や対応表記入れれば良くなるかも。
1024*768の解像度が一番綺麗ですが、どの解像度でもブラウザ全体を使った表示になるページでした。
確かにきれいなのですが、ソースを見ると「div」を使いすぎているのが気になります。
No.14
242
30pt
CSS Mania
ひたすらCSSデザインのサイトを紹介しています。
眺めてみて、「これどうやってるんだろう」と思ったらそのサイトを訪れて、FirefoxならDOM Inspecter、IEならInternet Explorer Developer Toolbarで自分でスタイルを確認するといいでしょう。
「Internet Explorer Developer Toolbar」良かったです。Firefoxも近々手を出そうとしているので試して見ます。
まだまだ使いこなしていませんが、全体の構成が見やすく大変便利です。
No.15
30
5pt
普段からよく利用している、面白いデザインのサイトを紹介します。
横断検索のサイトなのですが、これだけ大量のリンクを1ページ上に、
綺麗に、整然とまとめたサイトは、珍しいのではないかと思います。
デザイン自体は、シンプルそのものですが、CSSを使って、検索ボタンのサイズを
コントロールして、限られたスペースに大量のリンクとボタンを詰め込んでいます。
CSSとJavaScriptを利用して、マウスオーバーで検索ボタンの色を変えたりと
細かいテクニックも使っているようです。
基本的なレイアウトには、テーブルタグを使用しているようなので、
テーブルを使わないCSSレイアウトの参考にはならないかも知れませんが、
機能とデザインが両立した、一見の価値のあるサイトではないかと思います。
サイトが落ちてしまっているようです。
一見の価値ありとの事なので見てみたいです。
No.16
20
25pt
実例ではありませんが…
「レイアウトにテーブルを使うのは、なぜいけないか」
http://www.hotdesign.com/seybold/everything.html
うしろの方にサンプルページのリンクがあります
「よりよいHTMLを書くための8ステップ」
WEB標準の意義をおさらいできました。
ご紹介いただいたページから、プロフィールを公開するためのフォーマット(？)「hCard」という物をはじめて知りました。自社サイトに組み込もうと思います。
WEB標準が良いらしいので勉強していますが、単に私が新しい物好きというのもあるかもしれません。
No.17
201
20pt
・The Web KANZAKI -- Japan, music and computer
（←CSSに特化してませんが、XHTMLのお手本でしょう）。
・Webデザインテンプレート集
（←サイト名はこうですが、ここ自体、CSSを適切に使ってます。）
・CYBER@GARDEN
（←すでにどなたかあげていらっしゃいますね）。
・☆☆ WEB宝庫(CGI,CSS,HTML,JavaScript) ☆☆
http://www.ybi.co.jp/koike/index.html
（←ここはおまけということで。CSSについての解説がシンプル明快）。
基礎を忠実に守ったサイト、といった感じですね。
派手さはないけど、CSS勉強後に最初に見るとよさそうな気がします。
No.18
201
17pt
あと、ポータルサイトでまっさきにスタイルシート導入したのは、なんと！（笑）、ここです↓
MSN Japan
http://www.msn.co.jp/home.armx
ソースを見るとわかりますが、テーブルも使ってはいますが、ボーダーetcの属性はすべてスタイルシートかませてます。
不思議なのは、ソースの一行めに文書型宣言がなくいきなり<html>で始まっていること。こちらの表示不具合？
とりあえずご参考まで、です。
(笑)
意外とかわいいとこありますね。
誰も未定ないとこでがんばってたんですね。
No.19
41
30pt
2回目です。
忘れてました、ここオススメです。
ページ自体もCSSレイアウトで、ここからダウンロードできる「アクセシビリティツールバー」もブラウザチェックのときに便利です。
あと思い付いたのは携帯会社とか（auは残念ながらテーブルレイアウトでした）
「アクセシビリティツールバー」ご紹介ありがとうございます。アクセシビリティ対策はチェックリストで確認するものが多かったので、これは便利そうです。
auの封筒に入っている小さなパンフレットのデザインが大好きなだけに、一社だけCSS対応していないのは残念でした。
adityakin9
2018/12/08 19:53:10
185
171
ありがとうございます！こう言うのが見たかったです。
大手のサイトでテーブルレイアウトを使っていない物を始めて見ました。（わたしが知らないだけですが。）
ポイント多めにつけさせてもらいますね。
追加：gooもテーブルレイアウトではなくCSSでうまく作っていますね。