CSSレイアウトの良いお手本になるホームページを教えてください。

2カラムレイアウトや、3カラムレイアウト、position:absoluteを使ってのヘッダや
サイドバー配置や、他にも色々。

理想のWEB標準のページを、本では見るだけではなく実例でたくさん見てみたいです。

HTMLソースとCSSを見て勉強します。

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:2006/10/10 02:35:06
  • 終了:2006/10/17 02:23:42

ベストアンサー

id:naynay No.9

naynay回答回数4ベストアンサー獲得回数12006/10/12 23:58:47

ポイント45pt

Lucky bag::blog

CSSの解説などの記事がすごく役立ちます。


大手だと

富士通

三井住友銀行

キューピー

あたりがアクセシビリティに力を入れている事で有名じゃないでしょうか。

id:tetlis

ありがとうございます!こう言うのが見たかったです。

大手のサイトでテーブルレイアウトを使っていない物を始めて見ました。(わたしが知らないだけですが。)

ポイント多めにつけさせてもらいますね。


追加:gooもテーブルレイアウトではなくCSSでうまく作っていますね。

2006/10/13 05:40:47

その他の回答(18件)

id:STRing No.1

STRing回答回数351ベストアンサー獲得回数362006/10/10 10:35:05

ポイント13pt

スタイルシートテクニック/CSS tips

ここなどはどうでしょうか? 画面下固定フッタとか参考になりました。

id:tetlis

期待しているのは、実際のホームページです。

サンプル集とかではありません。

ですが、これは参考になりそうです。ありがとうございます。

2006/10/11 13:55:12
id:kaiton No.2

kaiton回答回数260ベストアンサー獲得回数342006/10/10 18:48: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

で紹介されたサイトも、いろいろあると思います。

id:pipi_n No.3

pipi_n回答回数10ベストアンサー獲得回数02006/10/11 12:09:47

ポイント20pt

Open Source Web Design - Download and upload free web designs.

サンプルがたくさんあります。

ソースを見るだけでもよいお手本になるのではないでしょうか。

id:nishikawakansai No.4

nishikawakansai回答回数1ベストアンサー獲得回数02006/10/11 23:59:54

ポイント13pt

実例と言うことならここなんてどうでしょう。「web creaters」という雑誌のサイトです。

いますぐはじめるCSSデザイン完成例サンプルページ

WEBレイアウトのネタ帖完成例データダウンロード


また、解説ということなら「YEAR OF THE CAT」と言うサイトが勉強になります。レイアウトの崩れについて高い意識を持って書かれています。

CSS YEAR OF THE CAT

id:fue-fue No.5

fue-fue回答回数1ベストアンサー獲得回数02006/10/12 00:21:22

ポイント40pt

http://www.cybergarden.net/

「Web標準の教科書」でも有名な益子貴寛さんのサイトです。

ソースなど私も実際かなり参考にしました。


その他、海外の紹介サイト

http://www.cssbeauty.com/gallery/

http://csslove.net/browse/

などをたまに巡回しています。

id:tetlis

みなさん、本当によいサイトを紹介してくださいますが、この益子さんのサイトが今のところ一番自分の意図していたサイトです。


色々なテクニックを紹介したり、芸術的に良くできているのではなく、実利に叶ったサイト構成でWEB標準としても良くできている。昔(今も)テーブルレイアウトされがちな商用サイトをWEB標準で作り、そして運営がうまく行っている。


そんなサイトをまず丸パクリしてから自分の物にしていきたいと思っていました。


益子さんのサイトは、あの本(愛読しています)を書いた方のサイトだけあって見事なWEB標準だと思います(商用サイトって感じではないですけど)。パクリます。


大手サイトがあまり出てこないので、まだまだWEB標準は"標準"じゃないんですね。

2006/10/12 21:46:06
id:DLDB_Master No.6

DLDB_Master回答回数4ベストアンサー獲得回数02006/10/12 10:24:53

ポイント20pt

デザインリンクデータベースは検索項目が豊富です↓

http://www.designlinkdatabase.net/datas/0/0/0/0000_01/0/-1/0/0/0...

CSSが主体のサイト検索ならこれで、そのほかにも色、Flash、テイストなどなど、たのしいですよ。

id:tetlis

得票数の高いサイトを見ると、確かに見ごたえがあります。


漫然とサイトが並べられているのではなく、どれを見るべきかわかってよかったです。

2006/10/17 02:05:27
id:jun081 No.7

jun081回答回数1ベストアンサー獲得回数02006/10/12 13:17:27

ポイント11pt

海外のサイトですが、CSS Zen Garden がおすすめです。

http://www.csszengarden.com/

最近、毎日コミュニケーションズより書籍も発行されたようです。

id:tetlis

ここよく紹介されますね。

2006/10/17 02:05:46
id:rafbm No.8

rafbm回答回数3ベストアンサー獲得回数02006/10/12 18:50:59

ポイント11pt

「css Zen Garden」

有名ですが、同一のhtmlに対してcssデザインを投稿するサイトです。いろいろなcssが見れます。

日本語バージョン

id:tetlis

本当によく紹介されます。

ありがとうございます。

2006/10/17 02:06:11
id:naynay No.9

naynay回答回数4ベストアンサー獲得回数12006/10/12 23:58:47ここでベストアンサー

ポイント45pt

Lucky bag::blog

CSSの解説などの記事がすごく役立ちます。


大手だと

富士通

三井住友銀行

キューピー

あたりがアクセシビリティに力を入れている事で有名じゃないでしょうか。

id:tetlis

ありがとうございます!こう言うのが見たかったです。

大手のサイトでテーブルレイアウトを使っていない物を始めて見ました。(わたしが知らないだけですが。)

ポイント多めにつけさせてもらいますね。


追加:gooもテーブルレイアウトではなくCSSでうまく作っていますね。

2006/10/13 05:40:47
id:konene No.10

konene回答回数45ベストアンサー獲得回数02006/10/13 02:00:08

ポイント13pt

ここではCSSのレイアウトを40種類集めたサイトを紹介されています。

http://gigazine.net/index.php?/news/comments/20060520_css40layou...

id:kaiton No.11

kaiton回答回数260ベストアンサー獲得回数342006/10/13 09:10:05

ポイント30pt

#2の回答者です。(2回目)

ご質問の趣旨からいうと、これも参考になると思います。

各自治体サイトのアクセシビリティを調査したもので、ここのレーダーチャートの

レイアウト(右下)の項目で点数のいいもの「京都府、名古屋市、堺市など」を

見ているというのはどうでしょうか?

http://www.u-works.co.jp/jichitai/


京都府

名古屋市

堺市


評価のコメントも、サイト作りには役に立つと思います。

id:tetlis

そうです、こう言うのです。

2回目のご紹介ありがとうございました。


おかげさまで、希望していたタイプのお手本サイトも、予想外だけれど勉強になるテクニック集のサイトなどもたくさん紹介してもらえ、増えてきました。

これらをパクったり勉強すれば相当力がつくと思っています。


ちなみに私はこういうWEB標準サイトが良いのだろうと思っているのですが、一般にはそうじゃないんですかね?


まだテーブルレイアウトのサイトが多いですよね。

2006/10/13 09:54:15
id:nyankochan No.12

nyankochan回答回数323ベストアンサー獲得回数92006/10/13 14:32:03

ポイント13pt

良いお手本と言えないかもしれませんが、ちょっと変わった感じ?

http://heartfreespace.com/

HTMLのソースが結構整ってて見やすいかも。

ただ、CSS表記がまだIEのみ対応なのかNCとかでみると仕掛けが上手くいってませんね。

ブラウザ振り分けで位置調整や対応表記入れれば良くなるかも。

1024*768の解像度が一番綺麗ですが、どの解像度でもブラウザ全体を使った表示になるページでした。

id:tetlis

確かにきれいなのですが、ソースを見ると「div」を使いすぎているのが気になります。

2006/10/17 02:08:58
id:ataraxia No.13

ataraxia回答回数293ベストアンサー獲得回数52006/10/14 16:04:43

ポイント9pt

これがお勧めです。

http://odd.to/template.html

id:Hidehisa No.14

Hidehisa回答回数24ベストアンサー獲得回数22006/10/14 23:37:52

ポイント30pt

CSS Mania

http://cssmania.com/

ひたすらCSSデザインのサイトを紹介しています。

眺めてみて、「これどうやってるんだろう」と思ったらそのサイトを訪れて、FirefoxならDOM Inspecter、IEならInternet Explorer Developer Toolbarで自分でスタイルを確認するといいでしょう。

id:tetlis

「Internet Explorer Developer Toolbar」良かったです。Firefoxも近々手を出そうとしているので試して見ます。

まだまだ使いこなしていませんが、全体の構成が見やすく大変便利です。

2006/10/17 02:11:21
id:dpus No.15

dpus回答回数3ベストアンサー獲得回数02006/10/15 06:35:09

ポイント5pt

普段からよく利用している、面白いデザインのサイトを紹介します。


http://wwww.kensapu.com/


横断検索のサイトなのですが、これだけ大量のリンクを1ページ上に、

綺麗に、整然とまとめたサイトは、珍しいのではないかと思います。


デザイン自体は、シンプルそのものですが、CSSを使って、検索ボタンのサイズを

コントロールして、限られたスペースに大量のリンクとボタンを詰め込んでいます。


CSSとJavaScriptを利用して、マウスオーバーで検索ボタンの色を変えたりと

細かいテクニックも使っているようです。


基本的なレイアウトには、テーブルタグを使用しているようなので、

テーブルを使わないCSSレイアウトの参考にはならないかも知れませんが、

機能とデザインが両立した、一見の価値のあるサイトではないかと思います。

id:tetlis

サイトが落ちてしまっているようです。

一見の価値ありとの事なので見てみたいです。

2006/10/15 18:46:42
id:fubabz No.16

fubabz回答回数2ベストアンサー獲得回数02006/10/15 10:38:22

ポイント25pt

実例ではありませんが…

「レイアウトにテーブルを使うのは、なぜいけないか」

http://www.hotdesign.com/seybold/everything.html

うしろの方にサンプルページのリンクがあります

「よりよいHTMLを書くための8ステップ」

http://tantek.com/log/2006/07.html

id:tetlis

WEB標準の意義をおさらいできました。


ご紹介いただいたページから、プロフィールを公開するためのフォーマット(?)「hCard」という物をはじめて知りました。自社サイトに組み込もうと思います。


WEB標準が良いらしいので勉強していますが、単に私が新しい物好きというのもあるかもしれません。

2006/10/15 19:01:26
id:weblogconcent No.17

weblogconcent回答回数20ベストアンサー獲得回数12006/10/15 15:40:35

ポイント20pt

・The Web KANZAKI -- Japan, music and computer

http://www.kanzaki.com/

(←CSSに特化してませんが、XHTMLのお手本でしょう)。


・Webデザインテンプレート集

http://wdt.pekori.jp/

(←サイト名はこうですが、ここ自体、CSSを適切に使ってます。)


・CYBER@GARDEN

http://www.cybergarden.net/

(←すでにどなたかあげていらっしゃいますね)。


・☆☆ WEB宝庫(CGI,CSS,HTML,JavaScript) ☆☆

http://www.ybi.co.jp/koike/index.html

(←ここはおまけということで。CSSについての解説がシンプル明快)。

id:tetlis

基礎を忠実に守ったサイト、といった感じですね。

派手さはないけど、CSS勉強後に最初に見るとよさそうな気がします。

2006/10/17 02:13:23
id:weblogconcent No.18

weblogconcent回答回数20ベストアンサー獲得回数12006/10/15 16:12:54

ポイント17pt

あと、ポータルサイトでまっさきにスタイルシート導入したのは、なんと!(笑)、ここです↓

MSN Japan

http://www.msn.co.jp/home.armx

ソースを見るとわかりますが、テーブルも使ってはいますが、ボーダーetcの属性はすべてスタイルシートかませてます。

不思議なのは、ソースの一行めに文書型宣言がなくいきなり<html>で始まっていること。こちらの表示不具合?

とりあえずご参考まで、です。

id:tetlis

(笑)


意外とかわいいとこありますね。

誰も未定ないとこでがんばってたんですね。

2006/10/17 02:00:49
id:naynay No.19

naynay回答回数4ベストアンサー獲得回数12006/10/16 15:15:51

ポイント30pt

2回目です。

http://www.infoaxia.com/

忘れてました、ここオススメです。

ページ自体もCSSレイアウトで、ここからダウンロードできる「アクセシビリティツールバー」もブラウザチェックのときに便利です。

あと思い付いたのは携帯会社とか(auは残念ながらテーブルレイアウトでした)

http://www.nttdocomo.co.jp/

http://mb.softbank.jp/mb/

id:tetlis

「アクセシビリティツールバー」ご紹介ありがとうございます。アクセシビリティ対策はチェックリストで確認するものが多かったので、これは便利そうです。

auの封筒に入っている小さなパンフレットのデザインが大好きなだけに、一社だけCSS対応していないのは残念でした。

2006/10/17 02:16:17

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません