仮（２）: CSS

ラベル CSS の投稿を表示しています。すべての投稿を表示

2014年7月7日月曜日

Sublime Text 3 + Compass + SCSSでの開発メモ

OSに、RubyとRuby Gemをインストール
Rubyに、GemでCompassとSCSSをインストール
ST3にCompass、SCSSをインストール
プロジェクトにconfig.rbを設置

http_path = "/"
css_dir = "/wp-content/themes/mtef/css"
sass_dir = "/wp-content/themes/mtef/scss"
images_dir = "/wp-content/themes/mtef/images"
output_style = :expanded # :expanded=一般的な{}で改行する形／:compressed=圧縮して出力
line_comments = false

SCSSを作成

/* *****************************
*
* Import file to Scss or Sass.
*
**************************** */
@import "compass";

a
{
width:500px;
overflow:auto;
@include box-shadow(1px 1px 0 #ccc);
}

SCSSをコンパイルして動作確認
詳細は
http://dev.classmethod.jp/series/scss-tutorial/
とか
http://wp-d.org/2013/01/03/1732/
を見るとよろしい。

2014年2月9日日曜日

游書体ファミリー各OS搭載まとめ

構成

Windows 8.1

游ゴシック Light
游ゴシック Regular
游ゴシック Bold
游明朝 Light
游明朝 Regular
游明朝 Demibold

OS X 10.9

游ゴシック体ミディアム
游ゴシック体ボールド
游明朝体ミディアム
游明朝体デミボールド

Windows8.1搭載

# ファイル名 #
yugothil.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic Light
Font Subfamily name: Light
Unique font identifier: YuGothic-Light
Full font name: Yu Gothic Light
Version string: Version 1.55
Postscript name: YuGothic-Light
Preferred Family name: Yu Gothic
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游ゴシック Light
Font Subfamily name: Light
Full font name: 游ゴシック Light
Preferred Family name: 游ゴシック
Preferred Subfamily name: Light

# ファイル名 #
yugothic.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Regular
Unique font identifier: YuGothic-Regular
Full font name: Yu Gothic Regular
Version string: Version 1.55
Postscript name: YuGothic-Regular
Preferred Family name: Yu Gothic
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Regular
Full font name: 游ゴシック Regular
Preferred Family name: 游ゴシック
Preferred Subfamily name: Regular

# ファイル名 #
yugothib.ttf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Bold
Unique font identifier: YuGothic-Bold
Full font name: Yu Gothic Bold
Version string: Version 1.55
Postscript name: YuGothic-Bold
Preferred Family name: Yu Gothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Bold
Full font name: 游ゴシック Bold
Preferred Family name: 游ゴシック
Preferred Subfamily name: Bold

# ファイル名 #
yuminl.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Light
Font Subfamily name: Regular
Unique font identifier: YuMincho-Light
Full font name: Yu Mincho Light
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游明朝 Light
Font Subfamily name: Regular
Full font name: 游明朝 Light
Preferred Family name: 游明朝
Preferred Subfamily name: Light

# ファイル名 #
yumin.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho
Font Subfamily name: Regular
Unique font identifier: YuMincho-Regular
Full font name: Yu Mincho Regular
Version string: Version 1.55
Postscript name: YuMincho-Regular
Preferred Family name: Yu Mincho
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游明朝
Font Subfamily name: Regular
Full font name: 游明朝 Regular
Preferred Family name: 游明朝
Preferred Subfamily name: Regular

# ファイル名 #
yumindb.ttf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Demibold
Font Subfamily name: Bold
Unique font identifier: YuMincho-Demibold
Full font name: Yu Mincho Demibold
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝 Demibold
Font Subfamily name: Bold
Full font name: 游明朝 Demibold
Preferred Family name: 游明朝
Preferred Subfamily name: Demibold

MacOSX10.9搭載

# ファイル名 #
Yu Gothic Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Medium
Unique font identifier: YuGothic Medium; 8.0d1e1; 2013-02-28
Full font name: YuGothic Medium
Version string: Version 8.0d1e1
Postscript name: YuGo-Medium
Preferred Family name: YuGothic
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ミディアム
Full font name: 游ゴシック体ミディアム
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Gothic Bold.otf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Bold
Unique font identifier: YuGothic Bold; 8.0d1e1; 2013-02-28
Full font name: YuGothic Bold
Version string: Version 8.0d1e1
Postscript name: YuGo-Bold
Preferred Family name: YuGothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ボールド
Full font name: 游ゴシック体ボールド
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ボールド

# ファイル名 #
Yu Mincho Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Medium
Unique font identifier: 1.000;JY ;YuMin-Medium
Full font name: YuMincho Medium
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Medium
Preferred Family name: YuMincho
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: ミディアム
Full font name: 游明朝体ミディアム
Preferred Family name: 游明朝体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Mincho Demibold.otf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Demibold
Unique font identifier: 1.000;JY ;YuMin-Demibold
Full font name: YuMincho Demibold
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Demibold
Preferred Family name: YuMincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: デミボールド
Full font name: 游明朝体デミボールド
Preferred Family name: 游明朝体
Preferred Subfamily name: デミボールド

2013年1月31日木曜日

今更ながらSass、Compass、Sublime Text 2をWindowsに導入してみている

ご無沙汰しております。寒中お見舞い申し上げます。

さて、最近は変数が使えるCSS管理コードと呼べば良いんでしょうか、そんな感じの言語が結構前からあります。

SassとかSCSSとかLESSってなんだ

Sass
SCSS
LESS

「LESS」や「Sass」のようなCSS拡張メタ言語は、960.gsなどのフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。

CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。

一部改変：via

つまり、ある程度規模のあるウェブサイトならCSS全体で共通する値とかルールとかがあり、それらをCSSを拡張することにより使えるようにしたメタ言語、ということになりますね。まさに紙のデザインで言うところの指定紙になるような設計書を書くイメージでしょうか。

導入検討の意図

こういったツールは前から気になってはいたものの、Dreamweaverの保存即アップロードや、サイトを管理するGUI、差分を撮ってファイルをアップロードする機能、DIFFツールと連携できるところなどにかなり便利さを感じてしまっており、オーサリングツールを変える気にはなれませんでした。

ですが最近はスマートフォン対応、複数のDPIへの対応、MediaQueriesの対応などが必須となり、ページ単価は上げられないのに作業量は倍々で増えていくという地獄状態になっているので、作業量緩和のためのツールとして、覚えてみようかな、と言う次第です。

目標

Windows7-64bitで、オーサリングツール(Dreamweaverの代わり)を入れ、そこでSCSSをビルドすると自動的にFTPサーバーへアップロードされる様なもの。

障壁

今回障壁になったのは下記のようなこと。

そもそもSublime Text(オーサリングツール)を使ったことがない

なのでショートカットキーとかパッケージとかわからない
何ができるのかもわからない

当然SassもLESSもSCSSも使ったことがない

どう書いて良いのかわからない

オーサリングツールと拡張CSSのコンパイラの連携とかCompassとかよくわからない

概念について

SassとSCSSって？

Sassには二つの構文があります。一つ目は、SCSS（Sassy CSS）として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。
二つ目は古い構文で、インデント構文（単に“Sass”とも言われます）として知られているもので、CSSを書くのに、より簡潔な方法を提供します。この構文では、セレクタのネストを表すのに、カッコよりもインデントを、プロパティを区切るのに、セミコロンよりも改行を使います。一部の人は、SCSSよりも、この構文が読みやすく、また、速く書けることに気づきました。インデント構文は、SCSSと同じ機能を持っていましたが、やや構文が異なっていました。この違いは、インデント構文のリファレンスで説明しています。インデント構文で書かれたファイルは、.sassの拡張子を持ちます。
つまり、SCSSはSassとは互換のない上位バージョンのSass、と思っておけばよいようです。

どうやって動かすの？

SCSSはrubyで動く。なのでOSにrubyをインストールする必要がある。
コマンドラインでコンパイルすることが前提。vimとか使ってる人向けだった。
Sublime Textをオーサリングツールとして、必要なパッケージをインストールすることでオーサリングツール上で使えるようになる。
基本的には、SCSSを書く、コンパイル(ビルド)する、CSSをアップロードする、と言う流れ。
自動でアップロードとか、自動でビルドとかはSublime Textにパッケージを入れることで解決する。

手順

rubyをインストール

Ruby Installer for Windows

gemのアップデート

gem update --system

Sassのインストール

gem install sass

Compassのインストール

gem install compass

Sublime Text 2のインストール

http://www.sublimetext.com/2

Sublime Text 2の設定

一番参考になったページはこちら
その次に参考になったページはこちら
詳細は~~二学期です~~こちら

パッケージのインストール

SCSS
SCSS Snippets
Compass
そのほかHTML5やCSSを入れておくと吉。

テーマのインストール
Projectの作成

ProjectファイルはProjectのフォルダのルートに置いておく？

マルチバイトを含むファイルパスにProjectファイルがあるとCompassが動かない！！

さらにFTPで同期できるように設定

詳細はこちら

保存時にビルドするパッケージをインストール

SublimeOnSaveBuild

躓いたポイント

基本的にProjectのディレクトリもProjectファイルを保存する場所も、マルチバイトを含むパスに置かないこと。
Projectファイルを保存しないとCompassが使えない。
SASS Buildはなくても動く。最低限は上記3つのパッケージ。
config.rbが適用されないときはST2を再起動してビルドして保存すると適用される？

残りの課題

SCSSを使いこなす