スタイルシート編

manual

スタイルシートを作る

htmlの見た目や色の変更はcss(カスケーディング・スタイル・シート)というファイルをhtmlファイルにリンクし作っていきます。

style.css
red{
	color:#f00;
}
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p class="red">
		文字色が赤色になります。
	</p>
</body>
</html>

スタイルシートの基礎になります。

スタイルシートをSassで記述する

イイウェブではコンパイルを必要とせずSass(サース)を使用することができます。
cssではできない記述をScssでは可能になります。
※htmlにリンクする際にscssのままリンクして下さい。

style.scss
$mainColor:#f00;
#main{
	p{
		color:$mainColor;
	}
}
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.scss">
</head>
<body>
	<div id="main">
		<p class="red">
			文字色が赤色になります。
		</p>
	</div>
</body>
</html>

Scssではネストや変数などを使用することができます。

その他Scssでできる詳しい内容について解説されているサイト"Web制作者のためのSassの教科書"が分かりやすく勉強になりますのでご参考にしてください。

スタイルシートを結合する

ディレクトリ名の末尾を.scssにすることによって、ディレクトリ内のCSSファイルがひとつに結合された結果を得ることができます。
複数のファイルがまとめられることで転送量が減少し、ページの表示の高速化が期待できます。

この機能はイイウェブ独自の機能になる為Scssの機能ではありません。

ディレクトリ構造
style.css/
	├ html.scss
	├ body.scss
	└ common/
		└ header.scss
すべてのCSSが結合された結果を得る
<link rel="stylesheet" type="text/css" href="/style.scss">

結合の対象となるファイルは、ディレクトリと同じ拡張子をもつ.scssファイル、および.cssファイルだけです。また隠しファイルは結合の対象にならないため、ファイル名の最初をアンダースコア_にはしないでください。

他のスタイルシートを読み込む

Sassでは@import構文を使うことで、別のファイルをインポートすることができます。
前述のディレクトリ方式の結合方法とは異なり、この方法では結合の順序を指定することができます。

コンパイル前
html {
	font-size: 16px;
	overflow-y: scroll;
}
@import "/_body.scss";
別ファイル _body.scss
body {
	margin: 0;
	text-size-adjust: 100%;
}
コンパイル後
html {
	font-size: 16px;
	overflow-y: scroll;
}
body {
	margin: 0;
	text-size-adjust: 100%;
}

こちらの例の/_body.scssは、他のファイルから読み込まれることが前提となっているため(自身が単独でアクセスされることがないため)、ファイル名の最初をアンダースコア_として隠しファイルにしています。

CSSのコンパイルオプション

CSSのコンパイルオプション

ベンダープレフィックス

CSSの中で各ブラウザの対応状況に合わせて付与しなくてはならない面倒な接頭辞のことです。このオプションを有効にすると、コンパイル時にこれらが自動で付与されるようになります。

コンパイル前
#example {
	border-radius: 8px;
}
コンパイル後
#example {
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	    -ms-border-radius: 8px;
	        border-radius: 8px;
}

対応ブラウザーの範囲設定については管理画面の設定から行います。
設定することによってIEまで対応させることもできます。

ベンダープレフィックス

具体的な指定方法についてはこちらのAutoprefixerの対象ブラウザって、どうやって選べばいいの?のサイトが参考になります。

設定を誤るとコンパイル時にエラーが発生するので、よくわからない人はデフォルトのままご利用ください。

ソースマップを埋め込む

ソースマップを有効にすると「どのルールがどのファイルの何行目に記述されているのか」を
ブラウザの「開発者ツール」の中で確認できるようになります。
特にコンパイルによって複数のCSSファイルが結合されている場合にその効果が発揮され、デザイン作業が大きく捗ります。

コンパイル前
#example {
	display: block;
}
コンパイル後
#example {
	display: block;
}
/*# sourceMappingURL=data:application/json;base64,...

一方でソースマップはサイトのデザインが完成した時点でその必要性が失われます。
そればかりかCSSのデータ量が増えることでページの表示を遅くさせる要因にもなります。
この問題を解決するために、ソースマップはテスト環境でだけ追記され、プロダクション環境では追記されない仕様となっています。

メディアクエリをまとめる

@mediaから始まる複数のルールを条件ごとにまとめて、CSSをコンパクトにします。

コンパイル前
@media (max-width: 359px) {
	.foo {
		padding: 6px;
	}
}
@media (max-width: 359px) {
	.bar {
		margin: 6px;
	}
}
コンパイル後
@media (max-width: 359px) {
	.foo {
		padding: 6px;
	}
	.bar {
		margin: 6px;
	}
}

このオプションはソースマップが埋め込まれない状況下でだけ有効になります。
ソースマップが埋め込まれている場合は機能しません。

プロパティを規則的に並び替える

CSSのプロパティの順序を規則的に並び替えます。

コンパイル前
#example {
	z-index: 100;
	padding: 6px;
	margin: 6px;
}
コンパイル後
#example {
	margin: 6px;
	padding: 6px;
	z-index: 100;
}

このオプションはソースマップが埋め込まれない状況下でだけ有効になります。
ソースマップが埋め込まれている場合は機能しません。

ミニファイ

改行コードや空白、コメント行などをコンパイル時に除去してCSSをコンパクトにします。
データ量の減少によるページの表示の高速化が期待できます。

コンパイル前
/* comment ... */
#example {
	padding: 8px;
	display: block;
}
コンパイル後
#example{padding:8px;display:block}

このオプションはソースマップが埋め込まれない状況下でだけ有効になります。
ソースマップが埋め込まれている場合は機能しません。