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

aratakojima — Wed, 26 Nov 2008 09:29:20 +0000

こんにちは、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&;gt;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は自然とこんな感じのやつをよく使います。


<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" />

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title>title>
head>
<body id="home">


<div class="page">


<div class="header">
div>


<div class="contents">


<div class="main">
	<div class="section">
		<h1>h1>
		
		
	div>
div>


<div class="sub">
div>

div>


<div class="footer">
div>

div>

body>
html>

なんとなく雰囲気分かります？今まではCSSハック使ってたんですけど、条件分岐のほうが楽そうだなと思ってこのやり方になっています。あと、XML宣言などは今のところあまりメリットないよなってことでスルー。Strictを使うかどうかはクライアント次第ってところです。

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

現場のプロから学ぶXHTML+CSS 発売されました

西畑一馬 — Tue, 18 Nov 2008 14:50:09 +0000

こんにちは。to-Rの西畑です。

私が執筆に参加した書籍、「現場のプロから学ぶXHTML+CSS」が発売されました。

内容はXHTML+CSSの基礎から応用、マルチデバイスに対応する為のテクニック、そしてJavaScriptライブラリと盛りだくさんです。

私は8章『JavaScriptライブラリとCSS』と9章『CSSトラブルシューティング集』の一部、そしてミニコラムを何本か書かせてもらっています。

kennsuさんやよしぱんさんからも太鼓判いただいてますので、ぜひ興味があるかたは手に取ってみてください。

Re:Creator's Kansai （リクリ） » XHTML

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

現場のプロから学ぶXHTML+CSS 発売されました

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