最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方

こんにちは、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 CSSFonts 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を使うかどうかはクライアント次第ってところです。

僕もそんなに毎日のようにコーディングしているわけでもないので、あくまで参考事例としてどうぞ。

コメントをどうぞ

トラックバック URL

トラックバック