ウェブマスターフォーラム

Web 制作 (SEO, SEM, CSS, Web デザイン等) に関する話題を扱うフォーラムです。

新規ユーザー登録 | パスワードを忘れた

テーマ : ウェブデザイン

★東京オフ会予定 3/1 (土)
★大阪オフ会予定 2/23 (土)
オフ会FAQ

スタイルシートや配色・レイアウト、ナビゲーションやユーザビリティについての話題を扱います。

トピック : CSSのみでのレイアウト

CSSのみでのデザインをやってみよ♪

次の古いレス20件 << 最新のレス20件 >> 次の新しいレス20件

No.1 - 2005年12月14日 22:53 hideki （10ポイント）: CSSのみでデザインするのが流行してるみたいです。
CSSでのデザインについて色々語っていきましょう♪

いきなり質問ですいませんが、CSSでのメリットはSEO的にも良いとのことですが、どれ程違いがあるのでしょうか？
No.2 - 2005年12月15日 00:53 幸之介（10ポイント）: CSSだからSEOになるわけではなくて、CSSでデザインすると必然的にHTMLを構造的に書くことになるので、それがSEOになるというわけです。
分かりやすい例では、見出しに<h1>を使うのと<font size="7">を使う違い。また、強調キーワードに<strong>を使うのと<b>を使う違い。
レイアウト面では、テーブルデザインだとコンテンツの順序をテーブル通りにしかできませんが、CSSを使えば、ほぼ文書のあるべき構造に従った順序や位置関係でHTMLを記述できます。

まぁそうは言っても、CSSにしたらGoogleで20位だったものが5位とかにジャンプアップするかといったら、そこまででもないとは思います。「ちょっとだけ」というのが的確でしょう。
No.3 - 2005年12月15日 00:54 幸之介（10ポイント）: ちょうどわたしも、自分のサイトのリニューアルにともなって最近CSS関係のサイトを見まくっていたので、個人的に参考になったサイトを紹介しておきます。

hail2u.net - Weblog - Negative Margin Trick
http://hail2u.net/blog/webdesign/negative_margin_trick.html
hail2u.net - Weblog - 大きな画像でレイアウトがあばばばばば
http://hail2u.net/blog/webdesign/css-tips-5.html

ADP: handheldメディア用CSSの作成（1）
http://adp.daa.jp/archives/000170.html

CSS Beauty - SkillShare - My Top 12 CSS Articles/Tricks of 2005 (one for each month) - 2005年のCSSテクニック12選。英語はあんまり読みたくないんだけど…。
http://www.cssbeauty.com/skillshare/comments.php?DiscussionID=11&page=1

革命的CSS - Personnel
http://members.jcom.home.ne.jp/jintrick/Personal/CSS.html
Web のあれこれ
http://homepage2.nifty.com/tomchem/www/
より良いWorld Wide Webを目指す為の覚書
http://www.takamagahara.info/www/

Internet Explorer (Windows) CSSバグリスト
http://cssbug.at.infoseek.co.jp/detail/winie.html

Browsershots
http://browsershots.org/
No.4 - 2005年12月15日 10:55 ciel （10ポイント）: すべてCSSでデザインするとブラウザによってCSSの見え方が異なりレイアウトが崩れるという問題があります

Mac、Windowsとも主要ブラウザでの表示を確認しながら作っていくと手間かかって仕方がありません。
特にMac版のInternetExplorer5.xはSafariと同等くらいのユーザー数ではないかと思うのですが
開発も終了ということで改善される余地はありません

無視しても良いユーザー数なのかもしれませんが私自身のメインブラウザでもありますしできるだけ同じレイアウトになるようにしたいというのが心情ですが根性がないのでちょっとくらいの崩れならあきらめて知らん顔しています。
No.5 - 2005年12月15日 12:37 ﾔﾏﾓﾄ（10ポイント）: この間から数日、どこで調べてもわからなかったことがあるので、
このスレッドが立って嬉しいです。

もしかするともしかして、CSSで指定できるデザインの要素というの
は、エンコードによって違うんでしょうか？
メタタグにcharset=iso-8859-1を設定すると、DIVの横段組とか
borderの設定がまったく効かなくなってしまいます。
仕方なく、普通のテーブル+CSSでデザインしているんですが、
何か解決方法はあるでしょうか？
No.6 - 2005年12月15日 23:40 ref （10ポイント）: 文書内CSS記述部分の特定文字が文字として認識されてないのが
原因かと思われます。

知識不足のためどの文字かはわかりませんが･･･ｽﾐﾏｾﾝ

エスケープ文字で対応するか
外部スタイルシートにすれば解決するかと思います。

テストしてみたところ
外部CSSだとDIVの横段組、borderの設定も効きましたよ。
No.7 - 2005年12月16日 08:20 ﾔﾏﾓﾄ（10ポイント）: refさん、ありがとうございます。
う～ん、実は外部CSSにしているんですよ。アメリカのCSSサイトを
見てみても、どうやら効くみたいなので、自分の設定のどこかが
悪いんだろと思ってはいるのですが・・・

エスケープ文字については初めて知りました。もうちょっと
勉強してみないと、まだピンとはきていないんですが、
活用できそうな感じがします。ありがとうございます！
No.8 - 2005年12月16日 11:11 hideki （10ポイント）: みなさんレスありがとうございます。
CSSのみでのデザインにするとある程度デザインは限られてくるみたいですね。

ということは・・・

? テーブルのみでCSSを使用しない
? テーブルとCSSの併用
? CSSのみで構築

一般的な商用サイトだと?がベストなようですね。またアダルトサイトなどエントランスページ有りの場合だと表紙だけCSSのみで構築しても面白いかもしれません。
No.9 - 2005年12月16日 11:55 たつ（10ポイント）: 僕も、上記の選択肢だと?２?がベストだと思います。
ただ、CSSやテーブルを使うにあたって

場所 → <BODY>直下はCSSでデザインした方がいいとか
比率 → テーブルとCSSとの使う割合(比率)

これらも重要になってくるかとは思います。
No.10 - 2005年12月16日 13:42 幸之介（10ポイント）: 知らなくちゃいけないテクニックは多いけど、それさえ知っていればCSSでなんでもできる、というのが最近のわたしの印象です。

段組レイアウト - AllAbout スタイルシートで段組をデザインする方法シリーズ
http://allabout.co.jp/computer/hpcreate/closeup/CU20041111A/index.htm
http://allabout.co.jp/computer/hpcreate/closeup/CU20041115A/index.htm
http://allabout.co.jp/computer/hpcreate/closeup/CU20050228A/index.htm
http://allabout.co.jp/computer/hpcreate/closeup/CU20050307A/index.htm
http://allabout.co.jp/computer/hpcreate/closeup/CU20050328A/index.htm
http://allabout.co.jp/computer/hpcreate/closeup/CU20050401A/index.htm

段組レイアウトのテクニック
http://www.lucky-bag.com/archives/2005/08/re_css_no_nazo.html
http://hail2u.net/blog/webdesign/negative_margin_trick.html

CSS で垂直センター配置
http://www.lucky-bag.com/archives/2005/03/verticalalign_m.html
No.11 - 2005年12月16日 14:05 ciel （10ポイント）: わたしもひとつ有用なサイトをご紹介します
CSSバグリスト
http://cssbug.at.infoseek.co.jp/index.html
回避方法とかもあって勉強になります
No.12 - 2005年12月16日 16:10 ref （10ポイント）: ﾔﾏﾓﾄさん
外部でﾀﾞﾒだったんですね。なぜですかねぇ～？？
もし原因分かったら是非教えてくださいね。
頑張ってください。

CSSﾈﾀで僕も1つご紹介。
↓ｸﾛｽﾌﾞﾗｳｻﾞ実現したい方にｵｽｽﾒ
http://codeweb.seesaa.net/article/7658025.html
No.13 - 2005年12月18日 10:29 ﾔﾏﾓﾄ（10ポイント）: あれから色々、やってみているんですけど、結局、CSSはまだまだ
初心者の私には分からずじまいです・・・。でも、海外向けサイト
ということもあるので、段組については無理をせずテーブルを使った
方がいいかな・・・とも（笑）。
borderについても、いつか分ればご報告します。

私もネタをひとつ・・・
こちらでレスされている皆様には初歩的すぎる内容だと思いますが、
CSSはかじり始めたばかりの私が、ここを読んで、初めて段組が
わかったサイトです。初心者の方はぜひどうぞ

http://www.2step-css.com/
No.14 - 2006年01月25日 12:30 spiceG （10ポイント）: CSSを極めよう？と調べていたら、
やっと　Strict　と　Transitional　の違いがわかりました。
＜遅いって。

Transitionalだと100点近いのに、Strictだと
-114点でした。（笑）

やはり、こういう場合地味にチマチマ修正していく他
ないんですよね。精進します。。。
No.15 - 2006年01月28日 16:32 ciel （10ポイント）: 最近よく見かけるCSSの手法でテキストでのボタンの背景画像にa:hoverで画像を指定し本来のアンカーされたテキスト部分をインデントやposition等々で画面外へとばしたり見えないようにしたりするCSSナビゲーションを使った例を見かけます。
画面外に飛ばしたテキストは好きなようにかけると言うことです。

Googleの品質に関するガイドライン - 推奨という欄に「隠しテキストや隠しリンクを使用しない。」という一文があります。
この手法だと厳密に言うとスパム扱いになると思うのですがいかがなものでしょう。

見本を作ってみました
http://park12.wakwak.com/%7Eciel/sa/index.html
No.16 - 2006年02月01日 14:25 Brave Heart （10ポイント）: 確かに大手のwebサイトでもその手法を採用しているところはありますね。それがgoogleのガイドラインに抵触するかどうかは判断できませんが、「CSSを外部ファイルにすればロボットが読めない」というのは間違っていると思います。もし外部ファイルで回避できるのならキーワードのテキストを背景と同じ色にして隠したりフォントサイズを極小にして、隠しテキストにすることも可能ということになってしまいます。（ちなみにFlash内のテキストもクロールすることができます。）
googleのガイドラインにはあくまでも「推奨」「対応策を実施することがあります」と、断定的な言い方はしていません。このことからインデント等で不可視にする手法が必ずしもスパムと見なされているとは限らないと言えるんじゃないでしょうか？恐らくその手法の頻度が高く、悪質であると明確に分かればスパムと見なされるとか。
理論的に考えるとこういう見方ができると思いました。

次の古いレス20件 << 最新のレス20件 >> 次の新しいレス20件