[Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

残暑お見舞い申し上げます、@cappeeです。

おひさしブリーフ。

さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。

実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。

そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。(大げさ)

[最新版]mixin集の最新版を公開しているのでこちらもご覧ください!
[Sass]泣くほど早い…今すぐ使える便利なmixin集

記述はSCSSです。

サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。

Compass Home Compass Documentation 300x241 [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

最初の記述

文字コード

まずはSass(SCSS)ファイルの最初に文字コードを指定します。

@charset "utf-8";

Compass

Compassを使う場合は下記の記述で呼び出します。Compassを使うには別途インストールが必要になりますので詳しくは「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」をご覧ください。

@import "compass";

IE9でのグラデーション表示

IE9でグラデーションを表示させるためにSVGを利用します。IE9はSVGの表示には対応しているので、background-imageをincludeした時に、自動的にSVGを出力してくれる下記の記述をしておくととても便利です。
こちらの記事で詳しく書かれています。「IE9でも複雑なグラデーションを利用する
ただ、IE9での見た目より読み込みスピード重視だという場合は、指定しない方がいいかと思います。

$experimental-support-for-svg: true;

mixin

グラデーション

フラットデザインが話題ではありますが、実際にはグラデーションもよく使用しますので、その記述を簡単にするmixinです。
明るい色から暗い色へ上下に変化するグラデはよく使うと思います。
その際グラデの明るい色と暗い色の2つを指定するのは面倒なので、暗い色の1色だけを()内で指定して、明るい色はlightenで指定します。
指定した色をどのくらい明るくするか、パーセントで記述すれば1色だけの指定で済むのでとても便利です。
逆にdarkenを使用して明るい色をどのくらい暗くするかを指定するのでもOKです。
一番最初にbackground-colorを指定しているのはグラデが使えないIE用の指定になります。

@mixin gradient-top-lighten($color:#E8E8E8, $lighten:7%){
background-color: $color;
@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

.selecta {
@include gradient-top-lighten(#EEE, 3%);
}

テキストシャドウ

ボタンなど白文字には黒を透過したシャドウをかけていたので、デフォルトの指定をこのmixinに変更しました。
黒文字に白のシャドウを入れる場合は、includeで@include text-shadow($white, 1);を指定すればOKです。

@mixin text-shadow($color:#000, $op:.4){
text-shadow: 0 1px 0 rgba($color, $op);
}

.selecta {
@include text-shadow;
}

ボタンの基本デザイン

ボタンはページやコンテンツによって色やサイズは変更すると思いますが、基本のデザインは一緒なので、一緒の部分はmixinで指定すると便利です。
下記は一例なのでサイトのデザインに合わせて変更してください。

@mixin btn-base{
@include border-radius(3);
@include box-sizing(border-box);
font-weight: bold;
text-decoration: none;
text-align: center;
width: 126px;
line-height: 25px;
}

.selecta {
@include btn-base;
}

フォントサイズ

今まで相対指定の%やemを使用していましたが、親要素を継承しないCSS3のrem指定の方が便利なのでremを使ったフォントサイズを指定するためのmixinです。
こちらの記事に詳しく書かれています。「CSS3の新単位remで、文字サイズの指定を分かりやすく
ただ、IE8以下では使用できないので対応ブラウザ次第ではpx指定も記述する必要があります。

@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}

.selecta {
@include font-size(14);
}

ポジション

結構positionを使うのでmixinを用意してみました。そこそこ便利だと思います。

@mixin abs-top-left ($top: 0, $left: 0) {
position: absolute;
top: $top + px;
left: $left + px;
}
@mixin abs-top-right ($top: 0, $right: 0) {
position: absolute;
top: $top + px;
right: $right + px;
}

.selecta {
@include abs-top-right(4, 10);
}

画像置換

私はLIR(Leahy/Langridge Image Replacement[リーフィー/ラングリッジ式画像置換])という画像置換の方法を採用しているので、CompassのCSSスプライトでbackgroundは自動で読み込めますが、それ以外のプロパティの指定が面倒だったのでこのmixinを作りました。
CompassのCSSスプライトの指定に関しては下で説明していますが、それが記述されている前提のmixinになりますのでご注意ください。

また、下記はLIRになりますので、それぞれが採用している画像置換の方法に変更して使用してみてください。
こちらで紹介されているtext-indent: 100%;を使う方法もオススメです。「画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

@mixin bg-lir($name) {
width: image-width(sprite-file($icons, $name));
padding-top: image-height(sprite-file($icons, $name));
line-height: image-height(sprite-file($icons, $name));
height: 0;
overflow: hidden;
}

.selecta {
@include bg-lir(file-name);
}

角丸

かなり几帳面な人向けのmixinになります。。
border-radiusはmixinで指定しなくてもincludeできるのですが、数字を指定する時に(3px)などとpxを指定する必要があったので()内でpxを省いて数字だけ入力できるようなmixinもあるとちょっとだけ効率的になるかな?
※50%というようなパーセント指定をしたい場合はこのmixinを使わないでください!

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

.selecta {
@include border-radius(3);
}

変数

主要な色

変数には主にカラーなどを指定すると便利です。

$black:#333;
$white:#FFF;
$gray:#666;
$green:#4C9020;
$blue:#0467AF;
$pink:#DF5291;
$yellow:#E1930F;
$orange:#D5530A;

.selecta {
color: $gray;
}

明度の指定

明度の異なるカラーを使う場合も多いので、lightendarkenを利用するのが便利です。

$green-dark:darken(#4C9020, 6%);
$blue-dark:darken(#0467AF, 6%);
$pink-dark:darken(#DF5291, 6%);
$yellow-dark:darken(#E47301, 6%);
$orange-dark:darken(#D5530A, 6%);

CSSスプライト

自動インポート

CSSスプライトにしたい複数の画像を特定のフォルダに書き出し、下記のように記述すればCSSスプライト用の画像やbackground,background-positionを自動で出力してくれるのでとてつもなく便利です。
記述方法などはこちらに詳しく書かれています。必読です。「CSSの常識が変わる!「Compass」、基礎から応用まで!

$icons-spacing: 50px;
@import "icons/*.png";
@include all-icons-sprites;

手動で指定

上記の自動インポートは非常に便利ですが、アイコンなどの場合background-positionを微調整したりpaddingをプラスで指定したいケースが実際はほとんどです。
下記のsprite-mapはbackgroundのみ出力してくれて、background-positionなどそれ以外のプロパティは手動で指定するという指定です。
このへんが歯がゆいですよね。便利すぎるゆえにCompassへの要求は増えワガママになっている自分…

$icons: sprite-map("icons/*.png", $spacing:50px);

手動での指定ですが、paddingは属性セレクタで指定すると便利です。(IE7以上)
background-positionですが、テキストのフォントサイズによってアイコンの縦位置を微調整したい時など、デフォルトの指定からどのくらいpxを移動したいかを演算で調整できるので便利です。
スプライト画像が変更したとしてもこれで無問題!

[class^="icons"]{
padding-left:15px;
}
.icons-arrow {
background-position: 0 nth(sprite-position($icons, arrow), 2) + 3;
}

私は今回のサイト制作で大蛇区をして自動インポートと手動の両方を指定しました。
余計なコードは増えますが作業効率は多少上がるのでどっちをとるかですね。

また、今回ご紹介したmixin、変数などの指定は上の方に記述しないと適用されないのでご注意ください。

いかがでしたか?

コーディングはできる限り効率化して勉強の時間を増やしたいものです!

こちらの記事も参考にさせていただきましたのでご紹介します。
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

Sassの本がついにでました!かなりオススメです。

Pocket
article clipper [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

本日が決算日の@cappeeです。

Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説!

ついにたどり着いてしまったかもしれません。

今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。)

せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。

導入のキッカケ

話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。

私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。

Sassの使用にはRubyをパソコンにインストールする必要があったので、まずはそういった煩わしいことをせずに導入できる「Scout」というGUIツールを使ってSassをCSSに変換するコンパイルをしてみます。

ほうほうこれは思いのほか簡単に導入できたしいいぞと。

しかしDreamweaverでコーディングしようと思った時に、SCSSで書いてもアップロードするのはCSSなわけなのでいちいちCSSを選択してPUTするのは結構面倒だな。

ということでSCSSファイルを保存したらCSSが自動でアップロードできないか調べてみると、話題のSublime Text 2はできちゃうんですね。さすが。

DreamweaverのコードカラーもSublime Text 2と同じにしていた私なのでこれは「時が来た」と思ったわけです。(カラーコードかえるくらいならもっと早く乗り換えろよってね)

Sass(サス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

CSSを生成するためのメタ言語で、シンプルな入れ子構造、Mixinsという複数定義が可能、さらに変数や演算などを使えるので、Sass(SCSS)からCSSを生成することで効率よくコーディングすることができます。

SassにはSASSとSCSS、二種類の記述方法があって一般的にはSCSSが使われています。

SCSSはCSSと記述が似ていますが、SASSは{}や;(セミコロン)をつけないインデントを使った階層になっています。一見シンプルそうですが、CSSへの慣れと見やすさなどからSCSSの方が人気のようです。

こちらに参考記事がまとまっています。
初めてSassとCompassを使った際に参考にした記事まとめ

Compass(コンパス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Sassを使ったフレームワークで、接頭辞(ベンダープレフィックスの)ついたCSS3のプロパティなどを簡単に挿入することができます。
CSS Spriteも書き出してくれるので、使うこなせばかなりのスピードアップになりそうです。

SassとCompassについてはこちらに詳しく書かれています。
CSSの常識が変わる!「Compass」、基礎から応用まで!

Emmet(エメット)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Zen-Codingの次期バージョンの名前です。Emmetにかわると知った時はわりと衝撃でした。
名前が変わるくらい便利になったところは、新しく追加された「Fuzzy search」機能ではないでしょうか。
これにより決まった記述ではなく、クラス名からなんとなく推測される文字で展開しても理解してくれるようになったのです。

Emmetの記述方法や新しい機能などはこちらに詳しく書かれています。
CSSの記述を高速化する、Emmet (Zen-Coding)

Sublime Text 2(サブライムテキスト2)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

非常に高性能なテキストエディタです。テキストエディタなのでDreamweaverのデザインビューを活用してコーディングしている人はちょっとハードルが高いかもしれません。
無償でダウンロードできるので、検討するのにとことん使いたおしてから購入することができるのも魅力の一つです。

こ~いしちゃったんだ~♪
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

Sass+Compassをとりあえず簡単に導入してみたい方は

Scout

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

何も考えずにScoutというSass(SCSS)からCSSをコンパイルできるGUIツールをインストールすればすぐに使うことができます。
通常コマンドなどを使うのですが、GUI(グラフィカルユーザインタフェース)だとデザイナーでも直感的に操作できるのでとっつきやすいです。
ただし、Scoutはディレクトリに日本語があると動作しないなどもあるようなので注意してください。

こちらに設定方法などが書かれていますので参考にしてみてください。
【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)

Koala

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

最近リリースされたばかりのデザインがイケてる上記と同じコンパイラのGUIツールです。
Rubyをインストールする一手間はありますが、とても簡単なのでレッツトライ。
ディレクトリに日本語が使えるなどScoutより柔軟で、インターフェース的にも使いやすいと思います。

設定方法はこちらをご覧ください。
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。

最強タッグを導入してみよう!

Sublime Text 2 + Sass + Compassのインストール手順

こちらにわかりやすく記述されていますのでインストール手順を参考にしてみてください。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

プロジェクトの保存ですが、「Project > Save Project As…」で選ぶ場所はconfig.rbが設置されたルートディレクトリを設定しないとうまくコンパイルできませんでした。
また、プロジェクトのルートディレクトリに日本語(全角)があるとコンパイル出来ないのでご注意ください。

エラーがでた時の対処法

もしSCSSをビルドした時にエラーがでたら、エンコードの問題かもしれません。

ConvertToUTF8」というパッケージをインストールしてください。Sublime Text 2はデフォルトだとUTF-8にしか対応してませんので、ShiftJIS、EUC-JPにも対応できるようになります。
また、日本語のインライン入力に対応させる「IMESupport」もインストールしておきましょう。

下記の「その1」と「その3」を参考にしてください。
「Sublime Text 2」(Windows版)でまずやる2つのこと

それでも、もし「Decode error – output not utf-8」というエラーが表示されたら、「Preferences > Browse Packages…」を選択し、「Compass」フォルダの「Compass.sublime-build」を開いて下記を追加してください。(最後の行に追加する場合は「,」は必要ありません)

"encoding": "cp932",

初期設定

Sublime Text 2の初期設定などはこちらが参考になります。
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ

Zen-Cordingのパッケージは、現在「Emmet」という名前に変更されてますので、新しい名前で検索してください。

ちなみに私はテーマを「Phoenix」にしています!

プロジェクト管理など便利な機能についてはこちら。
Sublime Text 2とEmmetで制作効率アップ!

Windows版のショートカットキーはこちらが参考になります。
Sublime Text 2のショートカットキーで便利なやつ何個か(Windows版)

メニューを日本語化

すべて英語表記なので日本語にしたいという方は下記ブログのコメント欄に最新バージョンが配布されています。
【Windowsアプリケーション】Sublime Text 2 メニュー日本語化

FTPの設定でCSSファイルを自動アップロード

私がDreamweaverからSublime Text 2に移行した一番の理由です。
CSSファイルだけでなく、すべてのファイルが保存と同時にアップロードできるのでとても楽です。
ただし本番環境の場合は手軽さが仇となる時もあると思うので考えてから設定する必要がありますね。

私と同じ壁にぶちあたった方がインストール方法など記事を書いています。
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

これで最強のタッグを手に入れることができました!

Sassの本がでましたよー!読みましたがかなりオススメです!

Pocket
article clipper Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

こんにちは、@cappeeです。

サイトを3カラムで作る場合は通常floatを使いますよね?

今回は意外と知らないCSS?かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。

display:box とは

displaybox1 300x151 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。

もうfloatのclearになんか悩まされることもありません。

display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。

プレフィックスを入れてもたった2行でできてしまうのです。

Flexible Box(フレキシブルボックス)とも言います。

display:box の記述方法

#contents の中に横並びにしたい要素を入れたとします。
下記の2行を追加すればもう横並びになっているはずです。ほんと一瞬ですね。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}

box-ordinal-group で順序変更

displaybox2 300x68 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-ordinal-group を指定すればHTMLの記述順に関係なく表示を入れ替えることができます。
下記のように記述すればHTML上#innerA→B→Cの順でも、表示はC→A→Bの順番になります。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 2; /* Firefox用 */
}
#innerB{
-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 3; /* Firefox用 */
}
#innerC{
-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 1; /* Firefox用 */
}

box-flex で可変に

displaybox3 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-flex を指定すれば display:box で指定した横幅に合わせて伸縮してくれます。
display:boxを指定した要素にwidthを記述しないとFirefoxで横幅一杯に広がってくれませんのでご注意ください。

#contents{
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
width: 350px;
}
#innerB{
-webkit-box-flex: 1; /* Safari,Google Chrome用 */
-moz-box-flex: 1; /* Firefox用 */
}
#innerC{
width: 350px;
}

display:box の活用

display:box は残念ながらIEでは対応していませんIE10からの対応となります。

ただし、仕様変更を繰り返しているようなのでまだPCサイトで使用するには注意が必要です。

[参考サイト]IE8から始めるテーブルレイアウト と IE10からのFlexible Box

活用方法としては、スマートフォンサイトの制作には display:box が大活躍してくれますよ。

横並びのメニューやタブの表示が一瞬でできてしまいます。

[2014.01.24]box-flexを使って可変に対応したい場合の指定に、Firefoxに関する補足を追記しました。

Pocket
article clipper [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト

スマホコーディングただいまガシガシ中の@cappeeです。

今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。

今回は、display:table-cell をご紹介します。

なかなか使えないと言った理由はIE8以降からの対応になるからです。

ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。

display:table-cell で要素が簡単に横並び

table cell [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

display:table-cell とは、要素をテーブルのように表現することができるプロパティです。
親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。

display:table-cell を指定した要素はテーブルのように高さが同じになります。

また、floatを使っていないためclearすることを考えなくてもすみます。

縦中央の指定が可能に

テーブルのセルと同じく vertical-align:middle を指定してセル内の要素を縦中央に配置することが可能です。

ul{
display:table;
}
li{
display:table-cell;
vertical-align:middle;
}

リキッドレイアウトにも最適

table cell2 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

セルに当たる要素のliの幅を固定しても、それ以外のliが可変になります。
特にスマートフォンサイトの制作では、画面を縦に見た場合と横に見た場合でリキッドレイアウトを考慮することが必要なので、とても相性が良く私も頻繁に使います。

table-layout:fixed で均等配置

table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置することができます。
display:table を指定している親要素に記述してください。横幅の指定も必要です。

ul{
display:table;
table-layout: fixed;
width:100%;
}
li{
display:table-cell;
}

テーブル系のdisplayプロパティ

  • table … テーブルの表示スタイル
  • inline-table  … インラインテーブルの表示スタイル
  • table-row-group  … <tbody>要素のような表示スタイル
  • table-header-group  … <thead>要素のような表示スタイル
  • table-footer-group …  <tfoot>要素のような表示スタイル
  • table-row … <tr>要素のスタイル
  • table-column-group … <colgroup>要素のスタイル
  • table-column … <col>要素のスタイル
  • table-cell … <th>要素及び<td>要素のスタイル
  • table-caption … <caption>要素のスタイル

display:table-cell を使うメリットまとめ

  • テーブルのように要素を簡単に横並びできる
  • 縦の中央揃えができる
  • スマートフォンサイトのような横幅が可変なリキッドレイアウトに最適
  • table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置できる

IE8以降からの対応で、IE6やIE7には対応していませんので注意が必要です。

スマホサイトでの使用例

すべてがモダンブラウザであるスマートフォンサイトでの制作には display:table-cell が大活躍です。

横幅100%のナビゲーションやタブ
table cell1 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト
画像など横幅が固定の要素とテキストなど可変の要素をリスト表示する
table cell3 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

いずれはスマホサイトだけでなく、PCサイトも色んなCSSが使えるようになるといいですよね!

[参考サイト]
CSS「display: table」と「display: table-cell」で出来ること
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!

Pocket
article clipper [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

本当は炭酸が好きな、@cappeeです。

いつまで続くかわからない、意外と知らないCSSシリーズの第2弾です。

テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis

表示する文字が多かった場合に省略したことを表す「…」はCSSだけでも表示できます。

システムだと文字数を指定して表示しますが、CSSでは幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

text-overflow の説明

text-overflow:  ellipsis;
テキストが表示領域をこえた場合に省略記号「…」を表示します。

text-overflow:  clip;
デフォルトの値で省略記号は表示しません。

text-overflow:ellipsis の記述例

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

Opera 9-10への対応はベンダープレフィックスが必要です。
text-overflowはIE6から独自仕様として実装されたものなのでIE6にも対応しています。
逆にFirefoxがやっと7から対応になったので今はほとんどのブラウザで問題なく使えるということですね。

text-overflow:ellipsis を使った表示

text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。text-overflow を使った表示です。

注意点

改行をしない white-space: nowrap; を記述しないといけないため、表示できるのは1行目のみとなり、1行目の最後に省略記号「…」がつきます。
複数行で使用したい場合はjavascriptを使うなど工夫がいるようです。
text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応

IEでのバグ[2013.9.20追記]

table要素の中で text-overflow: ellipsis を使うとIEでは正常に表示されないというバグがあるみたいです。
現時点で一番新しいバージョンIE10でも確認しました。
検索しても同じことを書いてある記事を探せなかったのでレアケースかもしれませんが一応メモ。

Pocket
article clipper [意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext overflow:ellipsis

[意外と知らないCSS]テーブルの列幅を均等にするtable-layout:fixed

去年花粉症デビューした、@cappeeです。

いつまで続くかわからない意外と知らないCSSシリーズ第1弾です。

テーブルの列幅を均等にするtable-layout:fixed

デフォルトだと自動レイアウトになっているため、セル内の文字数などによって自動的に列幅が調整されてしまいますが、table-layout:fixed を指定すると列幅を固定して均等にすることができます。

table-layout の説明

table-layout:fixed;
テーブルの列幅を固定レイアウトにして均等にします。

table-layout:  auto;
デフォルトの値です。自動レイアウトでセルの内容によって列幅が調整されます。

table-layout:fixed の記述例

table {
width: 100%;
table-layout: fixed;
}

tableセレクタには横幅の指定が必要です。

table-layout:fixed の表示

見出しあ 見出しい 見出しう
あああ いいいいい
あああああああ いいい うう

table-layout:fixed を指定すればセル内の文章量に差があっても列幅を均等に表示してくれますので、列ごとに横幅を指定する手間が省けます。デザインに合わせて活用したいですね。

 

Pocket
article clipper [意外と知らないCSS]テーブルの列幅を均等にするtable layout:fixed

効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こんにちは、@cappeeです。

HTMLでコーディングしたclassやidを毎回コピペしてCSSに貼り付けるのって面倒ですよね?

なんと!HTMLからCSSセレクタを自動生成してくれるサービスがあるんですよ。

かなり爆速でコーディングができるようになると思ったんですが結構サービスによって記述方法に差があり、最近やっと自分の書き方に合うサービスがリリースされたので、これを機にサービスのまとめと比較をしてみたいと思います。

みなさんの記述方法に適したサービスが見つかれば嬉しいです:)

すべてのサービスこちらのHTMLからCSSセレクタを自動生成しました。

<div id="contents">
<div id="main">
<p class="txt"></p>
</div>
<div id="side">
<ul>
<li class="lists"></li>
</ul>
</div>
</div>

CSS Selector Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

私が一番最初にCSSセレクタ自動生成のサービスを知ったのが「CSS Selector Generator」です。

Web業界の方なら一度は見たことがあるだろうバシャログ。を運営しているシーブレインさんがつくったサービスです。

特徴

394a2eed4073422f4a12fc740df43414 300x195 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

特徴としては下記になります。

  • 文字コードの指定ができる
  • 最初から入れておきたいセレクタを指定できる
  • 除外する要素を指定できる
  • id、class セレクタからHTMLの要素タイプ名を省略できる
  • id セレクタを複数記述しないかを選べる

一番シンプルなCSSセレクタ

「id、class セレクタからHTMLの要素タイプ名を省略」と「id セレクタを複数記述しない」にチェックして出力された一番シンプルなコードはこちらです。
個人的には基本classやid名のみで記述したかったので、こちらのサービスは残念ながら使ってませんでした;;

d38b89dfdcf8c28d8160c8a7f1db819a 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

何も省略せずにデフォルトの状態で出力すると下記のようにHTMLタグとclassやid名をすべて記述した形になります。
一番上にコメントで階層を表示してくれるのは嬉しいですね。
文字コードと最初から入れておきたいセレクタも記述されているので、HTMLをほぼコーディングした状態でがつっとセレクタ出力するにはよさげです。

a9e107460f492e0360eeb5d90b2dc6c0 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

OneClickCSS

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

2013年にリリースされたばかりの「OneClickCSS」です。

特徴

OneClickCSS 300x122 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

  • LESS/SCSS/SASS に対応
  • 子孫要素を記述するか選択できる(要素を半角スペースで区切る)
  • 子要素を記述するか選択できる(要素を「>」で区切る)
  • タグ要素を記述するか選択できる

一番シンプルなCSSセレクタ

「Simple CSS」ボタンでセレクタを生成すると「タグ要素無し」にチェックをしなくても省略された状態で出力されます。
私はこの記述方法なので今後はこちらの「OneClickCSS」サービスを愛用することでしょう!
コメントを入れてくれるのも嬉しいですね:)

OneClickCSS2 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

子孫要素を記述するCSSセレクタ

子孫要素まで記述する場合は「Childrens CSS」ボタンから生成できます。(>の子要素を記述する場合は「Child CSS」ボタンで)

OneClickCSS3 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

LESS/SCSS/SASSで記述するCSSセレクタ

これがすごいですね!なんとLESS/SCSS/SASS に対応しています。
下記は「LESS/SCSS」ボタンで生成した場合のセレクタです。

OneClickCSS4 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Primer」は海外のサービスで、出力方法などは選択できません。
HTMLタグ+class,id名 という形になります。

CSSセレクタ

Primer 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

CSS Frame Generator

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

こちらの「CSS Frame Generator」も海外のサービスで、出力方法などは選択できません。
セレクタは一行になっていて、class名にはHTMLタグがつくようです。

CSSセレクタ

Your CSS Frame XHTML to CSS Converter 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css

 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

bear css」は他のサービスとは違い、HTMLファイルをアップすることでCSSセレクタが記述されたCSSファイルをダウンロードすることができます。
一気にHTMLを書いてCSSを出力したいという方にはいいかもしれませんね。

CSSセレクタ

bare css 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

それぞれ特徴があるので自分にぴったりのCSSセレクタ自動生成サービスを見つけてくださいね。

 

Pocket
article clipper 効率化!HTMLからCSSセレクタを自動生成してくれるサービス比較

Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

東京でも桜が開花しましたね、@cappeeです。

色々と検証した結果、私も「Normalize.css」を本格導入することにしました。

勘違いしがちなのは、「Normalize.css と リセットCSS どっちがいいの?」ということではなく、この2つはまったく別物なので比較しようがないのです。

Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。

デフォルトスタイルシート

まず、Normalize.css と リセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている「デフォルトスタイルシート」です。

CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。

だたしデフォルトスタイルシートはブラウザによって差がある(特にIE6, IE7)ため、自分の思ったデザインを適用するのに逆に弊害となったりもします。

リセットCSS とは

デフォルトスタイルシートのブラウザ間の差をなくして、スタイルがゼロの状態からデザインしましょうという考え方でつくられたのが「リセットCSS」です。

私がWeb業界に入った頃は全称セレクター(*)でリセットするのが主流でした。

全称セレクター(*)でのリセット

* {
margin:0;
padding:0;
border:none;
}

その後、Eric Mayer氏が考案したリセットCSSYahoo! CSS Reset (YUI 3)で書かれた要素セレクタごとにリセットする記述が流行りだしました。

要素セレクタでのリセット

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,button,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ul,ol{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}

リセットCSSによりデザインの実装は楽になりましたが、必要なデフォルトスタイルシートまでリセットしてしまうことと、フォーム関連で一部表示がおかしくなったりと問題もありました。

例えばulやolタグのスタイルもリセットされてしまうので、矢印のアイコンなどで表現するリストの場合は効率的なのですが、いざ利用規約などで・(中黒)や数字などデフォルトのスタイルも使いたいと言う時にそれ用のcssを結局つくったりなど本末転倒な感じでした。

また、フォーム関連の不具合だと、私がでくわしたのは画像をアップロードする <input name=”" type=”file”> での表示です。このファイルタイプは細かなCSS適用ができないため、リセットCSSにあった input を input[type="text"],input[type="password"] に差し替えて対応しました。

resetcss Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

このような問題点はあったものの、リセットCSSは5年以上に渡って使われてきたわけですね。

Normalize.css とは

リセットCSSの問題を根っこから改善しようと考えられたのが「Normalize.css」です。

Normalize.css は、ブラウザ間の誤差をなくして補正(ノーマライズ)してくれるだけですので、デフォルトスタイルシートはそのまま適用されます。

Normalize.css が多く使われるようになってきた理由として、スマートフォン用のブラウザも対象であり、HTML5のエレメントなども補正してくれるというのが今の時代にあっているというのがあると思います。

また、css内にはわかりやすくコメントが記載されており、ドキュメントも用意されているので編集が容易であるのも魅力のひとつです。

Normalize.css の読み込み

Normalize.css の公式サイトで最新バージョンをダウンロードして、cssフォルダなどに格納しアップロードします。

<head>タグ内に下記のように記述して Normalize.css を読み込んでください。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">

サイト毎のスタイルを優先した方がよいので、サイト用のCSSは Normalize.css より下に記述します。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">

圧縮版がないかも探してみましたが、現時点での最新バージョン2.1.0は約2ヶ月前に更新されたばかりで少し前の2.0.1バージョンならai11さんが圧縮してくれたものがGithubにありました。
ただしこちらは完全に補正してくれる保証はないので使用は自己責任になりますが、一応紹介。
ai11 / normalize.min.css v2.0.1 MIT License

また、便利なCDNもないかなーと思い探してみましたが、googleのは2011年更新とバージョンが古く残念。アップデート希望。
normalize-css - Google Project Hosting

Normalize.css を使ったコーディングの注意点

Normalize.css を使ってコーディングをしてみて思ったことは、やはりサイトデザインに応じたリセット用のCSSも必要だということ。都度最適な記述方法をする必要があります。

各classやidに直接指定してもいいですし、デフォルトスタイルシートを使わないという場合は必要な要素にリセット用のCSSを記述するのでもいいと思います。

classやidに指定するのが一番コードがシンプルですが、コーディングする場合の注意点もあるので下記のサンプルをご覧ください。

HTML

<h1 class="headline">見出しだよ</h1>

h1の一般的なデフォルトスタイルシート

h1 {
display: block;
margin: 0.67em 0;
font-size: 2em;
font-weight: bold;
page-break-after: avoid;
}

※その他の要素のデフォルトスタイルシートは一番下の[参考サイト]をご覧ください。

classやidに下マージンを指定する場合

.headline {
font-size:116%
margin:0 0 10px;
}

デフォルトスタイルシートがmarginプロパティで指定しているため、margin-bottomで記述すると上マージンはデフォルトのスタイルが適用されてしまいます。
classやidに直接指定する場合は、ある程度デフォルトスタイルシートを頭にいれておかないといけません。スタイルが効かないと勘違いしてしまう可能性があるので注意です。

必要なタグをリセットして下マージンを指定する場合

h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
.headline {
font-size:116%
margin-bottom:10px;
}

こちらはh1タグを一度リセットしているのでmargin-bottomで記述することができます。
コードは長くなりますが、デフォルトスタイルシートを考慮した記述をする必要がないというのは大きなメリットです。

いずれにしても今主流になりつつある「Normalize.css」ですから、特徴をきちんと理解して今後うまく活用していく必要がありますね。

まとめ

  • Normalize.css と リセットCSS は別物である。
  • デフォルトスタイルシートをゼロの状態にしてデザインしましょうというのが「リセットCSS」。
  • デフォルトスタイルシートをいかしてブラウザ間の誤差だけ補正しようというのが「Normalize.css」。
  • Normalize.css を読み込んでコーディングする場合は、デフォルトスタイルシートの記述も頭に入れておかなければいけない。

[参考サイト]
[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
デフォルトスタイルシートから考える、リセットCSSの留意点

Pocket
article clipper Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

こんにちは、@cappeeです。

やってしまいました。Wordpressのテーマがアップデートしていて、うっかり更新してしまったんですよね。

そしたら編集したはずのcssやらphpファイルが全部上書きされてしまいました。当たり前ですが。。

前のファイルはローカルに保存されているのでバックアップをとってから新しいファイルをダウンロードしたけれど、新しいファイルと古いファイルのソースコードの差分を目で探すのは一苦労;;

今回のためだけに差分がわかるDiffソフトをインストールするのもイヤですし、Webでソースコードをコピペしてさくっと比較できるサービスがないかなと思って探してみたら、、ありました。

色々と比較してみた中で一番オススメのDiffサービスをご紹介します。

Diffとは

ちなみにソースコードやテキストなど2つのファイルを比較して差分を出力することをDiff(ディフ)といいます。

Difference(ディファレンス)の略だそうですよ。

オススメのDiffサービス「Mergely」

 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

Mergely

差分を確認する

使い方はとても簡単で、まず比較したいソースコードやテキストをコピーして左右に貼り付けます。

Mergely 1024x516 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

すると色別でハイライトして差分を教えてくれるのでとてもわかりやすいです。

Mergely2 300x282 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

右上の設定ボタンを押せば、色の変更もできます。

ここがすごい!マージ機能

Mergely3 300x26 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

検索ボックスのところにアイコンが並んでますが、地味にすごい「→」アイコンのマージ機能

マージとは簡単に言うと左右のソースコードをガッチャンコしてくれる機能です。とても便利ですが自動なのでかならず元ファイルは残しておいてくださいね。

あとは、左右のコードを入れ替えたり、クリアしたり、ダウンロード、アップロードすることができます。(今の時点でダウンロードとアップロードが動いてないような?)

ここがすごい!共有機能

Mergely4 300x56 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

一番上の「Save」ボタンを押して「Save for Sharing」をクリックすると、比較したファイルをURLで共有することもできます。

とても便利なDiffサービスですので、いざ!という時は思い出して使ってみてください。

Mergely

 

【13.03.27追加】
「子テーマ」をつくればWordpressのテーマをアップロードしても編集したファイルを子テーマとして残しておくことで上書きされないようにできました!
コメントいただいたDaisuke Takahashiさんありがとうございます!もっと勉強しないとですねっ

さっそく子テーマについて調べてみました。CSSだけの場合は便利ですが、注意が必要なのはfunction.phpファイルの場合は親テーマにある関数を子テーマで使用できないということ。新しく関数をつくるか、親テーマの方で関数を使わなくするなどが必要になります。その他のテンプレート用phpファイルも子テーマで使うことができますが、CSSと違ってphpファイルがまるごと上書きされてしまいますので、テーマのアップロードをした場合でもせっかく改善された箇所が反映されない可能性もあります。テンプレート用phpファイルを子テーマに入れてアップロードした場合は今回ご紹介する「Mergely」を使って念のため差分を確認しておいた方がよさそうです。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

 

Pocket
article clipper 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

こんにちは、@cappeeです。

CSSについてwebデザイナーとやり取りしたり調べものをしているとこんがらがってくる言葉、「セレクタ」「プロパティ」「疑似要素」「疑似クラス」について改めてまとめてみました。

意外と間違えて使っていることがあるかもしれませんよ。後輩からぷぷっと思われないように基本もしっかりおさらいしておきたいと思います。

CSSセレクタとは

CSSセレクタとはスタイルを適用する場所を指定するもので、クラス名やID名などもセレクタの一つになります。
下記のような例はすべてCSSセレクタです。

  • * { }
  • div { }
  • .class { }
  • #id { }
  • a:hover { }
  • li:first-child { }
  • a[href^="http"] { }

こちらも参考にしてください。
意外と知らない!?CSSセレクタ20個のおさらい

属性セレクタ

属性セレクタとはHTMLの属性を指定するセレクタです。例えば、属性には href や target などがあります。

下記のように指定すれば target 属性に _blank を含む a タグにスタイルを適用できます。別ページで開くアイコンなどをつける場合に使えますね。

a[target*="_blank"] {
background:url(/img/blank.png) no-repeat right center;
padding-right:10px;
}

属性セレクタには今回ご紹介したものを含み下記のようなものがあります。

  • foo属性の値にbarを含むE要素 … E[foo*="bar"]
  • foo属性の値がbarで始まっているE要素 … E[foo*="bar"]
  • foo属性の値がbarで終わっているE要素 … E[foo$="bar"]

CSSプロパティとは

CSSプロパティとは float やcolor などのスタイルの設定ことを言います。言い方でCSSを書くとこんな感じです。

セレクタ {
プロパティ:値;
}

去年の終わり頃少し話題になったこちらで面白くプロパティを勉強するにもいいと思います:)
一番強いCSSプロパティ決めようぜ 結果発表!

疑似クラスとは

よく使う :hover や :link も疑似クラスです。:first-child やCSS3から追加となった :last-child、nth-child も含みます。

:first-child は要素の最初を、:last-child では要素の最後にスタイルを適用することができ、リスト表示のデザインにとても便利です。

nth-child を使えば特定の順番を指定したり、繰り返しスタイルを適用することもできます。

詳しい使い方はこちらでご紹介してますのでぜひご覧ください。
CSSで要素の最初と最後、または繰り返しスタイルを適用する擬似クラス

疑似要素とは

:first-letter や :first-line、:after や :before などが疑似要素にあたります。

:first-letter は要素の1文字目だけにスタイルが適用され、:first-line は要素の1行目だけにスタイルが適用されます。
:first-letter を使用すると雑誌とかでよくみる1文字目だけ文字を大きくする、なんてことも疑似要素だけで実現可能です。

:after や :before は、要素の前後に文字や画像を追加することができる疑似要素です。
属性セレクタも使って、リンクされたaタグにアイコンを表示するCSSを書いた場合はこちらのようになります。

a[href]:before {
content : url(/img/arrow.png) ;
}

過去の記事でも疑似要素を使ったCSSについて書いていますのでぜひご覧ください。

CSSだけでリストや横並びの区切り線を実現するパターン4つ
1つの要素にCSSだけで二重ボーダーをつける3つの方法
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

疑似クラスと疑似要素の違い

疑似クラスや疑似要素の記述は、どちらもセレクタ(要素名)のあとにコロン(:)をつけます。

疑似クラスと疑似要素の違いですが、疑似クラス(:first-child や :last-child)は要素全体を選択し、疑似要素(:after や :before)は要素の一部を選択しているのが大きな違いになります。

私もよくこんがらがってしまいます。。そんな時は、下記も参考にしてみてください。
CSSの疑似要素と疑似クラスをもう一度最初から

CSSの間違いやすい言葉まとめ

上記で説明したものはCSSの記述で言葉を表してみるとわかりやすいですね。とても完結になりました。

セレクタ:疑似クラスや疑似要素 {
プロパティ:値;
}
Pocket
article clipper CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる