Sass導入と使用方法

Sass(サス)とは
Bootstrap4からLessを外しSassが正式採用されました。
これからはSassの時代?
Sassは「Syntactically Awesome StyleSheet」の略で、まあすごいスタイルシートという感じ。
入れ子や変数が使える素敵仕様。
これまで、CSSは記述が単純でわかりやすかった代わりに、大規模サイトになると記述量が大量になり管理が大変でした。
私はプロジェクトなんかでエクセルでCSSのセレクタとプロパティをレイアウトごとに管理したりしていましたが、それでも探すのが大変。
Firebugと管理表でサルベージの日々という感じでした。

Sassは、現状でWebページで直接読み込まれるわけではないので、結局CSSにコンパイルするのですが、Sassでの記述はCSSでの記述量をかなり削減してくれる可能性を秘めています。
つまり、小規模や通常のサイトであればSassだけを見ればある程度CSSの内容が理解できるということです。
なぜそんな必要があるかというと、CSSは読んで字のごとくカスケード(連なった)する言語のため、優先順位が存在します。
CSSの優先性については割愛しますが、この優先性を理解しないままでどんどんセレクタを追加していっても思う通りにCSSを記述していることにはならないのです。
つまり、Sassは記述方法が構造化されているため、Sassでの記述を確認すればある程度CSSの優先性も確認できながら記述が進められるのです。
もちろん、そのためにはSassの構造をしっかり理解する必要性はありますが。

Sassの導入方法

SassはRubyベースで稼働するCSSプリプロセッサのため、まずはRubyのインストールから必要になります。
Macの場合はRubyは初期導入されているのですが、Windowsの場合はインストールから必要になります。
http://rubyinstaller.org/
上記URLよりインストーラをダウンロードして実行。
通常はCドライブ直下にフォルダができるはずです。私の場合はCドライブ直下にRuby23-x64というフォルダができていました。
コマンドプロンプトを起動し、Rubyフォルダ内のbinフォルダに移動します。
以下のコマンドを入力し、Sassをインストールします。

と入力するとインストールが開始され、導入完了します。

Sassのコンパイル(CSS化)方法

あとはSCSSファイルを書き、コンパイルすればCSSに変換されるという手順です。
以下のコマンドでSCSSをCSSにコンパイルできます。

ただ、変更があるたびにコンパイルというのは非常に手間なので自動化することもできます。

またスタイルシートの記述スタイルを4種類から指定することもできます。

  • nested : インデントがネストされた形式
  • expanded : 手書きのCSSに近い形式
  • compact : セレクタごとに一行にしたコンパクトな形式
  • compressed : すべてを一行でまとめた形式

記述方法は以下のような感じになります。
sass style.scss:style.css –style expanded

Sassの特徴1

変数

はっきり言って、もうデザイナー領域は超えている感じはしますが、覚えて使えるようになるとかなり楽です。。
Sassの変数はPHPなどと同じで$の後に定義します。
例)カラーの16進数情報はいちいち覚えていません。一度分かりやすい変数に定義し使いまわすと楽ちんです。

Sassの特徴2

ネスト(入れ子)

CSSではできなかった入れ子。これで記述量は激減する可能性を秘めています。
ネストには2種類あり、セレクタのネストとプロパティのネームスペースのネストがあります。
セレクタのネスト
Scssでの記述

コンパイル後のCSS

ネームスペースのネスト

Scssでの記述

コンパイル後のCSS

Sassの特徴3

mixinとinclude

分かりやすくいうと、変数のパッケージ版。
という説明をしているサイトが多いのですが、本家のサイトではmixinはベンダープレフィックス部分で引数と合わせて活用するのが良い使い方となっています。
以下本家のソース

Sassの特徴4

extend

CSSのプロパティを別のセレクタに共有する。こっちのほうが変数パッケージっぽいですね。
私が見たサイトでは、なぜか紹介されていない。というのもSassの正式採用を決めたbootstrapでもextendはほとんど(まったく?)使われていません。
extendとmixinがどうやら今は混同してしまっているようです。
今後使い方仕様がまた変わる可能性大ですね。
ひょっとすると次期バージョンでは廃止でmixinの一本化がありえそう。。
一応使い方は以下

Scssでの記述

コンパイル後のCSS

Sassの特徴5

演算子

プログラムっぽいけど、あれば便利なのか?使用状況がまだ思い浮かびませんので便利な方法があれば後日紹介します。

Sassの特徴6

制御構文

頭に「@」を付けた命令文が使えます。
こちらも便利な使用状況が思い浮かび次第ということで。

@if
@for
@each
@while

今回は以上です。

25 7月 2017

 

.htaccessによる処理

.htaccessはApacheが利用されているサーバでディレクトリ単位でサーバの設定を行う仕組みです。
通常、Apacheの設定はhttpd.confという設定ファイルで制御されていますが、ホスティング等でサーバを間借りしている時に全体とは違う設定に変えたい時などに利用します。
私が理解している(よく使っていた).htaccessの主な機能は以下の3つです。

  1. 基本(ベーシック)認証
  2. リダイレクト
  3. 拡張子変更

基本(ベーシック)認証は、.htaccessファイルを設置したディレクトリにアクセスしたときにユーザーIDとパスワードを求められる認証画面を表示します。
通常はパスワードを設定したファイル(.htpassword等)とセットで設置しますが、パスワードを設定したファイルはブラウザでは閲覧できない領域に設置しないとセキュリティレベルがかなり低下してしまいます。

リダイレクトは、.htaccessを設置したディレクトリ、もしくはそのディレクトリ内の特定のファイルにアクセスしたときに、指定したディレクトリやファイルを読みだす仕組みです。
利用シーンで多いのは、新しいサイトを作ったが、Googleなどの検索エンジンで古いサイト情報がキャッシュされており、消してしまうと「NotFound」になってしまうので、しばらくはこのリダイレクトを使って対応するなどです。
私の使用例は、あるサイトのあるコンテンツのみPHP+DBで構築したとき、今までそのコンテンツのトップファイルはindex.htmlでしたがシステム化することでindex.phpに変わりました。
そこで、index.htmlにアクセスしたときにindex.phpにリダイレクトするように設定しました。
このコンテンツページへのリンクが少ない場合は、リンクの書き換えでも対応できたのですが、かなりのページにリンクが貼られていることと、検索エンジンのキャッシュ対応にもなるため利用しました。
実際の記述方法は以下のようになります。

この.htaccessファイルをhttp://aaaaaaa.jp/bbbbbb/に設置します。

最後に拡張子変更ですが、この表現が正しいのかは疑問ですが、具体的に言うと.htmlファイルで.phpと同じ動作がされるように変更することです。
大規模なサイトでヘッダー、サイドメニュー、フッター、コンテンツエリアというようなページ構成になっていたと過程します。
このとき、ヘッダーを変更するには静的なHTMLファイルの場合、全ページにまたがっているので全ページの変更が必要になります。
もちろん、作業としては一括置換処理で対応できるものの、確認作業は必要になるため結構な手間です。
そこで、PHPのincludeの仕組みを使えば、全ページ共通の部品を作ることができ、部品の変更のみで対応が可能になります。
制作段階でその設計思想のもとに設計されていればいいのですが、往々にしてそのようなことはなく、後で効率化のために対応するケースが多いはずです。
この時、問題は関連するファイル全てが.phpになってしまうことです。
そこで、.htmlのままでPHPの機能が使えるように.htaccessで設定します。

まあ、しかしわざわざPHP化してinclude処理しなくてもpug(旧JADE)などのテンプレートエンジンを使えばまったく問題ないですね。

以上.htaccessによる処理でした。

24 7月 2017

 

emmetでのHTMLコーディング

昔はZen-codingという名称だった、HTMLやCSSコーディング補助ツールです。
Dreamweaverや各種テキストエディタのプラグインとして利用できます。

特長としては、省略記法での記述と、ショートカットキーによる生成です。
タグを省略記述し、終タグの記述も不要なためかなり効率化できます。

■ネストによる記述
>を入力することでネストになります。

記述例

HTML

■同列
タグとタグを+でつなぐことで同列記述になります。

記述例

HTML

■上に戻る
1つ上に戻るタグの次に^を記述

記述例

HTML

■繰り返し
繰り返すタグの後ろに*と繰り返し回数を入力

記述例1

HTML

記述例2

HTML

■連番表示
$で連番表示ができる$の数が桁数になる。

記述例

HTML

■属性割当
タグ内の属性を記述する場合に[]を利用する。

記述例

HTML

■文字挿入
文字を挿入するタグの後ろに{}で囲んで記述

記述例

HTML

18 7月 2017

 

Bootstrap4のグリッドシステム

Bootstrapではグリッドシステムというレイアウト方法を採用しています。
横列が12列のエクセルの画面を思い浮かべていただければわかりやすいと思います。
ホームページなので、行はコンテンツ量によりことなります。

エクセルは横方向を列といい、縦方向を行といいますが、Bootstrapでは英語表記なので、横方向はcol(カラムの略)、縦方向はrowとなります。

row→colの順にしているすので、テーブルレイアウトともそっくりです。

パソコン用のホームページを作るだけなら、このグリッドシステムは超初心者向けの仕組みで、ここまでは浸透しなっかったのですが、Bootstrapのもう一つの優れた点はこのグリッドシステムを使いレスポンシブ対応を行ったことです。
つまりデバイス(ホームページを閲覧する機器)の画面サイズに合わせてグリッドを使い分ける仕組みを取り入れたのです。

基本は下図のように、12カラムに分類されたグリッドになります。

グリッド間の余白については、左右にそれぞれ15pxのpaddingを設定しています。上下間の余白設定はありません。
このため、一番右と左はそれぞれ15px、グリッド間は30pxの余白が設定されています。

実際の使い方としては下図のように、左サイドバーを使うホームページの場合は、左をcol-4、右(メインエリア)をcol-8などと設定します。

では、このグリッドシステムをレスポンシブに対応する方法です。
レスポンシブ対応の場合かならずブレークポイントと呼ばれるコンテンツ表示切替サイズを設定します。
Bootstrapの場合、このブレークポイントがあらかじめ設定されています。

xs(エクストラスモール):576px未満【スマホ用】
sm(スモール):576px以上【ファブレット用】
md(ミドル):768px以上【タブレット用】
lg(ラージ):992px以上【ノートPC用】
xl(エクストララージ):1200px以上【デスクトップPC用】

上記の英語2文字をclass名に設定することで、それぞれのグリッドシステムを設定できる仕組みです。
例えば、スマートフォンでは12カラム全て使い、タブレットでは6カラムが2つ横並びにする場合は以下のような記述になります。

●スマートフォンのグリッドイメージ

●タブレットのグリッドイメージ

この場合、スマートフォンでは1つのrowの中で12カラムを超えてしまっているので、自動的に行が増えるようになります。

14 7月 2017

 

Bootstrap4概要

知らない人も多い??かもしれないので、まずは概要説明から。
BootstrapはTwitter社の開発したグリッドシステムを採用したCSSフレームワーク。
現在最新バージョンが4となっている。

グリッドシステムとは、画面を12に分割し、そのうち利用する横列(カラム)を数値指定する方式。
分かりやすく言うと、行が無限にあって、列が12列のエクセルを想像してもらえばいい。

グリッドシステムについては今後詳しく説明するとして、今回は概要なのでその他の特筆すべき点をいくつか。

■機能面
・グリッドシステム(float)
・グリッドシステム(flexbox)
・Sass

グリッドシステムはfloatによる従来のレイアウト方法とCSS3から採用されたflexboxを利用する方法がある。
IE8、9などにも対応させたいならfloatでのレイアウトになる。
記述方法はあまり変わらないので、floatでも問題ないが、要素量による浮遊化があるので、clearは必須となる。

SassはCSSプリプロセッサーと呼ばれるもので、CSSを構造化して記述できるもの。
具体的には、ネストや制御構文が利用できる。
もちろんSassのままではHTMLは理解できないので、最終的にはコンパイルを行いCSS化を行う。

■メリット
Twitter社が多分これでもか!と言わんばかりにデバックをしてくれている。
レスポンシブ化が簡単に短時間に実装できる

■デメリット
カラムレイアウトをdiv要素で行うため、divタグまみれになる。
独自CSSのクラス、ID名とbootstrapで利用しているものとの競合チェック。

急ぎのレスポンシブ案件で、多少ソースが乱れてもと言うときには最適かもしれません。
最近そういう案件が多いので、多様してしまっている。。

14 7月 2017