知っておくと速い！CSS3に関する「便利」なまとめ

• 作成：2013/11/25
• 更新：2014/10/24
• Webデザイン >

先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

知っておきたいプロパティ

• １．カウント数を出力
• ２．要素の前後に文字や画像
• ３．カーニング
• ４．画像フィルタ
• ５．均等幅にレイアウト
• ６．アニメーション一覧

スマホサイト対策

• ７．viewport
• ８．改行削除
• ９．Webクリップアイコン
• １０．UIリセット／入力フィールド拡張
• １１．横並び
• １２．ボタンサンプル
• １３．画像を使わない矢印
• １４．自動改行
• １５．はみ出しを隠す
• １６．末尾に「…」をつける
• １７．フォント指定例

知っておきたいプロパティ

自動で文字や数を調整したり、画像の効果を出したりするプロパティをメモしておきます。これらを使うことでグンと効率化できそうです。

１．カウント数を出力

「counter-increment」を使うと番号を自動的に付けることができます。counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。詳しくはcounter-incrementプロパティで。

• CSSのcounter-incrementを使ってリスト以外に番号を付ける方法｜Webpark
• CSS3 ordered list styles - RedTeamDesign

２．要素の前後に文字や画像

「content」は対応する全ての要素の前後に内容（文字列や画像等）を追加するプロパティ。例えばh3の直前に「♪」を入れる場合は要素の直前にbefore、指定する文字はcontentに♪と入れるだけでh3全てに自動で♪が入ります。他にも指定の文字だけでなく、urlで画像、counter関数で番号、attr関数で属性値なども表示可能です。

• テキスト・フォント/要素の前後に内容を追加する
• contentプロパティの使い所あれこれ| m-School

３．カーニング

「text-rendering: optimizeLegibility」はカーニングと合字を自動で調整してくれます。ただしフォントが合字などの情報を保有する場合。ヒラギノ角ゴ・明朝はカーニングが調整可能とのことです。

• text-rendering: optimizeLegibility – terkel.jp

４．画像フィルタ

「-webkit-filter」を使うとぼかしやセピア色など、Photoshop上で行っていたことを簡単に指定出来るようになります。コードを指定するだけでフィルタを自動で反映させます。アイキャッチ画像なんかに使えそうです。

• CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
• CSS Filters

５．均等幅にレイアウト

「flexbox」は従来のfloatプロパティに比べて横並びや並び順の変更など柔軟にレイアウトを変更できます。

• flexboxの旧仕様、改定仕様、現行仕様の一覧 « NAVER Engineers' Blog
• CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ

６．アニメーション一覧

CSS3のアニメーションはJavaScriptだけで表現するのに比べ処理が軽いです。制御はJS、動きはCSSにとそれぞれの記述を分類できるメリットがあります。以下、使いやすくするうえで知っておきたいものを中心にまとめました。

• 回転／要素を変化させる、CSS3「transform」のおさらい｜WEB Drawer
• 移動／CSS3 アニメーションの基礎 | Ri-mode Rainbow
• 点滅／[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ
• 振動／ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel
• バウンス／CSS3アニメーションで…｜サイバーエージェントブログ
• スイング／画像をゆらゆらと振り子のようにアニメーションで揺らす | コリス
• フリップ／CSSで画像をクルッと回転されるアニメーションを付ける | ポケットラボ
• ローディング／ローディング用アニメーションを… | HTML5でサイトをつくろう
• スライド／WebKit系対応の画像スライドの作り方｜Webpark
• フェードイン・スライド／CSS3フルスクリーン背景スライドショー | CSSPRO
• 円グラフ／アニメーションのエフェクトを与えるスタイルシート | コリス
• 棒グラフ／綺麗なグラフ作成チュートリアル:phpspot開発日誌

スマホサイト対策

スマホサイトにも対応させてくれと言われることがほとんどなので、そんな時に便利なプロパティなどをメモしておきます。

７．viewport

viewportの設定方法をパターン別で解説。指定しない時、width=device-width、320と指定した時などのデモと採用例を記載してあります。

• これがスマートフォン向けサイトを作るときの viewport 設定…- てっく煮ブログ

８．改行削除

これどういう時に使うのかというと、例えばスマートフォン専用のアフィリエイトテキスト。brなどが入っていてコード改変不可なものがあります。そういった時に改行をCSSで消したり。

• レスポンシブWebデザインでの改行位置の変更方法 | CodePlus

９．Webクリップアイコン

iPhone と Androidのファビコンやホームアイコンの指定方法。光沢ありなし、サイズ指定など詳しく書いてあります。

• iPhone と Android の apple-touch-icon の違い - Fonland

１０．UIリセット／入力フィールド拡張

「appearance」を使うと、本来そうではない要素に指定の要素の振る舞いを指定することができます。デフォルトの状態だと自由度が少ないセレクトボックスも、自由に見栄えを変更することが可能です。

• 「appearance」を使ってセレクトボックスを自由にデザイン | case:MobileDesign!
• select要素の見た目を変える | キョウダケダカンナー
• search 型 input 要素のスタイルをリセット – terkel.jp
• フォームの見栄えをぐっとよくする、テキスト入力欄とボタン | コリス

１１．横並び

「display:table-cell」を使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。

• display:table-cellを使った横並びのレイアウト | Cappee Design
• 「display: table」と「display: table-cell」で出来ること | アイビーネットblog

１２．ボタンサンプル

比較的コードがシンプルで画像が要らないボタンサンプル集。膨大な量のサンプルが掲載してあるのですごく助かりますね。

• 5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
• CSS Buttons with Pseudo-elements | Codrops

１３．画像を使わない矢印

タップできる右端によくついている「＞」をCSSのみで実装する方法。

• スマホでタップできることを示すアイコンなどを… |  clear sky source
• スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法｜Webpark

１４．自動改行

word-break・word-wrap・white-spaceに関する折り返しの検証。

• 自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モックアップ

１５．はみ出しを隠す

はみ出した内容を表示しないようにするoverflow:hidden。

• ボックスからはみ出た部分の表示方法を指定する

１６．末尾に「…」をつける

こちらはテキストが領域からはみ出ている場合に省略符号（ ... ）をつける。

• 領域からはみ出た場合に「...」を表示する - TAG index Webサイト

１７．フォント指定例

CSS3から新しく登場した単位である「rem」の使い方と書き方。

• フォントサイズの指定には、remを使おう。 | case:MobileDesign!