こんにちは、TRANSのあらたです。
さて、今回はNPtech.jpでは使っていないのですが、ほかのWebサイト（特に僕が担当するのは中小規模）のHTMLやCSSを書く際によく使っているコードセットのようなものがありますので、公開しておきます。
まず、CSSはstyle.cssというファイルに全部集めています。コードの頭はこんな感じ。
@charset "utf-8"; @import url(reset-fonts.css); @import url(base.css); /* ----------------------------------------------- ===== TOC ===== * common * header * contents * main * sub * footer ===== COLORS ===== Main Text: #000000 Link: #FFAA00 Link Visited: #AAFF00 Line: #AAAAAA ===== FONTS ===== 34px 262% 26px 197% 25px 189% 24px 182% 23px 174% 22px 167% 21px 161.6% 20px 153.9% 19px 146.5% 18px 138.5% 17px 131% 16px 123.1% 15px 116% 14px 108% 13.5px 104% 13px 100% 12px 93% 11px 85% 10px 77% ----------------------------------------------- */ /* ----------------------------------------------- *common ----------------------------------------------- */ body { color: #000000; } a:link { color: #FFAA00; } a:visited { text-decoration: none; color: #AAFF00; } a:hover { color: #AAFF00; } /* ----------------------------------------------- *header ----------------------------------------------- */ div.header { background: transparent url(img/header-bg.png) left top repeat-x; } |
あまり特別なことはやっていないんですけど、冒頭で目次を作っておいて、どんなことを書いているのか一覧化しておきます。あわせて、フォントサイズとカラーの基準値もメモ。フォントサイズは3行目あたりで読み込んでいるYUI Reset CSSとFonts CSSをベースにしています。
いわゆるリセットCSSはメリット・デメリットの議論もあると思うんですけど、いざYUIに慣れてしまうと離れられないものです。ほかのフレームワークもやっていることは大差ないんでしょうけど。
base.cssというのは自分がよく使いまわしているコードたちをあらかじめ定義しているものたち。内容はちょくちょく変えるんですけど、こんな感じ。
@charset "utf-8"; /* base ----------------------------------------------- */ .main .section blockquote, .main .section ul, .main .section ol, .main .section dl { margin: 1em; } .main .section ol, .main .section ul, .main .section dl { margin-left: 2em; } .main .section ol li { list-style: decimal outside; } .main .section ul li { list-style: disc outside; } .main .section dl dd { margin-left: 1em; } .main .section th, .main .section td { padding: 0.5em; vertical-align: top; } .main .section caption { margin-bottom: 0.5em; text-align: center; } .main .section p, .main .section fieldset, .main .section table { margin-bottom: 1em; } .main .section ul li p, .main .section ol li p, .main .section ul li ul li, .main .section ol li ul li, .main .section ul li table tr th, .main .section ul li table tr td, .main .section ol li table tr th, .main .section ol li table tr td { font-size: 100% !important; } .main .section pre { overflow: scroll; width: 90%; margin: 0 0 1.5em 0; padding: 1em; } html>body pre { overflow: visible; /*\*/ overflow: auto; /**/ } .main .section strong { font-weight: bold; } .main .section del { text-decoration: line-through; color: #A80000; } .main .section ins { font-weight: bold; color: #000000; } /* component ----------------------------------------------- */ .clearfix:after { content :"."; display: block; height : 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; overflow: hidden; } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .aligncenter, .imgaligncenter { display: block; margin: 0 auto; text-align: center; } .alignleft, .imgalignleft { float: left; margin: 0 1em 1em 0; } .alignright, .imgalignright { float: right; margin: 0 0 1em 1em; } .txtalignleft { text-align: left; } .txtalignright { text-align: right; } |
位置づけ的にはYUI Base CSSを再定義したような形。
本文である箇所は下手にpx単位でがっちがっちにデザイン作るよりも、em単位で緩やかなデザインを作った方がWebっぽいよね[謎]みたいな個人的な信条もあったりします。そんなわけで、HTMLは自然とこんな感じのやつをよく使います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" media="screen,projection,tv" href="style.css" /> <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]--> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> <title></title> </head> <body id="home"> <!-- page/ --> <div class="page"> <!-- header/ --> <div class="header"> <!-- /header --></div> <!-- contents/ --> <div class="contents"> <!-- main/ --> <div class="main"> <div class="section"> <h1></h1> <h2></h2> <p></p> </div> <!-- /main --></div> <!-- sub/ --> <div class="sub"> <!-- /sub --></div> <!-- /contents --></div> <!-- footer/ --> <div class="footer"> <!-- /footer --></div> <!-- /page --></div> </body> </html>
なんとなく雰囲気分かります？今まではCSSハック使ってたんですけど、条件分岐のほうが楽そうだなと思ってこのやり方になっています。あと、XML宣言などは今のところあまりメリットないよなってことでスルー。Strictを使うかどうかはクライアント次第ってところです。
僕もそんなに毎日のようにコーディングしているわけでもないので、あくまで参考事例としてどうぞ。