CSSレイアウト実践講座

「サイト作成関連書籍カテゴリ」を修正しました

2009-09-15T15:40:04Z

先日来、書籍データが表示されなくなっておりました「サイト作成関連書籍カテゴリ」内の各記事ですが、本日、プログラムを修正し、正常に表示されるようになりました。

]]> 大変ご迷惑をおかけいたしましたが、今後は「楽天ブックス」内で販売されている書籍を、CSS、HTMLといったジャンルごとに表示いたしますので、ぜひご活用ください。

CSS nite in NIIGATA（新潟）に参加してきました

2009-04-17T13:47:01Z

4月11日、新潟市で行われた「CSS nite in NIIGATA」に参加しました。

]]> CSS niteとは、サイト制作に関する幅広い話題を聞くことができるサイト制作者のためのイベント。私が参加したCSS nite in NIIGATAにも、70名を超えるウェブ関係者が集結し（ウェブ制作、DTP半々くらいのようでした。）、Javascriptライブラリ、Adobe CS4の新機能、ウェブ標準といった内容のお話が講演されました。

CSS nite in NIIGATA詳細参加レポート（うかブログ）

それぞれの講演内容や感想は詳細レポートをご覧いただくとして、私が興味深く思ったのは、公演内容もさることながら、イベント後に行われた参加者のこんなお話。

「ウェブ制作者同士、横の繋がりが欲しいんだけど、なかなかきっかけがなくて...。でも、CSS niteがそのきっかけになった！」

確かにおっしゃる通り、情報交換や知識の共有、テクニカルことなどなど、そういうお話がしたくても、周りにウェブ関係の人がいないってのはよくあることですよね。私自身、その1人だったりします。

サイトのデザイン、制作って、結構孤独な作業なんですよねー。
そんな中、ウェブ制作者同士がとコミュニケーションを取れるようになると、気持ち的にすっごく楽になったり。また、困ったことが出てきたら気軽に質問できるようになったりもしますし、このような関係を作るというのは非常に重要なことかと。

CSS niteは、新潟で開催されたことからもわかるように、首都圏に限らず全国各地で開催されているウェブ制作のためのイベント。

「ウチ、田舎だからこの手のイベントってなかなかないんだよねぇ...。」

そんなあなたの町にもCSS niteがやってくるかもしれませんよ！
ということで、CSS niteの公式サイトを要チェック☆です。

[サイト紹介]CSSフリーライブラリー

2009-03-16T03:33:42Z

このたび、CSS関連の情報やテンプレートを無料で提供しているサイトのリンク集「CSSフリーライブラリー」様の1コーナー「今週のPick Up！」にて、当サイトをご紹介いただきました。

]]>

CSSフリーライブラリー

「CSSフリーライブラリー」は、サイトのトップバナーにあるとおり、「CSSを使ってきれいなホームページを作りたい人のために、無料CSS素材・テンプレートなどを提供している『お勧めサイト』を紹介」しているサイトです。

私、CSSはネットで提供されている情報を頼りに覚えてきたんですが、なかなか「これ！」というサイトに出会うまでに時間がかかっちゃったりするんですよね。その点、CSSフリーライブラリーでは、管理人よっしーさんが「これ！」と思ったサイトが分かりやすくまとめられており、CSSお勉強中という方にはもってこいのサイトになってます。

この中で、当サイトについて「サイト構成自体も、各カテゴリーごとにシンプルで美しく、かつとても機能的にデザインされています。」と評価していただいてます。

私は、このサイトを作るにあたり「画像なし、CSSだけでもこんな感じで見栄えを整えられますよー」というのを知っていただきたくて今のデザインにしているので、このように言っていただけて大変嬉しく思います。

せっかくのご紹介を汚さぬよう、今後も定期的に内容の見直しを図っていければと思っております。

CSSフリーライブラリー

CSSレイアウト実践講座がリニューアルしました

2009-01-20T15:59:52Z

2005年8月に開設した「CSSレイアウト実践講座」ですが、この度、記事の改訂、追加等を行い、2009年1月21日にリニューアルオープンしました。

]]> これまでは、CSSによるサイトレイアウトのみに特化したサイトとなっていましたが、今回のリニューアルで以下のカテゴリを追加・拡充しました。

これにより、CSSレイアウトに関する以外にも、サイト作成全般でご利用いただけるサイトとなっております。

なお、これまで掲載していましたテンプレートにつきましては、一時公開を見合わせています。今後、準備が整い次第、よりご利用いただきやすい形で再リリースする予定ですので、しばらくお待ちいただければ幸いです。

今後とも、CSSレイアウト実践講座をよろしくお願いいたします♪

アルファベット順CSSプロパティ一覧

2009-01-19T03:52:24Z

CSSプロパティのアルファベット順の一覧表です。

]]>

B

C

D

display

F

H

height

L

M

O

overflow

P

R

right

T

V

W

Z

position

文章の書き方関連書籍

2009-01-19T00:22:52Z

サイト作成に役立つ「ウェブデザイン」に関する書籍のリンク集。

]]>

ウェブデザイン関連書籍

2009-01-19T00:21:52Z

サイト作成に役立つ「ウェブデザイン」に関する書籍のリンク集。

]]>

ワードプレス関連書籍

2009-01-19T00:14:04Z

サイト作成に役立つ「ワードプレス」に関する書籍のリンク集。

]]>

ムーバブルタイプ（MT）関連書籍

2009-01-19T00:03:35Z

サイト作成に役立つ「ムーバブルタイプ（MT）」に関する書籍のリンク集。

]]>

PHP関連書籍

2009-01-19T00:01:13Z

サイト作成に役立つ「PHP」に関する書籍のリンク集。

]]>

HTML関連書籍

2009-01-18T23:56:21Z

サイト作成に役立つ「HTML」に関する書籍のリンク集。

]]>

CSS関連書籍

2009-01-18T01:29:45Z

サイト作成に役立つ「CSS」に関する書籍のリンク集。

]]>

サイト作りに役立つCSSの使い方

2009-01-16T04:45:42Z

ひとつひとつのパーツのデザインを整形するのもCSSの使い方のひとつですが、その他にも、サイト製作に役立つ使い方があります。

]]> 複数の外部CSSファイルを使う

CSSを外部ファイルに記載する方法についてはCSSの記述方法－外部ファイルに記載で解説していますが、使用する外部CSSファイルは、1つでなければならないということではありません。

例えば、次のように外部CSSファイルへのリンクを増やしてあげれば、複数のCSSファイルに記載した指定を反映させることができます。

[HTMLコード]複数のCSSファイルへのリンク

このように、linkタグを複数並べ、参照先のCSSファイルを変更することで複数のCSSファイルを利用できるようになります。

ちなみに、このCSSレイアウト実践講座では、サイト内のページ種別ごとに

common.css（全ページ共通の指定を記載）
top.css（トップページのみに使用する指定を記載）
category.css（各カテゴリのトップページのみに使用する指定を記載）
entry.css（個別記事ページのみに使用する指定を記載）

の4ファイルに分けてCSSを記載しています。このようにすることで、多数あるCSSの指定を整理しておくことができます。

既定の余白、フォントサイズをリセットする

HTMLのタグには、あらかじめ余白やフォントサイズが指定されているものがあります。例えば、h1タグのフォントサイズはベースとなるサイズの200％、h2タグは150％、Hxタグやpタグにはその前後（上下）に自動的に余白が作られるよう設定されています。

しかし、初期値を活用しながらCSSを指定するよりも、一度全ての初期値をゼロにリセットし、必要の都度、値を指定していった方が作りやすかったりします。

[CSSコード]初期値をリセット

h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,tr,form {
	margin:0; padding:0; font-size:100%;
}

タグを「,（カンマ）」で区切ることで複数のタグに対しCSSを指定することができるようになりますが、上記のようにmargin、paddingをゼロに、font-sizeを100％（bodyタグに対して指定したfont-sizeと同じ大きさ）にしていしておくことで、指定したタグの初期値がリセットされます。

その後、「#header内のh1タグはフォントサイズ12pxに」とか「#mainBody内のpタグの余白は下のみ20pxに」といったように、タグを用いる場所ごとに個別に指定してあげるようにします。

印刷用のスタイルシートを作成する

ホームページをブラウザで表示する際には必要な情報でも、広告や他ページへのナビゲーションなど、ページを印刷する際には不要の情報というのが結構あります。

通常、ページを印刷するとブラウザ上の表示を制御しているCSSが紙面上にも反映されますが、外部CSSファイルへのリンクを次のように書くことで、印刷専用のCSSを指定することができます。

[HTMLコード]印刷用CSSファイルへのリンク

通常のlinkタグに「media="print"」という属性値を与えることで、そこでリンクされているCSSファイルが印刷時にのみ適用されるようになります。

この印刷用CSSファイルに、印刷時に不要なボックスのセレクタに対してdisplayプロパティで「none」を指定してあげれば、その部分が非表示となり必要な部分だけが印刷されるようになります。

クーポン券やイベント時の参加証の発行、お料理のレシピなど、印刷を必要としたり、印刷したほうが便利だったりするコンテンツがある場合には便利な方法です。

メニューリストのリンク部をブロック化

2009-01-15T14:37:03Z

通常、リンク部分はアンカーテキスト上でマウスをクリックしないとリンク先にジャンプしませんが、aタグをブロック要素として表示させれば、余白部分でクリックしてもジャンプすることができるようになります。

]]> リンク部分のフォントサイズや1行の高さが小さい場合、テキストがクリックしづらくなってしまいますが、aタグをブロック化することで、テキストから多少ずれた位置でクリックしてもリンク先に行けるようになり、ユーザビリティーが向上します。また、デザイン面でも、各リストを横幅ピッタリに表示させることができ、緻密に整理された印象を与えることができます。

HTMLの書き方

HTMLの書き方は、メニューリストのリストマークを画像にで使用したものと同様です。

[HTMLコード]サイドバー用メニュー（サブカテゴリ有）


	パソコン関係
		
			パソコン本体
			パソコン周辺機器
			パソコンソフト
		
	
	家電製品関係
		
			デジタルカメラ
			電気シェーバー

この状態だと、アンカーテキストにマウスカーソルが載らないと、フォントカラーが変わりませんし、クリックしてもリンク先へジャンプできません。

CSSの書き方

第1段階 - リストマークを非表示にする

まずは、自動的に付けられるリストマークを、list-styleプロパティで非表示（none）にします。なお、ここではリスト表示部の横幅が180pxである場合を想定しています。

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
	list-style:none;
	font-size:12px;
	line-height:20px;
}

[ブラウザ上の表示]

こちらもメニューリストのリストマークを画像にのサンプルと同様に、親カテゴリと子カテゴリがリストマークなしで一列に並びます。

同時に、フォントサイズを12px、1行の高さを20pxに、加えて、text-decorationプロパティで.sideMenu内のaタグの下線を非表示にします。

第2段階 - 親カテゴリをブロック化

ここからがブロック化についての説明です。まず、親カテゴリをブロック化します。

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
	list-style:none;
	font-size:12px;
	line-height:20px;
}
.sideMenu li a {
	display:block;
	padding:0 5px;
	background:#060;
	color:#fff;
	line-height:20px;
	border-bottom:solid 1px #030;
}
.sideMenu li a:hover { background:#393; }

[ブラウザ上の表示]

displayプロパティで、インライン要素であるaタグをブロック要素として表示するよう指定します。同時に、背景色やフォントカラー、罫線などを指定し体裁を整えます。また、「.sideMenu li a:hover」でマウスカーソルがリンク部分に乗った際の背景色を指定します。

この時点で、テキスト上ではない右側の余白部分にカーソルを乗せてもリンク先へジャンプできるようになります。

最終段階 - 子カテゴリの背景色、フォント色を変更

このままですと、どれが子カテゴリなのか分からないので、子カテゴリの背景色とフォントカラーを変更します。

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
	list-style:none;
	font-size:12px;
	line-height:20px;
}
.sideMenu li a {
	display:block;
	padding:0 5px;
	background:#060;
	color:#fff;
	line-height:20px;
	border-bottom:solid 1px #030;
}
.sideMenu li a:hover { background:#393; }
.sideMenu li ul li a {
	background:#9f9;
	color:#030;
	border-bottom:solid 1px #6c6;
}
.sideMenu li ul li a:hover { background:#6f6; }

[ブラウザ上の表示]

これで、親カテゴリと子カテゴリを見分けやすくなりました。

この方法によるメニューリストは、キレイに見える反面、鬱陶しく感じられたりもしますので、場所や背景色を選んで使うようにしましょう。（背景色は、濃い色ばかりが並ぶとしつこく感じます。濃い色は親カテゴリ、子カテゴリは薄い色を使うなど、メリハリを考えて色を選択しましょう。）

メニューリストのリストマークを画像に

2009-01-15T12:56:24Z

通常、リストに付けられるストマークは黒丸や白丸になりますが、CSSを使えばリストマークに画像を使用することができます。

]]> HTMLの書き方

親カテゴリと子カテゴリの2階層からなるカテゴリリストを例に、リストマークの画像化を行います。

[HTMLコード]サイドバー用メニュー（サブカテゴリ有）


	パソコン関係
		
			パソコン本体
			パソコン周辺機器
			パソコンソフト
		
	
	家電製品関係
		
			デジタルカメラ
			電気シェーバー

この状態だと、サイドバー用メニューリストのHTML構造に記載したサンプルのように、リストマークが黒丸と白丸で表示されます。

CSSの書き方

第1段階 - リストマークを非表示にする

まずは、自動的に付けられるリストマークを、list-styleプロパティで非表示（none）にします。

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li { list-style:none; }

[ブラウザ上の表示]

同時に、「.sideMenu」と「.sideMenu ul」（クラス「sideMenu」内のulタグ）のmarginとpaddingをゼロにします。marginとpaddingを同時に指定するのは、IEとFirefoxとで、リスト左部の余白のとり方が異なるためです。（IEはmargin、Firefoxはpadding）すると、上記サンプルの通り、親カテゴリと子カテゴリがリストマークなしで一列に並びます。

第2段階 - 親カテゴリのリストマークを画像化

次に、まず親カテゴリからリストマークを画像に置き換えていきます。親カテゴリのリストマーク用として次の画像を利用します。

（folders.gif　横20px×縦26px）

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li {
	list-style:none;
	padding-left:25px;
	background:url('folders.gif') left top no-repeat;
	line-height:26px;
}

[ブラウザ上の表示]

まず、padding-leftプロパティでリスト左側の余白を背景画像の横幅と同程度に指定します。画像とテキストの間隔が狭く感じるようでしたら、画像より少し大きめの値を指定してください。なお、ここでmargin-left使ってしまうとリストの外側に余白が作られ、liタグに指定する背景画像にアンカーテキストが被って表示されてしまいますので、ご注意ください。

背景画像はbackgroundプロパティでURL、表示位置（left top＝左上に表示）、繰り返し方法（no-repeat＝繰り返しなし）を指定、また、line-heightプロパティで、1行の高さを画像と同じ高さ（ここでは26px）に指定します。

背景画像の表示位置は、サンプルでは「left top（左上）」に指定しましたが、リストの行数が1行で収まる場合は「left（左中央）」でも構いません。（この場合、2行になるとリストマークが2行中の真ん中に表示されてしまい、少々カッコ悪くなります。）

なお、リストマークはlist-style-imageプロパティで画像を指定することができますが、この場合、画像の大きさや1行の高さによってリスト画像がずれて表示されてしまうことがあるため、このページでは崩れの少ないbackgroundを利用したリスト画像使用方法を解説しています。

最終段階 - 子カテゴリのリスト画像を変更

このままですと、親カテゴリと子カテゴリのリストマークが同じになってしまい少々分かりづらいので、子カテゴリの画像を変更することにします。親カテゴリのリストマーク用として次の画像を利用します。

（folder.gif　横20px×縦26px）

[CSSの記述]

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li {
	list-style:none;
	padding-left:25px;
	background:url('folders.gif') left top no-repeat;
	line-height:26px;
}
.sideMenu li ul li { background-image:url('folder.gif'); }

[ブラウザ上の表示]

背景画像の表示位置と繰り返し方法は親カテゴリと同様ですので、ここではbackground-imgaeプロパティを使用し、背景画像のURLだけを変更します。

すると、上記サンプルのとおり、親カテゴリでは2つのフォルダが重なった画像、子カテゴリではフォルダ1つの画像が表示されるようになります。

ここでは指定していませんが、実際にサイドバーで利用する際は、親ボックス（.sideMenu）の上下の余白や、各liタグのフォントサイズ・1行の高さなどを、周囲のデザインや使用する背景画像の大きさなどに合わせて指定し、見栄えを整えましょう。

【備考】
ここで使用しているフォルダ画像は、ご自由にご利用いただけます。ただし、直リンクはせず、ご自身のサーバーにアップしてご利用ください。