Category : CSS

書評:Sass入門 より効率的なCSSコーディング

Category
Bookmark

Sass入門 ~より効率的なCSSコーディングの書評記事です。献本ありがとうございます。

本書は、Sass に関わる全ての人に薦めたい一冊です。

初心者も安心

本書は次のような方を主に対象としています。

  • CSSをもっと早く、効率的に書きたい、管理したいと思っている方
  • Sassのことを知らない、もしくは少し知っていて使ってみたいと思っている方
  • Sassを始めてみたがうまく使えているのか分からない方
Sass入門 ~より効率的なCSSコーディング

「はじめに」の以上の部分からも分かるように、未経験者から既に使っている人まで、多くの人に向けた内容になっています。
Sass に関する日本語の情報と言うと、「何ができるか?」といった基礎的な内容が多いように感じていたのですが、本書は基礎知識からかなり深い知識までを広くカバーしています。

また、「ターミナル」の補足説明を「黒い画面」とするなど、プログラムにあまり接しない人に向けた配慮が見られます。いわゆるHTML・CSSコーダー / マークアップエンジニアに向けた内容であることが感じられます。

環境導入の解説も丁寧に行われています。Windows と Mac のそれぞれで一ステップごとにスクリーンショット付きで解説されているので、初めての人でも問題なく導入できるでしょう。

上級者も満足

一方で、@mixin や @extend や制御構文などは、かなり突っ込んだ内容まで載っているので、既に Sass を使っている人でも、この辺りはかなり読み応えがあるのではないでしょうか。

他にも、実用的なサンプルや運用のテクニック、フレームワークである Compass まで載っているので、まさにおはようからおやすみまで、おとなもこどももおねーさんも使える一冊と言えます。

媒体について

本書は現在()のところ、電子書籍のみです。電子書籍と言うと iPad などのタブレットで読むイメージがありますが、Gihyo Digital Publishing上で PC などのブラウザで読むこともできます。サンプルコードを手軽にコピペできるので、これは嬉しいですね。

meter要素のフォールバックサンプル

Category
Bookmark

meter要素の、スタイルを含めたフォールバックのサンプルです。

HTML

<meter min="0" max="100" value="60" title="percentage"><span class="outer"><span class="inner">60%</span></span></meter>

CSS

.outer {
  display: block;
  width: 80px;
  height: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e5e5e5));
  background: linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
}

.inner {
  display: block;
  width: 60%;
  height: 15px;
  background: #3893E2;
  background: -moz-linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7FE9FF), color-stop(100%,#3893E2));
  background: linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  text-indent: -99999px;
}

サンプル

60%

判りやすいように、対応しているブラウザではブラウザごとのインターフェイスに(Chrome8, Opera11 だと緑のバー)、非対応ブラウザでは青いバーが出るように(Firefox3.6, IE6,7,8, iPhone Safari (iOS4.2) で確認)なっています。
(モニタによっては、メーターの幅を示す灰色のグラデーションが見えづらいかもしれません)

解説

特に難しい事はしていません。
単純にmeter要素の中のテキストを二重に囲って、それぞれにスタイルを当てているだけです。

Sassのサンプルコード

Category
Bookmark

使いまわしそうなSassのコードをメモっておいたら、(自分が)便利かなあとか思ったので載せておくテスト。

// ===============================
//   Variables
// ===============================
$red: #f00;
$blue: blue;

// ===============================
//     Mixins (Include)
// ===============================
@mixin link {
  color: #00f;
}
@mixin link_h {
  color: #fff;
  background: #00f;
}
@mixin link_v {
  color: #600;
}

@mixin min-height($px) {
  min-height: $px;
  height: auto!important;
  height: $px;
}

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

@mixin position_Pattern($min, $padding, $top, $left, $width, $margin) {
  li {
    position: relative;
    @include min-height($min);
    padding: $padding;
    
    img {
      position: absolute;
      top: $top;
      left: $left;
      width: $width;
    }
    p {
      margin: $margin;
    }
  }
}

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

@mixin gradient($color1, $position1, $color2, $position2, $color3, $position3) {
  background: -moz-linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background: -webkit-gradient(linear, left top, left bottom, color-stop($position1, $color1), color-stop($position2, $color2), color-stop($position3, $color3));
  background: linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background-color: #777;
}

/* ===============================
   Selector Inheritance (extend)
=============================== */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  #zoom: 1;
}

/* ===============================
   Test
=============================== */
a {
  @include link;
}
a:visited {
  @include link_v;
}
a:hover {
  @include link_h;
}

div {
  @include inline-block;
  @include min-height(100px);
  @include radius(10px);
  @extend .clearfix;
  @include gradient(#777, 0%, #555, 50%, #222, 100%);
}

@include position_Pattern(40px, 10px, 10px, 10px, 60px, 0 0 0 70px);

/* ===============================
   Nesting
=============================== */
html {
  background: $red;
  body {
    background: $blue;
  }
}

gradient とか、逆に面倒になってる気がしないでもない。 radius・clearfix・min-heightとかは便利そう。

Windows PC に Ruby と Sass を導入する方法

Category
Bookmark

Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語(って言い方でいいのかな)であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。

Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC(XPとVistaで試しました)にSassを導入する手順を紹介します。

Rubyのインストール

SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。

インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。

ruby -v

ruby 1.9 1p430(2010-08-16 revision 28998)

みたいのが出たらgemのアップデートに進んでください。

そうではなく、

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

と表示されたら、このまま進めて環境変数を設定してください。

環境変数を設定する


マイコンピュータを右クリックしてシステムのプロパティから環境変数を開いて、「Path」の末尾にインストールしたRubyのbinフォルダのパスを加えます。 RubyInstallerでそのままインストールしていれば、;C:\Ruby191\bin とかそんな感じになると思います。

再び ruby -v をしたら、ruby 1.9 1p430(2010-08-16 revision 28998)みたいのが出てきたと思います。 出てこなかったら、恐らく環境変数のPath指定が間違っています。

gemのアップデート

念のため、

gem update --system

と打ってエンターを押して、gemをアップデートしておきます。 よく分からなくてもとりあえずやっておけば良さそう。

Sassのインストール

そのまま続けて、次のコマンドを叩きます。

gem install haml
gem install sass

これでSassはインストール完了です。
Rubyのインストールさえ済めば、Sass自体はあっと言う間にインストールできます。

2011-06-08 追記:Sass が Haml から分離したので、コマンドが変わったぽいです
参考:Sass(CSS拡張メタ言語)に関す資料 - NAVER まとめ

Sassを試す

ところで、コマンドプロンプトの行頭の表示は恐らく、

C:\Document and Settings\Owner

とかそんな感じになってるんじゃないでしょうか。 その場所をエクスプローラで開きます。

そこに、いつも使っているエディタでtest.scss というファイルを作成し、次の内容を記述します。

$red: #f00;
$blue: blue;

html {
  background: $red;
  body {
    background: $blue;
  }
}

保存をしたら、コマンドプロンプトで次のコマンドを叩きます。

sass test.scss test.css

C:\Document and Settings\Owner のフォルダを見てみてください。 test.css というファイルができているはずです。 それをいつものエディタで開くと、

html {
  background: red;
}
html body {
  background: blue;
}

となっていると思います(閉じカッコの位置とか微妙に違うかも)。
これで、Sassを使う事ができました。

Sassを、もう少し詳しく

cssファイルの生成形式

Sassは、ファイルを監視する機能が付いています。 この機能を使うと、.scssファイルを上書き保存した瞬間に.cssファイルを生成してくれるので、とても便利です。

やり方は簡単で、コマンドプロンプトから、

sass --watch test.scss:test.css

とするだけです。 終了したい時は Ctrl+c です。

また、.cssファイルを生成する時のフォーマットを選択する事ができます。

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

にすると普通のCSSっぽくなって、

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

だといわゆるminify化した物になります。

scssファイルを置く場所

今回は分かりやすくするために C:\Document and Settings\Owner に.scssファイルを置きましたが、もちろん自由な場所で作業する事ができます。 それには、sass **** というコマンドを叩く場所を変えるだけです。

CUIの知識がちょっとだけ要ります。 よくわからない場合は、コマンドプロンプトで下記のコマンドを試してみると良いかもしれません。

今いるディレクトリのファイルなど一覧(UNIX系で言う ls)
dir
ディレクトリ移動(ここでは My Documents に移動)
cd My Documents
ドライブ変更(ここではCドライブからNドライブに変更)
cd /d n:\

注意点

ファイルの文字コードはUTF8、改行コードはLFにしておいた方が無難らしいです。

あとは、Sassで.scssライフを満喫するだけです。

HTML5で最近使っているリセットCSS

Category
Bookmark

浅漬けCSS的なもの

/* html5 reset css */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, q, pre, table, caption, colgroup, col, tbody, thead, tfoot, tr, th, td, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, span, a, img, em, ins, del, cite, abbr, sup, sub, dfn, code, var, samp, kbd, object, script, noscript, style, iframe, embed, param, map, area,
menu, hr, address, small, strong, i, b,
article, aside, figure, footer, header, hgroup, nav, section, figcaption, time, video, audio, mark, ruby, rt, rp, bdo, source, canvas, details, summary, command,
datalist, keygen, output, progress, meter {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

address, article, aside, figure, figcaption, footer, header, hgroup, hr, legend, menu, nav,  section, summary {
  display: block;
}

li {
  list-style-type: none;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
}

[hidden] {
  display: none;
}

これをそっくりこのまま使うってわけじゃなくて、必要に応じて足したり引いたりします。

その他・用意しておくと便利そうな指定もの


* {
  word-wrap: break-word;
}

body {
  line-height: 1.5;
  letter-spacing: 0.03em;
  background: #fff;
  color: #333;
}

a:link {}
a:visited {}
a:hover {}
a:active {}

label { 
  cursor: pointer;
}

mark {
  background-color: #ff9;
  color: #000;
}



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

body要素に指定した色などは、適宜書き換えます。

背景色を敷いた要素に border-radius を指定すると何かはみでる件

Category
Bookmark


ロケタッチのシールページの角丸部分が変だったんですが、vantさんのブクマから解決方法が見つかりました。

Sneak ― Fixing the background 'bleed'

コードはこんな感じ。

div {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件

Category
Bookmark

フォームボタンにbackground-colorプロパティを指定すると、iPhone Safariではなぜかグラデーションがかかり、更に色が薄くなります。

デフォルトの状態


こんな感じですね。

background-colorで背景色を指定した状態

#sample {
  -webkit-border-radius: 4px;
  background-color: rgb(1,47,145);
}

<input type="submit" value="Submit" id="sample" />

こうすると、


グラデがかかり、色も薄くなってしまっています。

単色のgradientで指定する

これを解決するには、一色のみを指定したgradientを使用します。

#sample {
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(1,47,145)));
}

<input type="submit" value="Submit" id="sample" />


単色になりました。


ちなみに、なぜかpaddingも減ってるように見えます。

サンプルファイル

Google Font Directory のフォントがiPhoneやiPadに未対応な件に取り急ぎ対応する方法

Category
Bookmark

ついにWeb Fontsの実用時代到来か!? と思われたGoogle Font Directoryですが、ではiPhoneやiPadなどでは未対応です。

ただ未対応なだけならまだいいのですが、webfontが英語だけだと日本語の場所空白っぽい感じで表示されるみたいです。という報告をスクショ付きで @cv_k さんから頂きました(ありがとうございます!)。

TwitPic

加えて、@tacamy という清純派マークアッパーから「あらあらうふふ。iPhone対応するとか言ってたのはどの口かしら?」と罵られたので、取り急ぎ対応した次第であります。

対応前と対応後のコードは以下です。

Before

body {
  font-family: Inconsolata, sans-serif;
}

After

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Inconsolata, sans-serif;
}

単にヒラギノの角ゴ ProN W3 を前に持ってきただけという適当さですが、祭りに乗じて騒いでたらうっかり神輿を壊してしまった人には役に立つかなとか。

ちなみに、Mac OS X v10.5以降にはデフォルトでこのProNフォントがインストールされているので、最近のMacではこちらが表示されていると思います。 僕のMacはv10.4なので確認できず。

アンドロイドは?

インストールされているフォントが分からなかったり検証機が手元に無かったりで深くは調べてないのですが、とりあえず見てもらったXperiaでは、テキストが表示されないという事はありませんでした。