Compassでスプライト画像の幅と高さを取得する方法

 Compassでスプライト画像の幅と高さを取得する方法

こんにちは、@cappeeです。

今回はSass(SCSS)+Compassを使ったスプライト画像についてです。

スプライト画像全体の幅(width)、高さ(height)を取得する方法についてピンポイントでご紹介したいと思います。

なぜピンポイントかと言いますと、私がRetina対応のmixinを作成している時、これを探すのにちょいと苦労したからですね。

background-size を指定する時にスプライト画像全体のサイズを取得する必要がありました。

コピペで使える系の記事を参考に見てみても、background-sizeの幅の指定だけは手動で入力するmixinがほとんどだったんですね。

こんな感じで。

@include background-size(500px auto);

スプライト画像はCompassさんが自動でつくってくれるのだから個別の画像が増えればスプライト画像のサイズだって都度変わるのに、毎回変更しないといけないの…(゚д゚)!?

いいえ、そんなことありません!!

こんなに便利なCompassだからスプライト画像のサイズを自動で取得できるはず!と思っていろいろと入らべてみたら辿り着きました( ;∀;)

これでRetina対応が楽になりますね。

スプライト画像全体の幅と高さを取得する

sprite-path()関数でスプライト画像全体の幅と高さを取得することができます。

幅(width)

image-width(sprite-path($replace))

高さ(height)

image-height(sprite-path($replace))

このsprite-path()関数ですが、Compass公式サイトのCSS Sprite Helpersを見ても掲載されてないんですよね。なぜー。

Retina対応したスプライト画像のmixin

background-sizeには上記のsprite-path()関数を使います。
Retina対応したスプライト画像のmixinはこれを応用して下記のようになります。

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

Retina対応したスマートフォンサイト用mixinはこちらで詳しく説明していますのでぜひ参考にしてみてください。
Retina対応したスプライト画像のmixin

いかがでしたでしたか?
mixinを使えばコーディングがスピードアップ!

間違いやもっと良い方法があるという方はお気軽にコメントください。

Sassの教科書も必読ですよ。

Pocket
article clipper Compassでスプライト画像の幅と高さを取得する方法

[決定版]Retina対応したスプライト画像のmixin

 [決定版]Retina対応したスプライト画像のmixin

こんにちは、@cappeeです。関東も大雪でしたね(・∀・)

現在がりがりっとスマートフォンサイトのコーディングに勤しんでいます。

以前Sass+Compassを使った泣くほど早いmixin集を公開しましたが、スマホだとRetina対応があるためSprite画像を使ったmixinは変更する必要があります。

色々とRetina対応したmixinの記事を拝見させていただきましたが、background-sizeを毎回手動で入力する必要があったりと以外と「これだっ!」と思うmixinがなく。。

Compassの公式サイトや色んな角度から検索して参考にした結果、個人的には「これが決定版だ!」と思えるmixinができました!!!

CSS Spriteの設定

※こちらはCompassのスプライト初心者向けですのでわかる方はスルーしてください!

スプライト画像を使ったCSSの指定には主に以下の3つがあると思います。

  1. 文字の背景で表示する画像
  2. 文字を置換する画像
  3. アイコンの画像(文字の左側に配置)

私は(1)文字の背景で表示する画像と(2)文字を置換する画像を「replace」フォルダに書き出し、(3)アイコンの画像を「icon」フォルダに書き出しています。フォルダ名は任意です!

何はともあれCSS Spriteにしたい画像をそれぞれ書き出します。

書き出したらSass(SCSS)ファイルにスプライト画像を生成してくれる魔法の言葉を書き出します。

(1)(2)はスプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。
3メガピクセル以上の画像は縮小されて表示されるので気をつけましょう。
ただし、「$layout: smart」にするとブラウザでサイトを縮小して見た場合に隣の画像が1px見えてしまうこともあります。
画像サイズの制限に気をつけつつ、デフォルトの縦方向に並べる「vertical」で「$spacing:10px」と指定する方が無難かも?

$replace: sprite-map("sp/replace/*.png", $layout: smart);
$replace-img: sprite-url($replace);

(3)アイコンの画像は上下にある程度の余白が必要なため、「$spacing:100px」などある程度のスペースを指定しておきます。

$icon: sprite-map("sp/icon/*.png", $spacing:100px);
$icon-img: sprite-url($icon);

マジックインポートというCSSスプライト用の画像だけでなくbackground,background-positionを自動で出力してくれる機能もあります。実際はbackground-position,width,heightなど変更したい場合が多いので sprite-map を使ってセレクタごとに指定します。

Retina対応mixin

(1)文字の背景で表示するスプライト画像

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

width: image-width(sprite-file($replace, $name)) / 2;
Retina用に書きだした画像の横幅を取得して半分のサイズを出力します。heightも同じくです。

$xpos: round(nth(sprite-position($replace, $name), 1) / 2);
スプライト画像のポジションを取得して変数にいれます。
nthでポジションの何番目を取得するかを指定します。1はX軸、2はY軸です。
round関数を指定しておくと割算ででた小数点以下を四捨五入してくれます。

$wbgz: image-width(sprite-path($replace)) / 2;
background-size用にスプライト画像全体の横幅を取得し、半分のサイズを変数にいれます。

以下のように任意のセレクタでincludeして使ってください。

.selector {
  @include sprite-background(filename);
}

(2)文字を置換する画像

@mixin sprite-replace($name) {
  @include sprite-background($name);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

上の(1)をまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

(3)アイコンの画像

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  $xpos: round(nth(sprite-position($icon, $name), 1) / 2);
  $ypos: round(nth(sprite-position($icon, $name), 2) / 2);
  background-position: ($xpos + $x) ($ypos + $y);
  $wbgz: image-width(sprite-path($icon)) / 2;
  @include background-size($wbgz auto);
  padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
}

background-position: ($xpos + $x) ($ypos + $y);
上と同じく画像のポジションを取得して変数にいれた後、位置を微調整できるようにしておきます。
アイコン画像は特にY軸を調整したい時が多いのでこの指定は必須ですね。

padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
アイコン左側のpadding-leftも自動で計算します。
デフォルトはアイコン画像の幅の半分に、4px分プラスして出力されます。
ただデザインによっては調整したい場合もあるので手動でもpadding-leftを指定できるようにしています。includeした際に$plが指定されていれば、指定されたpxが出力します。
[追記]px数もアイコンごとに調整できるように変更しました!

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、下記で記述したようにextend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 6);
}

extend

(1)(2)で指定した以下の共通プロパティはextend化して、複数のセレクタでプロパティをまとめて指定することもできます。

extend

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

(1)文字の背景で表示するスプライト画像のmixin

@mixin sprite-background($name) {
  @extend %sprite-background;
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-position: $xpos $ypos;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

(2)文字を置換する画像のmixin

@mixin sprite-replace($name) {
  @include sprite-background($name);
  @extend %sprite-replace;
}

extendを使うとどうしてもセレクタの数が増えてしまいます。IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

いかがでしたでしょうか?
このmixinでスマホサイトのコーディングが少しでも早くなれば嬉しいです!

間違いやもっと良い方法があるという方はお気軽にコメントください。

上記以外のmixinはこちらにもまとまってます(*´ω`*)
Sass+Compassを使った泣くほど早いmixin集

Sassの教科書も必読ですよ。

Pocket
article clipper [決定版]Retina対応したスプライト画像のmixin

[CSS]noneの読み方は「ノン」じゃないよ!

最近勉強会に行きまくっている@cappeeです。

CSSで「なし」という指定をする時に使う”none”ですが、読み方は「ノン」じゃないです。

声を大にして言いたい。

ナン」です!!!

カレーによく合うやつって覚えれば早いです。

ちなみに”Dreamweaver”は「ドリームウィーバー」です。

それだけです。

Pocket
article clipper [CSS]noneの読み方は「ノン」じゃないよ!

[Sass]泣くほど早い…今すぐ使える便利なmixin集

 [Sass]泣くほど早い…今すぐ使える便利なmixin集

こんにちは、@cappeeです。

本格的にSass(SCSS)を仕事で使うようになってから早半年。

色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。

これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。

泣くほどコーディングが早くなりますよ。

※Sass+Compassのインストールがまだの方はこちらをご覧ください!
Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

フォントサイズ

CSS3の新しい単位 rem でフォントサイズを指定するmixinです。(IE9以降対応)
相対指定の em や % 、絶対指定の px が一般的だと思いますが、
rem は親の影響を受けずにフォントサイズを指定することができます。
[参考]フォントサイズの指定はCSS3の「rem」が便利そう

@mixin font-size($size, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) + rem;
}

テキストシャドウ

文字に1pxの黒いシャドウ

文字に簡単にシャドウをかけることができます。
シャドウの距離やぼかしはサイトのデザインに合わせて変更します。
色の指定を透過で調整することで濃度を簡単に調整できるので便利です。

@mixin text-shadow-black($opacity: .4){
  text-shadow: 0 1px 0 rgba(#000, $opacity);
}

文字に1pxの白いシャドウ

最近よく見る文字に立体感のでるズルいアレです。

@mixin text-shadow-white($opacity: 1){
  text-shadow: 0 1px 0 rgba(#FFF, $opacity);
}

ポジション

ポジションは結構多様するので下の4つをmixinにしました。
pxも一緒に書いてますが縦中央にする際パーセント指定(50%)をする場合もあるのでmixinに入れなくてもOKです。

@mixin absolute-top-left($top: 0, $left: 0) {
  position: absolute;
  top: $top + px;
  left: $left + px;
}
@mixin absolute-top-right($top: 0, $right: 0) {
  position: absolute;
  top: $top + px;
  right: $right + px;
}
@mixin absolute-bottom-left($bottom: 0, $left: 0) {
  position: absolute;
  bottom: $bottom + px;
  left: $left + px;
}
@mixin absolute-bottom-right($bottom: 0, $right: 0) {
  position: absolute;
  bottom: $bottom + px;
  right: $right + px;
}

グラデーション

上下に明→暗

lighten を使うことでメインのカラーを指定すれば簡単にグラデーションがつくれます。
$hogeにはデフォルトのカラーを指定することも可能です。変数でも16進数でも大丈夫です。
デフォルトのカラーを指定しない場合は「:$hoge」の部分を削除してください。

@mixin gradient-top-lighten($color:$hoge, $lighten:10){
  background-color: $color;
  @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

上下に暗→明

darken を使うことで上とは逆の暗→明のグラデーションがつくれます。

@mixin gradient-top-darken($color:$hoge, $darken:10){
  background-color: $color;
  @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%));
}

IE8~9に対応する

上記のmixinだとグラデーション非対応のIE8~9では適用されません。
受託の場合は対応ブラウザによって適用したいケースもあるかと思うので、下を上記mixinに追加すればIE8~9にもグラデーションが表示されます。
ただし、その分重くなるので個人的にはプログレッシブ・エンハンスメントを推奨します。
(古いブラウザでデザインが適用されなくてもコンテンツが問題なく見えていれば問題なしという考え)

@include filter-gradient(lighten($color, $lighten), $color, vertical);

IE9に対応する

IE9だけに対応すればOKという場合はmixinではなく、Compassにあるブラウザーサポートの変数で設定します。
どこでもいいですが、設定用のscssファイルがある場合はそこに下記の一行を追加すれば大丈夫です。
[参考]Compassでベンダープレフィックスなどのブラウザーサポートを制御する

$experimental-support-for-svg: true;

背景画像

CSS Spriteの設定

mixinの前にCSS Spriteを出力する設定をします。
私はSprite画像を主に以下の2つに分けて書き出しています。

  1. 文字を置換する画像文字の背景に入れる画像
  2. アイコン画像(文字の左側に配置)

マジックインポートというCSS Spriteのcssをすべて自動で書き出してくれるとても便利な機能もありますが、実際はbackground-position,width,heightなど変更したい場合が多いので今回は sprite-map で指定します。

1)文字の背景に入れる画像と文字を置換する画像

sprite-mapを指定します。
文字の背景に入れる画像と文字を置換する画像の場合は、スプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。

$replace: sprite-map("replace/*.png", $layout:smart);
$replace-img: sprite-url($replace);

※iOS(iPhone,iPad)での注意
Spriteなどの画像が大きくなりすぎるとiOSで表示の制限がかかるので気をつけましょう。
3メガピクセル以上の画像は縮小されて表示されるので、その場合は各画像を敷き詰めてレイアウトする($layout:smart)か、小分けにSprite画像を書き出すなどの対処が必要です。

2)アイコンなど文字の左側に配置する画像

アイコンのレイアウトは何も指定しなければ縦一列に並びます。
アイコンの場合は余白がほしいので「$spacing」に余白分のpxを指定します。

$icon: sprite-map("icon/*.png", $spacing:50px);
$icon-img: sprite-url($icon);

プレースホルダーセレクタの指定

さらにmixinで使うextend専用のプレースホルダーセレクタの記述(%セレクタの部分)をしておきます。
extendを使わないとmixinを使ったすべてのセレクタで同じbackground-imageの指定がされてしまうので、記述が同じ部分はextendを使って簡潔にします。

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

※extend多用の注意
extendを使うとどうしてもセレクタの数が増えてしまいます。
IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

文字の背景に画像を入れる

文字の後ろに背景画像を表示するmixinです。
background-position,width,heightが自動で出力されるためこのmixinを使うと画像の位置やサイズが簡単に指定できます。

@mixin sprite-bg-dimensions($name) {
  @extend %sprite-background;
  @include sprite($replace, $name, true);
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-bg-dimensions(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;

画像位置を手動で指定したい場合

デザインによってはwidth,heightを指定せず、画像位置も手動で調整したい場合があります。
下のような柔軟なmixinも用意しておくと便利です。使用頻度は少ないかな。
background-position はデフォルトでSpriteのXとYが入るので、そこを基準に●px移動したいなど微調整をすることができます。

@mixin sprite-bg-position($name, $x: 0, $y: 0) {
  @extend %sprite-background;
  @include sprite-background-position($replace, $name, $x, $y);
  background-repeat: no-repeat;
}

文字を画像で置換する

ナビゲーションや見出しなど文字を画像で置換するためのmixinです。
上の「sprite-bg-dimensions」mixinをまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

@mixin sprite-replace($name) {
  @include sprite-bg-dimensions($name);
  @extend %sprite-replace;
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-replace(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

上記のようなmixinをつくらずにCompassのmixinで画像置換を指定することも可能です。
個人的にはtext-indentをネガティブ(マイナス)で指定しなくないので自分でmixinをつくっています。
(SEO的にGoogleからスパムとされる可能性があるという噂もあったので一応。。経験上から言ってもマイナスでも問題ないとは思います!)

SCSS

@include sprite-replace-text($replace, name, true);

※true/falseは画像サイズの出力を指定できます。

CSS

text-indent: -119988px;
overflow: hidden;
text-align: left;
background-position: -60px 0;
height: 96px;
width: 96px;
background-image: url(/assets/sp/replace-sf0d9e3bfd2.png);
background-repeat: no-repeat;

アイコン画像(左側)

文字の左側にアイコン画像を表示するためのmixinです。
background-positionはアイコンのサイズによって変更したいので、上記と同じくデフォルトの位置を基準に微調整できるようにしてます。
また、私はpadding-leftも自動的に出力するようにしています。これでかなり楽できますよ。
デフォルトは「画像の横幅+4px」分が出力されるようにしていますが、デザインによっては調整したい場合もあるので手動でもpadding-leftを指定することが可能です。

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  @include sprite-background-position($icons, $name, $x, $y);
  padding-left: image-width(sprite-file($icons, $name)) + $pl;
}

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、extend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 12);
}

CSSの出力結果です。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  background-position: 0 0;
  padding-left: 21px;
}
.icon-li {
  background-position: 0 -66px;
  padding-left: 12px;
}

アイコン画像(右側)

まれにハテナマークなど文字の右側に画像を表示したいケースもあります。
下記のように画像の位置を右基準でCSS Spriteを指定してもいいのですが
IE9+なのとどっちにしてもSprite画像では位置調整に無理がでてきてしまいます。

background-position: bottom 10px right 10px;

なので、右側に表示したいアイコンに関してはSprite画像を使用せずに個別に指定するようにしています。
さらに inline-image にすることで dataURI で出力されるためこれならリクエスト数も減らせます。
(使いすぎると逆に表示が重くなる場合もあるので注意です)

@mixin icon-right($name, $pl: null) {
  background: inline-image("icons/#{$name}.png") no-repeat 100% 50%;
  @if $pl {
    padding-right: $pl + px;
  } @else {
    padding-right: image-width("icons/#{$name}.png") + 4;
  }
}

アニメーション

animationプロパティを使用する場合に便利なmixinです。
ペンダープレフィックスをmixinの方で指定するので、includeがとても簡潔になります。

$prefixes: ("-webkit-", "-moz-", null);
@mixin keyframes($name){
  @-webkit-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}
@mixin animation($name, $duration, $timing, $delay, $count, $direction: null) {
  @each $prefix in $prefixes {
      #{$prefix}#{animation}: $name $duration $timing $delay $count $direction;
  }
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include animation(opacity, 3s, ease, 0s, 1);
}
@include keyframes(opacity) {
  0% {
    @include opacity(0);
  }
  100% {
    @include opacity(1);
  }
}

CSSの出力結果です。

.selecter {
  -webkit-animation: opacity 3s ease 0s 1;
  animation: opacity 3s ease 0s 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

長々と見ていただいてありがとうございます!
使えそうなmixinはありましたか?

スマホサイト制作で使えるRetina対応のmixinはこちらをご覧ください!
[決定版]Retina対応したスプライト画像のmixin

サイト毎に調整してうまくmixinを活用してくださいね。
泣いちゃうくらいコーディングが倍速になります。

もっといいmixinがあるよ!って方はお気軽にコメントください!
まだまだ改良もできる気がするので都度更新していきたいと思いますー。

[14.01.09]「文字を画像で置換する」に追記しました。
[14.01.23]「グラデーション」に補足を追記しました。
[14.02.27]「アイコン画像」のpaddingもinclude時に調整できるように変更し、全体的にcssの出力結果などを追加しました。
[14.03.04]「アイコン画像」のpaddingの指定方法を変更しました。

Pocket
article clipper [Sass]泣くほど早い…今すぐ使える便利なmixin集

[Sass]親セレクタの参照ができる&(アンパサンド)の使い方

わんこそば、@cappeeです。ついにSassの本ができましたね。

Web制作者のためのSassの教科書」かなり参考になりました。

ちゃんと基本から勉強しないとダメですね(>_<)

今日は以外と使いこなせていなかった&(アンパサンド)についてです。

&(アンパサンド)とは

親セレクタの参照ができます。

擬似セレクタやセレクタの前に記述する

これは私もよく使っていてコードの階層がとてもわかりやすくなるので便利ですよね。

Sass(SCSS)

.link{
  text-decoration:none;
  &:hover{
    text-decoration:underline;
  }
  &.off{
    color:gray;
  }
}

コンパイル後のCSS

.link{text-decoration:none;}
.link:hover{text-decoration:underline;}
.link.off{color:gray;}

セレクタの後に記述する

セレクタの後に記述するとルールセット内の親要素をすべて参照するので、ページ単位でデザインやレイアウトを変えたい場合に便利です。
私はこれを使っていなくてもっと早く基本から勉強していればよかった。。

下記はお問い合わせなどのフォーム系ページだけサイドバーがなかった場合に、メインコンテンツ部分の横幅を広げたい時の例です。

Sass(SCSS)

#main{
  width:640px;
  #form-page &{
    width:100%;
  }
}

コンパイル後のCSS

#main{width:640px;}
#form-page #main{width:100%;}

ひとつ注意していただきたいのは、3階層以上になった場合、&を使うと上の階層で指定した親要素すべてを参照するということです。
下記のように3階層目で.section &と記述した場合「#main .section .box」とはならず、「.section #main .box」と出力されます。

Sass(SCSS)

#main{
  width:640px;
  .box{
    margin:10px;
    .section &{
    margin:0;
    }
  }
}

コンパイル後のCSS

#main{width:640px;}
.box{margin:10px;}
.section #main .box{margin:0;}

期待した通りの結果にするには、当たり前ではありますが下記のように普通に記述していれば特に問題ありませんね。

Sass(SCSS)

#main{
  width:640px;
  .section{
    margin:0;
    .box{
    margin:10px;
    }
  }
}

以上、&(アンパサンド)の基本の使い方でした!

私のように知らなかった方はSassの基礎をきっちり身につけてはいかがでしょう?

泣くほど早い…今すぐ使える便利なmixin集も公開していますのでぜひご覧ください!

Pocket
article clipper [Sass]親セレクタの参照ができる&(アンパサンド)の使い方

[Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

残暑お見舞い申し上げます、@cappeeです。

おひさしブリーフ。

さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。

実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。

そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。(大げさ)

[最新版]mixin集の最新版を公開しているのでこちらもご覧ください!
[Sass]泣くほど早い…今すぐ使える便利なmixin集

記述はSCSSです。

サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。

Compass Home Compass Documentation 300x241 [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

最初の記述

文字コード

まずはSass(SCSS)ファイルの最初に文字コードを指定します。

@charset "utf-8";

Compass

Compassを使う場合は下記の記述で呼び出します。Compassを使うには別途インストールが必要になりますので詳しくは「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」をご覧ください。

@import "compass";

IE9でのグラデーション表示

IE9でグラデーションを表示させるためにSVGを利用します。IE9はSVGの表示には対応しているので、background-imageをincludeした時に、自動的にSVGを出力してくれる下記の記述をしておくととても便利です。
こちらの記事で詳しく書かれています。「IE9でも複雑なグラデーションを利用する
ただ、IE9での見た目より読み込みスピード重視だという場合は、指定しない方がいいかと思います。

$experimental-support-for-svg: true;

mixin

グラデーション

フラットデザインが話題ではありますが、実際にはグラデーションもよく使用しますので、その記述を簡単にするmixinです。
明るい色から暗い色へ上下に変化するグラデはよく使うと思います。
その際グラデの明るい色と暗い色の2つを指定するのは面倒なので、暗い色の1色だけを()内で指定して、明るい色はlightenで指定します。
指定した色をどのくらい明るくするか、パーセントで記述すれば1色だけの指定で済むのでとても便利です。
逆にdarkenを使用して明るい色をどのくらい暗くするかを指定するのでもOKです。
一番最初にbackground-colorを指定しているのはグラデが使えないIE用の指定になります。

@mixin gradient-top-lighten($color:#E8E8E8, $lighten:7%){
background-color: $color;
@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

.selecta {
@include gradient-top-lighten(#EEE, 3%);
}

テキストシャドウ

ボタンなど白文字には黒を透過したシャドウをかけていたので、デフォルトの指定をこのmixinに変更しました。
黒文字に白のシャドウを入れる場合は、includeで@include text-shadow($white, 1);を指定すればOKです。

@mixin text-shadow($color:#000, $op:.4){
text-shadow: 0 1px 0 rgba($color, $op);
}

.selecta {
@include text-shadow;
}

ボタンの基本デザイン

ボタンはページやコンテンツによって色やサイズは変更すると思いますが、基本のデザインは一緒なので、一緒の部分はmixinで指定すると便利です。
下記は一例なのでサイトのデザインに合わせて変更してください。

@mixin btn-base{
@include border-radius(3);
@include box-sizing(border-box);
font-weight: bold;
text-decoration: none;
text-align: center;
width: 126px;
line-height: 25px;
}

.selecta {
@include btn-base;
}

フォントサイズ

今まで相対指定の%やemを使用していましたが、親要素を継承しないCSS3のrem指定の方が便利なのでremを使ったフォントサイズを指定するためのmixinです。
こちらの記事に詳しく書かれています。「CSS3の新単位remで、文字サイズの指定を分かりやすく
ただ、IE8以下では使用できないので対応ブラウザ次第ではpx指定も記述する必要があります。

@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}

.selecta {
@include font-size(14);
}

ポジション

結構positionを使うのでmixinを用意してみました。そこそこ便利だと思います。

@mixin abs-top-left ($top: 0, $left: 0) {
position: absolute;
top: $top + px;
left: $left + px;
}
@mixin abs-top-right ($top: 0, $right: 0) {
position: absolute;
top: $top + px;
right: $right + px;
}

.selecta {
@include abs-top-right(4, 10);
}

画像置換

私はLIR(Leahy/Langridge Image Replacement[リーフィー/ラングリッジ式画像置換])という画像置換の方法を採用しているので、CompassのCSSスプライトでbackgroundは自動で読み込めますが、それ以外のプロパティの指定が面倒だったのでこのmixinを作りました。
CompassのCSSスプライトの指定に関しては下で説明していますが、それが記述されている前提のmixinになりますのでご注意ください。

また、下記はLIRになりますので、それぞれが採用している画像置換の方法に変更して使用してみてください。
こちらで紹介されているtext-indent: 100%;を使う方法もオススメです。「画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

@mixin bg-lir($name) {
width: image-width(sprite-file($icons, $name));
padding-top: image-height(sprite-file($icons, $name));
line-height: image-height(sprite-file($icons, $name));
height: 0;
overflow: hidden;
}

.selecta {
@include bg-lir(file-name);
}

角丸

かなり几帳面な人向けのmixinになります。。
border-radiusはmixinで指定しなくてもincludeできるのですが、数字を指定する時に(3px)などとpxを指定する必要があったので()内でpxを省いて数字だけ入力できるようなmixinもあるとちょっとだけ効率的になるかな?
※50%というようなパーセント指定をしたい場合はこのmixinを使わないでください!

@mixin border-radius($radius) {
-moz-border-radius: $radius + px;
-webkit-border-radius: $radius + px;
-o-border-radius: $radius + px;
-ms-border-radius: $radius + px;
border-radius: $radius + px;
}

.selecta {
@include border-radius(3);
}

変数

主要な色

変数には主にカラーなどを指定すると便利です。

$black:#333;
$white:#FFF;
$gray:#666;
$green:#4C9020;
$blue:#0467AF;
$pink:#DF5291;
$yellow:#E1930F;
$orange:#D5530A;

.selecta {
color: $gray;
}

明度の指定

明度の異なるカラーを使う場合も多いので、lightendarkenを利用するのが便利です。

$green-dark:darken(#4C9020, 6%);
$blue-dark:darken(#0467AF, 6%);
$pink-dark:darken(#DF5291, 6%);
$yellow-dark:darken(#E47301, 6%);
$orange-dark:darken(#D5530A, 6%);

CSSスプライト

自動インポート

CSSスプライトにしたい複数の画像を特定のフォルダに書き出し、下記のように記述すればCSSスプライト用の画像やbackground,background-positionを自動で出力してくれるのでとてつもなく便利です。
記述方法などはこちらに詳しく書かれています。必読です。「CSSの常識が変わる!「Compass」、基礎から応用まで!

$icons-spacing: 50px;
@import "icons/*.png";
@include all-icons-sprites;

手動で指定

上記の自動インポートは非常に便利ですが、アイコンなどの場合background-positionを微調整したりpaddingをプラスで指定したいケースが実際はほとんどです。
下記のsprite-mapはbackgroundのみ出力してくれて、background-positionなどそれ以外のプロパティは手動で指定するという指定です。
このへんが歯がゆいですよね。便利すぎるゆえにCompassへの要求は増えワガママになっている自分…

$icons: sprite-map("icons/*.png", $spacing:50px);

手動での指定ですが、paddingは属性セレクタで指定すると便利です。(IE7以上)
background-positionですが、テキストのフォントサイズによってアイコンの縦位置を微調整したい時など、デフォルトの指定からどのくらいpxを移動したいかを演算で調整できるので便利です。
スプライト画像が変更したとしてもこれで無問題!

[class^="icons"]{
padding-left:15px;
}
.icons-arrow {
background-position: 0 nth(sprite-position($icons, arrow), 2) + 3;
}

私は今回のサイト制作で大蛇区をして自動インポートと手動の両方を指定しました。
余計なコードは増えますが作業効率は多少上がるのでどっちをとるかですね。

また、今回ご紹介したmixin、変数などの指定は上の方に記述しないと適用されないのでご注意ください。

いかがでしたか?

コーディングはできる限り効率化して勉強の時間を増やしたいものです!

こちらの記事も参考にさせていただきましたのでご紹介します。
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

Sassの本がついにでました!かなりオススメです。

Pocket
article clipper [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

[バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

梅雨入りしたのに快晴が続いてますね、@cappeeです。

コーディング中にちょっとしたミスをしてしまったり、クライアントさんにやっぱり元に戻してと言われたり、「ソースコードを前の状態に戻したい…」ってことはWebデザイナーでも少なくないと思います。

バージョン管理はエンジニアさんのためだけではありません:)

バージョン管理導入したいけど、Gitとか難しそうだし」というWebデザイナー(非エンジニア)でも簡単に導入できるツールがあるので、設定方法などをご紹介したいと思います。

バージョン管理とは

ソースコードの差分などファイルの更新履歴を管理してくれるシステムです。

プロジェクト内のファイルをバージョン管理することで、編集日や編集箇所などを記録しておくことができるので、過去のソースコードを容易に探すことができます。

複数人でひとつのプロジェクトに参加している場合は、同じソースコードを複数で編集した場合に変更内容を知らせてくれるなど、重複や巻き戻り防止にもなります。

私は一人の場合でも、バックアップとして活用しています。もう大量のファイルをローカルに保存しておかなくても大丈夫です。

Gitとは

分散型の高機能なバージョン管理システムです。

Gitはオープンソースですので誰でも使用できる手軽さからとても人気があります。

イラスト付きですごーく詳しく説明してくれている記事があるのでこちらをご覧ください!
イラストでわかる!git入門の入門

バージョン管理を導入するのは手間のかかる作業ですが、「Bitbucket」と「SourceTree」を使うことで、ぐっと導入が簡単になります。(私でもできました。)

SourceTree」は、ローカルからリポジトリにPushやコミットをするソフトです。先日「SourceTree」のWindows版がリリースされました。

Bitbucket」は、コミットされたファイルの履歴などを閲覧することができるウェブサービスです。

今回はこの2つを使ってバージョン管理を導入してみたいと思います。

とりあえず何ができるの?

更新したファイルを「SourceTree」でリポジトリにコミットすると、「Bitbucket」でウェブから下記のような更新履歴を見ることができます。

赤枠のように何の修正をしたかなどコメントを残すことができるので、後から探しやすいです。(下記はコメント適当ですがもっと具体的に書いたほうがいいです。)

Bitbucket [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

コメントのところにあるリンクをクリックすると、前回との差分を見ることができるので、ソースコードを元に戻したい場合などにとても便利です。

Bitbucket1 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

画像なんかも前後で比較してくれるので便利!

Bitbucket2 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

気になった方は、下記を参考に便利なバージョン管理Lifeをお楽しみください。

SourceTree をインストール

まずは「SourceTree」をインストールしてください。

インストールを進めるとGitがまだPCにない場合は「Gitないけど入れますか?」と聞かれるので、とりあえず一番上を選択してください。

sourceTree1 300x269 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

さらに進むとアカウント登録画面が表示されるので名前とメルアドを入力し、最後の規約同意をチェックして次へ。

sourceTree2 282x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「global ignore file をインストールする?」と聞かれるのですが、これは管理しないファイルリストのことです。
「.exe」や「.dll」など通常コミットしないであろうファイルが書かれてあるデフォルト設定のファイルリストを使う場合は「Yes」を押します。
無視リストに関してはこちらに詳しく注意点など書かれてますのでご覧ください。
SourceTree が Git のグローバルな無視リストを書き換えて困った話

sourceTree3 300x166 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次にリポジトリを管理するツールについて聞かれるので、「Bitbucket」を開いてサインアップしてください。

sourceTree4 283x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

できたら「Finish」でインストールは完了です。

鍵をつくる

」は、Gitとサーバが通信を行う認証情報として必要なファイルで、安全に通信することができます。重要な情報を含んでますのできっちり管理しましょう。

「SourceTree」上部にあるメニューから、「Tools」→「Create or Import SSH Keys」を選択して、PuTTY Key Generator を起動してください。

sourceTree5 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Generate」をクリックし、「Key」と書かれた枠内でマウスを動かすと鍵が生成されます。

sourceTree6 300x255 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記のように表示されたら、「Key Comment」に自分の名前などわかりやすいもの、「Key passphrase」と「Confirm passphrase」には設定したいパスワードを入力します。

sourceTree7 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Save private key」をクリックして「秘密鍵」(.ppkファイル)を保存します。

それとは別に「公開鍵」というものも保存しておきます。「Public key for pasting into OpenSSH authorized_keys file:」のところに書かれてある文字列をコピーしてエディタなどに貼り付けます。「名前.pub」の形式で保存してください。

次に「秘密鍵」を登録します。
Generatorを閉じて、SourceTreeの「Tools」→「Launch SSH Agent(pageant)」を選択。
先ほど保存した.ppkファイルを選び、パスワード(passphrase)を入力して登録完了です!ふぅ

大事だからもう一度言います。秘密鍵と公開鍵はなくさないでくださいね。

Bitbucket で鍵の設定

鍵設定の前に「Bitbucket」を日本語で表示させたいと思います。
右上のプロフィール画像から「Manage Account」を選択し、「Language 」を「Japanese」に変更します。
「Save Settings」をクリックすると、翻訳率は99%で不完全だけどいいですか?というダイヤログがでますがそのまま設定を保存して日本語にしましょう。

Bitbucket3 300x189 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「鍵」を設定します。左のメニューから「SSH キー」を開いてください。

鍵を追加」をクリックして、「Label」 には公開鍵と同じ名前など適当なものを入力し、「Key」にはエディタで保存した「公開鍵」を貼り付けて追加します。

Bitbucket4 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

これでついにバージョン管理ができるようになります!やた

リポジトリの作成

リポジトリ」とは、更新したファイルのデータなどが蓄積する「場所」のことで、基本はプロジェクト単位で作成します。

ブルーのヘッダーにある「作成」ボタンを押すと新規リポジトリページが表示されます。(100万人突破したらしくキャプチャのロゴは特別バージョンです)

Bitbucket5 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「名前」には英数字でプロジェクト名を入れます。
非公開にする場合は「プライベートリポジトリ」にチェックしてください。
リポジトリタイプは「Git」です。
プロジェクト管理にチェックすると、「課題追跡」や「Wiki」なども作成することができます。

「リポジトリの作成」をクリックすると、リポジトリ画面になります。
これでリモート上のリポジトリは作成することができました。

Bitbucket6 300x165 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「SourceTree」でコミットした時に蓄積されるローカル上のリポジトリも作成します。
上記画面で「クローン」をクリックし、ブルーのボタンの「SourceTreeにクローン」を押すとダイアログがでるので「アプリケーションの起動」をクリック後、「SourceTree」の設定画面が開きます。

sourceTree8 300x157 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Destination Path」にローカルでプロジェクトを管理しているフォルダを指定します。
すでに作業していたフォルダを指定する場合は、念のためフォルダ内のファイルをコピーしてからこのリポジトリを作成した方がいいかもしれません。
何回かファイルがすべて消えてしまったことがあるので…。やり方が悪かったのかもしれませんけど。

「Clone」をクリックすると、作成したリポジトリの画面が表示され、ファイルを管理できる状態になりました。

sourceTree9 300x199 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

ローカルリポジトリにコミット

次に設定したフォルダにあるファイルをローカルのリポジトリに「コミット」してみます。

画面上部にあるアイコンメニューから「Commit」を選択してください。

sourceTree10 1024x694 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記の画面が表示されるので、どのような更新をしたかなどコミット理由を明記します。
Commit modeを「Selected files」にして、もしコミットの必要がないファイルがあれば下のチェックを外します。
画面右下の「Commit」ボタンを押せばコミット完了です。

リモートリポジトリにプッシュ

リモートのリポジトリにプッシュすると、「Bitbucket」上で更新履歴を閲覧できるようになります。

「SourceTree」のアイコンメニューにある「Push」をクリックしてください。

sourceTree11 300x250 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「master」にチェックし、「OK」を押せばプッシュ完了です。

ただし、ソフトを起動して最初のプッシュの時だけ下記のような認証警告ダイアログが表示されます。

sourceTree12 300x124 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Yes」をクリックして、先ほど保存したppkファイルの「秘密鍵」を選択してください。

下記のような「Enter Passphrase」画面が表示されるので、設定したパスワードを入力します。

sourceTree13 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「SourceTree」に戻り、「Retry」ボタンを押せばプッシュできます。Pushingの青いバーが右まできたらプッシュ完了です!

Bitbucket で履歴確認

ブラウザで表示していた「Bitbucket」に戻って、プロジェクト画面を更新してみてください。
下記のようにコミットした履歴が表示されれば成功です。おめでとうございます!

Bitbucket7 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「概要」メニューの右側にある、「ソース」ではファイルの一覧が見れたり、「コミット」ではコミット一覧が表示されていますので色々とリンクをクリックしてみると、こんなことも管理できるんだ!と利便性を実感できるかと思います。

ファイルを更新する(運用方法)

上記でコミットしたファイルを更新すると、「SourceTree」で更新されたファイル数や編集内容が確認できます。
同じファイルに上書きしていても、どのような編集が行われたかを確認することができるなんてステキですよね。

sourceTree14 1024x679 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

上記と同じようにコミット&プッシュをして、「Bitbucket」で確認してみます。更新履歴が追加されました。

Bitbucket8 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

リンクをクリックすると具体的な編集内容を見ることができます。

Bitbucket9 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

このようにバージョン管理すればいざというときも安心です!

ぜひ導入を検討してみてください。

ちなみにDreamweaverからGitを使える「GITWeaver」という機能拡張もあるようです。色々な管理方法があるので、紹介しておきます。
Gitを使っているWebデザイナー必見。DreamweaverからGitを使える「GITWeaver」

Pocket
article clipper [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

本日が決算日の@cappeeです。

Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説!

ついにたどり着いてしまったかもしれません。

今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。)

せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。

導入のキッカケ

話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。

私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。

Sassの使用にはRubyをパソコンにインストールする必要があったので、まずはそういった煩わしいことをせずに導入できる「Scout」というGUIツールを使ってSassをCSSに変換するコンパイルをしてみます。

ほうほうこれは思いのほか簡単に導入できたしいいぞと。

しかしDreamweaverでコーディングしようと思った時に、SCSSで書いてもアップロードするのはCSSなわけなのでいちいちCSSを選択してPUTするのは結構面倒だな。

ということでSCSSファイルを保存したらCSSが自動でアップロードできないか調べてみると、話題のSublime Text 2はできちゃうんですね。さすが。

DreamweaverのコードカラーもSublime Text 2と同じにしていた私なのでこれは「時が来た」と思ったわけです。(カラーコードかえるくらいならもっと早く乗り換えろよってね)

Sass(サス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

CSSを生成するためのメタ言語で、シンプルな入れ子構造、Mixinsという複数定義が可能、さらに変数や演算などを使えるので、Sass(SCSS)からCSSを生成することで効率よくコーディングすることができます。

SassにはSASSとSCSS、二種類の記述方法があって一般的にはSCSSが使われています。

SCSSはCSSと記述が似ていますが、SASSは{}や;(セミコロン)をつけないインデントを使った階層になっています。一見シンプルそうですが、CSSへの慣れと見やすさなどからSCSSの方が人気のようです。

こちらに参考記事がまとまっています。
初めてSassとCompassを使った際に参考にした記事まとめ

Compass(コンパス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Sassを使ったフレームワークで、接頭辞(ベンダープレフィックスの)ついたCSS3のプロパティなどを簡単に挿入することができます。
CSS Spriteも書き出してくれるので、使うこなせばかなりのスピードアップになりそうです。

SassとCompassについてはこちらに詳しく書かれています。
CSSの常識が変わる!「Compass」、基礎から応用まで!

Emmet(エメット)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Zen-Codingの次期バージョンの名前です。Emmetにかわると知った時はわりと衝撃でした。
名前が変わるくらい便利になったところは、新しく追加された「Fuzzy search」機能ではないでしょうか。
これにより決まった記述ではなく、クラス名からなんとなく推測される文字で展開しても理解してくれるようになったのです。

Emmetの記述方法や新しい機能などはこちらに詳しく書かれています。
CSSの記述を高速化する、Emmet (Zen-Coding)

Sublime Text 2(サブライムテキスト2)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

非常に高性能なテキストエディタです。テキストエディタなのでDreamweaverのデザインビューを活用してコーディングしている人はちょっとハードルが高いかもしれません。
無償でダウンロードできるので、検討するのにとことん使いたおしてから購入することができるのも魅力の一つです。

こ~いしちゃったんだ~♪
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

Sass+Compassをとりあえず簡単に導入してみたい方は

Scout

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

何も考えずにScoutというSass(SCSS)からCSSをコンパイルできるGUIツールをインストールすればすぐに使うことができます。
通常コマンドなどを使うのですが、GUI(グラフィカルユーザインタフェース)だとデザイナーでも直感的に操作できるのでとっつきやすいです。
ただし、Scoutはディレクトリに日本語があると動作しないなどもあるようなので注意してください。

こちらに設定方法などが書かれていますので参考にしてみてください。
【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)

Koala

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

最近リリースされたばかりのデザインがイケてる上記と同じコンパイラのGUIツールです。
Rubyをインストールする一手間はありますが、とても簡単なのでレッツトライ。
ディレクトリに日本語が使えるなどScoutより柔軟で、インターフェース的にも使いやすいと思います。

設定方法はこちらをご覧ください。
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。

最強タッグを導入してみよう!

Sublime Text 2 + Sass + Compassのインストール手順

こちらにわかりやすく記述されていますのでインストール手順を参考にしてみてください。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

プロジェクトの保存ですが、「Project > Save Project As…」で選ぶ場所はconfig.rbが設置されたルートディレクトリを設定しないとうまくコンパイルできませんでした。
また、プロジェクトのルートディレクトリに日本語(全角)があるとコンパイル出来ないのでご注意ください。

エラーがでた時の対処法

もしSCSSをビルドした時にエラーがでたら、エンコードの問題かもしれません。

ConvertToUTF8」というパッケージをインストールしてください。Sublime Text 2はデフォルトだとUTF-8にしか対応してませんので、ShiftJIS、EUC-JPにも対応できるようになります。
また、日本語のインライン入力に対応させる「IMESupport」もインストールしておきましょう。

下記の「その1」と「その3」を参考にしてください。
「Sublime Text 2」(Windows版)でまずやる2つのこと

それでも、もし「Decode error – output not utf-8」というエラーが表示されたら、「Preferences > Browse Packages…」を選択し、「Compass」フォルダの「Compass.sublime-build」を開いて下記を追加してください。(最後の行に追加する場合は「,」は必要ありません)

"encoding": "cp932",

初期設定

Sublime Text 2の初期設定などはこちらが参考になります。
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ

Zen-Cordingのパッケージは、現在「Emmet」という名前に変更されてますので、新しい名前で検索してください。

ちなみに私はテーマを「Phoenix」にしています!

プロジェクト管理など便利な機能についてはこちら。
Sublime Text 2とEmmetで制作効率アップ!

Windows版のショートカットキーはこちらが参考になります。
Sublime Text 2のショートカットキーで便利なやつ何個か(Windows版)

メニューを日本語化

すべて英語表記なので日本語にしたいという方は下記ブログのコメント欄に最新バージョンが配布されています。
【Windowsアプリケーション】Sublime Text 2 メニュー日本語化

FTPの設定でCSSファイルを自動アップロード

私がDreamweaverからSublime Text 2に移行した一番の理由です。
CSSファイルだけでなく、すべてのファイルが保存と同時にアップロードできるのでとても楽です。
ただし本番環境の場合は手軽さが仇となる時もあると思うので考えてから設定する必要がありますね。

私と同じ壁にぶちあたった方がインストール方法など記事を書いています。
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

これで最強のタッグを手に入れることができました!

Sassの本がでましたよー!読みましたがかなりオススメです!

Pocket
article clipper Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。

以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。

ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。

ソーシャルボタンのJavaScriptを最後に記述する

ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。

jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありません。

ソーシャルボタンのJavaScriptに非同期化を指定する

現在のFacebookやtwitterボタンは「同期読み込み」になっており、ソーシャルボタンのJavaScriptの読み込みが完了するまで他の読み込みができない状態です。

これを「非同期読み込み」にすることで、JavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。

FacebookやGoogle+1でもそのような読み込み方法が推奨されているようです。

ちなみにGoogle+1ボタンは最初から非同期の設定になっていますので変更の必要はありません。

Facebookタグの記述方法

js.async = true; を以下のように追加することで非同期化します。

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=110946748983094";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

twitterタグの記述方法

twitterの公式タグは非同期に対応しているらしいのですが、それらしい記述が見当たらないため、疑り深い方は async を記述してみてください。表示は問題ありません。
js.async = true; を以下のように追加することで非同期化します。

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

Twitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプト(+はてな)

よく追加するソーシャルボタンとAnalyticsのJavaScriptをキレイにまとめて非同期にしたスクリプトがあります。

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */ (function (doc, script) {
    var js,
    fjs = doc.getElementsByTagName(script)[0],
        add = function (url, id) {
            if (doc.getElementById(id)) {
                return;
            }
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };
    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

さらにプラス「はてな」を追加してスクリプトもありましたので引用しておきます。

詳しくはこちらをご覧ください。
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

<script>
(function (w, d) {
w._gaq = [["_setAccount", "UA-XXXXXXXX-X"],["_trackPageview"]];
w.___gcfg = {lang: "ja"};
var s, e = d.getElementsByTagName("script")[0],
a = function (u, i) {
if (!d.getElementById(i)) {
s = d.createElement("script");
s.src = u;
if (i) {s.id = i;}
e.parentNode.insertBefore(s, e);
}
};
a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js", "twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);
</script>

遅延ロードまたはスクロール位置ロード

非同期読み込みでも遅い!という方はもう一手間追加すればきっと快適になるはずです。

遅延ロード … ページが表示されて数秒した後に指定したJavaScriptを読み込むという方法です。

スクロール位置ロード … ページの高さのとある場所までスクロールしたらJavaScriptを読み込むという方法です。

こちらの読み込みの記述方法に関しては下記を参考にしてください。
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

以上になります。

ちなみにこのブログのソーシャルボタンはプラグインで表示しているため非同期化はまだ未対応です!

Pocket
article clipper Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

こんにちは、@cappeeです。

サイトを3カラムで作る場合は通常floatを使いますよね?

今回は意外と知らないCSS?かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。

display:box とは

displaybox1 300x151 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。

もうfloatのclearになんか悩まされることもありません。

display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。

プレフィックスを入れてもたった2行でできてしまうのです。

Flexible Box(フレキシブルボックス)とも言います。

display:box の記述方法

#contents の中に横並びにしたい要素を入れたとします。
下記の2行を追加すればもう横並びになっているはずです。ほんと一瞬ですね。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}

box-ordinal-group で順序変更

displaybox2 300x68 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-ordinal-group を指定すればHTMLの記述順に関係なく表示を入れ替えることができます。
下記のように記述すればHTML上#innerA→B→Cの順でも、表示はC→A→Bの順番になります。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 2; /* Firefox用 */
}
#innerB{
-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 3; /* Firefox用 */
}
#innerC{
-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 1; /* Firefox用 */
}

box-flex で可変に

displaybox3 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-flex を指定すれば display:box で指定した横幅に合わせて伸縮してくれます。
display:boxを指定した要素にwidthを記述しないとFirefoxで横幅一杯に広がってくれませんのでご注意ください。

#contents{
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
width: 350px;
}
#innerB{
-webkit-box-flex: 1; /* Safari,Google Chrome用 */
-moz-box-flex: 1; /* Firefox用 */
}
#innerC{
width: 350px;
}

display:box の活用

display:box は残念ながらIEでは対応していませんIE10からの対応となります。

ただし、仕様変更を繰り返しているようなのでまだPCサイトで使用するには注意が必要です。

[参考サイト]IE8から始めるテーブルレイアウト と IE10からのFlexible Box

活用方法としては、スマートフォンサイトの制作には display:box が大活躍してくれますよ。

横並びのメニューやタブの表示が一瞬でできてしまいます。

[2014.01.24]box-flexを使って可変に対応したい場合の指定に、Firefoxに関する補足を追記しました。

Pocket
article clipper [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box