[CSS]noneの読み方は「ノン」じゃないよ!

最近勉強会に行きまくっている@cappeeです。

CSSで「なし」という指定をする時に使う”none”ですが、読み方は「ノン」じゃないです。

声を大にして言いたい。

ナン」です!!!

カレーによく合うやつって覚えれば早いです。

ちなみに”Dreamweaver”は「ドリームウィーバー」です。

それだけです。

Pocket
article clipper [CSS]noneの読み方は「ノン」じゃないよ!

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との違い

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の間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

こんにちは、@cappeeです。

最近はIEのアップデートによりCSS3で追加された疑似クラスも多用するようになってきたので、特にリスト系でよく使うものをいくつかメモしておきたいと思います。

間違いやすい疑似クラスや疑似要素に関してはこちらをご覧ください。
CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

要素の最初に適用する疑似クラス :first-child

:first-child は、ある要素内で最初に書かれている子要素にスタイルが適用されます。
ここでご紹介する疑似クラスの中では唯一CSS2から定義されていて、下記でご紹介する :nth-child(1) と同じ指定になります。

よくある使い方としては、お知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

border02 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
padding: 10px 5px;
border-top:1px solid #CCC;
}
li:first-child{
border-top:none;
}

border04 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
border-left:1px solid #CCC;
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li:first-child{
border-left:none;
}

:first-child の間違いやすい記述に注意

例えばdivの中に見出しタグとpタグがあった場合、p:first-child と記述して最初のpタグにスタイルを適用したくても、最初の要素はhタグという認識になってしまいます。親要素の中の最初のセレクタはhタグだからです。

<div>
<h2>見出し</h2>
<p>スタイルを適用したいテキスト</p>
<p>スタイルを適用したくないテキスト</p>
</div>

この場合は下記でもご紹介する :nth-child(2) を使うか、兄弟関係にあるp要素の最初に適用する first-of-type か、疑似クラスではなく h2 + p のように隣接セレクタなどで対応する必要があります。

要素の最後に適用する疑似クラス :last-child

:last-child は、ある要素内で最後に書かれている子要素にスタイルが適用されます。
CSS3から定義されていて、下記でご紹介する :nth-last-child(1) と同じ指定になります。

よくある使い方としては、上記の :first-child と同じようにお知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

要素を繰り返し適用する疑似クラス :nth-child

奇数の要素に適用する場合

奇数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(odd){
background-color: #EEE;
}
li:nth-child(2n+1) {
background-color: #EEE;
}

偶数の要素に適用する場合

偶数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(even){
background-color: #EEE;
}
li:nth-child(2n+2) {
background-color: #EEE;
}

数を指定して繰り返し適用する場合

例えば3つおきに要素を指定する場合は、ユーザー一覧などでよく見るレイアウトにとても便利です。

nth child CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

.leftBox {
width: 200px;
padding: 10px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.leftBox:nth-child(3n+3) {
border-right:none;
}

nth-child(3n+3)とは、3つおきの3番目(最後)にスタイルを適用します。
nth-child(3n+2)は3つおきの2番目(真ん中)、nth-child(3n+1)は3つおきの1番目(最初)です。

最初の要素数個に適用する場合

最初の要素をいくつか指定して適用することもできます。下記では最初の3つを指定した場合です。

li:nth-child(-n+3){
background-color: #EEE;
}

親要素の最後から数える場合

nth-last-child(n) と記述すれば親要素の最後から数えた場合のスタイルが適用できます。nには数字を入れてください。

IEでの対応状況

上記で記述した疑似クラスは基本的にIE8以降からの対応となります。

対応策としては以前ご紹介したように IE9.js を追加すればIE7では問題なく表示されますのでぜひお試しください。

HTML5でコーディングする時に入れる魔法のJS【完全版】

Pocket
article clipper CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス