CSS HappyLife

国民健康保険税が高いので、多くの人が安くなる方法を。

2012-03-22T18:13:52Z

ブログの主題と全然関係ないけど、ウェブ制作な人とかイラスト描いてご飯食べてるフリーランスの人には意味の有る内容なのかなーと思ったので簡単にでも書いておくです。

ちなみに、現状で年間20万以上払ってる人が安くなる内容です。
20万って言うと、所得ベースで年間200万ちょい稼いでれば超えてしまう額だと思われますが、住んでいる地域によっても差が大きいので、その辺りはちゃんと調べた方が良いかなーと。

会社員からフリーランスになると大抵の人が社会保険から国民健康保険に切り替える訳ですが、多分皆思うのです。

『国保、たっけぇえっぇえΣ(ﾟДﾟ；』

でも、他に選択肢が無いと思ってたり、そう言う物だと思い込んでるから、仕方なく払う感じですよね。
ボクはそんな感じでした。

住民税もそれなりに高いけど、まだその使い道を考えれば納得できる部分が有れど、保険が収入に対してどんどん上がる国民健康保険税は納得が行かないです。
ボクなんか、ここ5年くらいは医者にかかってないので、より捨ててる感が大きいお金。
とは言え、万が一を考えたら払わない訳にも。。。

と、思っていたら、どうやら「国民健康保険組合」ってのが有るらしく、その中のいずれかの組合に加入すると、多くの場合保険料が安くなるとの事。
この組合は色々有るんですが、ボクたちみたいなウェブ制作やってる人とかだと「文芸美術国民健康保険組合」一択になる感じです。

文芸美術国民健康保険組合の一番素敵な所は、保険料が組合員の収入が、多い少ないにかかわらず均等なんです！
その金額も、月15,000円程度。
この辺りでだいぶテンションが上がってきます。えぇ。

保険料の比較とかを試してみると更にその差額が歴然。

んで、この組合に加入するには、以下の条件を満たす必要があります。

日本国内に住所を有し、文芸、美術及び著作活動に従事し、かつ、組合加盟の各団体の会員である者とその家族。
なお、法人事業所の事業主、従業員の方々は健康保険が強制適用となっており、当組合を含め、国民健康保険には加入できません。

組合加盟の各団体ってのが色々有りますが、現状だとウェブ制作やイラストの場合は、「（協）日本イラストレーション協会－ JILLA／ジャイラ」か「社団法人日本グラフィックデザイナー協会（JAGDA）」になると思います。
将来、ウェブデザイナー協会みたいなのが出来たら一番良いんですけど。
他の業種の方も結構色んな団体やらが有るので、一度調べてみると良いと思います。

ここで、厄介になるのが団体への加入資格。
JAGDAだと推薦が通常必要なので、周りに加入している人が居ないとダメですが、事務局に言えば紹介してもらえるみたいです。コメント参照

この辺りが若干手間ですが、JILLAは推薦が必須では無いので、協会から承認されれば誰でも入れます。

ウェブの場合、イラストは切っても切れない関係ですからイラストレーションに関わる事業者で有ることは間違いないです。
むしろ、言ってしまえばウェブデザインもイラストです(｀・ω・´)キリッ
まぁ、厳密な規定は協会の中の人が決めることなので定かでは有りませんが。

3/23 15:45頃追記：JILLAの中の人っていうか代表の方からTwitterで反応が！

JILLAはイラストレーションを発注側/受注側として扱っている個人事業者で開業届、青色申告をきちんとしている方であれば受入れています。ぜひご一考を。

Twitter / @TETSUHONDA: JILLAはイラストレーションを発注側/受注側として ...

しれっと発注側も入っていますね！後、青って書いてますが白でも可能みたい。参照
結構対象になる人が多いんじゃないかな、コレ。

と言う訳で、JILLAに加入する場合は、正会員入会申込みフォームから必要事項を記入して、必要な書類一式を郵送してもらいます。
2、3日で届くので中にある書類をしっかり読んで、必要事項を記入したり必要な物を用意したりします。
必要な物に住民票とか有るのでちょっと手間ですが、面倒がらずにやっちゃいましょう！
数日すると審査結果がメールで来ます。
無事に承認されましたとなると、出資金やら手数料を1ヶ月以内に3万程度払う必要があります。
んで、無事協会に入れれば、文芸美術国民健康保険組合の加入資格が得られるので、そっちの手続きも無事に済めば晴れて被保険者になる事が出来る感じです。

最後に、新しい保険証をもらったら市役所とか行ってその旨を届け出てお終いです。

協会への出資金とか諸々を足しても年間で20万程度で済むので、多くの場合安くなると思います。
ただ、自治体の場合は世帯数が多いと安くなると言うか増えても殆ど高くならないので、一人の場合じゃないと、安くならない可能性も。

にしても、自治体の国民健康保険の制度に関して色々考えさせられました。

【Sassを覚えよう！】もくじ的なのと参考リンク

2012-01-29T19:15:42Z

需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。

カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。

新規セットのは、ちょっと遊び心で動画とか使ってるんで、実際の動きがちょこっとでも感じられるので、観てもらうとグッと興味が出るかも！？

参考にしたサイトとか

今回のSassを覚えよう！を書くのに参考にしたサイトや一度は読んだ方が良さそうな記事などです。
かなり多くの記事で「Less & Sass Advent calendar 2011」を参考にさせてもらってます。

Sass - Syntactically Awesome Stylesheets: 何はともあれ本家サイト。英語です。
File: SASS_REFERENCE: Sassのリファレンスです。英語ですが、読めなくても例を見てると何となく分かります。
Sassで行こう！: A List Apart の翻訳記事です。かなりステキな内容です。Sassを始めるなら必ず読みたい記事の一つ。
Ustream.tv: 小久保浩大郎「Sass徹底解説〜SassがもたらすCSSのパラダイムシフト」其の一
Ustream.tv: 小久保浩大郎「Sass徹底解説〜SassがもたらすCSSのパラダイムシフト」其のニ: 其の一の前半は、~~眠くなるような面白味のない~~歴史的な話ばっかりですが、後半からはかなりステキなお話が満載です。
Sass、そしてSassy CSS (SCSS): Sassについての良さを知るにはすごくいい記事です。
Sass - チュートリアル: 本家Sassのチュートリアルの翻訳
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog: 実務での導入のきっかけになりそうなtacamy嬢の記事。
hamashun.me : Sassのサンプルコード: 覚えはじめの頃かなり使わせてもらいました＞＜
NAVERでのSassの使い方 « NAVER Engineers' Blog: 実際の現場での内容なのですごく参考になります。ただ、コレはやり過ぎ感も否めない気も。普通の制作会社とかがココまでやると外注とか出せないよね、多分。
Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker: Vol.3の一番カンタンな環境構築（Scout編）を書くのにかなり参考にさせてもらいました。
Sassの記述を覚えてCSSを効率的に書くための基本的メモ｜linker journal｜linker: Vol.4の基本的な記述方法を書くのに参考にさせてもらいました。
CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）/ - サイブリッジラボ: MacにSassをインストールするのにハマったときに助けられました。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞: LESSも気になってる方は、比較してみるのに良いかと。
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG: プログラムが分かんなくても、この位なら使えるかも！って思えるステキ記事。
Sass の @extend はどこがすごいのか - terkel.jp: @extend についてもっと詳しく知れます。
OOCSS の Spacing クラスのようなものを Sass で - terkel.jp: 余白調整用のスタイルとかはこの記事とかも参考にさせてもらいました。
Sass の @import ルール - terkel.jp: Vol.7のファイルを分割して管理を楽に（partialについて）を書くにあたって参考に。
hamashun.me : Windows PC に Ruby と Sass を導入する方法: Winに導入するのにかなり参考になります。
SassをWindowsにインストールする - あと味: こちらも、インストール手順の参考になります。
最近の案件でのSassの運用 - あと味: Sass用の新規セットの参考にさせてもらいました。
このサイトで Sass を導入してみた | funenPlaCanen: こちらも、作られたSCSSファイルが公開されてるので参考になります。
Sass(Scss) Memo: 出力形式 compressed | Culture27: Sassで利用できるハックなども扱ってて役に立ちます。
DreamweaverでSassを使う時にZen Codingを利用可能にするカスタマイズ｜Blog｜Skyward Design: ドリをメインで使う人は読んでおくと幸せになれるかも！？
SassとPhotoshopのスクリプトで、クロスブラウザなCSS3グラデーションを簡単に実現する｜Blog｜Skyward Design: グラデーションをSassでやるのに便利そう。

ざっと、こんな感じでしょうか。
どれもステキな記事でかなり勉強になりました。
ありがとうございます！

途中、書くのにだいぶ飽きて来たり、別の記事書きたいとか思ったりしてましたが、ひと通り終わって良かった＞＜
また、ゆるゆると更新していければなーと思ってます。

【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

2012-01-29T14:45:10Z

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

中身のご説明

zipを解凍すると「newsite_sass_ver01」ってフォルダができます。
中身はそこまで過去のと変わりませんが、SassをWindowsでささっと始める様のバッチファイルと、「html」「sass」フォルダが有ります。

バッチファイルに関しては「バッチファイルを使ってカンタンに黒い画面でSassを利用する」を参考にして下さい。

各SCSSファイルの概要

sassフォルダに入ってる、各SCSSファイルについてカンタンに。
各SCSSファイル名をクリックすると、ファイルがダウンロード出来ます。

_layout.scss: ヘッダーとかフッターとかレイアウト関係用。
_main.scss: メインコンテンツ等のスタイル用です。一番ガツガツ書いていくファイル。
_mixin.scss: ミックスインとか@extendなどが定義されてます。
_print.scss: 印刷用で使うSCSSファイル。
_reset.scss: XHTMLとHTML5のリセットスタイル、フォントサイズの相対指定が書かれているファイル。
_setting.scss: なんか、色々を設定する為のファイル。
style.scss: style.cssに変換するファイルで、上記すべてをインポートするファイル。

後は、ページ固有のスタイルが必要な場合に、SCSSファイルを追加していく感じになるかなーと思います。
ちなみにあと味さんでも使ってるSCSSファイルを紹介しているので、そちらも参考になると思います。

最近の案件でのSassの運用 - あと味

設定の変更

色々を設定する為の_setting.scssファイルは、一部の値をちょっと変えたりするだけで、ガラっとスタイルを変更したり出来ます。
んでは、この_setting.scssファイルを、実際どんな感じで使うのかをいくつかご説明するです。

リセットCSSの切り替え

リセットCSSをHTML5に切り替えたい場合は、$use_html5 の値を「false」から「true」にすればOKです。
実際どんな風に切り替わるかをSass使ってない人も分かるように動画にしてみた！

値を変更するだけで、ガラっと吐き出されるCSSが変わるのが面白いかなーと。

付与するベンダープレフィックスの変更

$set_prefix の値を変更すれば、次のように付与されるベンダープレフィックスが変更されるので、同じようにインポートして使ってる他のスタイルも一瞬で変更できます。

余白調整用のスタイルを吐き出す

あまり使いたくはないけど、やはり状況に寄っては余白を調整するためだけのクラスが用意されてると便利だったりしますよね。
なので、そう言ったクラスが直ぐに吐き出せるようにしています。

デフォルトでは、これらのクラスは吐き出されないようにしていますが、これも値を「false」から「true」に変更することで吐き出されるので必要に応じて使い分けが出来る感じです。

なお、この余白調整用のクラスは「_mixin.scss」に定義されてますので、変更したい場合は次の部分を変えてもらえれば良いかと。

	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 20 {
			.mt#{$i * 5} { margin-top: 5px * $i !important; }
			.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
			.pt#{$i * 5} { padding-top: 5px * $i !important; }
			.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

今は、5px刻みにしているので、10pxにしたい場合は 5 ん所を10にするだけでOKです。また、今は0から20回繰り返されるので100 までの各クラスが吐き出されますが、多すぎたり少ないって思う場合は、この20を変えればOKです。

他にも、paddingの調整はいらない場合は、コメントアウトか消してしまえばOKです。

試しに、10px刻みにして繰り返し回数を20から10に。paddingは吐き出さない様にした場合は次のような感じです。

	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 10 {
			.mt#{$i * 10} { margin-top: 10px * $i !important; }
			.mb#{$i * 10} { margin-bottom: 10px * $i !important; }
			//.pt#{$i * 5} { padding-top: 5px * $i !important; }
			//.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

こんな風に、色んな設定が出来たり、ちょっと数値を変えるだけで吐き出されるCSSを大幅に変更できます。

色々試して、遊んでみるのが良いのかなーと！

各SCSSファイル

最後に、ちょっと長いけど各SCSSファイルのコードをそのまま貼っておきます。

_layout.scss

@charset "utf-8";
// ===================================================================
// レイアウト関係のスタイル
// ===================================================================


/*----------------------------------------------------
	#page
----------------------------------------------------*/
#page {
	width: $base_width;
	margin: 0 auto;
	padding: 10px;
	background: $sub_color;
	font-size: fz(12);
}


/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents {
	@extend .clearfix;
	width: $base_width - 20px;
	padding: 10px;
	margin-bottom: $base_margin_bottom;
	background: #ccc;
	
	.pageTop {
		clear: both;
		margin: 0;
		text-align: right;
	}
}


/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
#header {
	width: $base_width;
	margin-bottom: $base_margin_bottom;
	background: #fff;
	
	#nav {
		@extend .clearfix;
		li {
			float: left;
		}
	}
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/
#footer {
	@extend .clearfix;
	width: $base_width;
	background: #ccc;
	
	.copyright {
		text-align: center;
	}
}

_main.scss

@charset "utf-8";
// ===================================================================
// メイン - このファイルにメインコンテンツ部分のスタイルをガツガツ書いていく。
// ===================================================================

/* TEST */
.test {
	@include border_radius;
	@include border_radius(5px 10px 2px 12%);
	@include bg_size(100px);
	@include min_height(777px);
	@extend .clearfix;
	@extend .box_size;
	background: url(#{$img_path}share/bg_test.gif);
	font-size: fz(18);
}
.opTest img:hover {
	@extend .opacity;
}


/*----------------------------------------------------
	element style
----------------------------------------------------*/
body {
	background: $main_color;
	border-top: 4px solid $accent_color;
	color: $font_color;
	font-family: $base_font;
}

input, textarea {
	font-family: $base_font;
}

// for IE6
* html {
	body, input, textarea {
		font-family: $base_font_ie;
	}
}

// 外部リンクアイコン
.externalIcon {
	margin: 0 3px;
	vertical-align: middle;
}

// リンク
a {
	&:link {
		color: $link_color;
	}
	&:visited {
		color: $link_color_visited;
	}
	&:hover {
		text-decoration: none;
		color: $link_color_hover;
	}
	&:active {
		color: $link_color_active;
	}
}


// レイアウト関係のスタイル読み込み
@import "layout";


/*----------------------------------------------------
	#main
----------------------------------------------------*/
#main {
	float: left;
	width: 600px;
	background: $main_color;
	@include border_radius;
	
	table, ol, ul, dl, blockquote, pre, p {
		margin-bottom: $base_margin_bottom;
	}
	
}


/*----------------------------------------------------
	#sub
----------------------------------------------------*/
#sub {
	float: right;
	width: 310px;
	background: $main_color;
}

_mixin.scss

@charset "utf-8";
// ===================================================================
// mixinやらCSS3やら、extendも。
// ===================================================================


// border-radius
@mixin border_radius($br_value) {
	@each $prefix in $set_prefix {
		#{$prefix}border-radius: $br_value;
	}
}


// background-size
@mixin bg_size($w, $h: auto) {
	@each $prefix in $set_prefix {
		#{$prefix}background-size: $w $h;
	}
}


// min-height
@mixin min_height($value) {
	min-height: $value;
	_height: $value;
}


// ===================================================================
// extend
// ===================================================================
@if $use_extend_object {
/* 汎用クラス */

	// リストマーカー
	[class^="mark"] {
		padding-left: 15px;
		background: no-repeat left .5em;
	}
	@for $i from 1 through 5 {
		.mark#{$i} {
			background-image: url(#{$img_path}share/mark_#{$i}.gif);
		}
	}

	// 簡易ロールオーバー
	@if $opacity_value {
		.opacity {
			opacity: $opacity_value;
			-moz-opacity: $opacity_value;
			filter: alpha(opacity=#{$opacity_value * 100});
			-ms-filter: "alpha(opacity=#{$opacity_value * 100})";
		}
	}

	// inline-block
	.inline_block {
		display: inline-block;
		*display: inline;
		*zoom: 1;
	}

	// table-cell
	.table_cell {
		display: table-cell;
		*display: inline;
		*zoom: 1;
		vertical-align: middle;
	}

	// float: right
	.fr,
	.imgR {
		float: right;
		margin-left: 10px;
	}

	// float: left
	.fl,
	.imgL {
		float: left;
		margin-right: 10px;
	}

	// text-align: center
	.imgC,
	.tC,
	.btn {
		text-align: center;
	}

	// img Centering
	.imgC {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	// text-align: right
	.tR,
	.sign {
		text-align: right;
	}

	// box-sizing
	.box_size {
		@each $prefix in $set_prefix {
			#{$prefix}box-sizing: border-box;
		}
	}

	// text-shadow none
	.ts_none {
		@each $prefix in $set_prefix {
			#{$prefix}text-shadow: none !important;;
		}
	}

	// box-shadow none
	.bs_none {
		@each $prefix in $set_prefix {
			#{$prefix}box-shadow: none !important;;
		}
	}


	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 20 {
			.mt#{$i * 5} { margin-top: 5px * $i !important; }
			.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
			.pt#{$i * 5} { padding-top: 5px * $i !important; }
			.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

}


/* clearfix */
.clearfix {
	*zoom: 1;
	&:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
}

_print.scss

@charset "utf-8";
// ===================================================================
// 印刷用
// ===================================================================

/*----------------------------------------------------
	印刷用スタイル
----------------------------------------------------*/
@media print {
	
	* html body {
		zoom: .7;
	}

}

_reset.scss

@charset "utf-8";

// ===================================================================
// リセット用CSS
// ===================================================================

/* Reset Style */
html {
	overflow-y: scroll;
}
body {
	line-height: 1;
	color: #000;
}

@if $use_html5 {
	/* html5doctor.com Reset Stylesheet v1.6.1
	Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */

	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		margin:0;
		padding:0;
		border:0;
		outline:0;
		font-size:100%;
		vertical-align:baseline;
		background:transparent;
	}

	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section { 
		display:block;
	}

	nav ul {
		list-style:none;
	}

	blockquote, q {
		quotes:none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content:'';
		content:none;
	}

	a {
		margin:0;
		padding:0;
		font-size:100%;
		vertical-align:baseline;
		background:transparent;
	}

	// change colours to suit your needs
	ins {
		background-color:#ff9;
		color:#000;
		text-decoration:none;
	}

	// change colours to suit your needs
	mark {
		background-color:#ff9;
		color:#000; 
		font-style:italic;
		font-weight:bold;
	}

	del {
		text-decoration: line-through;
	}

	abbr[title], dfn[title] {
		border-bottom:1px dotted;
		cursor:help;
	}

	table {
		border-collapse:collapse;
		border-spacing:0;
	}

	// change border colour to suit your needs
	hr {
		display:block;
		height:1px;
		border:0;
		border-top:1px solid #cccccc;
		margin:1em 0;
		padding:0;
	}

	input, select {
		vertical-align:middle;
	}

} @else {

	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
		margin: 0;
		padding: 0;
	}
	address,caption,cite,code,dfn,em,strong,th,var {
		font-style: normal;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	caption,th {
		text-align: left;
	}
	q:before,q:after {
		content: '';
	}
	img,
	object,
	embed {
		vertical-align: top;
	}
	hr,legend {
		display: none;
	}
	h1,h2,h3,h4,h5,h6 {
		font-size: 100%;
	}
	img,abbr,acronym,fieldset {
		border: 0;
	}
	li {
		list-style-type: none;
	}
}

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
// Percents could work for IE, but for backCompat purposes, we are using keywords.
// x-small is for IE6/7 quirks mode.
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small; // for IE
	*font:x-small; // for IE in quirks mode
}

// Nudge down to get to 13px equivalent for these form elements
select, input, button, textarea {
	font:99% arial,helvetica,clean,sans-serif;
}

// To help tables remember to inherit
table {
	font-size:inherit;
	font:100%;
}

// Bump up IE to get to 13px equivalent for these fixed-width elements
pre, code, kbd, samp, tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}


// ===================================================================
// フォントサイズ
// ===================================================================
$fontSizeList: 62%, 70%, 77%, 85%, 93%, 100%, 108%, 116%, 124%, 131%, 139%, 147%, 154%, 162%, 170%, 177%, 185%, 193%, 200%, 208%, 216%, 224%, 231%, 239%, 247%, 254%, 262%, 270%, 277%, 285%, 293%, 300%, 308%;

@function fz($size) {
	@if $size < 8 {
		$size: 8;
	}
	@if $size > 40 {
		$size: 40;
	}
	@return nth($fontSizeList, $size - 7);
}

フォントサイズを利用するには「font-size: fz(14)」とかってすればOKです。
コレに関しては、えどさんの記事で紹介されてるのをそのまま流用していますので、そちらも合わせて読んで頂ければと。

最後の方に書かれてる「@functionを使って何度も記述することをまとめる」ん所です。

sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する CSS-EBLOG

_setting.scss

@charset "utf-8";
// ===================================================================
// 設定
// ===================================================================


// HTML5の場合は値を「false」から「true」にする
$use_html5: false;


// 汎用クラスを使用するか
$use_extend_object: true;

	// 簡易ロールオーバーの値
	$opacity_value: .55;

	// 余白調整用のクラスを使用するか
	$use_spacing_classes: false;


// 画像のパス
$img_path: "../img/";


// ベースフォント
$base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
$base_font_ie: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;


// ページ全体の横幅
$base_width: 940px;


// 要素の基本下マージン
$base_margin_bottom: 15px;


// メインカラー（ベースカラー）
$main_color: #fff;

// サブカラー
$sub_color: #eee;

// アクセントカラー
$accent_color: #e73562;


// ベーステキストカラー
$font_color: #333;


// ベースリンクカラー
$link_color: #06f;
$link_color_visited: #39f;
$link_color_hover: #00f;
$link_color_active: #00f;


// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, -ms-, -o-, '';


// 角丸の初期値
$br_value: 3px;

style.scss

@charset "utf-8";
// ===================================================================
// 各SCSSファイルのインポート
// ===================================================================

// 設定用
@import "setting";

// リセットCSS、フォントサイズ
@import "reset";

// ミックスイン、@extend、CSS3など
@import "mixin";

// メインスタイル - layout.scssはメイン内でインポート
@import "main";

// 印刷用スタイル
@import "print";

ながいなー！
では、良きSassライフを～ (・∀・)ノ

【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする

2012-01-26T15:20:00Z

気付けば、Vol.10！
ずいぶん長編になってまいりました。

何気に、既に去年1年分のエントリー数を超えてるだなんて！
今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。

・・・はい、後者です。

さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！

ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。
ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。

や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン程度なんでしょうけど！

ミックスインのおさらい

まずは、カンタンにおさらいです。

Sass

// ミックスインを定義
@mixin inline_block {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
 
// 定義したミックスインを読み込む
.sampleBox {
	@include inline_block;
	background: #eee;
}

@mixin の後に半角スペースで、任意の名前を定義し、@include で定義したミックスインを読み込む事が出来ます。
これをCSSに変換すると次のようになります。

CSS

.sampleBox {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	background: #eee;
}

これだけだと、@extend と大差がないので、ミックスインじゃないと出来ない事をご紹介していくです。

変数と合わせて利用する

ミックスインは次のように変数と合わせて使うことが出来ます。

Sass

@mixin min_height($value) {
	min-height: $value;
	_height: $value;
}
 
.sampleBox {
	@include min_height(500px);
}

こんな風に、定義した名前の後に()でその中に変数名をセットし、インクルードする際に、変数の値を()内に入れます。
これで、CSSに変換すれば次のようになります。

CSS

.sampleBox {
  min-height: 500px;
  _height: 500px;
}

更に、変数名だけじゃなく値ももちろん定義出来ます。その際は「:」を使ってその後に値を入れます。
これで、初期値をセットしておけます。

Sass

@mixin min_height($value: 200px) {
	min-height: $value;
	_height: $value;
}
 
// 初期値が上書きされる
.sampleBox1 {
	@include min_height(500px);
}
// 初期値が適用される
.sampleBox2 {
	@include min_height();
}

初期値を適用する場合は() が無くても大丈夫です。
これを、CSSに変換すれば次のようになります。

CSS

.sampleBox1 {
  min-height: 500px;
  _height: 500px;
}
.sampleBox2 {
  min-height: 200px;
  _height: 200px;
}

基本的な値は共通だけど、部分的に値を変更したい場合なんかに活用できる感じです。
ちなみに、値が同じ場合は次のようにしても問題無いです。

Sass

@mixin min_height {
	$value: 200px;
	min-height: $value;
	_height: $value;
}

値が固定なら、 @extend のが良いんですけど。
こんな感じで、変数と組み合わせることで、同じような記述を何度もしなくて済むので、ベンダープレフィックスを使うことが多いスマホ案件等で力を発揮出来ます。
border-radius 辺りがよく例に出てますが、その辺りは後述します。

@if を使ってみる

ちょっと方向がずれますが、ここで @if に関して軽く扱っておきます。

if とかマジでプログラマーな領域な感じがしますが、ボクは複雑なことは分からないのであくまでもカンタンな使い方です。アレルギーな方でも大丈夫！

if は、プログラムでは「もし～だったら」という条件を示すヤツですね。
例えば、次のように使うことで、リセットCSS的なのを1ファイルで済ませることが出来ます。

Sass

// HTML5の場合は値を「false」から「true」にする
$use_html5: false;
 
@if $use_html5 {
	// ここに HTML5のリセットスタイルを記述する
} @else {
	// ここに XHTMLのリセットスタイルを記述する
}

ファイルを分割することがメリットになる場合もあれば、こういう感じで同じリセットCSSでもDOCTYPEに寄って使い分けたい場合なんかには良いですね。

この辺りは、以下の記事などが参考になると思います。

ベンダープレフィクスを自動でやる

さて、ココがきっと主題になる感じです。
スマホ案件と言うかCSS3をそれなりに活用する案件の場合は、ベンダープレフィックスを都度付けるのが非常に面倒な作業ですよね。
そこで、Sassなら面倒なベンダープレフィックスを@each を使うことで自動で付けることが出来ます。
（先に@if をクッションにして@each に入ったつもりですがあんま意味が無かったかも！）

後述すると言った、border-radiusの例はここで登場です。

Sass

// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
 
// border-radius
@mixin border_radius($br_value: 3px) {
	@each $prefix in $set_prefix {
		#{$prefix}border-radius: $br_value;
	}
}
 
.sampleA {
	@include border_radius;
}
.sampleB {
	@include border_radius(50%);
}

これは、パッと見よく分かんない感じがしますが、最初に付与したいベンダープレフィックスを変数を利用して定義しておきます。
その後に、指定したリストを順番に処理してくれる @each を利用して、$set_prefix で定義したベンダープレフィックスを順番に処理しています。

これを、CSSに変換すると次のようになります。

CSS

.sampleA {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
 
.sampleB {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

こんな感じで、面倒な処理を自動で行なってくれます。
最初に付与したいベンダープレフィックスを変数で定義しているので、次のように色んな所で使いまわせます。

Sass

// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, '';
 
// border-radius
@mixin border_radius($br_value: 3px) {
	@each $prefix in $set_prefix {
		#{$prefix}border-radius: $br_value;
	}
}
@mixin border_radiusSH($br_tl_value, $br_tr_value, $br_bl_value, $br_br_value) {
	@each $prefix in $set_prefix {
		#{$prefix}border-radius: $br_tl_value $br_tr_value $br_bl_value $br_br_value;
	}
}
// box-size
.box_size {
	@each $prefix in $set_prefix {
		#{$prefix}box-sizing: border-box;
	}
}
 
.sampleA {
	@include border_radius(8px);
}
.sampleB {
	@include border_radiusSH(5px, 2px, 10px, 8px);
	@extend .box_size;
}

border-radiusプロパティは、値を個別で指定したい場合も有るので、それ用のミックスインを定義しています。
また、他のプロパティでも同じようにベンダープレフィックスを付与出来るので、box-sizingプロパティは @extend で使ったりもできます。

これをCSSに変換すると次のようになります。

CSS

.box_size, .sampleB {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
.sampleA {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
 
.sampleB {
  -webkit-border-radius: 5px 2px 10px 8px;
  -moz-border-radius: 5px 2px 10px 8px;
  border-radius: 5px 2px 10px 8px;
}

この例ではしれっと、$set_prefix の値から -ms-, -o-,を消していたので、上記の様に変換されます。
こんな風に、CSS3をガンガン使う場合にかなり効率が上がると思います！

この辺りの繰り返し処理は、えどさんのエントリーが非常に参考になると思います。

Retina Display 対応もカンタンに

Sassを使えば、Retina Display の対応にも力を発揮します。

Sass

// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, -ms-, '';
 
// 画像のパス
$img_path: "../img/";
 
// background-size
@mixin bg_size($bgs_w, $bgs_h: auto) {
	@each $prefix in $set_prefix {
		#{$prefix}background-size: $bgs_w $bgs_h;
	}
}
 
ul {
	li {
		padding-left: 15px;
		background: url(#{$img_path}icon.png) no-repeat left center;
		@include bg_size(142px / 2);
	}
}

今までの機能を使ってるだけなので目新しいことはしてませんが、Retinaに対応する場合は、倍のサイズで作った画像の半分の値を指定する必要があったりするので、そんな場合も楽ちんになります。
これをCSSに変換すると次のようになります。

CSS

ul li {
  padding-left: 15px;
  background: url(../img/icon.png) no-repeat left center;
  -webkit-background-size: 71px auto;
  -moz-background-size: 71px auto;
  -ms-background-size: 71px auto;
  background-size: 71px auto;
}

と言う感じで

今回は、だいぶプログラムちっくな部分が出てきましたが、あんまりその辺り理解して無くてもミックスインなら何処かの誰かが頑張って書いてくれたのをコピペして使ったりすることが出来るので大丈夫かなーと。

もちろん、もっともっと勉強したい方は、色々ググッて使いこなしてもらって、覚えたことはアウトプットしてくれるとSassの情報が増えて皆がHappyになれるかなって思います！

これでSassを覚えよう！シリーズは、ほぼお終いです。
この次は、Sass用の新規でサイトを作るのに使えそうな一式を公開して、ボクがSassを覚えたのに参考にさせて頂いたサイトを出来るだけ上げたいと思います。

【Sassを覚えよう！Vol.9】変数と演算で効率的に

2012-01-25T15:01:00Z

ちゃっかりデザインを変更しました。
デザイン以外にも、メインエリアの横幅が変わったりしてます。
かなり突貫工事なので、色々アレな部分があるかと思いますが、、、

さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。

変数と演算のおさらい

軽くおさらいです。
次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。

Sass

$yokohaba: 600px;
 
#main {
	width: $yokohaba;
	padding: 10px - 5;
}

これを、CSSに変換すると下記のようになります。

CSS

#main {
  width: 600px;
  padding: 5px;
}

変数を使うことで、同じ値を一ヶ所にまとめて定義出来たりするので、再利用しやすいとか色々メリットが有りますね。
演算も計算が苦手なボクなんかにはとても助かります。

なお、変数はSCSSファイル内で呼び出したい部分より先に書く必要があります。そうしないと「そんな変数ねーよ！」的なエラーが出ちゃいます。
なので、変数を別のSCSSファイルでまとめてる場合も、変数が定義されてるファイルから @import する必要があります。

変数に対して演算を使ってみる

Sassはそれぞれの機能を基本的には組み合わせて利用できるので、変数に対して演算を使うことも出来ます。

Sass

$base_width: 650px;
 
#contents {
	width: $base_width - 20;
	padding: 10px;
}

変数 $base_width から #contents では widthの値を 20px 引いています。
これをCSSに変換すると次のようになります。

CSS

#contents {
  width: 630px;
  padding: 10px;
}

こんな風に計算してくれますが、これだとpaddingの値が変わったら2箇所直さないと行けないので、もうチョット変数と演算を組み合わせて使うと、次のようにすることも出来ます。

Sass

$base_width: 650px;
 
#contents {
	$pd: 10px;
	width: $base_width - ($pd * 2);
	padding: $pd;
}

CSSに変換した際の結果は先の例と同じになりますが、paddingの値が変わった場合に $pd で定義した値を変更すればOKになります。

この際に、規則集合内に宣言のように変数を定義（例だと $pd ）すると、その宣言ブロックにだけ適用されるので、同じ変数名が別の規則集合にあっても大丈夫です。
逆を言えば、別の規則集合で使おうとすると「そんな変数ねーよ！」的なエラーが出るって事です。

演算は色指定とかでも使えます

演算は、10進数以外にも使えるので、色の指定でも使えます。

Sass

$color: #111;
 
.sample {
	color: #333 + #666;
	color: $color + #9926a5;
	color: #e73562 / 3;
	color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

これを、CSSに変換すると次のように。

CSS

.sample {
  color: #999999;
  color: #aa37b6;
  color: #4d1120;
  color: rgba(255, 255, 0, 0.75);
}

こんな風に使えますが、人が直感的にどんな色になるかが分かりにくいので、コレをどうやって有効に使うかはボクにはイマイチ見えてません...

この辺り突っ込んで色々やってみたい場合、Sassには予め関数が組み込まれているのでその辺りを見てもらえれば良いかと。

ビルトイン関数の一覧（Module: Sass::Script::Functions）

背景画像のパスとかを定義する

変数は任意の文字列を定義して自由に使えますが、画像のパス等に使いたい場合、普通に使うとエラーになってしまいます。

Sass（エラー）

$img_path: "../common/images/hogehoge/";
 
.sample {
	background: url($img_pathmark.gif) no-repeat;
}

コレでは当然といえば当然ですが、変数名とファイル名の区別が付かず、エラーになってしうので、そんな場合は次のようにすればOKです。

Sass

$img_path: "../common/images/hogehoge/";
 
.sample {
	background: url(#{$img_path}mark.gif) no-repeat;
}

変数名を #{ と } で囲う感じですね。
これをCSSに変換すれば次のようにしてくれます。

CSS

.sample {
  background: url(../common/images/hogehoge/mark.gif) no-repeat;
}

これで、指定するパスが長い場合とか、違うプロジェクトでも使いまわしたり後から画像のディレクトリが変わってしまう場合などに有効に使っていけるかなーと。

Sassは初期のコーディング時の効率化も有りますが、運営・保守など、メンテナンス性の部分でも力を発揮するので、単純にスピードが上がると言うより長いスパンで見て効率が良くなると言う感じでしょうか。
それ故に、納品後もSassで運営できると嬉しいって言う部分が有るわけですけど。

【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす

2012-01-24T16:15:33Z

Vol.4のSassの基本的な記述方法で書いた「ルールのネスト」ですが、もうちょっと詳しい使い方なんぞを書こうかなと思ってる次第です。

ネストのおさらい

軽くおさらいです。
次のように、通常のCSSでは出来ない入れ子による記述が出来るのがネストです。

#main {
	width: 600px;
	p {
		margin-bottom: 1.5em;
	}
}

これで、コピペを都度しないでHTMLの構造に沿った感じで書いていけるので、構造が把握しやすくなったりします。

プロパティをネストする

ネストはセレクタの他に、プロパティでも使うことが可能です。

.sample {
	background: {
		repeat: no-repeat;
		position: right top;
		color: #666;
	}
}

これだと、ショートハンドで普通に書いた方が良さそうですが、ショートハンドを利用しつつ入れ子も可能なので、次のように書くことも出来ます。

.sample {
	border: 1px solid #999 {
		bottom-width: 2px;
	}
}

これなら、基準となるスタイルを最初にショートハンドで書いて、下辺だけスタイルを変更したい場合なんかに良い感じです。

参考：Nested Properties - File: SASS_REFERENCE

@media をネストする

他にネストでは、次のような感じで media queries をネストすることができます。

Sass

#page {
	width: auto;
	@media all and (orientation:landscape) {
		width: 460px;
	}
}

これをCSSに変換するとちゃんと以下のようにしてくれます。

変換したCSS

#page {
  width: auto;
}
@media all and (orientation:landscape) {
  #page {
    width: 460px;
  }
}

これも何気に強力な機能の一つです。
スマホ案件も多くなってますし、レスポンシブウェブデザインとかでも、かなり活用できるかなーと思います。

参考：@media - File: SASS_REFERENCE

と言う感じで

ネストは、一番使用頻度が高くかなり使い勝手が良いですが、何でもかんでもネストしまくってると逆に可読性が落ちたり、ガチガチになってしまう事も考えられるので、ご利用は計画にって感じでしょうか。

【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）

2012-01-24T09:50:00Z

ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。

通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。
もしくは、head要素内に各CSSファイルを読み込んだりしますよね。
ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。
まぁ体感速度的にどの程度影響があるかはアレですが。

それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。

そう言った問題も、Sassなら分割したSCSSファイルを一つのCSSファイルとして吐き出してくれるので解決します。

SCSSファイルの分割方法

通常、ファイルを分割する際は単純にファイル名が違う複数のファイルを読み込みますが、Sassの場合はちょっと違っていて、アンダーバー「_」から始まるファイル名にする必要があります。
例えば「_reset.scss」「_module.scss」「_print.scss」って感じです。

これら、分割した部分的なSCSSファイルをpartial と呼びます。

このpartial は、CSSファイルには変換されないため、最終的にCSSファイルとして変換したいメインのSCSSファイルから読み込みます。

partial の読み込み

分割したファイルを読み込むには、メインのSCSSファイル内に次のように記述すればOKです。

@import "setting";
@import "reset";
@import "mixin";

この際、アンダーバーと拡張子は省略することが出来ます。
また、複数ファイルを一度に読み込むには次のように記述することで可能です。

@import "setting", "reset", "mixin";

分割したファイルが多くなると可読性が落ちてしまう場合もあるので、1ファイル毎に書くなど、その辺りは各自の好みとかで宜しいかと。

ちなみに、階層が違う場合は普通にディレクトリ名を指定すればOKです。

@import "contents/company";
@import "contents/blog";

みたいな感じです。

このSassの @import は、ファイル内のどこに記述しても良いので、印刷用のスタイルだけ最後に読み込むとかって場合にも次のような感じで使っていけます。

// リセット
@import "reset";
 
// メインのスタイルがこの辺に
body {
}
#main {
}
 
// 印刷用スタイル
@import "print";

そんな感じで

と言う感じで、Sassならファイル分割を自由にやっても最終的に一つのCSSファイルになるため、複数の人が同じサイトをコーディングする場合などにも活用できますね。
分割したファイル名は変換されたCSSには影響がないため、作業用で「_hira.scss」とかにしてても問題が有りません。

また、大規模なサイトで後からスタイルがじわじわと追加されていくと、かなりカオスな事になりがちです。
さらに追加する人が違う場合など、コメントで、、、

/* ▼▼ 2012.1.24 追加 by 平澤 ココから ▼▼ */
.hoge {
}
/* ▲▲ 2012.1.24 追加 by 平澤 ココまで ▲▲ */

みたいな超絶カッコ悪い事をしなくても済むわけです！
この読み込みもかなり強力な機能の一つかなーと思うのでうまく活用していきたいですね。

【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する

2012-01-11T16:47:45Z

前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ！と言うのをTwitterで@grfxdsgnさんから教わりました。

バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください！

こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。
久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。

バッチファイルって？

ウィキペディアとか見てもらうと色々書いてありますが、黒い画面で実行できるコマンドをテキストファイルに記述したもので、これを実行すると黒い画面がそこに書いたコマンドやらを読んで実行してくれます。

その際、拡張子は通常「.bat」を利用します。「.cmd」でも良いみたいですが、ここでは「.bat」で進めます。
中身はテキストファイルなんで、「.txt」「.css」「.html」とかの拡張子が違うだけですね。

詳細が気になる方は適当にググッてもらえると良いかと。

で、このバッチファイルを利用するとWクリックするだけでSassが利用できます！
やばい、ステキ///

手打ちやメモってコピペとか地味なことをする必要もないんです。
Coolにクリックするだけです！

バッチファイルを用意する前に

バッチファイルはディレクトリ（フォルダ）構成に影響を受けてしまうので、次のようなディレクトリ構成として進めます。

/html/
    /css/
    /index.html とか
/sass/

Scoutの時は、cssフォルダ内にsassフォルダを作っていましたが、いつものHTMLファイル一式とは別でsassフォルダを作ってる感じです。

バッチファイルの準備

いつも使ってるエディタから新規作成して、以下の内容をコピペします。

cd /d %~dp0
:: 現在のディレクトリに移動
sass --style expanded --watch sass:html/css --cache-location sass/.sass-cache
:: 【--style】CSSのフォーマット
:: 【--watch】scssファイルの自動監視
:: 【sass:html/css】sassファイルの場所:cssファイルの書き出し先
:: 【--cache-location】キャッシュファイルの保存先

コピペしたら、ファイル名は何でもOKですがとりあえず「sass_start.bat」として保存します。
もしくは、テキストファイルをアップしたのでそちらをダウンロードして拡張子を「.txt」から「.bat」に変更してもらってもOKです。

Sassを開始するバッチファイルのテキストファイル

このバッチファイルを、ルートに置きます。

/html/
    /css/
    /index.html とか
/sass/
/sass_start.bat

って感じですね。
この、.batファイルはWクリックすると、そのまま黒い画面が起動してしまうので、編集する際にはエディタにドラッグアンドドロップするなどして開いて下さい。

バッチファイルには、::でコメントが書いてあるので内容は把握できるかと思いますがカンタンに。

まず、一番最初に現在の場所（sass_start.bat を置いた場所）に移動しています。
黒い画面に慣れてないと、まず移動するとかがイミフな感じですけど、基本的に移動したディレクトリに対して命令を実行させるので移動します。

んで、移動した先で、次のsassから始まる部分の命令を実行しています。
これが実行されることでsassが利用できるようになるんですが、その際に前述したディレクトリ構成に影響が出るとお伝えした部分が関係してきます。

sass:html/css が.scssファイルが有る場所と.cssファイルが吐き出される場所になるので、ディレクトリ構成がこれと違う場合、正常に動作しません。

ディレクトリ構成を変更したい場合は、この部分を適所変更すればOKです。
例えばScoutの時のようにcssフォルダ内にsassフォルダを置く構成の場合は、

html/css/sass:html/css

って感じです。
sassの方のパスを前回のようにドライブから書けば最初に現在のディレクトリに移動する必要も無いんですが、それだと毎回バッチファイルの中身を変更しないといけないのでこんな感じにしています。
逆にバッチファイルを一ヶ所にまとめたい場合は、1行目の移動は削除してやった方が良いかと思います。

次に、今まで一度も出て来ませんでしたがSassを利用すると.sass-cacheってフォルダ名でキャッシュファイルが生成されます。
標準だと、黒い画面の現在のディレクトリに生成されてしまい、それだとちょっと邪魔なので、sassディレクトリ内に生成されるようにしています。

ただ、ボクは個人的に.sass-cacheは一ヶ所にまとめたいので、自分用では以下のようにして同じ場所に生成するようにしています。

cd /d %~dp0
sass --style expanded --watch sass:html/css --cache-location C:\Users/%USERNAME%/.sass-cache

--cache-location の後に生成される場所を指定する感じですね。

バッチファイルの中身はこれでお分かり頂けたでしょうか。
中身が分かった所で、このバッチファイルをWクリックとかで実行すると、黒い画面が自動的に立ち上がって、ディレクトリが変更されSassが起動します！

↑こんな感じで起動すればばっちりですね。
やった、コレでカンタンにSassが使えるヽ(・∀・ )ﾉ

このバッチファイルを案件毎にコピって置いておけば、バッチファイルをクリックするだけでSassを起動してくれるってスンポーです。

【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して

2012-01-10T15:25:00Z

ボクがSassを覚えるにあたって一番のネックだった部分がこれから書く内容なんですが、黒い画面でSassが動作する所までは進んでも、これから実際に案件ベースで使っていくにはどうしたら良いかって部分。

と言うより、黒い画面を起動して都度手打ちしてウンタラカンタラみたいなのは、正直面倒過ぎて実用的じゃないな、と思ってた部分がとても大きいです。
黒い画面に関する知識も殆ど無いので、何かよく分かんないなーって感じでした。

実際問題として、RubyとSassのインストールだけなら、ちょっと気になってる分かりそうな人（あ、ボクでもいいんですけどね）に、『分かんないから教えて(・∀・)！』って言ってみれば、モンクを言いつつもやってくれると思いますよ。えぇ。
あ、ヤローは自分でやりましょうね。

軽く話が反れましたが、そろそろ本題に。

scssファイルを監視

前回、無事にテストが出来たと思いますが、あのままでコーディングしたら不便すぎますよね。
scssファイルを変更する度に「sass test.scss:test.css」を毎回打ってたらかなり面倒です。
そこで、watch ってコマンドがありそれを使うことでscssファイルを監視して変更されれば自動的に cssファイルにも反映してくれます。
こんな感じです↓

sass --watch test.scss:test.css

sassの後に半角スペースで--watch を追記する感じです。

この監視を終了したい場合は、「Ctrl＋C」を押せばOK。
ちなみに、黒い画面を終了すると監視も終了するので、再開するには再度黒い画面を起動して同じようにコマンドを打つ必要があります。

これで、まだ不便な感じは有りますが、一応Scoutを使った時と同じ感じでSassライフが送れそうです。

CSSファイルの生成フォーマット - Output Style

運用とはちょっと違いますが、書き出されるCSSファイルのフォーマットに関して触れておきます。

フォーマットの指定は、次のような感じで--styleの後に半角スペース、フォーマット名になります。

sass --style nested --watch test.scss:test.css

nested

特にフォーマットを指定しない場合はこの nested になります。
入れ子を反映してくれるような感じで、コメントは一行の // は消されて、通常のコメントはそのまま残って生成されます。

nested で生成されるCSSの一例

#footer {
  width: 940px;
  background: #ccc; }
  #footer .copyright {
    text-align: center; }

expanded

人が書いた時に近い感じと言うか、まぁ普通っぽい感じです。
コメントもnested 同様、一行コメントが消え通常のコメントは残ります。
開発中や開発だけSassを使って運営は従来通りCSSを編集する場合なんかにexpanded を使うと良いと思います。
これなら、CSSのガイドラインが厳密でもない限り、一人でコーディングする場合は使っても問題無い感じがします。

expanded で生成されるCSSの一例

#footer {
  width: 940px;
  background: #ccc;
}
#footer .copyright {
  text-align: center;
}

compact

シングルラインっぽい感じになります。
こちらも他と同様に一行コメントは消えて、普通のコメントは残ります。

compact で生成されるCSSの一例

#footer { width: 940px; background: #ccc; }
#footer .copyright { text-align: center; }

compressed

圧縮された状態になります。全てのコメントは削除され、1行で全てのスタイルが書かれます。
その為、CSSファイルを直接編集するには可読性が悪すぎて使えないので、運用時にもSassが使える場合や、スマホなど少しでも容量削減したい場合などに使っていく感じです。

compressed で生成されるCSSの一例

#footer{width:940px;background:#ccc}#footer .copyright{text-align:center}

カンタンな運用方法

追記：: 下記の方法でもとりあえず問題無いんですけど、もう少しカッコ良く運営出来るように、次の記事でバッチファイルを使った方法を書こうと思います。バッチファイルを使った方が圧倒的に楽になります！

ここまでで、黒い画面からSassを起動したり使う方法がひと通り分かったかと思いますが、実際に案件で使っていくには黒い画面でディレクトリの移動をして～等を都度手打ちしてたら大変過ぎるので、もっと手軽に使えないとやってられません。

そこで、ボクが行ってる方法は非常に単純明快で、予めコマンドを何処かにメモっておいてそれをコピペして使うっていう方法です。

まずは、黒い画面を起動します。
一度「ウィンドウズキー＋R」からcmdで起動していれば、次回からはcmdが残ってるので、「ウィンドウズキー＋R → エンター」で起動できると思います。

そしたら、何処かにメモっておいた下記のようなコマンドをコピーします。

sass --style expanded --watch C:/Users/hirasawa/Documents/work/sass/newsite_sass/sass:C:/Users/hirasawa/Documents/work/sass/newsite_sass/html/css

何か長ったらしいですけど、落ち着いて見てもらうと、単純にscssファイルとcssファイルがある場所を指定してるだけです。

ちなみに、最初の例ではファイルを直接指定していましたが、フォルダを指定して監視する事が可能なので、基本的にはフォルダを指定すると便利です。

ドライブ名から書いてしまえば、ディレクトリの移動だとかドライブの変更とか面倒な事をする必要は有りません。
こんな感じのを案件毎に作ってメモっておけば、次回からすぐに起動できます。

上記ではフォーマットがexpanded になっていますが、納品時には適切なフォーマットに変えれば良い感じですね。

で、コピーしたコマンドを「Ctrl+V」でペーストすればOK！

...と言いたいんですが、黒い画面ではコレが出来ません。
大人しくマウスの右クリックから「貼り付け(P)」でペーストしちゃうのが楽です。

でもキーボードからボクはペーストしたいんだっ！！って方は、
Alt＋スペース → E → P とやると良い感じです。

ペーストしたら、エンターをッターンっと叩けばOKです。
ちなみに、改行も含めてコピーしてた場合エンターは不要です。

これで正常に動作してると思いますが、scssファイルを適当に変更して保存したら次のような感じでテキストが表示されれば完璧です。

コピペ以外にも、ボクは Texter とか使ってるのでそう言うのに登録しておいても良いかなーと思います。
いずれにしろ、手打ちって言う苦痛から解放されれば問題なしですね！

現場では色んな案件が動いてるんだ！

ここまで来たらほぼほぼ問題無いんですが、実際の現場では、案件は複数同時に動いてたりするのが当たり前ですよね。
新規じゃなくても修正だなんだと一日に複数の案件を触ることは日常茶飯事です。

んで、その様な場合に毎回Sassを一旦停止して別のディレクトリを指定するとかも面倒なので、そんな時は単純に黒い画面を複数起動しておけばOKです。

黒い画面がいぱーいになるほどに、案件を動かしてればカッコ(・∀・)イイ!!かもですね。

何にせよこれで、黒い画面でも実業務に支障がないレベルで使えるのでは無いかと思います。
ブログで記事にしてる割に、メモってコピペしろってだけとは、、、

次は、Sassのファイル分割と分割したファイルの読み込みとかその辺を書いて、Sass記法のエントリーで書くって言ってた内容とかをボチボチ書いていくつもりです。

【Sassを覚えよう！Vol.5】環境構築（黒い画面編）

2012-01-09T15:45:00Z

いよいよ、、、
黒い画面（コマンドプロンプト）の登場です。
...待って！逃げちゃダメだ！！

ここでは、、、
Rubyのインストールもしなければなりません。
...だから待って！逃げちゃダメだ！！逃げちゃダメだ！！

Rubyやら黒い画面とかは、ボクもそうですが、馴染みのない人にとっては意味不明過ぎるかと思いますが、思ったよりカンタンに使うことが出来ます。
これを乗り越えれば、黒い画面も可愛く見えるかも知れません。

ちなみに、Macの方がインストールが楽だと色んな所で書かれてますが、ボクがMacにインストールした感じ、見事にハマってMacの方が大変じゃないか！と思ったのはナイショです。

参考：CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）/ - サイブリッジラボ

こんな感じでハマってしまう可能性が有るんですよ、奥さん。

Rubyのインストール

さて、Scoutなどのアプリを使わない場合は、Rubyをインストールしてから、Sassのインストールをする必要があります。
Rubyに関してはインストーラーが有るので、インストール自体はとてもカンタンです。

RubyInstaller for Windows

上記サイトに移動すると、例によって英語ですが気にせずに「Download」って書いて有るでかいボタンから、ダウンロードページに進みます。
そしたら、下記のページが表示されると思うので、そこのRubyInstallers から最新のをダウンロードしましょう。

んで、ダウンロードした「rubyinstaller-1.9.3-p0.exe」を実行すると、インストール画面になります。
最初に、ライセンスの同意「I accept the License」を選択して「Next >」を押します。
そしたらRubyをインストールする場所を聞かれます。

場所はデフォルトのままで変更は必要ないですが、この際に「Add Ruby executables to your PATH」にチェックを入れておきます。

そしたら「Install」を押しちゃって大丈夫です。
少し経つと、インストールが完了するので「Finish」を押して閉じます。

Sassのインストール

そして、いよいよ黒い画面を起動します。
黒い画面の起動方法はいくつか有りますが、「ウィンドウズキー＋R」を押すと「ファイル名を指定して実行」ってダイアログが表示されるので、名前に「cmd」と打ってエンターキーを押せば起動します。
その他の起動方法は下記のサイトが参考になるかと。

コマンドプロンプトの使い方。起動、終了方法をまずは覚える

この起動方法だけでも、何か逃げたい気持ちが有るかも知れませんが、無事に黒い画面が起動したら、コマンドを入力していく必要があります。

こんな感じで起動したら、次からはコマンドを入力して行くんですが、@hamashun さんが書いている「hamashun.me : Windows PC に Ruby と Sass を導入する方法」が非常にステキなので、そちらを読んでもらっても、問題なくインストールが出来ると思います。
特に、XPな方はhamashunさんの環境のが近いかと。

内容は殆ど同じですが、ボクの方はWin7でのご説明です。

Rubyが入ったかを確認

黒い画面が起動したら、「C:\Users\hirasawa>」みたいな感じで表示されてると思うので、そこに以下のコマンドを入力してRubyが入っているかを確認します。

ruby -v

コマンドを入力してエンターを押せば次のような感じで、インストールされたRubyのバージョンが表示されます。

もし、バージョンが表示されずに、

「'ruby'は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチファイルとして認識されていません。」

等と表示された場合は、環境変数の設定をする必要があります。
これは、Rubyインストール時に「Add Ruby executables to your PATH」のチェックを忘れてしまうと、恐らく表示されてしまいます。
チェックを付けてインストールし直しても良いかと思いますが、環境変数を自身で設定する事でも対応できます。

「コンピューター」からプロパティを開くと「コントロールパネル\システムとセキュリティ\システム」の画面が表示されます。
こんな感じの↓

そこの左上にある「システムの詳細設定」をクリックすると、システムのプロパティが表示されます。

詳細設定タブに有る「環境変数」をクリックして、環境変数のシステム環境変数の所に「Path」と言う変数が有るのでそれを探して、編集(I)...をクリック。

クリックすると、システム変数の編集ダイアログが表示されるので、そこの変数値を一度コピーします。

コピーした変数値をテキストエディタなどに貼りつけて、一番最後に「;C:\Ruby193\bin」と追記しそれを変数値にコピペします。（そのまま編集しても良いですが、分かりにくいと思うので）
193の所は、入れたRubyのバージョンで違うと思います。

ちなみに、この変数値は結構文字数が多いので間違って消さないようにご注意を！

その後に、一旦黒い画面を閉じてから、再び「ruby -v」のコマンドを入力します。
開いたままでそのまま入力しても、恐らく変化が無いです。
無事にRubyのバージョンが表示されればOKです。

gemのアップデート

gemを使ってSassをインストールするんですがその前に、念のためgemをアップデートしておきます。

gem update --system

エンターを押した後は、少しの間待ってるとアップデートやらが進みます。
んで、完了すると以下のような感じで「C:\Users\hirasawa>」みたいになればOKです。

Sassのインストール

最後に、いよいよSassのインストールです。

gem install sass

上記のコマンドを入力してエンターを押し、少し待てばSassのインストールが完了します。

この画面まで行ってれば、無事にSassがインストール出来てるかと！

黒い画面でSassを試してみる

黒い画面の行頭の表示の場所（「C:\Users\hirasawa」とか）を開いて、test.scss というファイルを新規作成し、そこに試しに以下のようなスタイルを書きます。（スタイルは何でもOKです）

$width: 600px;
$bgColor: #eee;
 
#main {
	width: $width - 100;
	background: $bgColor;
	p {
		margin-bottom: 1.5em;
	}
}

それを保存したら、黒い画面に次のコマンドを入力します。

sass test.scss:test.css

sassの後に半角スペース、そして.scssファイルがある場所、コロン「:」、.cssファイルを生成する場所って感じです。

上手くいくと、特に何もなく次のようにまた「C:\Users\hirasawa>」が表示されます。

そしたら、同じ場所に「test.css」と言うファイルが作られてると思うので、それをテキストエディタ等で開くと、ちゃんとCSSに変換された次のようなCSSが確認できると思います。

#main {
  width: 500px;
  background: #eeeeee; }
  #main p {
    margin-bottom: 1.5em; }

これで、無事にSassを黒い画面から使うことが出来ましたヽ(・∀・ )ﾉ

でもこのままでは、どうやってこれから運用していくかがイマイチ分かりませんよね？
ディレクトリの移動だとか毎回打つのが面倒とか。

次の「黒い画面での運用に関して」ではその辺りに関して触れていく予定です。

【Sassを覚えよう！Vol.4】Sassの基本的な記述方法

2012-01-07T15:00:00Z

前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜

記法の前に

Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが）

軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。

ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。

.item {
	/zoom: 1;
}

「/」が使えないので、この場合は「*」にすれば問題有りません。

.item {
	*zoom: 1;
}

いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。

>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css

英語が出来なくても『style.scss の12行目でエラーが出てる！何か /zoom: 1; がInvalidなCSSっぽい！』って感じで分かるので、変にハマって時間を取られません。

「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、

.item {
	width: 350px;
}s

何か、} の後に s が残ってる！！！（きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね）とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。

互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。

Sassの基本的な記法

の前にがちょっと長くなりましたが、ここからがSassで使える記述方法に関してです。
意外とそれぞれの項目が長くなったので、アンカーリンクなんて付けてみた。

ルールのネスト
& 親セレクタの参照
コメント
変数
演算
ミックスイン
スタイルの継承（@extend）

ルールのネスト - Nested Rules

何はともあれコレだけはマスターしておきたい記法です。
基本的な機能の中でもダントツで利用するのがネストで、入れ子でスタイルを書いていく事が可能です。

いつものCSS

#main {
	width: 600px;
}
#main p {
	margin-bottom: 1.5em;
}

いつもはこんな感じですよね？
これを、Sass記法のネストを使うと、、、

Sass

#main {
	width: 600px;
	p {
		margin-bottom: 1.5em;
	}
}

と、書くことが可能です。
上記は一番シンプルな例ですが、多少入れ子が多い例も上げてみます。

いつものCSS

#header {
	width: 940px;
}
#header h1 {
	float: left;
}
#header ul#nav {
	height: 50px;
}
#header ul#nav li {
	float: left;
}
#header ul#nav li a {
	float: left;
	width: 80px;
}

ヘッダーっぽい部分を例にしてみました。
これを、Sass記法のネストを使うと、、、

Sass

#header {
	width: 940px;
	h1 {
		float: left;
	}
	ul#nav {
		height: 50px;
		li {
			float: left;
			a {
				float: left;
				width: 80px;
			}
		}
	}
}

こんな風に書くことが出来ます。
これを保存して変換するといつものCSSと同じ感じにしてくれます。

ちなみに、インデントは無くても大丈夫です。この辺りは可読性が良いと思う方法で書いてもらえれば。

これだけでもコピペから解放され、単純に記述量も減っているのが分かると思いますが、このネストのメリットはメンテナンス性の部分でもかなり力を発揮します。

例えば、上記の #header が #globalHeader に変更する必要が出たとします。
この際に、いつものCSSでは #header から始まる全てを変更なり置換なりをしないと行けませんが、ネストを利用して書いている場合、最初の #header を変更するだけでOKです。

これにより、IDやクラス名が違う別の案件へのコピペも楽になり、再利用性が向上しますよね。

ネストには、プロパティやmedia queriesでも使うこと出来たりするんですが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。

2012年1月25日に書きました：: ネストをもうちょい使いこなす

& 親セレクタの参照 - Referencing Parent Selectors

セレクタに「&」を使うことでネストしている際の親セレクタの参照が可能です。

Sass

a {
	font-weight: bold;
	&:hover {
		color: red;
	}
}

& が親セレクタを参照するので、&:hover は a:hover としたのと同じ扱いですね。
これを、変換すると次のようになります。

変換されたCSS

a {
	font-weight: bold;
}
a:hover {
	color: red;
}

変換されたCSSは、実際に変換されたCSSとは違う可能性が有ります（これ以降のも同様に）。

この例だと殆ど利点が分かりませんが、これの最たる例がCSSシグネチャとして利用したい場合かと思います。

例えば、トップページだけ色が変わってる場合なんかに、body要素に指定したclassやIDでスタイルを振り分けることが有ると思います。

いつものCSS

#sub {
	float: right;
	width: 200px;
	background: #ccc;
}
.body-top #sub {
	background: #fff;
}

いつものだと、こんな風にしますよね。
Sassのネストを使って書いていると、部分的にスタイルを振り分けるのにネストされた中だと親は参照できないので、そう言った場合に「&」を利用します。

Sass

#sub {
	float: right;
	width: 200px;
	background: #ccc;
	.body-top & {
		background: #fff;
	}
}

こんな感じで、&を使うことでネストされた状態でも親セレクタを参照できます。
この程度の例なら、ネストしないで外に書けば良いんですが、ネストされた状態が長くなると、記述する位置がだいぶ変わってしまい分かりにくくなるので、そんな場合に使っていけます。

コメント - Comments: /* */ and //

CSSのコメントは /* */ で囲みますが、Sassだと通常のコメントに加え、// による1行コメントが可能です。

Sass

//メインコンテンツ
#main {
	width: 600px;
	// p要素
	p {
		margin-bottom: 1.5em;
	}
	// ul要素
	ul {
		margin: 0 0 1.5em 20px;
		li {
			margin-bottom: 5px;
		}
	}
}

JSとかちょっとでも触れてれば、1行コメントは馴染みが有ると思うので詳しい説明は不要かと思いますが、変換した際に1行コメントに関しては削除され、いつものCSSによるコメントは変換しても基本的に残ります。

変数 - Variables

変数と聞くと、軽くプログラムアレルギーが出る人も居るかも知れませんが、ちょっと使うだけならとても便利な機能なのでこれもぜひ覚えましょう。

変数は、任意の名前を付けて、任意の場所で呼び出したりすることが出来る機能です。

Sass

$yokohaba: 250px;

こんな風に変数を定義しておけば、任意の場所で変数の値を呼び出すことが出来ます。
変数の名前は$から始め、その後は、いつものCSSと似た感じで「:」で区切ってから値を指定します。

Sass

#sub {
	width: $yokohaba;
	ul.bnrList {
		width: $yokohaba;
	}
}

定義した変数を、値の部分に入れることで呼び出されます。
これを変換すると次のようになります。

変換されたCSS

#sub {
	width: 250px;
}
#sub ul.bnrList {
	width: 250px;
}

変数を上手く利用することで、重複したスタイルを何度も書く必要が無く、値とかも間違えたりしなくなります。

ちなみに、変数はファイルの最初の方にまとめておいたり別ファイルに記述しておくと見通しが良くメンテナンス性が向上するかと思います。

他の例として、基本のフォントカラーやリンクカラーを予め指定しておけば良い感じです。また、変数の値にはマルチバイト文字も使えるのでfont-familyの指定とかも可能です。

Sass

// ベースフォント
$base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
 
// ベーステキストカラー
$font_color: #333;
 
// ベースリンクカラー
$link_color: #06f;
$link_color_hover: #00f;
 
 
body {
	color: $font_color;
	font-family: $base_font;
}
#main {
	a:link {
		color: $link_color;
	}
	a:hover {
		color: $link_color_hover;
	}
}

これを、変換すると次のような感じになります。

変換されたCSS

body {
	color: #333333;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
#main a:link {
	color: #0066ff;
}
#main a:hover {
	color: blue;
}

この例だけだと、記述する量が増えてるのでアレですが、#main以外にも#footerで同じ色を使いたいとかそんな時に値を覚えてる必要が無いので、微妙に色を間違えるとかが無くなって統一性が出しやすくなったりします。

この他にも変数には、便利な使い方が多くありますが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。

2012年1月26日に書きました：: 変数と演算で効率的に

演算

Sassでは、足したり引いたりって言う演算が出来ます。
この演算がかなり頭が良いので非常に素晴らしいのですが、複雑なことは抜きにしてココではカンタンで実用性が高そうな例を。

Sass

.item {
	width: 300px - 14px;
	padding: 7px;
}

こんな風に書けます。これを変換すると、、、

変換されたCSS

.item {
	width: 286px;
	padding: 7px;
}

こうなるんです！もう電卓から解放される！！
ボクみたいに暗算が苦手な人からすると、これヤバイ。
box-sizing: border-box; が使えれば、paddingの計算とか不要ですけど、あのブラウザに対応させるには、こんなプロパティは使えないですからね...

ちなみに、単位は省略してもよしなにやってくれるので「14」と書いても同じ結果が返ってきます。
単位の省略に加えこんな風にすることも。

Sass

.item {
	width: 300px - (7 * 2) - 2;
	padding: 7px;
	border: 1px solid #666;
}

お前どんだけ計算したくないんだよ！って感じもしますが、感覚的にはあくまでも横幅は300pxなんだよ！！と思うわけです。ボクは。
これを変換すると期待した通り次のようになります。

変換されたCSS

.item {
	width: 284px;
	padding: 7px;
	border: 1px solid #666;
}

この他にも演算には、変数に対して使うことが出来たり、もっと便利な使い方が多くありますが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。

2012年1月26日に書きました：: 変数と演算で効率的に

ミックスイン - Mixins

ミックスインは、プロパティやセレクタをまとめてワンセットにしておく事が可能で、それらをカンタンにインクルード（読み込む）する事が出来ます。
変数の機能を強化したと言うか便利にしたようなイメージです。

Sass

@mixin inline_block {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

@mixinの後に半角スペース、任意の名前って感じで定義します。

この例では、display: inline-block; を IE でも使う場合に、 *display: inline; と *zoom: 1; を指定する必要があります。
これを毎回書くと面倒なので、ミックスインを使って予め定義しておくことで、次のように1行書くだけでインクルード出来ます。

Sass

.sampleBox {
	@include inline_block;
	background: #eee;
}

@includeの後に半角スペース、ミックスインで定義した名前って感じで記述します。
当然、他の宣言と一緒に書くことが可能です。
これを変換すると、、、

変換されたCSS

.sampleBox {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	background: #eee;
}

無事にインクルードされ、展開されました。
こんな感じで、何度も使うようなスタイルや長めの宣言を予め定義してインクルード出来るので、かなりの工数削減になると思います。
特にCSS3使ってて、ベンダープレフィックスが多い場合とか。

このミックスインもかなり強力な機能なので、がっつりやり出すとかなり覚えたりやることが多いですが、いきなり複雑な事はせずに、この宣言何度も書いてるなーと思ったらミックスインで定義しておく位が最初は良いのかなと。

ちなみに、この inline-block程度ならミックスインではなく次に説明するセレクタを継承出来る @extend を使った方が良いかもです。

この他にもミックスインは、変数と合わせたり初期値を指定したり、とても色んな事が出来ますが、もうちょっと詳しい説明は後のエントリーで書く予定です（ちゃんと書けよ自分）。

セレクタの継承 - Selector Inheritance（@extend）

@extend は、一度使ったセレクタを継承して使うことが出来ます。
ミックスインと似てる部分も多いのですが、似て非なるものって感じで用途がだいぶ変わってきます。
文だと伝わる気がしないので、例を見てください。

Sass

.imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 1.5em;
}

これだけ見ても、いつものCSSと何ら変わりは有りませんが、この一度使ったセレクタを使うことが出来ます。

Sass

.photo {
	@extend .imgR;
}

と書くことで .imgR で指定した宣言が .photo でも継承されます。
これを変換すると、、、

変換されたCSS

.imgR, .photo {
	float: right;
	margin-left: 10px;
	margin-bottom: 1.5em;
}

こんな感じで変換されるので、clearfix等のように一度使ったセレクタを再利用したい場合に便利な機能です。

ちなみに、clearfixを @extend で利用する場合はこんな感じです。

Sass

.clearfix {
	*zoom: 1;
	&:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
}
 
ul.menu {
	@extend .clearfix;
	background: #ccc;
	li {
		float: left;
		width: 100px;
	}
}

変換されたCSS

.clearfix, ul.menu {
	*zoom: 1;
}
.clearfix:after, ul.menu:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
 
ul.menu {
	background: #ccc;
}
ul.menu li {
	float: left;
	width: 100px;
}

clearfixから話を戻して。
また次のように、スタイルを上書きしたい場合も有ると思います。

Sass

.imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 1.5em;
}
.photo {
	@extend .imgR;
	margin-left: 5px;
}

この様な場合は、次のようにちゃんと分けて変換してくれます。

変換されたCSS

.imgR, .photo {
	float: right;
	margin-left: 10px;
	margin-bottom: 1.5em;
}
.photo {
	margin-left: 5px;
}

部分的に、スタイルを上書きしたい場合も問題ないですね。
こんな感じで便利な @extend ですが、現状だと単独のセレクタしか使うことしか出来ません。
よく分からない説明ですが、次の場合はエラーになっちゃいます。

Sass（エラー）

.item .imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 1.5em;
}
.photo {
	@extend .item .imgR;
}

子孫セレクタとかセレクタを組み合わせるとダメって事ですね。
これは、将来的に対応されるのかな。

@extend は使い方に寄ってはミックスインでも何ら問題が無いのですが、大きな違いとして、ミックスインはインクルードする度に展開され、@extend はグループ化されて変換されます。
なので、例えばclearfixをミックスインで定義して、複数ヶ所でインクルードするとその数だけ宣言が増えていきますが、@extend だとグループ化されるのでより合理的なCSSになります。

この他にも@extend は、ややこしいルールがあったりするのですが、そこまでは触れなくて良いかなーと思うので、もうちょっと詳しい説明は他の方のブログ等を参照して下さい！（やった、後で書かない！）

ざっとですがこんな感じです

どうだったでしょうか？
確かに覚えることは有りますが、ちょっと覚えるだけでかなり効率が上がると思いませんか！？

今回紹介したのは一番基本的な部分ですが、基本とは言え、十分覚えることが有ると思うので一つ一つ覚えて身に付けていくと良いかと思います！

これ書くだけでも意外と疲れたけど、後で書く系が結構あるんで追々頑張って書きます！＞＜
でも、次回は黒い画面でSassを使えるようにする方法を書きますー。

【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）

2012-01-06T15:00:00Z

さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。

何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。

まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。
恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。

ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。

Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker

Scoutのインストール方法

んでは最初に、下記のサイトからScoutをダウンロードします。
英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！

Scout - Compass and Sass without all the hassle

左の真ん中辺りに「Download for Windows」って書いて有る緑のボタンが有るので、そこからScoutをダウンロードします。

ダウンロードした「ScoutAppInstaller-0.5.0.exe」を実行すると環境設定やインストール先を指定出来る画面が表示されますが、特に変更する必要は無いのでそのまま「続行」をクリックすればインストールが完了します。

インストールが完了すると、Scoutが起動します。

上記の様な愛想の無い感じの画面が表示されたら、左下の＋をクリックします。

＋をクリックすると、フォルダの参照画面が表示されるので適当なフォルダを指定してOKをクリックします。
この際に指定するフォルダは、何処でも大丈夫ですがココでは「scout_test」と言うフォルダを新規作成したとして進めます。

指定したフォルダ（プロジェクト）名が左に表示され「Configuration」とか書いて有る画面が右に表示されます。
ちなみに、このフォルダ名部分をダブルクリックすると、名前を自由に変更できるみたいです。

この画面では必須項目になっているStylesheet Directories の2つを指定する必要があるので、先ほど作成した「scout_test」フォルダ内に「css」フォルダを作成し、cssフォルダ内に「sass」フォルダを作成します。
（フォルダ名や階層は何処でも大丈夫です）

なお、この際にフォルダ名などに日本語などマルチバイト文字が含まれているとエラーになり、正常に動作しない可能性が有るのでご注意ください。

そしたら、Sassファイルがあるフォルダがinput folderでCSSファイルを出力したい場所がoutput folderになるので、input folder には「sass」フォルダを、output folder には「css」フォルダを指定します。

これで、Scoutの設定はひとまず完了です。

次に、先ほど作成した「sass」フォルダに、新規作成とかから.scssファイルを作成します。適当なcssファイルをコピペして拡張子だけ変えてもOKです。

この際のファイル名は何でもいいですがココでは「style.scss」として進めます。

作成した、style.scss をテキストエディタ等で開いてCSSを書く時と同じようにまずは、いつものを書いて保存しておきましょう。

んで、このままでは何も起こらないので、Scoutで先ほど作成したフォルダ名横にある▲をクリックして起動（scssファイルを監視させる状態）させます。

起動すると、Scoutの画面がLogになりそのまま少し待つと「>>> Compass is polling for changes. Press Ctrl-C to Stop.」ってのが表示されます。

そしたら、style.scss に何か適当にスタイルを書いて保存します。
↓みたいな感じで。

保存して少し経つと、ScoutのLogが以下のような感じになるかと。

この画面が表示されていれば、問題なくScoutが動作しSassが使えているはずです。
output folderに指定した「css」フォルダを見ると、style.css ファイルが作成されているのが確認できると思います。
この、作成されたCSSファイルを開くと、style.scss に記載したスタイルと同じスタイルが確認できます。（改行やインデント等は変わってると思います）

ここまで確認できれば確実に動作してるので、これでめでたくSassライフが満喫出来る状態になりましたヽ(・∀・ )ﾉ

Scoutは、こんな感じで変更した scssファイルを監視して保存された際に自動的にcssファイルに変換して吐き出してくれます。
その為、若干のタイムラグは有りますが、今までとほぼ同じような感覚でCSSを書いて保存し、ブラウザでプレビューと言う流れが可能になります。

Sassの具体的な記述方法なんかは、次のエントリー辺りから説明していく予定です。

Scoutの他の機能に関して

無事にScoutが動作したって事で基本的にOKなんですが、Scoutには他の機能も有るのでちょっとだけ。
起動した状態だと、Log画面のままだと思うので、右上の「Configure」を押してフォルダを指定した画面に戻します。

Other Directories

jsとimgフォルダが指定できるみたいですが、使った事がないので何をしてくれるのかボクは分かってません＞＜

1/7 12:50 追記: Compass関係で使うと思うのですが、ウチではCompassに関しては触れないつもりなので、気になる人は自身で調べてみてください！

Output Modes

CSSファイル等の書き出しの設定が出来るみたいです。
Environment: は開発環境の設定っぽいですが、これもボクはよく分かってません...コメントの吐き出し方が違う？

1/7 0:12 追記: とてもエロい@sou_labさんからEnvironmentは、Scoutが勝手に吐き出すコメントの有無と教えてくれました。
ありがとう、SOUさん！

その下のOutput Style: では、書き出されるCSSのフォーマットを指定することが可能です。
Expandedだと普通のCSSっぽい感じで、Compactだとシングルライン、Compressedだと圧縮されるので容量が軽く解読が困難な感じになります。
Nestedは、ネストされた感じです。

Manage Project

Removeボタンを押すとアラートも特に無く消えますので押す際にはご注意を。

あと、複数のプロジェクトを管理するには、最初と同じように左下の＋を押すことで追加していけるので、あっちの案件をやってこっちの案件を修正して、そっちの案件を新規で作成して～とかって事が可能です。

こんな感じでとても便利なアプリですが、現状では若干レスポンスが悪かったり動作が重いと感じる場合も有るので、がっつり取り組む場合は、黒い画面でやった方がより良いかなーと思います。

黒い画面での環境構築はもう少し後のエントリーで書く予定ですが、次回はSassの基本的な記述方法に関してを予定してます。

【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？

2012-01-05T16:56:00Z

何かタイトルが適当だけど、無事に2回目のエントリーです！
このエントリーは、もうちょっとSassに興味を持ってもらうためのエントリーなので、早く試したい人は次のエントリーに行っちゃって下さい！

Sassがスゴイとは言っても、プログラムが出来ないと効果があんまり出ないんじゃ？とか学習コストが高い気がするとか、黒い画面が怖いとか、面倒な気がするとか、なんか色々有るかと思うので、このエントリーではSassを利用するにあたっての疑問点や不安などを出来るだけ解決出来ればと思ってます。

まず最初に言っておきたいのは、JSやPHPとかプログラムが一切出来なくても、普通に(X)HTML + CSS でのコーディングが出来てる人ならほぼ確実にコーディングスピードが上がるって事です。
ただ、このブログのターゲットからすると、CSS自体がまだまだ勉強中って人も多いかも知れませんが、あまりにもトリッキーなデザインや仕様じゃなければデザインデータからスライスして取り敢えずコーディングが出来るなら、効率は上がるので試してみる価値は有ります。

と言うことで、FAQみたいなノリでなんか色々書いていきます。
他にも自分はこんな事が不安だとか分からないって点を教えてもらえると、ここに追記出来るので嬉しいです。

Sassって何だかよく分からないんだけど

CSSを拡張するメタ言語とかって言われますが、そんな事はどうでも良くて、今よりCSSを効率よく記述するための言語とかそんな感じです。
単純に今のCSSが機能アップした感じなので、プラスアルファとして使っていくことが出来ます。

と言っても、cssファイル自体にそのまま記述することは出来なくて、scssファイルを用意してそこに記述したものを、CSSファイルに変換（コンパイル）する必要があります。
scssファイルってなんぞ？と思われるかも知れませんが、cssとかと同じただのテキストファイルなので、単純にcssファイルの拡張子「.css」を「.scss」にすれば、SCSS 形式のSassになります。
もちろん、適当に新規作成からファイルを作って拡張子を「.scss」にするだけでもOKです。
実際の使い方等は他のエントリーで詳しく書く予定なのでそちらを参照してください！

使用ソフトなどの環境を変えなきゃいけない？

そんな事無いです！
Sassを利用するにあたって、今の環境を変える必要は無いです。
特定のエディタやオーサリングツールに依存しないので、Dreamweaverでもez-HTMLでも秀丸でもvimでも何でも大丈夫です。
ただ、拡張子が変わってしまうため、Dreamweaver等ではCSSファイルとして認識されなくなります。その為、最初に拡張子を追加する等の作業をする必要は有ります。
Dreamweaverの設定に関しては下記のエントリーが参考になります。

参考：SassとDreamweaverのコードヒントでCSSをさらに効率的に｜linker journal｜linker

環境構築が大変なんでしょ？

一番のネックと思われる、環境構築も思っているよりずっとカンタンです！ホントに。
Win/Mac共に問題なく動作するScoutと言うGUIなアプリが有るので、それを使えば構築なんて一瞬で完了します。
アプリなら、黒い画面（コマンドプロンプト）と戦う必要も無いので安心。
ちなみにMac専用ならCodeKitとかってのも有るみたいです。

もちろん、黒い画面を使う場合も、最初にほんのチョットだけ頑張ればその後はカンタンに利用できます。
一度環境を構築したあとは、Dreamweaverのサイト定義より簡単に出来るので面倒って程の事は有りません。
この辺りの詳細は環境構築のエントリーで！

プログラムが出来なくても使える？

使えます！
オススメしてる人の大半がプログラムがバリバリ書けたり、エロい人が多いので、結局そう言う人向けなんだなと思ってしまうかも知れませんが、そんな事は全く無くて現状普通にコーディングが出来てる人なら問題なく使えます。
何よりも、ボク自身が残念ながらプログラムは書けないのでそんな心配は無用です。

実務でも使えるの？

実務で使うとなると色々懸念点が出てくるかと思いますが、Sassはあくまでも既存のCSSに機能がプラスされたものなので、基本的には実務でも使っていけると思います。
ボク自身はフリーランスなんで普段一人での作業になる訳ですが、制作会社など複数人で作業する場合も、多少のルール決めを行えば十分に実務で活かせると思います。
と言っても、少なからず制作の環境が変わるので一概に可能とは言えませんが、社内で検討する価値は十二分に有ると思います。

効率がホントに上がるの？

冒頭でも伝えたように、ほぼ確実に上がります！
最初は確かに覚えることが有るので、その間はどうしても効率が落ちてしまうけど、SassはCSSで面倒だった部分をやってくれたり、効率よく書けるので、基本をちょっと覚えるだけでも効率が上がります。

それは、プログラムが出来る出来ないに関係なく。

プログラムが出来れば、その幅は広がりますが、CSS自体が別に動的にどうこうってのは無いわけで、無理をしなくてもその恩恵は十分に得られます。
慣れてくれば、Zen-Codingの様にコーディングが3倍速くなる！と言っても過言ではない程に効果が出てくると思うので、最初だけほんのちょっと頑張って貰えれば！

この辺りは、機能紹介とかのエントリーで具体的に触れていければと。

【Sassを覚えよう！Vol.1】はじめに

2012-01-05T09:50:00Z

謹賀新年。
更新率が落ちて久しい当ブログですが、細々とまだ書いていければと思っていますので、本年もよろしくお願いします。

さて、Sass とか LESS って聞いたこと有ります？
なんか、CSSをクールに書けるとかすげーって叫んでる人がいる感じのアレです。

ボクも、2010年の終わり頃に@hamashun さんにご協力頂いてRubyのインストールをしたりして、Sassをちょこっと試してました。

なのにその直後くらいにPCがお亡くなりになったりしたのも有り、復旧に必死だったり仕事が忙しくなり（言い訳）そのまま特に音沙汰無く過ごしていたのですが、最近になってやっと覚えてきたので、CSSビギナー向けエントリーみたいなノリでこれから始める人向けに書ければと思ってます。

Sassに関しては日本初の Sass エヴァンジェリストである @kotarok さんが随分前からオススメしてたり、最近ではLess & Sass Advent calendar 2011なんてもの有ったりしたので、知ってたり耳にしたことが有る人も多いかと思います。

でも、あれらの記事を読んだり聞いたりしても、Sassってのは何だかすごそうってのは伝わるけど、でもなーって感じがしちゃう人が多いのではないでしょうか。
実際、ボクはそんな感じがしましたし、あれらの記事に書かれている内容の多くが、分かってる人にしか分からない内容が多い感じがして、プログラムが出来ないとあんまり意味が無いのかなぁとか、環境構築も大変そうだし実務じゃ使いにくいかな？とかとか。

他に、CSSは機能が貧弱でだれにでも扱えるカンタンな言語だから～って感じで紹介されたりしてるので、ボク自身もそうですけど、CSSでも苦労して覚えたって人やまだまだCSSへの理解が足りないと思ってる人からすると、より高度で効率的になると聞いても、複雑な印象が付いてしまって、返って敷居が上がってしまう気もしました。

そんな訳で、導入から実際の運営まで全然難しくないよ！って部分を紹介できれば普及に少しは役立てるんでは？と思ったので「WebデザイナーのためのSass入門～魅力的なCSSの記述環境を手軽に作る」って感じなノリで出来る限りカンタンに書いてみようかと思っている次第です。

や、決して「「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog」の書籍名からパクったわけでは！あ、密かに本買いました。

でも、ターゲットはまさに同じで、普段ウェブサイト制作をしているデザイナーさんとかJSが苦手なコーダーさん向けだったり、プログラムアレルギーな感じの人を対象にしています。

ちなみに、ボクはメインマシンがWin7なのでそんな感じの環境の人がより分かりやすいかなーと思います。
あと、ボク自身がSassはお勉強中なので、そもそも高度な事は書けませんし、プログラムとかも分からないので、あくまでも取っ掛かりって感じでお願いします！＞＜

これを読んでもらうことで、「CSS HappyLifeの記事を読んでSassを始めました！」とか、スグにでもSassを実践で使えるレベルにまで持っていきたいなーと言うのがボクの目標です。
その後に、Less & Sass Advent calendar 2011を（改めて）読んでもらう事で、理解も深まりSassライフが一気に楽しくなるかと。

せっかく年も変わったばかりですし、2012年新しいこと覚えましょー！

iPhoneのa要素内にimg要素がある場合のタップハイライトの件

2011-11-24T14:22:00Z

結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！

今回頼んだ名刺の出来がすごく良かった

名刺印刷をどこに頼むかお悩みの方はぜひ！

さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。

その辺りに関してちょこちょこと。

↓実際の画面だとこんな感じです。

で、コレ自体は何の問題も無い訳ですけど、この画像部分をタップするとa要素の範囲じゃなくて、その画像のとこだけハイライトされます。

キャプチャが上手く撮れなかったからキャプチャは有りません＞＜

ハイライトされるだけで別に問題は無いんですけど、デザインに寄っては、もしかしたらユーザーは別のページにリンクしているのでは？と思ってしまうかも知れない。
もしかしたら、画像が拡大すると思うかも知れない。

そんな可能性も有るわけです。
どーでも良いってば良いけど、気になりだすと確かに気になるこの問題。

お客さんから突っ込まれても「仕様です！」と言い切っても良いかも知れませんが、対応できるかなーと思って適当にやったら出来たので、ご紹介です。

1. img要素をやめる

これが手っ取り早いかも知れませんが、背景にすれば問題無いので、特にimg要素として配置する意味が無いなら一番良いかと思います。

2. CSSで頑張る

で、ここからが本題です。
最初に:after疑似要素で取り敢えず解決しました的な内容を書いてたんですけど、他の方法をご存じの方教えて下さい的な事を書いたら、Twitterにて@GeckoTangさんに、早々に教えてもらいました。

方法は、pointer-eventsプロパティで簡単に出来ます。
img要素に pointer-events: none; と指定すればOK。

ul.sampleList li a img {
  pointer-events: none;
}

プレフィックス無しでもiOS5は大丈夫だったけど、古いとダメかも？
pointer-eventsはリンクを切るのに使えるなー程度の認識だったから、img要素に指定して切るって感覚が無かった...
あと、JSのイベントも発生しなくなるみたいなんで、その辺りはご留意下さい。

教えてくれたイケメンツイートはこちら。

にしても、こんなどこに需要が有るかも分からないニッチな感じのネタしか書いてないなんて、、、
最近ちょっと話題になってた、フリーランスネタでも書けば良いかな！
ボクは、仕事の大半が「コーディングのみ」なので、他のフリーランスとはちょっと違うかもって辺りとか。
人に寄ってはコーディングだけで生きていけるとか信じられないみたいな話も聞くのでネタには良いのかなーとか思いつつ、それこそニッチで需要がない（気がする）し、そもそもあまり面白い内容が無かった＞＜