読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

CSS Hands-on 講義ノート

はじめに

 

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

 

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

 

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

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

 

2nd Step: 開発環境構築(学習時間:1時間)

  1. Node のインストール
  2. Ruby のインストール 
  3. Git のインストール
  4. Sass/Compass のインストール
  5. Yeoman のインストール

 

3rd Step: Sass / Compass でコーティング(学習時間:3時間)

  1. Sass とは

  2. Compass とは

  3. 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 APIXMLHttpRequest Level2などを含む場合がります。また、ビデオやオーディオの再生、ドラック&ドロップなどのAPIも追加されています。

 

CSS3 について

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

 

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

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

 

ベンダープレフィックス

ブラウザ

-webkit-

Chrome

 

Safari

 

iOSの標準ブラウザ

 

Androidの標準ブラウザ

-moz-

Firefox

-o-

Opera

-ms-

Internet Explorer

 

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

 

 -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

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

  • Grunt

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

  • Bower

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

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

事前準備として

  • Node.js

  • Git

必要であれば

をインストールしておきます。今回は最終目的である 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」を参照してください。手順は以下の通りです。

 

  1. Go to your Account Settings

  2. Click "SSH Keys" in the left sidebar

  3. Click "Add SSH key"

  4. Paste your key into the "Key" field

  5. Click "Add key"

  6. 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」です。同一のファイルに2種類の改行コードが混在すると問題になりますので「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アプリケーションを開発するにあたり知識として必要となる要素のリンク先をまとめます。

  1. CoffeeScript( http://coffeescript.org/ ): JavaScriptRuby のような形式にした言語

  2. Sass( http://sass-lang.com/ ): CSS ファイルを作成するために扱うプログラム言語のようなもの(Ruby が必要)

  3. Compass( http://compass-style.org/ ): CSS ファイルオーサリングフレームワーク

  4. Angular( http://angularjs.org/ ): JavaScriptMVC フレームワーク

  5. Backbone( http://backbonejs.org/ ): JavaScriptMVC フレームワーク

  6. PhantomJS( https://code.google.com/p/phantomjs/ ): WebKitをヘッドレス化して JavaScript API を利用できるようにしたツール

  7. Macha( http://visionmedia.github.io/mocha/ ): Node.js上もしくはブラウザ上で動くJavaScript テストフレームワーク

  8. Jasmine( http://pivotal.github.io/jasmine/ ):  Node.js上もしくはブラウザ上で動くJavaScript テストフレームワーク

  9. Twitter BootStrap( http://twitter.github.io/bootstrap/ ):Twitter社が提供する CSS フレームワーク

  10. 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 記法の2種類あります。ハンズオンでは SASS 記法で行います。

 

参考:

SCSS 記法の Sass

 

ul {

 margin: 0 0 1em;

 li {

   margin-bottom: 5px;

 }

}



SASS 記法の Sass

 

ul

 margin: 0 0 1em

 li

   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/

 

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