[意外と知らない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を使った横並びのレイアウト

スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

ちは、@cappeeです。

スマホサイトのコーディングは軽量化が命です。PC版の見出しやメニューなどで使っているアイコンを、スマホ版でもそのまま画像で使ってしまうと重くなってしまいます。

だからと言ってアイコンを使わないのも。。

という悩みはアイコンフォントで解決です!画像のアイコンをWebフォントに変換して使います。

配布されているWebアイコンは商用利用可でない場合もありますので、なら手持ちの画像を自分でWebフォントに変換してしまいましょう。

[2013.5.8追記]Unicodeを使ったWebフォントの場合、一部のAndroid端末でデフォルトで指定されているだろう絵文字が表示されてしまうことを確認しました。文字コードの調整で解決できそうですが、Android対応サイトの場合は十分ご注意ください。そして解決策あれば教えてください!

アイコンフォントを使うメリット

  • スマホサイトなどより軽量化が求められる場合に有効
  • Retina Displayに対応する倍のサイズの画像を用意する必要がない
  • HTTPリクエストがないため高速化につながる
  • gzipで圧縮も可能
  • フォントなので色、サイズの変更が容易
  • CSS3を使ってスタイルの設定ができる

Fireworksで画像をSVGにする

アイコン画像を用意

055515c9c2f03e5283f15203555a16e0 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

まずはWebフォントにしたいアイコン画像を用意します。アイコンの画像は下記の3点に注意してください。(私は2と3でつまづきました)

  1. 画像はパス化する
  2. カンバスを画像に合わせる(Ctrl+Alt+F)
  3. 背景色は透明にする

Fireworksの拡張機能「Export」をインストール

Fireworksの拡張機能に画像をSVGにしてくれる「Export」をインストールします。
Export.mxp をダウンロードして、ダブルクリックするとExtension Managerが立ち上がってインストールできます。

SVGファイルに変換

Export 300x229 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

[コマンド]→[書き出し]→[Export SVG]で画像をSVGに変換します。

複数の画像を一括でSVGにする

画像をページ毎に用意

ddcc9ca44410a85f9ccb32b074e22671 300x108 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

複数の画像を一括でSVGに変換したい場合は、画像をページ毎に準備します。(Fireworksのページ機能のことです)

ページのタイトルを指定すると、SVGのファイル名となって書き出されます。

SVGへ一括書き出し

5dbd9b921b436afc75579310e0fbd707 300x132 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

上記と同じように[コマンド]→[書き出し]→[Export SVG]を選択すると、「全ページ書き出しますか?」というアラートがでるので「はい」を押して書き出すフォルダを選択すれば、ページ毎のアイコンがSVGファイルとなります。

SVGをWebフォントに変換する

「IcoMoon」にSVGをインポート

 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

IcoMoon」というアイコンフォントの配布サイトで変換します。

IcoMoon は、自作のアイコンフォントだけでなく、3種類のフォントセットの中から好きなものを選択してパッケージ化してダウンロードすることができるという素敵なサイトです。
[参考サイト]IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス

74cded622693d6b17fc4959ca816ba0f スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

SVGをWebフォントに変換するには、左上の[Import Icons]という赤いボタンをクリックして、SVGファイルを選択(複数可)し、インポートします。

アイコンをWebフォント化

772ba39bd3a62bbe4c23b5d6e8e38c591 300x98 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

もしアイコンが選択されていない状態だったら矢印の[Select]ボタンをクリックし、Webフォントに変換したいアイコンを選びます。(選択されているとオレンジ色の枠がつきます)

次に画面下に表示されている[Font]ボタンをクリックし、アイコンをWebフォント化します。

Webフォントをダウンロード

4c165b83dabbd719bcb2a296c39d80e0 300x129 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

画面下の[Download]ボタンよりアイコンフォントをダウンロードします。

ファイルにはttfデータも含まれていますので、PCにインストールして利用する場合はアイコンの上の方に英数字を入力してキーボードと関連付けをします。

Webフォントを確認

6750a486d9c8382e51841b9f44dcc5fe 300x222 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

zipファイルを解凍すると、表示や記載例が書かれたHTMLファイルがあるのでブラウザで開いて確認してください。

アイコンフォントを使用する

ダウンロードしたHTMLファイルの通りに記載すれば大丈夫です。
必要な部分だけを抜粋してご紹介します。

HTML

<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<span aria-hidden="true" class="icon-home"></span>
<span aria-hidden="true" class="icon-balloon"></span>

書き出されたCSS

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-balloon {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-home:before {
content: "\68";
}
.icon-balloon:before {
content: "\62";
}

特にスマホサイトへの利用はメリットが大きいですので、アイコンフォントをうまく活用していきたいですね。

[参考サイト]
パス画像をFontに変換!「icoMoon」を使ってみた。
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる

Pocket
article clipper スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

[意外と知らない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で要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

CSSだけでリストや横並びの区切り線を実現するパターン4つ

こういったリスト表示はそれぞれの内容がわかりやすいようにたいがい区切り線を使ってデザインしますよね。

縦にリスト表示する区切り線の例

  • お知らせの一覧
  • コメントの一覧

横並びで使用する区切り線の例

  • メニュー一覧
  • 評価項目などの一覧

CSSだけでリスト(一覧)表示や横並びの区切り線を実現する、よく使うデザインのパターン4つをメモしておきたいと思います。どれも特定の部分だけクラスを増やしたりはせず、CSS側の指定だけで実現するCSSです。

縦のリスト表示

外側に上下ボーダーがある区切り線

border01 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ul でコーディングした場合、margin-top: -1px; を li に指定ます。これを指定しないと内側の線が太くなってしまいます。

li {
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}

左に日時があるお知らせのような一覧のコーディング方法は下記に詳しく書いてますのでぜひご覧ください。
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

外側にボーダーがない区切り線

この区切り線だけでも方法は3つあります。

border02 CSSだけでリストや横並びの区切り線を実現するパターン4つ

ネガティブマージンを使う

こちらも margin-top: -1px; のようなネガティブマージンを利用して実現する方法です。

ul {
zoom: 1;
overflow: hidden;
}
li {
margin-top: -1px;
padding: 10px 5px;
border-top:1px solid #CCC;
}

擬似クラス:first-childか:last-childを使う

li には border-top のみを指定し、liの最初を擬似クラスの:first-childを使ってボーダーをなくす方法です。border-bottom を指定した場合は :last-child を使ってください。
IEは実質8から問題なく表示されるようです。(一応IE7も対応しているはずなんですが…)
IE7でも対応したい場合は下記を参考にjavascriptを追加すると大丈夫です。
HTML5でコーディングする時に入れる魔法のJS【完全版】

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

隣接セレクタを使う

li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

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

横並び

左右にボーダーがある区切り線

こういったメニューなど横並びの一覧表示は、ボーダーを「|」とテキストで入れてしまうと本来装飾であるボーダーをHTMLのテキストとして記述するわけなのであまりよろしくありません。

border03 CSSだけでリストや横並びの区切り線を実現するパターン4つ

border を使う

一番王道なのは li に border-right を指定し、ul に border-left を指定して実現する方法です。
li に inline-block を使うと余白ができてしまう可能性がありますが、HTMLで li 同士の改行をなくすか、CSSで letter-spacing を指定するとなくなります。
inline-blockの隙間をなくす方法2つ

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

content と :before:after の擬似要素を使う

上記のように border で指定すると、line-height を指定した場合に区切り線が高くなりすぎたりしてデザイン的にあまりよろしくありません。
個人的によく使うのは content と :before:after の擬似要素を使う方法です。content はIE8からの対応になります。
CSS側で表示したい「|」のテキストを指定するので、サイズや色を変更することもできます。

li {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
ul:before,li:after {
	content:"  |  ";
	color:#999;
	font-size:11px;
}

左右にボーダーがない区切り線

border04 CSSだけでリストや横並びの区切り線を実現するパターン4つ

擬似クラス:first-childか:last-childを使う

こちらは上記の応用です。borderと:first-child:last-childの擬似クラスを使って記述します。
残念ながら content は :before:after の擬似要素をすでに使っているため、さらに :first-child:last-child といった複数の擬似クラスを指定することができません。

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;
}

隣接セレクタを使う

こちらは上記の応用で、li と li が隣接している場合のみスタイルを適用させる方法です。IE7から対応していますし、コードもとてもシンプルです。(2013.3.12追加)

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

他にもまだまだ色んなやり方があると思いますが、CSSって奥深いですね。

Pocket
article clipper CSSだけでリストや横並びの区切り線を実現するパターン4つ

box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

CSS3 の box-sizing プロパティがかなり便利です。

あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。

CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。

「あれ、なんで崩れるんだろ?」

「padding と border 分マイナスするの忘れてた~」

ってのがよくありました。(今もたまに。。)

それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。

これはものすごい効率化になりますね!

box-sizing の書き方

box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。

指定できるのはこちらの2種類です。

  • content-box … 【デフォルト値】padding と border を要素の幅と高さに含めない。
  • border-box … padding と border を要素の幅と高さに含める。

ベンダープレフィックスもつけて box-sizing を指定します。

.boxSizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing の使い方

1)box-sizing 用のクラスをつくる

例えば「.boxSizing」というクラスをつくって、使いたい要素に都度指定するという使い方です。
このやり方が一番表示速度など考慮した方法になるかなと思います。

2)div などの主要なブロック要素のみ指定する

box-sizing の使用頻度が多くなりそうなら主要なブロック要素にこんな感じで直接指定してしまえば楽ですね。
リセットCSSを指定しているところに追加しちゃうのも手だと思います。

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

3)ユニバーサルセレクタで全指定する

もう全要素やったれ~い!っていう場合は、ユニバーサルセレクタ(全称セレクタ)でしょう。読み方はアスタリスクではないので注意!

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

ユニバーサルセレクタがいいのか、主要なタグを指定するタイプセレクタがいいのかは個人の考え方によりますが、box-sizing のみならどちらでも大きな影響はないかと思います。
ユニバーサルセレクタでリセットCSSを指定だとフォームまわりに影響がでるようですが、どこで調整するかデフォルトの指定のまま使うのかなど状況と考え方次第ですかね。

改めてユニバーサルセレクタについて調べていたら、色々まとまった記事があって面白かったです。
ユニバーサルセレクタ(全称セレクタ)が結局使いやすい。

box-sizing のブラウザ対応

IE7 では非対応ですが、それ以外のブラウザなら現状ほぼ問題なさそうです。(IE6のことは忘れましょう)

大枠のブロック要素に使う時に注意さえしていれば、多少崩れるくらいでコンテンツ自体が見えなくなるような致命的な問題はないと思うので、
個人的には積極的に使って行きたいなと思っています。

[参考サイト]
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか?

Pocket
article clipper box sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ