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

サイト製作に役立つCSSの使い方についての解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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

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

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

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

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

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

<link rel="stylesheet" href="/css/common.css" type="text/css" />
<link rel="stylesheet" href="/css/entry.css" type="text/css" />
<link rel="stylesheet" href="/css/sample.css" type="text/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を指定することができるようになりますが、上記のようにmarginpaddingをゼロに、font-sizeを100%(bodyタグに対して指定したfont-sizeと同じ大きさ)にしていしておくことで、指定したタグの初期値がリセットされます。

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

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

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

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

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

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

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

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

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