最近よく使っているコードセットのようなもの　第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を使うかどうかはクライアント次第ってところです。

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

第14回 htmlの制御 jQueryによるJavaScript入門

西畑一馬 — Tue, 18 Nov 2008 14:39:23 +0000

こんにちは。to-Rの西畑です。jQueryによるJavaScript入門、14回目はhtmlの制御を行ってみたいと思います。

まずはサンプルをご覧ください。

上のリストをクリックすれば、下のリストが変更されると言うサンプルです。
(いまいちなサンプルですみません。htmlだけで表現するには少し限界が。。。)

JavaScript

$(function(){
	$(".click li").click(function(){
		$(".target li").html($(this).html());
		return false;
	})
});

html


	鉛筆
	絵の具
	アゲハ
	猫


	鉛筆

jQueryでhtmlの制御

htmlの取得

$(セレクタ).html()

指定した要素内のhtmlを取得する命令です。

$(this).html()

サンプルではクリックした要素内のhtmlを取得しています。

htmlの変更

$(セレクタ).html("変更後のhtml")

指定した要素内のhtmlを変更する命令です。

$(".target li").html($(this).html());

サンプルではクリックした要素内のhtmlを下のulリストと差し替えています。

textとの違い

textとほぼ同じような構文ですが、違いはtextがhtmlを取り扱うことが出来ない点です。

html要素をtextを利用して変更した場合

$(".target li").text($(this).html());

サンプル

html要素をtextを利用して取得した場合

$(".target li").html($(this).text());

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

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

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

第14回 htmlの制御 jQueryによるJavaScript入門

jQueryでhtmlの制御

textとの違い

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