はじめに

このセッションでは CSS の Hands-on を行います。Hands-on とは体験学習を意味する教育用語です。この Hands-on を通してより多くの体験が得られることを望んでいます。

1st Step: CSSでコーティング(学習時間：2時間)

下記ディレクトリに step1 〜 step3 のサンプルがあります。

https://github.com/albatrosary/css-handson-21cafe

2nd Step: 開発環境構築（学習時間：１時間）

Node のインストール
Ruby のインストール　
Git のインストール
Sass/Compass のインストール
Yeoman のインストール

3rd Step: Sass / Compass でコーティング（学習時間：３時間）

Sass とは
Compass とは
1st Step を Sass / Compass で実装する

ブラウザは

Google Chrome Canary(http://www.google.co.jp/intl/ja/chrome/browser/canary.html)

を使用することを推奨します。このブラウザは Chrome の最新機能を備えていて、開発者や開発段階の機能に興味があるユーザ向けに設計されています。

サンプルは

git@github.com:albatrosary/css-handson-21cafe.git

にあります。各自リポジトリを fork / clone してください。

HTML5 と CSS3

HTML と CSS の歴史

年表

1986SGML(Standard Generalized Markup Language)

1989HTML(Hyper Text Markup Language)

1996CSS1

1997HTML4.0

1998XML(eXtensible Markup Language)CSS2

2000XHTML(eXtensible Hyper Text Markup Language)

2004CSS2.1

2010XHTML2.0 打ち切り

2011CSS3

2012HTML5.0

HTMLの規格はこの何年か変化が無かったがようやく技術革新がありました。新しいHTMLによって今までとかまったく異なる世界になることでしょう。特に、いままでは Adobe Flash や JavaFX、Microsoft Silverlight 等でしか出来なかったようなことを HTML と CSS そして JavaScript を使うことで可能となります。また、こうすることによりプラグインを不要としています。

HTML5 について

HTMLの5回目にあたる大幅な改訂版であり、現在、W3Cによって2014年までの正式勧告を目指して策定が行われています。広義のHTML5として、Application Cache、Web Storage、WebSocket、Geolocation API、XMLHttpRequest Level2などを含む場合がります。また、ビデオやオーディオの再生、ドラック&ドロップなどのAPIも追加されています。

CSS3 について

CSS3 は CSS2.1 の次世代の規格として W3C で策定が進められている規格です。現状ではベンダープレフィックスを利用し策定中の機能を利用することが可能です。

CSS3 のベンダープレフィックス

CSS3 では、策定中の機能をブラウザが実験的に先行実装したものについてベンダープレフィックスを付けるという決まりがあります。

ベンダープレフィックス	ブラウザ
-webkit-	Chrome
	Safari
	iOSの標準ブラウザ
	Androidの標準ブラウザ
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer

例）border-radiusプロパティは、ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。具体的には

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-ms-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

1st Step: CSS でのコーティング

https://github.com/albatrosary/css-handson-21cafe

を参照してください。

2nd Step: 開発環境構築

ここでは、Web開発に必要となるツールのインストールを行います。様々なツールがあありますが、今回は yeoman(http://yeoman.io/) という開発ツールを使用します。エディターですが、各々お気に入りのエディターを使用してください。参考までに Sublime Text などはよく使われています。

yeoman は

Yo は新しいアプリケーションのひな形を作成します。既に必要なビルド情報が Grunt コンフィグレーションに定義されています。

Grunt

Grunt は Yeoman や grunt-contrib により作成したプロジェクトのビルド、プレビューそしてテストを行います。

Bower

Bower はプロジェクトが依存するライブラリを管理するために使用します。Bower を使うことでライブラリを自動的にダウンロードしインストールすることが出来ます。

の３つのツールで構成されている「Web App Development Through Tooling」です。

事前準備として

Node.js
Git

必要であれば

Ruby
Compass

をインストールしておきます。今回は最終目的である Sass/Compass のハンズオンを Yeoman を通じて行いますのでインストールしてください。

Node のインストール

Node のサイト（ http://nodejs.jp/nodejs.org_ja/docs/v0.10/ ）から node をダウンロードしインストールします。メッセージに従いインストールすれば完了です。

Ruby のインストール

windowsの場合、環境変数にパスを登録するかオプションを聞かれますので登録するよう設定してください。

Git のインストール

git のインストールは github のサイト

https://help.github.com/articles/set-up-git

に詳しく記載がありますのでセットアップを行って下さい。まず

http://git-scm.com/downloads

から対応する OS のgit モジュールをダウンロードしインストールを行います。次に git に自信の名前とメールアドレスを登録します。

$ git config --global user.name “Your Name Here”

$ git config --global user.email “your_email@examplle.com”

github への登録

ローカルの git とgithub を連携させます。下記手順位より公開鍵暗号化方式を使って連携を行います。

$ cd ~/.ssh

$ ssh-keygen -t rsa -C “your_email@examplle.com”

$ pbcopy < ~/.ssh/id_rsa.pub

$ cat id_rsa.pub

cat で開いた公開鍵を github へ登録します。鍵の登録方法は

https://help.github.com/articles/generating-ssh-keys の「Step 3: Add your SSH key to GitHub」を参照してください。手順は以下の通りです。

Go to your Account Settings
Click "SSH Keys" in the left sidebar
Click "Add SSH key"
Paste your key into the "Key" field
Click "Add key"
Confirm the action by entering your GitHub password

稼動テストとして適当なリポジトリを github に作成し clone, add, commit, push などを使ってみてください。

windows でのインストール

mac よりも手順が少し多いです。文字コードの関係もありますのでそれなりの設定が必要です。

msysgit のインストール

msysgit は http://msysgit.github.io/ からダウンロードします。大きく「Dawnload」と記載してますので直に分かると思います。ダウンロード後インストーラーを実行します。途中設定等を聞いてきますので画面イメージを添付します。

これで msysgit のインストールは終了です。msysgit によりインストールされた git bash の設定を行います。これは ls コマンドで日本語を表示させるための手順です。

$ vi ~/.bashrc

alias ls = ‘ls --show-control-chars’

$ git config --global core.quotepath off

また、windows の改行コードは「CRLF」でUnix系は「LF」です。同一のファイルに２種類の改行コードが混在すると問題になりますので「LF」で統一します。改行コードが「LF」以外の場合はコミット出来ないように下記設定を行います。

$ git config --global core.safecrlf true

$ git config --global core.autocrlf input

Sass/Compass のインストール

Sass / Compass は下記コマンドラインでインストールを行って下さい。事前準備として git (windows の場合は git bash) をインストールしてください。

$ gem update --system

$ gem install sass

$ gem install compass

Yeoman のインストール

Yeoman をインストールするには http://yeoman.io/ を見ても分かる通り簡単で

$ npm install -g yo

を実行することで Grunt と Bower もインストールされます。

Yeoman の機能は豊富ですので grunt は http://gruntjs.com を bower は http://bower.io/ を参照した方がより良いです。

その他の知識

使用するテンプレートにより異なりますが、モダンWebアプリケーションを開発するにあたり知識として必要となる要素のリンク先をまとめます。

CoffeeScript( http://coffeescript.org/ ): JavaScript を Ruby のような形式にした言語
Sass( http://sass-lang.com/ ): CSS ファイルを作成するために扱うプログラム言語のようなもの（Ruby が必要）
Compass( http://compass-style.org/ ): CSS ファイルオーサリングフレームワーク
Angular( http://angularjs.org/ ): JavaScript の MVC フレームワーク
Backbone( http://backbonejs.org/ ): JavaScript の MVC フレームワーク
PhantomJS( https://code.google.com/p/phantomjs/ ): WebKitをヘッドレス化して JavaScript API を利用できるようにしたツール
Macha( http://visionmedia.github.io/mocha/ ): Node.js上もしくはブラウザ上で動くJavaScript テストフレームワーク
Jasmine( http://pivotal.github.io/jasmine/ ): Node.js上もしくはブラウザ上で動くJavaScript テストフレームワーク
Twitter BootStrap( http://twitter.github.io/bootstrap/ ):Twitter社が提供する CSS フレームワーク
RequireJS( http://requirejs.org/ ): JSの非同期ローディングとモジュール化を行うライブラリ

3rd Step: Sass / Compassでのコーティング

環境構築（テンプレートwebapp のインストール）

初めに generator-webapp をインストールします。

$ (sudo) npm install -g generator-webapp

完了後、テンプレートを作成します。アプリケーションを開発するためのディレクトリを作成します。今回は作業ディレクトリとして

$ ~/work/css-handson-21cafe/sass

で開発を行っています。作業ディレクトリへ移動します。

$ cd ~/work/css-handson-21cafe/sass

下記コマンドを実行してください。

$ yo webapp

今回は、Bootstrap for Sass, RequireJS, Modernizr は必要ありませんのでスペースキーで選択を解除してください。解除完了後エンターキーで実行してください。

インストールが開始されます。インストール終了後開発を初めます。下記コマンドを実行してください。

$ grunt server

しばらくするとデフォルトブラウザに Webページが表示されるはずです。

webapp がインストールされているディレクトリを見てみましょう。

Sass のコーティング

main.css を main.sass へ変更します。

Sass には SCSS 記法と SASS 記法の２種類あります。ハンズオンでは SASS 記法で行います。

参考：

SCSS 記法の Sass

ul {

margin: 0 0 1em;

li {

margin-bottom: 5px;

}

SASS 記法の Sass

margin: 0 0 1em

margin-bottom: 5px

ファイル名の変更が終わりましたらファイルを開き内容をSASS 記法にしてみましょう。

コンパイルされた CSSファイルは「.tmp/styples/main.css」ファイルとして出力されています。

参考までにビルドしてみます。

$ grunt build

を実行してください。ファイルが「dist」ディレクトリに出力されます。

CSS が圧縮されているのがわかると思います。yeoman(grunt) は grunt build コマンドでいくつかのタスクを処理しています。Grunt.js を見るとどのようなタスクが定義されているかが読み取れます。

Sass をさわってみよう！

@import と「_hoge.sass」ファイル

Sass でも CSS 同様に @import 文を使って Sass ファイルをインポートすることができます。

styles ディレクトリに lib というディレクトリを作成し lib の中に _common.sass ファイルを作成します。作成したファイルを main.sass から呼び出します。

_common.sass の内容は main.sass で書かれていた内容をそのまま記載して下さい。

main.sass と _common.sass は次のようになります。

libの中にある「_ファイル」ですが_をファイル名の頭に付けるとCSSファイルを出力しません。また、このファイルをパーシャルファイルと呼びます。

「.tmp」ディレクトリを確認します。

「_」を取ってみます。ファイルの内容は各自確認してください。

Sass の基本

Sass の基本をハンズオンします。

前回使用した「css-handson-21cafe/master/step1/index.html」を使用します。

「css-handson-21cafe/master/step1/index.html」から「css-handson-21cafe/sass/app/index.html」へファイルを複写してください。

「css-handson-21cafe/sass」ディレクトリで

$ grunt server

コマンドを実行し画面を確認してください。味気ない画面が出力されます。

margin-hogeの省略

margin-top: 0px

margin-right: 0px

margin-left: 0px

margin-bottom: 0px

と記載した場合、margin を省略することができます。具体的には次のようになります。

変数

変数を定義します。変数は「$」で表現します。h1 から h6 の色を定義しますのでそのための変数を定義します。

main.sass に「_h-tag」をインポートしファイルを「lib」に作成してください。

main.sass

@import 'lib/_common'

@import 'lib/_h-tag'

_h-tag.sass

h1, h2, h3, h4, h5, h6

background-color: $hcolor

margin:

top: 2px

bottom: 2px

@for

繰り返し処理が行えます。span の間隔を等間隔で徐々に幅広にするロジックを記載しまます。

文法

@for $変数名 from 開始の数値 to 終了の数値

スタイル

main.sass

@import 'lib/_common'

@import 'lib/_h-tag'

@import 'lib/_span-tag'

_span-tag.sass

$span: 60px

@for $i from 1 through 12

.span#{$i}

width: $span + 80px * ($i - 1)

background-color: $hcolor

margin:

top: 2px

bottom: 2px

ここで「#{}」はインターポレーションと言います。インターポレーションは、変数が参照できない場所でも使うことができるようにする機能です。

@mixin

ミックスインは、スタイルの集まりを定義しておき、色々な場所で使用できるようにするものです。

今回は imputタグに対してミックスインを利用します。

main.sass

@import 'lib/_common'

@import 'lib/_h-tag'

@import 'lib/_span-tag'

@import 'lib/_input-tag'

_input-tag.sass

@mixin input-style

margin:

top: 2px

left: 5px

right: 5px

bottom: 2px

border: 1px solid #cccccc

color: gray

これを inputタグに適用します。input タグに定義された class を使用します。

_input-tag.sass

@mixin input-style

margin:

top: 2px

left: 5px

right: 5px

bottom: 2px

border: 1px solid #cccccc

color: gray

.main-select

font:

size: large

@include input-style

.main-text,

.main-password

font:

size: large

@include input-style

background:

color: white

padding: 4px 2px

.main-textarea

font:

size: large

@include input-style

background:

color: white

padding: 4px 2px

.main-button,

.main-submit,

.main-reset

font:

size: large

@include input-style

padding: 4px 24px

.main-checkbox,

.main-radio

font:

size: large

@include input-style

inputタグの形状を定義

ここで定義された checkbox と radio 意外のタグの形状を変更します。定義する内容は下記になります。

+transition(border linear 0.2s, box-shadow linear 0.2s)

+border-radius(4px)

Compass を使用してますので main.sass にインポートします。

main.sass

@import 'compass'

@import 'lib/_common'

@import 'lib/_h-tag'

@import 'lib/_span-tag'

@import 'lib/_input-tag'

_input-tag.sass を書き換えます。例えばボタンでは下記の通りです。

_input-tag.sass

・・・省略・・・

.main-button,

.main-submit,

.main-reset

@include button-events

font:

size: large

@include input-style

padding: 4px 24px

+transition(border linear 0.2s, box-shadow linear 0.2s)

+border-radius(4px)

・・・省略・・・

button, submit, resetにグラデーションを定義

button, submit, reset にグラデーションを定義します。定義する内容は下記になります。

+box-shadow(1px 1px 3px rgba(0, 0, 0.75, 0.75))

+background(linear-gradient(#fff, #ccc))

_input-tag.sass を書き換えます。下記の通りです。

_input-tag.sass

・・・省略・・・

.main-button,

.main-submit,

.main-reset

font:

size: large

@include input-style

padding: 4px 24px

+transition(border linear 0.2s, box-shadow linear 0.2s)

+border-radius(4px)

+box-shadow(1px 1px 3px rgba(0, 0, 0.75, 0.75))

+background(linear-gradient(#fff, #ccc))

・・・省略・・・

ボタンのイベントに応じてグラデーションを変更

ボタンのイベントに応じてグラデーションを変更します。具体的には

@mixin button-events

&:focus, &:hover

+background(linear-gradient(#ccc, white))

&:active

+background(linear-gradient(#ccc, #ccc))

_input-tag.sass を書き換えます。下記の通りです。

_input-tag.sass

・・・省略・・・

@mixin button-events

&:focus, &:hover

+background(linear-gradient(#ccc, white))

&:active

+background(linear-gradient(#ccc, #ccc))

・・・省略・・・

.main-button,

.main-submit,

.main-reset

@include button-events

font:

size: large

@include input-style

padding: 4px 24px

+transition(border linear 0.2s, box-shadow linear 0.2s)

+border-radius(4px)

+box-shadow(1px 1px 3px rgba(0, 0, 0.75, 0.75))

+background(linear-gradient(#fff, #ccc))

・・・省略・・・

ここで「&」は親セレクタの参照です。cssファイルを確認すると

.main-button:focus,

.main-button:hover,

.main-submit:focus,

.main-submit:hover,

.main-reset:focus,

.main-reset:hover {

background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #ffffff));

background: -webkit-linear-gradient(#cccccc, #ffffff);

background: linear-gradient(#cccccc, #ffffff);

}

と成っていて親セレクタが埋め込まれていることが確認できます。

ここから先

ここから先は各自色々触ってみて下さい。Sass については

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Compass については

http://compass-style.org/reference/compass/

に多くの機能が記載されています。

albatrosary's blog

UI/UXとエンタープライズシステム

CSS Hands-on 講義ノート

はじめに

HTML5 と CSS3

HTML と CSS の歴史

HTML5 について

CSS3 について

CSS3 のベンダープレフィックス

1st Step: CSS でのコーティング

https://github.com/albatrosary/css-handson-21cafe

2nd Step: 開発環境構築

Node のインストール

Ruby のインストール

Git のインストール

github への登録

windows でのインストール

msysgit のインストール

Sass/Compass のインストール

Yeoman のインストール

その他の知識

3rd Step: Sass / Compassでのコーティング

環境構築（テンプレートwebapp のインストール）

Sass のコーティング

Sass をさわってみよう！

@import と「_hoge.sass」ファイル

Sass の基本

margin-hogeの省略

変数

@for

@mixin

inputタグの形状を定義

button, submit, resetにグラデーションを定義

ボタンのイベントに応じてグラデーションを変更

ここから先

はじめに

HTML5 と CSS3

HTML と CSS の歴史

HTML5 について

CSS3 について

CSS3 のベンダープレフィックス

1st Step: CSS でのコーティング

https://github.com/albatrosary/css-handson-21cafe

2nd Step: 開発環境構築

Node のインストール

Ruby のインストール

Git のインストール

github への登録

windows でのインストール

msysgit のインストール

Sass/Compass のインストール

Yeoman のインストール

その他の知識

3rd Step: Sass / Compassでのコーティング

環境構築（テンプレートwebapp のインストール）

Sass のコーティング

Sass をさわってみよう！

@import と 「_hoge.sass」ファイル

Sass の基本

margin-hogeの省略

変数

@for

@mixin

inputタグの形状を定義

button, submit, resetにグラデーションを定義

ボタンのイベントに応じてグラデーションを変更

ここから先

@import と「_hoge.sass」ファイル