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

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

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

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

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

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

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

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

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


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

27 :Name_Not_Found:2005/03/27(日) 23:42:22 ID:???.net
こんなのもあるよ
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.net
>>27
無駄なタグを入れなきゃいけないし、この例だとBタグ使ってるし、
あまり好きにはなれない。
>>24の言うように、固定幅なら上下のボックスの背景画像でなんとか出来るわけだが…

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

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

ここだろ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

52 :Name_Not_Found:2007/03/05(月) 11:53:50 ID:???.net
sage

53 :Name_Not_Found:2007/04/16(月) 21:42:14 ID:???.net
こういうことか
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 :Name_Not_Found:2007/07/30(月) 17:23:26 ID:???.net
sage

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

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

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

58 :Name_Not_Found:2007/11/19(月) 13:11:42 ID:???.net
sage

59 :Name_Not_Found:2008/01/31(木) 17:31:10 ID:???.net
sage

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

61 :Name_Not_Found:2008/04/03(木) 17:44:37 ID:???.net
sage

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


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



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



63 :Name_Not_Found:2008/06/11(水) 17:43:11 ID:???.net
過疎

64 :Name_Not_Found:2009/07/01(水) 16:27:03 ID:J/n4JGck.net
http://dqmenu.design-agent.jp/

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

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

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

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

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

http://omegamh.client.jp/

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

70 :Name_Not_Found:2012/09/15(土) 15:33:04.67 ID:???.net
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね 
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね


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

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

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

4K1J3BLBJH

72 :Name_Not_Found:2018/05/01(火) 19:32:23.20 ID:l1wYHpV1.net
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

YASAG

15 KB
新着レスの表示

掲示板に戻る 全部 前100 次100 最新50
名前: E-mail (省略可) :

read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★