5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:2005/03/25(金) 12:09:58 ID:FbDza1om
段組の数、リキッドか固定幅か、positionかfloatか、
と言うように、サイトを作る時のデザインは様々なものがあります。

そこで、CSSデザインの色々なテンプレートを作ってみるのがこのスレです。
できるだけStrictでValidなものにしましょう。

ブラウザごとのバグやSEO対策を施したテンプレなど、色々話しましょう。

2 :Name_Not_Found:2005/03/25(金) 12:34:16 ID:???
削除依頼だしました

3 :Name_Not_Found:2005/03/25(金) 13:04:34 ID:???
CSS3get!

4 :Name_Not_Found:2005/03/25(金) 14:36:40 ID:???
海外のサイトは、固定幅の2段組がセンタリングされてるのが多い。

以上

5 :Name_Not_Found:2005/03/25(金) 16:28:54 ID:3Til0uOV
作ってあげるだったらおもしろいのに、みるスレかよ

6 :Name_Not_Found:2005/03/25(金) 17:37:33 ID:???
じゃあ今から
「CSSデザインのテンプレートを作ってあげるスレ」
にするらしいって聞いた。

7 :Name_Not_Found:2005/03/25(金) 18:50:07 ID:???
「CSSデザインのテンプレートを作ってあげるスレ」もいいけど、
こんなのはどうだろうか?

・ネタ(依頼)がないときはみんなで好き勝手作ったものを晒し合う
・ネタ(依頼)が来たら適当に作ってあげる
・まとめサイトでも作ってデータベース化

8 :Name_Not_Found:2005/03/25(金) 19:04:39 ID:???
重複だね。廃れてるけど。

* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
http://pc8.2ch.net/test/read.cgi/hp/1038678267/

9 :Name_Not_Found:2005/03/25(金) 21:56:34 ID:???
>>8
そっちは「お題のHTMLにスタイルを適用させる」のが目的でしょ?
>>7の考えを取り入れたとしたら、「自分らで1からテンプレを作る」ってことになるだろ?
だからちょっと違うんじゃないかと思うが。

10 :Name_Not_Found:2005/03/25(金) 22:45:28 ID:n0KyfBLw
俺が見た3カラムの中ではこれ↓が最高と思うがどう?

http://www.stunicholls.myby.co.uk/layouts/3cols.html

11 :Name_Not_Found:2005/03/25(金) 22:52:15 ID:???
>>10
Footerごと動くのが激しくうざいな
っていうかこの汚いソースはある意味反則技じゃないのか?

12 :Name_Not_Found:2005/03/25(金) 23:04:29 ID:???
>>10
すげーどうやってるんだと思ったら
ボーダーかよ。背景画像使えないじゃん。

13 :Name_Not_Found:2005/03/25(金) 23:16:44 ID:???
>>10
どうしてそれが最高だと思ったの?

14 :10:2005/03/25(金) 23:19:24 ID:n0KyfBLw
何のために position:relative を使ってるのかが分からんのだけど。

15 :10:2005/03/25(金) 23:21:18 ID:???
>>13
ソースがわりと簡単で、どのカラムが最長になってもOKだから

16 :Name_Not_Found:2005/03/25(金) 23:40:09 ID:???
スタイルシートの手本コンテンツがあるサイト
http://www20.tok2.com/home/ilovemankonoana/

17 :Name_Not_Found:2005/03/25(金) 23:42:26 ID:???
ルール
フォントサイズ指定は相対固定に関わらず禁止ね。

18 :Name_Not_Found:2005/03/26(土) 00:04:54 ID:???
後付ルールうざい。

19 :Name_Not_Found:2005/03/26(土) 12:21:42 ID:???
フォントサイズ指定、幅固定は論外だろ。

20 :Name_Not_Found:2005/03/26(土) 16:24:28 ID:???
期待age

21 :Name_Not_Found:2005/03/26(土) 17:04:12 ID:???
失望sage

22 :Name_Not_Found:2005/03/26(土) 21:47:01 ID:???
デザインテンプレートではないけれど、俺が作った透過型丸角テーブル

透過型丸角テーブル
http://grecks.s54.xrea.com/test/table/maru-table-touka.html

23 :Name_Not_Found:2005/03/26(土) 22:08:52 ID:???
たかが角丸テーブルの為に、なんでこんなに苦労しないといけないんだろうな。
ネストしたり、空のタグ仕込んだり、不本意なのではないだろうか。
CSS3で解消されるのかな。

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

25 :Name_Not_Found:2005/03/26(土) 23:49:02 ID:???
>>23
ここ↓とかすごいネスト

Round Corners
http://www.sovavsiti.cz/css/corners.html


26 :Name_Not_Found:2005/03/27(日) 23:36:30 ID:???
 

27 :Name_Not_Found:2005/03/27(日) 23:42:22 ID:???
こんなのもあるよ
http://pro.html.it/esempio/nifty/nifty1.html
http://pro.html.it/esempio/nifty/

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

29 :Name_Not_Found:2005/03/30(水) 16:59:52 ID:???
ここなんかすばらしい→ttp://odd.to/

30 :Name_Not_Found:2005/03/31(木) 23:19:01 ID:???
* 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 :Name_Not_Found:2005/03/31(木) 23:38:58 ID:???
>>30
http://deztec.jp/design/05/02/advice325.html

ここだろ?

32 :Name_Not_Found:2005/04/03(日) 11:52:23 ID:4BfH2Qs8
 

33 :Name_Not_Found:2005/04/29(金) 15:56:57 ID:RX7MvGbJ
どんな情報を提供するかによって、そのサイトの文書構造も違ってきます。
文書構造が違えば、当然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 :Name_Not_Found:2005/05/02(月) 18:33:38 ID:???
ナヴィゲーションはlink要素でやれ! とHTMLヲタの漏れが来ましたよ。

35 :33:2005/05/03(火) 01:18:41 ID:???
>>34
世の中にあるブラウザが、Opera7系やLynxだけだったらそれで良いんだけどね。
大手ブラウザが link要素のナビゲーション機能をサポートしてくれれば
是非とも、そうしたいところですよー

HTML文書の中で、述べたい情報以外の要素を配置しなければならないのは
正直うっとうしい。

36 :34:2005/05/04(水) 13:49:51 ID:???
つーかOperaのUIは不十分だと思う。
ボタンにアイコンとか無くて分かりにくいし。

37 :Name_Not_Found:2005/11/03(木) 14:28:54 ID:???
sage

38 :Name_Not_Found:2005/12/21(水) 19:06:23 ID:???
sage

39 :Name_Not_Found:2006/02/01(水) 14:39:20 ID:???
sage

40 :Name_Not_Found:2006/03/03(金) 09:16:15 ID:???
sage

41 :Name_Not_Found:2006/04/02(日) 11:16:09 ID:???
sage

42 :Name_Not_Found:2006/05/02(火) 13:54:19 ID:???
sage

43 :Name_Not_Found:2006/09/02(土) 00:06:19 ID:???
sage

44 :Name_Not_Found:2006/09/08(金) 17:57:06 ID:??? ?2BP(0)
今どのくらいできてるの?

45 :Name_Not_Found:2006/09/20(水) 22:10:04 ID:HruhE9kR
作ってあげるスレはここですか?

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

46 :Name_Not_Found:2006/09/20(水) 22:11:05 ID:???
全部つなげてありますが分割したほうがいいのであればこちらでそうしますのでお願いします。

47 :45:2006/09/21(木) 11:51:12 ID:???
他スレで聞いてきます。

48 :デザイナー候補生:2006/09/21(木) 14:10:55 ID:???
デザイン依頼のある方、掲示板でもメールでもよろしいので、ご依頼下さい。
無償で制作します。
   ↓専用掲示板↓
http://jbbs.livedoor.jp/movie/7477/


49 :Name_Not_Found:2006/10/20(金) 11:54:23 ID:???
sage

50 :Name_Not_Found:2006/10/22(日) 09:19:25 ID:APMm9lDQ
─────────────────────
                             ×
─────────────────────
  /\   警告
/ ┃ \    Webサイト所有者は
\  ・ /   早めにInternetExplorer 7での
  \/      表示の確認を!
─────────────────────

51 :Name_Not_Found:2007/02/01(木) 12:14:28 ID:???
sage

11 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)