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

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

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

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

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

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

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

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

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

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

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

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

27Name_Not_Found2005/03/27(日) 23:42:22ID:???

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

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

30Name_Not_Found2005/03/31(木) 23:19:01ID:???
* 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 は諦める(特殊なケース以外では内容が消える)

とりあえずこれを入れとけ

31Name_Not_Found2005/03/31(木) 23:38:58ID:???

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

33Name_Not_Found2005/04/29(金) 15:56:57ID: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> と記述します。

34Name_Not_Found2005/05/02(月) 18:33:38ID:???
ナヴィゲーションはlink要素でやれ! とHTMLヲタの漏れが来ましたよ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52Name_Not_Found2007/03/05(月) 11:53:50ID:???
sage

53Name_Not_Found2007/04/16(月) 21:42:14ID:???
こういうことか
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

54Name_Not_Found2007/07/30(月) 17:23:26ID:???
sage

55Name_Not_Found2007/09/15(土) 10:44:00ID:09475SYv
>>53
そこのHTMLテンプレ一部変なタグがある気がする
戻りタグの指定とか。

56Name_Not_Found2007/09/15(土) 11:13:13ID:???
一部じゃなくて大分変だが
それよりそこの問題は放置だ

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

58Name_Not_Found2007/11/19(月) 13:11:42ID:???
sage

59Name_Not_Found2008/01/31(木) 17:31:10ID:???
sage

60Name_Not_Found2008/02/06(水) 15:23:50ID:???
>>56
できるよ。
以上。
はい次の方。

61Name_Not_Found2008/04/03(木) 17:44:37ID:???
sage

62Name_Not_Found2008/06/06(金) 23:50:00ID:AFjZG9io
現在のバージョンは、
・セールスレターテンプレート集(68通)
・売れるセールスレターの書き方
・ダイレクトメールワークシート
・穴埋め式Eメールテンプレート(14通)
・究極のセールスレターツールBOX
など、合計で500ページ近いパッケージとCDROMが
セットになっています。


ただ、この無料お試しはだいぶコストがかかるらしいので
500個の限定だそうです。



興味があればこちらをクリックしてください。
http://www.123marketing.jp/yanik/indextrial.php?jvcd=16797


63Name_Not_Found2008/06/11(水) 17:43:11ID:???
過疎

64Name_Not_Found2009/07/01(水) 16:27:03ID:J/n4JGck

65Name_Not_Found2009/07/07(火) 12:57:36ID:25nLUITy
CSSで作る超簡単ドラクエ風メニュー http://dqmenu.com/

66Name_Not_Found2009/07/07(火) 22:40:24ID:???
>>65
このレベルでweb制作会社の取締役とはw

67Name_Not_Found2010/07/25(日) 05:34:15ID:???
上左右に分かれたフレームを使わないCSSで作成してほしいです
外部CSSファイルの使用を希望します

68Name_Not_Found2011/09/07(水) 22:57:50.52ID:trvJ24YS
この数はすごいよ。

自分も使ってるけどなかなか重宝してる。

http://omegamh.client.jp/

69 ◆2PIJoR96r. 2012/02/08(水) 01:58:36.07ID:???
てs.

70Name_Not_Found2012/09/15(土) 15:33:04.67ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね 
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

71Name_Not_Found2017/12/12(火) 06:58:49.00ID:MrUcGD8N
HPなどで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

4K1J3BLBJH

新着レスの表示
レスを投稿する