CSSデザインのテンプレートを作ってみるスレ

1 ：05/03/25 〜 最終レス ：11/09/07

段組の数、リキッドか固定幅か、positionかfloatか、
と言うように、サイトを作る時のデザインは様々なものがあります。
そこで、CSSデザインの色々なテンプレートを作ってみるのがこのスレです。
できるだけStrictでValidなものにしましょう。
ブラウザごとのバグやSEO対策を施したテンプレなど、色々話しましょう。

2 ：

削除依頼だしました

3 ：

ＣＳＳ３ｇｅｔ！

4 ：

海外のサイトは、固定幅の2段組がセンタリングされてるのが多い。
以上

5 ：

作ってあげるだったらおもしろいのに、みるスレかよ

6 ：

じゃあ今から
「CSSデザインのテンプレートを作ってあげるスレ」
にするらしいって聞いた。

7 ：

「CSSデザインのテンプレートを作ってあげるスレ」もいいけど、
こんなのはどうだろうか？
・ネタ（依頼）がないときはみんなで好き勝手作ったものを晒し合う
・ネタ（依頼）が来たら適当に作ってあげる
・まとめサイトでも作ってデータベース化

8 ：

重複だね。廃れてるけど。
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
http://pc8.2ch.net/test/read.cgi/hp/1038678267/

9 ：

>>8
そっちは「お題のHTMLにスタイルを適用させる」のが目的でしょ？
>>7の考えを取り入れたとしたら、「自分らで1からテンプレを作る」ってことになるだろ？
だからちょっと違うんじゃないかと思うが。

10 ：

俺が見た3カラムの中ではこれ↓が最高と思うがどう？
http://www.stunicholls.myby.co.uk/layouts/3cols.html

11 ：

>>10
Footerごと動くのが激しくうざいな
っていうかこの汚いソースはある意味反則技じゃないのか？

12 ：

>>10
すげーどうやってるんだと思ったら
ボーダーかよ。背景画像使えないじゃん。

13 ：

>>10
どうしてそれが最高だと思ったの？

14 ：

何のために position:relative を使ってるのかが分からんのだけど。

15 ：

>>13
ソースがわりと簡単で、どのカラムが最長になってもOKだから

16 ：

スタイルシートの手本コンテンツがあるサイト
http://www20.tok2.com/home/ilovemankonoana/

17 ：

ルール
フォントサイズ指定は相対固定に関わらず禁止ね。

18 ：

後付ルールうざい。

19 ：

フォントサイズ指定、幅固定は論外だろ。

20 ：

期待age

21 ：

失望sage

22 ：

デザインテンプレートではないけれど、俺が作った透過型丸角テーブル
透過型丸角テーブル
http://grecks.s54.xrea.com/test/table/maru-table-touka.html

23 ：

たかが角丸テーブルの為に、なんでこんなに苦労しないといけないんだろうな。
ネストしたり、空のタグ仕込んだり、不本意なのではないだろうか。
CSS3で解消されるのかな。

24 ：

固定幅だと、角丸テーブルだとか、ボックスに関するデザインの自由度は広がるよね。
幅が決まってるわけだから、全部画像で作ることも出来るし。
その点、リキッドレイアウトはそれが出来ないのが難しい。

25 ：

>>23
ここ↓とかすごいネスト
Round Corners
http://www.sovavsiti.cz/css/corners.html

26 ：

　

27 ：

こんなのもあるよ
http://pro.html.it/esempio/nifty/nifty1.html
http://pro.html.it/esempio/nifty/

28 ：

>>27
無駄なタグを入れなきゃいけないし、この例だとBタグ使ってるし、
あまり好きにはなれない。
>>24の言うように、固定幅なら上下のボックスの背景画像でなんとか出来るわけだが…

29 ：

ここなんかすばらしい→ttp://odd.to/

30 ：

* NN4 には CSS を読み込ませない（定石）
* ブラウザのデフォルトスタイルをす（定石）
* /* 全指定 */
{margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;}
* img 要素に vertical-align:bottom; と border:none; を指定（定石）
* line-height は数値のみを指定（定石／em や % で指定するのは問題の元）
* width を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
* height を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
* float を指定した要素に width を必ず指定する（文法規則）
* float を指定した要素に margin を指定しない（IE が2倍値で描画する）
* float で回り込む要素の内容が少ないとき、回り込む側にも float を指定するか、高さを指定（IE6 対策）
* float した要素の下に隙間を作りたい場合、float した要素に margin-bottom を指定＋親要素に padding-bottom を指定（注：検証不十分）
* position:absolute; を指定した要素には margin を指定しない（注：検証不十分）
* position:absolute; を指定した要素にはなるべく width も指定する（定石）
* position:absolute; の基準として right と bottom は避ける（Opera6 を無視しない場合）
* position:relative; を多用しない（定石／たいていスクロールが重くなる）
* z-index を指定する要素には position プロパティで static 以外の値を指定（文法規則）
* マイナスの margin を指定した要素と背景画像を重ねない（IE で背景画像が切れる）
* background-attachment:fixed; を多用しない（定石／スクロールが重くなったり表示が乱れたり）
* overflow プロパティを使う場合 MacIE5 は諦める（特殊なケース以外では内容が消える）
とりあえずこれを入れとけ

31 ：

>>30
http://deztec.jp/design/05/02/advice325.html
ここだろ？

32 ：

　

33 ：

どんな情報を提供するかによって、そのサイトの文書構造も違ってきます。
文書構造が違えば、当然CSSの設定も多種多様になるので、
CSSのテンプレートってあまり便利じゃないと思う。
ただ、個人的によく使っている設定はコレ。
@media print{
body{
font-family : serif;
font-size : 10.5pt;
}
.navi{
display : none;
}
}
ゴシック系フォント(IE,Operaのデフォルト)って紙媒体だとゴツくなるので
見出し以外は明朝体にしてます。
あと、「戻る」みたいなナビゲーション関係の情報は、紙媒体では必要ないので
その部分だけ印刷されないようにします。
※HTMLでは <div class="navi"><a href="./">戻る</a> と記述します。

34 ：

ナヴィゲーションはlink要素でやれ！ とHTMLヲタの漏れが来ましたよ。

35 ：

>>34
世の中にあるブラウザが、Opera7系やLynxだけだったらそれで良いんだけどね。
大手ブラウザが link要素のナビゲーション機能をサポートしてくれれば
是非とも、そうしたいところですよー
HTML文書の中で、述べたい情報以外の要素を配置しなければならないのは
正直うっとうしい。

36 ：

つーかOperaのUIは不十分だと思う。
ボタンにアイコンとか無くて分かりにくいし。

37 ：

sage

38 ：

sage

39 ：

sage

40 ：

sage

41 ：

sage

42 ：

sage

43 ：

sage

44 ：

今どのくらいできてるの？

45 ：

作ってあげるスレはここですか？
http://www.geocities.jp/yama6313/
ロールオーバーリンクに挑戦しましたが、お手上げでした。
どなたかテンプレ作って頂けませんか？
ちなみに　what's new　のつづりは後で直しますので・・。
画像の一つのサイズは　ｗ97　ｈ21　です。
時間がある方、こんなの余裕じゃんって方よろしくお願いします。

46 ：

全部つなげてありますが分割したほうがいいのであればこちらでそうしますのでお願いします。

47 ：

他スレで聞いてきます。

48 ：

デザイン依頼のある方、掲示板でもメールでもよろしいので、ご依頼下さい。
無償で制作します。
　　　↓専用掲示板↓
http://jbbs.livedoor.jp/movie/7477/

49 ：

sage

50 ：

─────────────────────
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　×
─────────────────────
　 ／＼　　　警告
／　┃ ＼　 　　Webサイト所有者は
＼　 ・　／　　　早めにInternetExplorer 7での
　 ＼／　　 　 　表示の確認を！
─────────────────────

51 ：

sage

52 ：

sage

53 ：

こういうことか
ttp://ja.wikipedia.org/wiki/CSS%E7%9D%80%E3%81%9B%E6%9B%BF%E3%81%88%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

54 ：

sage

55 ：

>>53
そこのHTMLテンプレ一部変なタグがある気がする
戻りタグの指定とか。

56 ：

一部じゃなくて大分変だが
それよりそこの問題は放置だ

57 ：

>>53
<blockquote>
また、基礎HTMLはw3cで定められているHTMLの規格に完全には準拠していない。
このことは、使いやすさと文法の正確さの両立が難しいということも示している。
</blockquote>
どのへんが準拠してないの？
Another HTML-lintは何も言わないけど。

58 ：

sage

59 ：

sage

60 ：

>>56
できるよ。
以上。
はい次の方。

61 ：

sage

62 ：

現在のバージョンは、
・セールスレターテンプレート集(６８通)
・売れるセールスレターの書き方
・ダイレクトメールワークシート
・穴埋め式Ｅメールテンプレート（１４通）
・究極のセールスレターツールＢＯＸ
など、合計で５００ページ近いパッケージとＣＤＲＯＭが
セットになっています。
ただ、この無料お試しはだいぶコストがかかるらしいので
５００個の限定だそうです。
興味があればこちらをクリックしてください。
http://www.123marketing.jp/yanik/indextrial.php?jvcd=16797

63 ：

過疎

64 ：

http://dqmenu.design-agent.jp/

65 ：

CSSで作る超簡単ドラクエ風メニュー http://dqmenu.com/

66 ：

>>65
このレベルでweb制作会社の取締役とはｗ

67 ：

上左右に分かれたフレームを使わないCSSで作成してほしいです
外部CSSファイルの使用を希望します

68 ：11/09/07

この数はすごいよ。
自分も使ってるけどなかなか重宝してる。
http://omegamh.client.jp/