CSSのテンプレートを作成する際に、必ず入れていて便利だと思うものを紹介します。body要素に指定する事に関してはいろいろなところで語られているので、ここでは他のテーマなどのCSSを見ていて便利と思って取り入れているものなど。それ以外で私が始めに設定しておくHTMLタグとその設定です。
CSS
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #ababab;
color:#333;
font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.5;
}bodyには比較的いろいろ設定します。CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記で語られているので割愛。
font-familyについては、CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキにもあり、Web雑誌でも日本語はこの順序を推奨しているようです。
ユニバーサルセレクタ(*)を使わないのは、*{ margin : 0 }はもう古い！？ | Emotional Web他の最近の流れから。
次に、CSSを見ていると”Universal Reset”というグループ名で出てくる一般的なHTMLタグのデフォルトを変更する関係。設定内容はそのデザインでそれぞれなので、設定する先だけ見ていただければ良いかと思います。設定し忘れていて意図しない表示にならないようにするためのものです。
CSS
h1,h2,h3,h4,h5,h6 { line-height:1.6; }
p,li,dt,dl { line-height:1.6; }
p { margin:0 0 1em 0; }
ul li { list-style-type:none; }
a img { border:0; }
a:link {
color:#078D00;
text-decoration:none;
}
a:visited {
color:#189B12;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
color:#666;
}
blockquote{
margin-left:1em;
padding-left:1em;
border-left:2px solid #CCC;
color:#CCC;
}
pre{
width:100%;
padding:1em 0;
overflow:auto;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}
table{
width:100%;
border-spacing:2px;
margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }blockquoteとpreは、ブログに特有かと思います。それ以外は、一般的な内容を設定しておきます。
最後に、classで指定しておくと便利なもの。これらはHTMLの特定要素をCSSで指定するのではなく、逆にHTML上でclassを指定することにより見た目を操作しようとするものです。
CSS
.hidden {
display: none;
visibility: hidden;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.clear {
clear: both;
}HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。
あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。
Trackback URL
2 Comments
CSS初心者です。CSS分析に励んでいます！CSSを勉強し始めて早半年！
http://www.studycss.net/
↑
こんなCSS徹底分析見たりして日々勉強に励んでいま～す！
読ませていただきました。
大変参考になりました。
これからも、良い情報の発信をしていだければと思います。
ありがとうございました。
仕様書作成係
http://www.hotdocument.net/
34 Trackbacks/Pingbacks
CSSの重要で便利な初期設定…
CSSの重要で便利な初期設定 最初に指定しておくと便利なCSSという事で紹介され…
■グラデーションを使ったデザインのやり方 - GIGAZINE ■サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE ■最初に指定しておくと便利なCSS | Tech de Go ■Photoshopを使って、シミ、そばかす、しわを取り除くチュートリアル 解説編 - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
童貞の俺がエイズ検査に行ってきた 『ドラゴンボール』の仙豆、食べちゃった！ | エキサイトニュース 惑星が爆発したような画像を作成するPhotoshopのチュートリアル | P O P * P O P 最初に指定しておくと便利なCSS | Tech de Go 日本における現在の電子ドラック中毒、１３個の依存症 ホームページを作る人のネタ帳 「顔面認識→笑い男貼り付け」ツールがすごすぎる！ | i d e a * i d e a
最初に指定しておくと便利なCSS | Tech de Go
はまちちゃん こと はまちや２ さんが大活躍してい … X51.ORG : 自動車性愛 - 車とセ … (2007-3-12) X51.ORG : 自動車性愛 - 車とセックスする男 英 ごめんなさい・・・偉人が多すぎます 最初に指定しておくと便利なCSS … (2007-3-12) 最初に指定しておくと便利なCSS | Tech de Go スターリン時代のソビエトで行わ … (2007-3-12) スターリン時代のソビエトで行われた様々な写真の改ざん - GIGAZINE
最初に指定しておくと便利なCSS | Tech de Go
最初に指定しておくと便利なCSS | Tech de Go
[IMG]最初に指定しておくと便利なCSS | Tech de Go
9位． 最初に指定しておくと便利なCSS
最初に指定しておくと便利なCSS | Tech de Go
最初に指定しておくと便利なCSS | Tech de Go
[...] 最初に指定しておくと便利なCSS | Tech de Go [...]
高さが狭くなりました。 最初に指定しておくと便利なCSS 最初に指定しておくと便利なCSS | Tech de Goにあったパターンを使ってみます。 body { margin: 0; padding: 0; background-color: #ababab; color:#333; font-family: Arial, Helvetica, Verdana, “ヒラギノ角ゴPro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”,
はてなブックマークのノリ方、過ごし方。 非モテ（成人・大学生・理学部）の買い物に付き合ったよ！！ 最初に指定しておくと便利なCSS 奇怪、不可解、Windows Vista肥大化 iTunes 7.1 の素敵進化 英文を訳すときに最も役立つ Firefox Extensions はこれ これは入れとけってフリーソフト FPSをやったらいいじゃない
３度目（１５年） 現職の石原氏や東京家政大教授の樋口恵子氏らが出馬。石原氏が再選し、中松氏は約１０万１０００票で落選。 最初に指定しておくと便利なCSS | Tech de Go Annotated ■以前によそでブクマしていた記事、基本です。。（まだ手つかずｗ）
ƒƒJƒŽð’T‚µ‚Ä‚¢‚Ü‚· ‚[‚Í‚¨Žð‚ðˆù‚Ü‚È‚¢‚¯‚ÇAu‚·‚¢‚Ü‚¹‚ñAƒƒJƒŽðAˆê‚ÂA‚‚¾‚³‚¢ôv ‚±‚è‚Í’p‚¸‚©‚µ‚¢‚— ʼn‚ÉŽw’肵‚Ä‚¨‚‚Æ•Ö—˜‚ÈCSS | Tech de Go ‚ñ‚Þ‚èB ‚â‚Í‚èŠCŠO‚Å‚ÍuŽÀ–¼“–‚½‚è‘Ov‚Ì—¬‚ê‚© ‚±‚ê‚à‚»‚Ì‚¤‚¿“–‚½‚è‘O‚É‚È‚é‚Ì‚©‚à‚µ‚ê‚Ü‚¹‚ñB
いうのは後の祭り． それよりも，バックアップをとってから作業を開始しなかったこと自体に問題が あったんだけど… ref. http://www.techdego.com/2007/03/usefulcss.php
[...] 最初に指定しておくと便利なCSS | Tech de Go http://www.techdego.com ウェブ 413 / 643 users defaultcss [...]
[...] 最初に指定しておくと便利なCSS | Tech de Go のように、仕様に定められていることを超えた部分でのテクニックならば「こういう考え方もある ( 自分はこういう考え方をしている ) 」という部類であり、「こうでないといけない」ということは言えません。 しかし、仕様に沿っているかいないかは充分に「こうでないといけない」と言える部類だと思います。 先ほどの見出しの例では、 h1 ～ h6 ではなく p 要素などでマークアップされていても validator は一応通りますが、やはり DTD への適合と仕様への準拠は最低条件だと考えて良いのではないでしょうか。 (DTD に適合していなければ、そもそも HTML/XHTML 文書ではなくなるわけですが。 ) [...]
▼久しぶりにサイトをいじりたい ★最初に指定しておくと便利なCSS Tech de Goより。 ウチのサイトにも応用がききそうなのでメモ。 ………しかし、そろそろサイトを目新しくしたいのですが、なかなか時間が取れないなあ。
[...] 最初に指定しておくと便利なCSS | Tech de Go 633 related hatena livedoor 1470 [...]
[...] **最初に指定しておくと便利なCSS | Tech de Gohttp://www.techdego.com/2007/03/usefulcss.php [...]
[情報]CSSまとめ…
解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。CSSを使わなくてもHTMLで直接デザイン*3できなくは…
XHTML1.1手始め…
XHTML1.1･･････元々聞いてはいたんですが勉強する機会もなく､とりあえず付け焼き刃の知識を得るためにお世話になったサイトを紹介します｡#ブログに書くネタがないのでリンク集…
[...] 最初に指定しておくと便利なCSS | Tech de Go 33users [...]
order aciphex online…
最初に指定しておくと便利なCSS | Tech de Go…
LISTEN::::::to the silence::::::: [CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス [CSS]スタイルの初期化(後編) -body内の個別タグ編 | コリス 最初に指定しておくと便利なCSS | Tech de Go コメント (HTML と CSS) HTML でのコメント 正しいコメントを書こう - The Web KANZAKI. HTMLのコメントの書き方 - capsctrldays (2007-01-19) 我的春秋: (X)HTML, XML のコメント記述位置
[...] ǽ˻ꤷƤCSS [Tech de Go] [...]
[...] 31`40ځuCSSv S я: XRA V L[[hւ̈v ŏɎw肵Ăƕ֗CSS | Tech de Go http://www.techdego.com/2007/03/usefulcss.php [...]
[...] 先般人気記事になった「最初に指定しておくと便利なCSS 」のはてブのコメントを見ていて、確かにclass=”hidden”などは、「htmlは文書構造を示すものなので、class名が視覚的な内容を示すものは好ましくないと思いますよ。class名にredとかblackとか付けているのと同じ」だと思いました。ただ、便利なので止められないし、結構使っているサイトもあったりするので、「Web標準じゃないけど、いいか」と思っていました。 [...]
[...] 最初に指定しておくと便利なCSS| Tech de Go 最初に指定しておくと便利なCSS 2007-12-03 to css by t-matsuda [...]
Webねた（最初に指定しておくと便利なCSS）…
最初に指定しておくと便利なCSS | Tech de GoWeb制作で「CSSファイルでレイアウトを作る場合、最初どんな設定にすればいいかな？」と時々聞かれることがあります。色々あるけど、とりあ……
最初に指定しておくと便利なCSS…
Tech de Goさんのところで紹介されていたのでチェック こういうのあると……
[...] あいかわらずデフォルトのテーマを使っていますが、最初に指定しておくと便利なCSSを参考に変更。フォントサイズだけ、デフォルトの指定を残しました。 [...]
Post a Comment