## TL;DR

レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。



今回のリニューアルに伴い、今回行った高速化処理。ちなみに<a href="https://www.commte.co.jp/" target="_blank">会社 HP</a>はこちら。
PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。
<a href="https://tools.pingdom.com/" target="_blank">Pingdom</a>では 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。
なにはともあれ、サーバのスペックそのものを変えないと駄目だということで<a href="http://px.a8.net/svt/ejp?a8mat=2BTZIY+7WL7XU+D8Y+C0B9U" target="_blank">さくらの VPS 4G</a><img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=2BTZIY+7WL7XU+D8Y+C0B9U" alt="">（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブログをガンガン更新するなら 4G ほど欲しいところですね。リージョンは東京で OK。

### バックエンド

#### 常時 SSL、HTTP/2

<a href="https://www.commte.co.jp/" target="_blank">会社 HP</a>のみ常時 SSL（コムテブログは<a href="https://commte.net/contact" target="_blank">お問い合わせページ</a>のみ）に変更しました。
最近 SSL についてお問い合わせされるお客様が増えてきたのもあり、さすがにこのご時世「会社 HP が http だとユーザーの心証に影響するのでは…」と思い、常時 SSL（全ページ）にしました。
セキュリティも強化したし、HTTP/2 にしようと思ったのですが、小規模なトラフィックで採用するのはどうかと思い一旦保留中。ですが、高速化のために知っておいたほうがいいことを少しメモします。

<blockquote>
時代はHTTP/2です。高速化にあたっては、HTTP/2対応が最も効果的です。
<a href="https://www.philosophyguides.org/howto/how-to-load-critical-rendering-path-under-2-seconds/" target="_blank">ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides</a>
</blockquote>

HTTP/2 はグーグルによる SPDY（スピーディー：サイトのロード時間を短くする技術 ）を改良したもので、同時アクセスに強く、処理が単純でコンパクトになり、レスポンスタイムが速くなる可能性があります（遅くなる場合もあるそうです）。特に一度に多数のリソースをダウンロードするようなサイト（画像を大量に読み込むような作りなど）に効果が出ます。
一方、HTTP/1.1 で効果的だった CSS スプライトやファイル結合・<a href="http://t32k.me/mol/log/reduce-http-requests-overview/" target="_blank">ドメインシャーディング</a>などで容量が大きくなると逆効果になる場合があるとのこと。

<blockquote>
多くのウェブブラウザはHTTPS でのアクセスにおいてのみ、HTTP/2 を有効化する公算が高くなっています。このため、HTTPS の方が HTTP よりも高速である、という状況は今後とも続くと考えられます。
<a href="http://blog.kazuhooku.com/2014/12/httpshttp.html" target="_blank">Kazuho's Weblog: なぜHTTPSはHTTPより速いのか</a>
</blockquote>

HTTP/1.1 が一つの通信で行ったり来たり繰り返すのに対し、HTTP/2 では一つの接続で複数の処理を行えます。
こちらは http と https の速度がどれだけ違うか計測したもの。10 倍以上違いますね。
<a href="http://www.httpvshttps.com/" target="_blank">HTTP vs HTTPS — Test them both yourself</a>
https が早いというよりも、HTTP/2 が早いということになります。多くのブラウザにて HTTPS で HTTP/2 を対応しているので、常時 HTTPS のサイトで使わないと意味がないです。
ちなみにブラウザの対応状況は以下です。ほとんどのブラウザに対応しています。
コムテブログの方は備忘録みたいなものなので、現在問い合わせページのみ ssl に対応ですが、タイミングをみて全ページ ssl に変更予定です。 \*部分的に SSL 対応させても、他のページが url 混在（https と http どちらも表示可能）となった場合は、https から http にリダイレクトさせておきましょう。
ともあれ SPDY を使って速くなることも遅くなることもあるとのことなので、HTTP/2 は少し様子見します。
<a href="http://dev.classmethod.jp/study_meeting/nextwebconf-http2/" target="_blank">次世代 Web カンファレンス「HTTP2」レポート #nextwebconf ｜ Developers.IO</a>
証明書に関しては、リーズナブルな<a href="http://www.rapid-ssl.jp/" target="_blank">Rapid-SSL</a>あたりでよいかと思います。

#### nginx

nginx はサーバのファイルを高速配信するように設計されていて、消費メモリが少なく処理が軽いし、ロードバランサー（負荷分散装置）などの機能があります。元々は沢山の同時アクセスを処理できるようなサーバを作る目的で開発されたそうです。
会社 HP が Apache なので、コムテブログの方は Apache の制約から開放されるべく軽量・高速な Nginx に変更。
nginx の高速化施策はこちらを行いました。

<ul>
<li>gzip圧縮の設定</li>
<li>モジュール ngx_brotli（圧縮率向上）</li>
<li>リバースプロキシ、proxy cacheの設定（サーバ負担軽減）</li>
</ul>

初期設定は、こちらが一番分かりやすいです。
<a href="http://oki2a24.com/2014/06/16/change-from-apache-to-nginx-with-proxy-cache/" target="_blank">【nginx】【超高速】 WordPress のウェブサーバーを nginx にして、プロキシキャッシュを使ってパフォーマンスをとても向上させるまでの試行錯誤です！【Apache からの卒業】 – oki2a24</a>
設定方法はこちら。

<ul>
<li><a href="http://qiita.com/cubicdaiya/items/2763ba2240476ab1d9dd" target="_blank">nginxパフォーマンスチューニング〜静的コンテンツ配信編〜 - Qiita</a></li>
<li><a href="http://blog.serverworks.co.jp/tech/2012/09/21/nginx-03/" target="_blank">Nginx + WordPress proxy cache篇 « サーバーワークス エンジニアブログ</a></li>
<li><a href="http://qiita.com/cubicdaiya/items/cfe9ed403d286b8a9ab1" target="_blank">新しい圧縮アルゴリズムBrotliをnginxで試す - Qiita</a></li>
<li><a href="http://qiita.com/tattn/items/661b3bca381aacd86487" target="_blank">さくらVPS + nginx に無料で独自ドメインとSSLを設定する - Qiita</a></li>
</ul>

php は PHP 7 に。あとは APC（アクセラレータ）で PHP の処理を高速化。データをキャッシュディレクトリに保存することで次回アクセス時にキャッシュを利用し高速表示します。

<blockquote>
PHP 7では互換性を維持しつつ、従来のPHP 5と比べて2倍以上の性能向上やメモリ使用量を低減するなど、大きな改善が実現されます。
<a href="http://www.publickey1.jp/blog/15/php_7_1.html" target="_blank">「PHP 7」登場。10年ぶりのメジャーバージョンアップで実行速度はPHP 5の2倍以上に、PHPの生みの親が語る。PHPカンファレンス2015（前編） － Publickey</a>
</blockquote>

<ul>
  <li><a href="http://qiita.com/onishik/items/810fd840530d4fb6970c" target="_blank">CentOS7 + PHP7 + nginx + php-fpm の環境構築 - Qiita</a></li>
  <li><a href="http://komaken.me/blog/2013/07/17/centos6-4-php5-3-php-fpm-apc-nginx%E3%82%92%E6%A7%8B%E6%88%90%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E3%83%A1%E3%83%A2/" target="_blank">centos6.4 + PHP5.3 + php-fpm + APC + nginxを構成したときのメモ | KentaKomai Blog</a></li>
</ul>

### フロントエンド

#### gzip

2016-06-30 追記：管理者権限があるのなら<a href="http://r7kamura.hatenablog.com/entry/20110222/1298371277" target="_blank">httpd.conf</a>に書くのがよいです。
htaccess しか使えない環境なら以下を追記してコンテンツを圧縮して転送量を減らします。

```bash
<ifModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _.utxt$ no-gzip
</ifModule>
```

#### 有効期限

有効期限は以下を先ほどの htaccess にこれを追記。

```bash
ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
```

#### CSS / Audits で未使用のセレクタを見つける

gulp であれば、<a href="https://www.npmjs.com/package/gulp-uncss" target="_blank">gulp-uncss</a>を使うと余分な CSS を消してくれますが、js で付与するクラス等を除かないと不具合が出たり、完璧ではありません。
少々面倒ではありますが、Chrome の開発者ツール（F12）で、Audits&gt;Reload Page...の Run を押し計測を開始し、Remove unused CSS rules で、現ページの使ってないセレクタを見つけることが出来ます。
他のページでも、そのセレクタが使われてないか調べて、どのページも使ってないようであれば削除します。
firefox のプラグイン「<a href="https://addons.mozilla.org/ja/firefox/addon/dust-me-selectors/" target="_blank">Dust-Me Selectors</a> 」も、同じように不要なセレクタをコメントアウトした状態でダウンロードできます。
HTTP/1.1 で効果的とされている改行削除とか空白削除は体感的には気休め程度な気もしますし、よく考えたらファイル結合はメンテナンス性も悪いし、面倒な感じがするかもしれませんが、高得点を狙うなら以下も行う必要があります。

<ul>
<li>ファイル数を削減、gulpで圧縮、head内に</li>
<li>@importの削除</li>
<li>ファイルを統合してCSSは一つだけにする</li>
<li>gulp-uncssで未使用のセレクタを削除</li>
</ul>

#### JavaScript

お馴染みのこれ。

<ul>
<li>ファイル数を削減し、中身を圧縮する</li>
<li>body閉じタグ前へ移動</li>
<li>非同期で読み込む</li>
<li>インライン化（htmlに直接記述）</li>
<li>スマホ用。スクロール・タッチイベントを減らす</li>
</ul>

#### システムフォントを使う

google fonts を外してシステムフォントに変更。google fonts を外すと PageSpeed Insihts で飛躍的にスコアが上がりますが、物足りない感じのフォントに。ちなみにフォントは以下のようにショートハンドで指定。

```css
html {
  font-size: 62.5%;
}
body {
  font: 1rem/1.5 '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}
```

font-size は 62.5%にしておくと計算しやすくなります（10px = 1rem、12px=1.2rem）。
font のショートハンドは 10px で、line-height: 1.5;という意味です。

#### 体感速度を速めるライブラリ

体感的にもスピードアップさせるならこちらの２つ。

<ul>
<li>[スマホ] <a href="https://github.com/ftlabs/fastclick" target="_blank">FastClick</a></li>
<li>[PC] <a href="http://instantclick.io/" target="_blank">InstantClick</a></li>
</ul>

FastClick はタップイベントの遅延を無くすスマホ用 JavaScript ライブラリ。InstantClick js は、マウスオーバーを感知し、リンク先ページをロード・先読みしてクリックした瞬間高速表示する PC 用 JavaScript ライブラリ。
「InstantClick js」を試したところ、体感的に早くなったものの、SyntaxHighlighter の読み込みエラーが出たので諦めました。

<ul>
<li><a href="http://qiita.com/tyfkda/items/a50fe679654a6b33fbd7" target="_blank">FastClickを使った体感応答時間の短縮テスト - Qiita</a></li>
<li><a href="http://atskimura.hatenablog.com/entry/2014/02/18/215538" target="_blank">2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo</a></li>
</ul>

#### SVG スプライト

アイコンフォントは、Unicode の読み上げ問題（スクリーンリーダーで読み上げられない）や、アイコンが四角形（豆腐）になるという問題などがあると言われてきました。
そういったリスクを回避する目的もありますが、ロゴとアイコンをまとめて管理したいこともあって SVG スプライトを導入しました。
SVG は Retina のような高解像度のスクリーンでもロゴやアイコンを綺麗に表示できます。また JavaScript で操作し CSS で制御可能というメリットがあるし、アイコンを増やす時は、symbol と CSS を追記するだけなので管理も楽ですね。軽量化のためには不要なレイヤーやパスを消しておきます。
SVG スプライトは CSS スプライトのように座標で制御せず、use 要素を使います。use 要素から、xlink の symbol の id を参照し表示させます。例えば、IcoMoon を使った Fecebook のアイコンだと以下。
body 前に<code>＜ symbol ＞~＜/symbol ＞</code>を追記。<code>symbol</code>要素には id（参照）と viewBox（アイコンサイズ）が指定されてます。

```html
<symbol id="facebook" viewBox="0 0 15 15">
  <title>facebook</title>
  <path class="path1" d="M11.156 0.469h-1.781c-2.016 0-3.375 1.359-3.375 3.469v1.594h-1.828c-0.141 0-0.281 0.141-0.281 0.281v2.297c0 0.141 0.141 0.281 0.281 0.281h1.781v5.859c0 0.141 0.141 0.281 0.281 0.281h2.391c0.141 0 0.281-0.141 0.281-0.281v-5.859h2.156c0.141 0 0.281-0.141 0.281-0.281v-2.297c0-0.094 0-0.141-0.094-0.234s-0.141-0.094-0.234-0.094h-2.156v-1.266c0-0.656 0.141-1.031 1.031-1.031h1.219c0.141 0 0.281-0.141 0.281-0.281v-2.156c0.047-0.141-0.094-0.281-0.234-0.281z"></path>
</symbol>
```

呼び出したい箇所に ID が書かれた以下を記述。

```html
<svg class="icon facebook"><use xlink:href="#facebook"></use></svg>
```

あとは、css で大きさと色を変えます。色は<code>fill</code>で指定、大きさは普通に width/height を指定すれば良いです。

```css
svg.icon.facebook {
  width: 25px;
  height: 25px;
}

li:hover svg {
  fill: #289dcc;
}
```

<ul>
<li><a href="http://www.webcreatorbox.com/tech/illustrator-icomoon-svg-sprite/" target="_blank">IllustratorとIcoMoonでSVGスプライトのラクラク設定！ | Webクリエイターボックス</a></li>
<li><a href="http://parashuto.com/rriver/development/easiest-svg-sprite-icon-system" target="_blank">Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方 – Rriver</a></li>
<li><a href="https://icomoon.io/app/#/select" target="_blank">IcoMoon SVGスプライトツール</a></li>
</ul>

#### WordPress / script はフッターに移動

これもおまじないみたいなものですね。CSS は head 上部で呼び出しますが、JavaScript は基本的に head で読み込まず、できるだけ body の下部で読み込むようにしたいので、function.php に以下のように記載。そうすると後から JavaScript の処理をさせるので体感的にユーザーが遅く感じにくくなります。
パラメーターを true にすることで<code>wp_footer()</code>で読み込まれます。true で body 終了タグの前、false で head 前。

```php
// trueでbody終了タグの前、falseでhead前
wp_enqueue_script(
'common-js',
get_template_directory_uri() . '/js/common.js',
array(),
NULL,
true
);
wp_enqueue_script( 'common-js' );
```

#### WordPress / header 内の不要なコードを削除する

WordPress のバージョン情報や、Windows Live Writer 用の URL など全く必要ないので、<code>remove_action</code>を functions.php に以下を追記。Embed は任意で。

```php
// 不要なコードをまとめて削除
// WordPressのバージョン情報
remove_action('wp_head', 'wp_generator');
// ブログ投稿ツール用
remove_action('wp_head', 'rsd_link');
// デフォルトURLの表記
remove_action('wp_head', 'wp_shortlink_wp_head');
// Windows Live Writer用
remove_action( 'wp_head', 'wlwmanifest_link' );
// Embed WPのブログカード。他サイトのアイキャッチ画像や抜粋自動埋め込み
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');
```

#### WordPress / 特定のプラグイン.css をトップページなどで外す

例えば amazonJs なんかのプラグインの CSS は、single.php 以外では必要ないので、以下の記述で外します。パラメーター（wp_deregister_style の中）は、登録したスタイルシートの名前を記述するので、以下の例だとプラグインフォルダの中でソースコードに記述されている「amazonjs.css」か「wp_enqueue_style」で検索して見つけます。

```php
// 記事以外 amazonJs.cssを消す
add_action( 'wp_print_styles', 'amazon_deregister_styles', 100 );
function amazon_deregister_styles() {
if ( ! is_single()) {
    wp_deregister_style( 'amazonjs' );
    }
}
```

以上、サイト高速化の手順でした。<b>サーバの引っ越しについては<a href="https://www.commte.co.jp/speedup" target="_blank">レンタルサーバから VPS への移行作業を代行します</a>のページにて詳細を書きました。</b>法人・個人の方もご依頼可能です。

<a href="https://www.commte.co.jp/speedup" class="mainButton" target="_blank">サーバ移行の詳細を見る</a>

確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開


Web Designing 2015 年 6 月号に執筆させていただきました。今年に入り２回目の執筆となります。特集 2（P76~）の『サービス活用で広がる Web 制作市場』に掲載されています。

今回 Web Designing ではオンライン上で簡単にホームページ制作が可能となる Web サービスを紹介させていただきました。「サイト作成サービス４つ」と「EC サイト構築サービス４つ」の合計８サービスのメリット・デメリット、利用料・プログラミング言語などをまとめています。他、ブログ記事では Grunt/gulp や Atom などの入門おすすめ記事をピックアップ。

筆者が担当した箇所は以下の 4 ページ

<ul>
<li>Webサイト作成サービス４つ（P86/P87）</li>
<li>ECサイト作成サービス４つ（P92/P93）</li>
</ul>

近年、国内外問わず「シンプルで分かりやすい」UI の編集画面を提供しているサイト制作サービスが増えてきました。

今回は英語やコーディングが苦手な人でもスムーズにページを構築することができるサービスに傾注し解説。使っていて楽しいように UI が美しいものを選択しました。詳細は Web Designing 2015 年 6 月号をご覧ください。

[amazonjs asin="B00UJXL688" locale="JP" title="Web Designing 2015 年 06 月号"]

#### Web 制作に使えるサービス４つ

既に存在するサービスなのでご存知の方が多いとは思いますが、他のサービスと比べて何が違うのか、どんなメリットがあるのか、など機能面・価格などのスペック比較（ホームページ制作サービスごと）を交えてわかりやすくご紹介しています。今回は以下の 4 つのサービスについて書いています。

<ul>
<li><a href="https://webflow.com/" target="_blank">Webflow</a></li>
<li><a href="https://www.amebaownd.com/" target="_blank">Ameba Ownd</a></li>
<li><a href="http://www.webydo.com/" target="_blank">Webydo</a></li>
<li><a href="http://ja.wix.com/" target="_blank">WIX</a></li>
</ul>

このほか、「<a href="http://jp.jimdo.com/" target="_blank">Jimdo（ジンドゥー）</a>」「<a href="http://bindcloud.jp/" target="_blank">BiND（バインド）クラウド</a>」に関しては、実際に活用されている方のインタービューや制作事例などを交えながら、サービス内容が詳しく紹介されています。

#### EC サイト構築サービス４つ

「ショッピングモールはランニングコストや広告費が、オープンソースの CMS カスタマイズは学習コストがかかる。できれば低予算でサイトを運用しつつ、商品詳細やコンテンツにかける時間を捻出したい」と考えている人に一読して欲しい内容です。

Web マーケット激戦区の中で構築スピードを高めるため、EC 編ではサーバの準備やプログラムの知識が無くても、必要な機能が一式揃った EC サイトを簡単に構築できるサービスを紹介しています。

<ul>
<li><a href="http://www.weebly.com/" target="_blank">Weebly</a></li>
<li><a href="https://thebase.in/" target="_blank">BASE</a></li>
<li><a href="https://stores.jp/" target="_blank">STORES.jp</a></li>
<li><a href="http://goodsie.co.jp/" target="_blank">Goodsie</a></li>
</ul>

このほか、ネットショップ構築サービスとしてメジャーな「カラーミーショップ」に関しては、実際に活用されている方のインタービューや具体的案件を交えながら、サービス内容が詳しく紹介されています。

#### 抑えておきたい Web トレンド情報

他にも各筆者さんたちによる魅力的な Web トレンドの内容が満載で、筆者も食い入るように読みました。分かりやすかった～。その中でも最近のトレンドで知っておきたいことをピックアップ。

<ul>
<li>Webサイトのシナリオ設計 *1</li>
<li>サービス活用で広がるWeb制作市場</li>
<li>Grunt *2（Node.jsを使ったタスク自動化ツール）のインストール、環境設定方法</li>
<li>Atom  *3（GitHub社が開発したエディタ）の機能</li>
</ul>

<h5>*1 ユーザーシナリオとは</h5>
ユーザーと行動経路を明確にして成果を向上させるための設計。どのようにユーザーを調査しデザインに活かすべきか、成果を上げるために必要なことは何か。本書のP52に詳細が書かれてます。

<h5>*2 Gruntとは</h5>
js css の圧縮、Sassの変換など何度も繰り返しが必要な作業を自動化してくれるGrunt。本書のP96に環境設定やインストール方法が掲載されています。ネットでは以下のサイトが参考になります。

<ul>
<li><a href="http://dotinstall.com/lessons/basic_grunt" target="_blank">[動画] Grunt入門 (全12回) - ドットインストール</a></li>
<li><a href="https://app.codegrid.net/entry/grunt-introduction" target="_blank">[入門] 現場で使えるGrunt入門 | CodeGrid</a></li>
</ul>

対抗馬であるビルドツール gulp に関する入門記事は以下がおすすめ。Grunt とどう違うのか、セットアップ方法など。
<a href="http://www.atmarkit.co.jp/ait/articles/1408/19/news035.html" target="_blank">gulp.js で始める Web 開発爆速自動化入門：便利な Grunt の弱点を補う gulp.js のインストールと使い方 (1/3) - ＠IT</a>

<h5>*3 Atom</h5>
SublimeTextを使ってらっしゃる方は多いと思いますが、Atom に乗り換えたいという人におすすめの記事は本書のP104で。パッケージもさることながらUIの美しさも負けてません。ネットでは以下のサイトが参考になります。

<ul>
<li><a href="http://memo.goodpatch.co/2015/03/good-atom/" target="_blank">今すぐSublime Text を消してAtom をダウンロードすべき5つの理由 | MEMOPATCH</a></li>
<li><a href="http://www.geeks-dev.com/atom-%E3%81%8C%E3%83%A4%E3%83%90%E3%82%A4%EF%BC%81sublimetext%E3%82%92%E4%BD%99%E8%A3%95%E3%81%A7%E5%87%8C%E9%A7%95%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%9F%E4%BB%B6/" target="_blank">Atom がヤバイ！SublimeTextを余裕で凌駕してしまっていた件</a></li>
</ul>

ぜひ読んでみてください。

<a href="http://www.amazon.co.jp/Web-Designing-2015%E5%B9%B4-06%E6%9C%88%E5%8F%B7/dp/B00UJXL688%3FSubscriptionId%3DAKIAJHRAR7UZYV5GQDTA%26tag%3D1093045-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00UJXL688" title="Web Designing 2015年 06月号" target="_blank">Web Designing 2015 年 06 月号</a>


Web Designing 2015年 6月号に執筆。Webサイト構築サービス８つ


## TL;DR

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。

### 画像

#### １．画像の下にできる隙間をなくす

画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックに<code>line-height: 0;</code>で OK。他には画像に直接<code>vertical-align: bottom;</code>か<code>display:block;</code>を使えます。

css

```css
.sample {
  line-height: 0;
}
```

<ul>
<li><a href="http://creatormemo.com/2013/11/css_image_space/" target="_blank">画像の下にできる隙間をなくす方法</a></li>
</ul>

#### ２．画像の下にテキストが回り込まないようにする

回り込み解除は親要素か以下の例だとテキストに<code>overflow: hidden;</code>か<code>overflow: auto;</code>を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。

css

```css
.sample p {
  overflow: hidden;
  zoom: 1;
}
```

#### ３．float を使わずに横並び

いくつもボックスを並べたい場合は float の解除を使わずに flexbox を使うほうが簡単です。横並びや並び順の変更など柔軟にレイアウトを変えられるようにまりました。親要素に<code>display: flex;</code>を指定するだけで横並びが完成。<span class="strike">中心に配置したいときは<code>-webkit-box-pack: center;</code>を親要素につけるだけ。</span>

※[お詫び] 2015/03/23：コメントにて flex と box を混同しているとのご指摘を受け修正しました。以下のソースは旧 safari 用としてコードに-webkit-box をつけておりました。しかしながら私の理解不足は否めません。また、<a href="https://commte.net/4887" target="_blank">効率的になった！最近のサイトで使われていた CSS 小技集</a>にも書いてある<code>justify-content: center;</code>を使用したほうがよいというコメントもいただいております。皆様からのご指摘、ありがとうございました。

css

```css
ul.sample {
  display: flex;
  list-style: none;
  padding: 0;
}

ul.sample li {
  margin: 10px;
  word-wrap: break-word;
}
```

html

```html
<ul class="sample"></ul>
```

#### ４．デバイスによって、画像を変更する

CSS4 からになりますが、image-set()を使用すると<a href="http://blog.webcreativepark.net/2011/01/25-173502.html" target="_blank">devicePixelRatio</a>による画像表示を変更することが可能です。高解像度の画像と低い解像度の画像を切り替えたいときに。density（値は x ）によって画像を変更します。

<ul>
<li><a href="http://blog.webcreativepark.net/2012/09/25-134753.html" target="_blank">レスポンシブイメージを実現するCSS4のimage-set - to-R</a></li>
<li><a href="http://css4.biz/notation/image-set.html" target="_blank">異なる解像度の画像を複数指定することができるimage-set() | CSS4.biz</a></li>
</ul>

#### ５．画像の上に文字を配置

こちらも定番ですが、マウスオーバーで注釈を出すシンプルな方法。通常時に注釈を一旦隠し、マウスオーバー時に translateY()で縦方向に移動させます。

css

```css
figure.sample {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.overray-cap {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: absolute;
  transform: translateY(100%);
  transition: all 0.35s;
  width: 100%;
  -webkit-transition: all 0.35s;
}

figure.sample:hover .overray-cap {
  transition-delay: 0.1s;
  transform: translateY(0);
}

figure.sample img {
  vertical-align: bottom;
  width: 100%;
}
```

html

```html
<figure class="sample">
  <figcaption class="overray-cap">注釈</figcaption>
</figure>
```

#### ６．鏡像

ちょっとトリッキーな小技。<code>box-reflect</code>を使うと鏡が反射した時のような効果を出すことができます。１枚の画像だけでこれができるのはすごい。参考サイトでは、<code>-webkit-gradient</code>を指定して自然な見え方にしています。

css

```css
.sample {
  height: 500px;
  overflow: hidden;
}
.sample img {
  -webkit-box-reflect: below;
}
```

<ul>
<li><a href="http://kanapple.net/study/19" target="_blank">box-reflect（反射）｜css3｜study｜kanapple.net</a></li>
</ul>

### マスク

#### ７．画像を斜めにくり抜く

背景画像を固定させたら擬似要素を作成し、要素を<code>skew()</code>で傾け、<code>translate</code>で移動させます。そうすると以下のように斜めのブロックを作り出すことができます。

css

```css
.sample {
  background-image: url(img/sample.jpg);
  background-size: cover;
  height: 500px;
  overflow: hidden;
}

.sample:after {
  content: '';
  display: block;
  height: 100%;
  background: #2ecc71;
  transform: skew(0, 170deg) translate(0, 20%);
}

.sample:before {
  content: '';
  display: block;
  height: 50%;
  background: #2ecc71;
  transform: skew(0, 170deg) translate(0, -20%);
}
```

html

```html
<div class="sample"></div>
```

#### ８．写真をくり抜く

プロパティ clip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。position プロパティの値は absolute、rect の中は(上 右 下 左)となります。600×300 の写真をくり抜くと以下のように。

css

```css
.sample img {
  position: absolute;
  clip: rect(100px 500px 200px 100px);
}
```

<ul>
<li><a href="http://www.tagindex.com/stylesheet/img/clip.html" target="_blank">画像を切り抜く - TAG index Webサイト</a></li>
</ul>

#### ９．文字で画像をくり抜く

<code>background-clip</code>を使えば、画像をテキストでくり抜くことができます。以下は親要素に背景色をつけ、任意の文字は<code>color: transparent;</code>で透過させます。

css

```css
.sample h2 {
  -webkit-background-clip: text;
  background-image: url(img/sample.jpg);
  color: transparent;
  font-size: 125px;
  text-align: center;
}
```

html

```html
<div class="sample">
  <h2>SAMPLE</h2>
</div>
```

#### １０．２枚の画像を透過合成する

<code>:cross-fade()</code>を使うと２枚の画像を合成できます。２枚の画像 URL を指定します。100%に近づくにつれ１枚目の透過度が高くなります。

css

```css
.mask-synth {
  background: -webkit-cross-fade(url(img/sample1.png), url(img/sample2.jpg), 50%);
  background-size: cover;
}
```

#### １１．写真と色をブレンドする

Photoshop のように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができる background-blend-mode プロパティ。

<ul>
<li><a href="http://hyper-text.org/2013/12/background-blend-mode_property.shtml" target="_blank">background-blend-mode プロパティで背景をブレンドしてみよう | WWW WATCH</a></li>
</ul>

#### １２．すりガラス風のボックス

ぼかすだけなら<code>-webkit-filter: blur()</code>で OK ですが、こちらのサイトに擬似要素を使い、背景だけぼかし文字をそのまま表示する詳しい方法が書いてありましたのでメモ。

<ul>
<li><a href="http://hack.aipo.com/2470/" target="_blank">CSSフィルター：背景の一部をぼかす表現 | Hack</a></li>
</ul>

### 文字

#### １３．文字の中心に線をひく

そろそろ画像を使わず、CSS のみで線の上に文字をのせたい。そんな時はこちらのサイトが参考になります。<code>display: flex;</code>と擬似要素を使ったシンプルな記述方法がリンク先の後半で解説してあります。

<ul>
<li><a href="http://terkel.jp/2014/01/text-with-horizontal-line/" target="_blank">横に水平線のあるテキスト</a></li>
</ul>

#### １４．二行目以降を 1 字下げる

こちらもごく基本的なインデントの使い方。<code>text-indent</code>にマイナスの値を設定して二行目以降にインデントを付ける方法。本来は１行目のインデントを指定するプロパティです。

<ul>
<li><a href="http://www.mk2-style.com/blog/621" target="_blank">CSSで二行目以降を1字下げる | MK2-BLOG～西宮のWEBデザイナー日記</a></li>
</ul>

#### １５．span で改行させる

問い合わせページの注釈など、br を使わずに改行する最も簡単な方法。改行させたい文字を<code>span</code>で囲み、<code>display: block;</code>で OK。

<ul>
<li><a href="http://taneppa.net/display-inline-block/" target="_blank">CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！</a></li>
</ul>

#### １６．文中の br を一発で消す

不用意に入れられた br タグが邪魔だけど多すぎて消すのに苦労しそう。一発で消す方法がありました。こちらでご紹介してあるように<code>p br { display: none; }</code>で消すことが可能です。

<ul>
<li><a href="http://www.msng.info/2013/03/turning-off-html-br-with-css.php" target="_blank">HTML の br タグを CSS だけで消す方法 - 頭ん中</a></li>
</ul>


Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ


## TL;DR

小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。

今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。

### エフェクトサンプル

#### １．アニメのようにテキスト下の画像を移動させる

アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。`background-clip`を使って画像をテキストでくり抜き、アニメーションで`background-position`の位置を右に移動させます。

```html
<div class="type-mask">サンプルテキスト --------</div>
```

```css
.type-mask h2 {
  -webkit-animation: scrollmask 10s ease 1.5s infinite;
  -webkit-background-clip: text;
  background-image: url(img/sample.jpg);
  color: transparent;
  font-size: 80px;
}
@-webkit-keyframes scrollmask {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
```

#### ２．映画のように文字や画像に遠近感を出して動かす

`rotateX`による X 軸（横）回転だけだと縦に縮んだようにしか見えませんが、遠近感の指定をする`perspective`を使うと、文字や画像のように立体的に見せることができます。`perspective`の数値は小さいほど遠近感が強くなります。

```html
<div class="type-pers-parent">
  <div class="type-pers-child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor nisl id est auctor mollis sed non urna. Sed et ornare neque.</div>
</div>
```

```css
.type-pers-parent {
  perspective: 150px;
  -webkit-perspective: 150px;
  height: 200px;
  background-color: #222;
  overflow: hidden;
}
.type-pers-child {
  text-align: justify;
  padding: 5%;
  -webkit-animation: typetext linear 15s infinite;
  color: #f1c40f;
  letter-spacing: 1px;
}

@-webkit-keyframes typetext {
  0% {
    transform: rotateX(45deg) translate(0, 0);
  }
  100% {
    transform: rotateX(45deg) translate(0, -500px);
  }
}
```

#### ３．動く斜線プログレスバー

`linear-gradient`で斜線ストライプを作ったら、`background-position`で左右の位置をアニメーションで動かします。

```html
<div class="type-stripe"></div>
```

```css
.type-stripe {
  height: 10px;
  background: linear-gradient(-45deg, #3498db 25%, #fff 25%, #fff 50%, #3498db 50%, #3498db 75%, #fff 75%, #fff);
  -webkit-animation: stripeBg 10s linear infinite;
  background-size: 20px 20px;
  border: 1px solid #3498db;
}
@-webkit-keyframes stripeBg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
```

- [[参考] CSS3 のみで斜線ボーダーの背景装飾を実装してみる](http://helog.jp/hp/css3-hp/2312/)

#### ４．文字をバウンドさせながら表示する

文字や画像をバウンドさせながら揃えます。ロゴに使うなどページが表示された時に 1 回だけ動かしたい場合は`infinite`を外して以下のように記述します。ボールが跳ねる時に横と縦を一瞬だけ伸縮させたいので、方向転換したタイミングで`scale`を付与しています。

```html
<div class="type-textbound">
  <span class="textbound1">L</span>
  <span class="textbound2">O</span>
  <span class="textbound3">G</span>
  <span class="textbound4">O</span>
</div>
```

```css
.type-textbound {
  font-size: 60px;
  text-align: center;
}

.textbound1 {
  -webkit-animation: bound 0.5s ease-in-out;
}
.textbound3 {
  -webkit-animation: bound 0.7s ease-in-out;
}
.textbound2 {
  -webkit-animation: bound 0.9s ease-in-out;
}
.textbound4 {
  -webkit-animation: bound 1s ease-in-out;
}

@-webkit-keyframes bound {
  0% {
    transform: scale(0) translate(0, -500px);
  }
  50% {
    transform: scaleX(2) translate(0, 200px);
  }
  70% {
    transform: scaleY(0.5) translate(0, -100px);
  }
  90% {
    transform: scaleX(1.5) translate(0, 50px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
```

#### ５．文字を一瞬だけ反射させる

`transform: rotate`で光の反射を斜めに傾け、色を透過させ文字の上をアニメーションで通過させます。擬似要素である:before にアニメーションを組み込んでます。

```html
<div class="type-shine">SAMPLE</div>
```

```css
.type-shine {
  font-size: 60px;
  position: relative;
  overflow: hidden;
}
.type-shine:before {
  -webkit-animation: shine 0.6s ease 1.5s;
  content: '';
  position: absolute;
  top: 0;
  left: -250px;
  width: 100%;
  height: 100%;
  transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0);
}
@-webkit-keyframes shine {
  0% {
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0);
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 150%, 0);
    background: rgba(255, 255, 255, 0.5);
  }
}
```

#### ６．カウントダウン

before 要素を付け content プロパティでカウンタ名`content: counter(number);`を指定することで連番を入れます。その後`nth-child()`とアニメーション`animation-delay`を使って遅延させる順序を指定し数字を表示させます。

```html
<div class="type-countdown">
  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>

  <div class="type-countdown-list"></div>
</div>
```

```css
.type-countdown {
  position: relative;
  height: 100px;
  width: 100%;
}

.type-countdown-list {
  counter-increment: number;
  position: absolute;
  -webkit-animation: countdown 1s;
  margin: auto 0;
  width: 100%;
  opacity: 0;
  font-size: 60px;
  text-align: center;
}

.type-countdown-list:before {
  content: counter(number);
}

.type-countdown-list:nth-child(9) {
  -webkit-animation-delay: 1s;
}
.type-countdown-list:nth-child(8) {
  -webkit-animation-delay: 2s;
}
.type-countdown-list:nth-child(7) {
  -webkit-animation-delay: 3s;
}
.type-countdown-list:nth-child(6) {
  -webkit-animation-delay: 4s;
}
.type-countdown-list:nth-child(5) {
  -webkit-animation-delay: 5s;
}
.type-countdown-list:nth-child(4) {
  -webkit-animation-delay: 6s;
}
.type-countdown-list:nth-child(3) {
  -webkit-animation-delay: 7s;
}
.type-countdown-list:nth-child(2) {
  -webkit-animation-delay: 8s;
}
.type-countdown-list:nth-child(1) {
  -webkit-animation-delay: 9s;
}

@-webkit-keyframes countdown {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
```

上記のカウントダウンについては以下の書籍に詳しい内容が掲載されています。

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=1093045-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4798132195&linkId=826dcd71088661dfa946908efe358fc9"></iframe>

### CSS アニメーションの種類と違い

#### ７．アニメーション

CSS アニメーションの種類と違いを簡易的ながら書いておきます。

<div class="custom-table-1">
    col 1      | col 2 | col 3                
    ---------- | ----- | ---------------------
    animation  | ループ有り | ページ表示後 即可動           
    transform  | ループ無し | 変形（移動・拡大・回転・傾斜・遠近）が可能
    transition | ループ無し | 滑らかに変化させる（移動時間を調整）   
</div>

#### ８．transform（変形）の種類

transform プロパティは要素に変形効果を付与します。効果を連結する場合は半角スペースで区切って複数の効果を適用させることが可能です。逆回りや縮小する場合は数値を－（マイナス）にします。

##### transform の種類１

| col 1       | col 2 | col 3                           | col 4                            |
| ----------- | ----- | ------------------------------- | -------------------------------- |
| translate   | 移動  | transform: translate(20px,20px) | (右、下)に 20px 移動             |
| rotate      | 回転  | transform: rotate(45deg)        | (45 度)時計回りに回転            |
| skew        | 傾斜  | skew(0,170deg)                  | (横、縦)に傾斜                   |
| scale       | 縮尺  | transform: scale(1.2)           | (横、縦)に拡大                   |
| perspective | 遠近  | transform: perspective(200)     | 数値が小さいほど遠近感が強くなる |

##### transform の種類２

| col 1                        | col 2                    | col 3                        | col 4          |
| ---------------------------- | ------------------------ | ---------------------------- | -------------- |
| transform-origin             | 基点                     | transform-origin: 100% 100%; | 左上からの位置 |
| transform-style              | 描写                     | transform-style:flat;        |
| transform-style:preserve-3d; | 子要素を平らに表示するか |

子要素を立体に表示するか
backface-visibility | 裏面 | backface-visibility: visible;  
backface-visibility: hidden; | 裏面の表示／非表示

### 他のエフェクト

比較的最近のもので気になったもの、面白いエフェクトを海外サイトからご紹介します。

#### ９．左右に広がるプリローダー

擬似要素にアニメーションで指定し`background-color`の色と幅を変化させています。

- [Material Design Preloader](http://codepen.io/Michiel/pen/ogXrBX)

#### １０．文字を遅延させ表示

こちらは、文字を順番に遅らせて消しているエフェクト。それぞれの文字にクラスを付けアニメーションの開始を遅らせる`animation-delay`を指定し遅延、全体に`transform: scale`で伸縮させるエフェクトを付与しています。

- [A Pen by Ian Gloude](http://codepen.io/igloude/pen/ByVYZK)

#### １１．動くテキストリンク

テキストリンクをホバーした際に発生する様々なエフェクト。3D 回転・注釈表示・スライド・波紋など沢山の種類のサンプルが掲載されています。

- [Creative Link Effects](http://tympanus.net/codrops/2013/08/06/creative-link-effects/)

#### １２．オープニングを連想させるテキスト

映画などのオープニングを連想させるブラーが解除されていくかのような効果。こちらも`animation-delay`で文字ごと遅延、`rotateY`で縦軸に傾けたり、動きを組み合わせて表現しています。

- [Text Opening Sequence with CSS Animations](http://tympanus.net/codrops/2013/04/30/text-opening-sequence-with-css-animations/)

#### １３．モーダルウィンドウ２つ

js を使わずに、クリックでの制御を行うパターン２つ。一つ目はボタンをクリックでポップアップ、２つ目はクリックで全体にオーバーレイ。

- [Flipside](http://codepen.io/hakimel/pen/ZYRgwB)

- [No JS modal popup window](http://codepen.io/davidicus/pen/ZYjoVO)

#### １４．アウトラインを使ったボタンエフェクト

ボタンにマウスオーバーする際の、少しひねりのあるエフェクト一覧。使いどころは難しいですが傾斜や円の伸縮などアイデアとしては面白いです。

- [Button Hover Effects](http://codepen.io/kjbrum/pen/wBBLXx/)


ここまで動かせる！楽しいcss アニメーションのサンプル集


## TL;DR

テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。

### 機能

要件定義をもとに指定の機能が実装済か確認します。

| 項目               | 解説                                                                                                                           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| テスト公開ページ   | IP 制限・ベーシック認証のテスト.htaccess ファイルを作成                                                                        |
| ログイン           | ユーザー認証失敗時のメッセージや動作の確認、ログイン時の IP 制限管理画面に IP 制限をかける                                     |
| カスタムフィールド | 膨大なデータでも保存可能か、他ブラウザで稼働するか。Firegoby                                                                   |
| 予約管理           | フォームからの問い合わせが指定のメールに届くか、SSL を使用しているか                                                           |
| SSL テスト         | SSL 証明書がインストールされているか確認 － ＠IT                                                                               |
| リダイレクト       | 旧 url から新 url へのリダイレクト、同一ドメイン内のリダイレクト、URL の書き換え・リダイレクト処理。mod_rewrite の説明書（WP） |
| google map         | 埋込画面で、スクロールによる制御を調整したか、googleMap V3 を使っているか                                                      |
| 検索ボックス       | 検索結果ページで検索キーワードを正しく拾っているか                                                                             |
| 問い合わせ         | メール自動返信、メール送信後にリダイレクト、表示を切り替え                                                                     |
| CRM                | 問い合わせやメールアドレス管理、CRM（顧客関係管理）は正しく動作するか Flamingo                                                 |
| スパム対策         | Akismet の設定 Akismet を有効化してスパムコメントを防ぐ設定と API キーの取得方法 - SEO のホワイトハットジャパン                |

### コーディング

| 項目             | 解説                                                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| バリデーション   | マークアップは正しいか、文字コードは UTF-8 になっているか The W3C Markup Validation Service                                                                               |
| ビューポート設定 | スマートフォン OS ブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=no と指定すればピンチイン／ピンチアウト（拡大・縮小）を無効化できます。 |
| レタリング       | 文字・書体は指定どおりにデザインされているか、他環境 PC でも、フォントにズレがないか                                                                                      |
| 表示速度         | パフォーマンス・チューニングテストを行う。表示速度に問題はないか                                                                                                          |
| 不要なソース     | ファイル内にサイトの絶対パスが残っていないか、ソース内の不要なコメントは除去しているか                                                                                    |

### ドメイン

| 項目                        | 解説                                                                                                                                   |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| co.jp の新規取得            | 会社情報や登記簿謄本が必要な旨を先方に伝えたか※ co.jp の新規取得の場合時間がかかります。                                               |
| ドメイン本登録の確認        | ※ 「有限会社」は、2006/05/01 以降は新規設立をすることができない組織として上位登録機関(JPRS)により、制限されています。                  |
| google apps 用に DNS を設定 | メールを GoogleApps で利用させる場合、サーバで A レコード情報（CNAME レコード情報）を設定します。 ※反映に大体数時間～ 3 日かかります。 |

### UX

| 項目               | 解説                                                                                                                          |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| スクロール         | 快適にスクロールできるか、スクロール量に問題ないか                                                                            |
| 不要なエフェクト   | ローディングエフェクトなど、指定以外のデザインを多様していないか                                                              |
| インタラクション   | ユーザーの入力に応じて適切な応答や画面遷移ができているか                                                                      |
| テーブル           | スマホ時の table の見え方に問題ないか、縦長に伸びていないか。レスポンシブ Web デザインでテーブルを使う時の小技 │ Design Spice |
| 解像度と画像       | 様々なパターンによる解像度でグリッド崩れや画像周辺の崩れが起こっていないか                                                    |
| ファインダビリティ | スムーズに情報へのアクセスができるか、必要な情報を探しやすく配置しているか。ナビやパンくず、メニューなど。                    |

### 表記とレイアウト

| 項目                             | 解説                                                                                                                                                                                               |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 表記                             | 企業指定の表記規定のゆれ、文章のスペルミス、改行の位置、行間、ジャンプ率の見直し                                                                                                                   |
| ダミー画像                       | 画像切れはないか、画像なしの場合ダミー画像は表示されるか                                                                                                                                           |
| アンカーリンク                   | リンク切れはないか、ページ内リンクは正常に動作するか                                                                                                                                               |
| 階層                             | ディレクトリの階層が深くなっていないか                                                                                                                                                             |
| プログレッシブ・エンハンスメント | プログレッシブ・エンハンスメントの考え方を先方に話したか。どの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。 |
| スマートフォン                   | スマートフォンでの表示崩れはないか、実機でチェックしたか                                                                                                                                           |
| 404 ページ                       | 404 ページの設置と画面を先方に確認                                                                                                                                                                 |

### ブログ

| 項目                               | 解説                                                                                                                                                                                       |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| RSS 配信（ブログ・ニュース）の確認 | ブログ・ニュースの配信は行えるか、feedly のアイキャッチ画像設定は済んだか。アイキャッチ画像を RSS リーダーに表示 - ネタワン                                                                |
| インポートエラー                   | phpmyadmin エキスポート、xml インポート処理の確認。 制限のエラーがでないか、移行前に既存記事のバックアップ（データ全て）は取ったか。WordPress のエクスポートで全部出力されない問題の対処法 | IDEA\*IDEA |

### WP 管理画面

| 項目                 | 解説                                                                                                                                 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| 問い合わせリンク     | 管理画面内に自社への問い合わせリンクを設置したか、ダッシュボードに注意書き、使い方などの文言を追加                                   |
| モデレーション       | 読者が投稿したコメント等をチェック可能か、メールで先方へ通知できるようになっているか                                                 |
| 設定                 | テーマ、プラグイン、バージョンアップ通知 OFF、管理画面内のデフォルト設定・プラグインを非表示、自社の設定画面を設置したか、稼働するか |
| 権限                 | 管理画面内のユーザー権限の設定、通知メール先の設定を行ったか                                                                         |
| 画像アップロード調整 | 記事投稿時、画像アップロード時に制限をかけているか、大きな写真ファイルでテストしたか                                                 |
| 固定ページ           | 管理画面内で、固定ページのコンテンツ内を簡単に編集できるようにしてあるか、テンプレートを適用しているか                               |

### 管理マニュアル

| 項目     | 解説                                                                                                             |
| -------- | ---------------------------------------------------------------------------------------------------------------- |
| 表記     | ログインの ID とパスを記載したか、管理画面と管理マニュアルの内容（メニューのスクショ等）は一致しているか         |
| URL      | 参考 URL のアドレスは打ち込みやすいように短く記載してあるか、または QR コードを貼ってあるか                      |
| 使い方   | 画像とリンク挿入の解説は分かりやすいか、PDF ファイルの挿入を記載しているか、コメントの扱いを明確に解説してあるか |
| SNS 運用 | SNS の簡易的な運用方法を記載したか（現担当者が変わる場合があるので）                                             |

### Google Analytics

| 項目                 | 解説                                                                                    |
| -------------------- | --------------------------------------------------------------------------------------- |
| 埋め込み             | Google Analytics の埋め込み、複数のサイトを一元管理できるように設定したか               |
| コンバージョンの設定 | Google Analytics コンバージョンの設定（問い合わせ／資料請求／予約／メルマガ登録／発注） |

### SEO

| 項目                 | 解説                                                                                                                                     |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| メタ設定             | タイトル・ディスクリプション・キーワードの設定 ※クライアントのメタ入力労力を省く場合、ブログ記事のメタは自動出力（本文からの抜粋）にする |
| マイクロフォーマット | マイクロフォーマット（文章をクローラーに正しく伝える） リッチスニペット設定。microdata について - ウェブマスター                         |
| ウェブマスター設定   | Webmaster の設定、GA との連携は済んだか                                                                                                  |
| クローラー対策       | OGP 、サイトマップ、パンくず設定                                                                                                         |

以上、納品前にサイトをチェックする時に使えるシートでした。


テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げ

今Web制作している人必見の品質・納品チェックシート


## TL;DR

遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。

ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。

### メール用テンプレート

ここからはメール返信用です。

#### コーポレートサイト

コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概算見積もりを出します。以下、リニューアルの場合。

##### ドメイン

ドメインは既存の「xxxx」を希望されますか。

##### ご予算

概算で構いません。その範囲でご提案いたします。

##### ご希望のサーバ

既存を使う／別のサーバを提案して欲しい （ご選択ください）

既存サーバをご希望の場合：例「ご契約後、サーバ等に移転させるために既存サイトを管理されている方から FTP 情報を聞き、ご提示いただくことは可能でしょうか。」

※ 大体の目安としてコーポレートであればさくらの VPS の 2G くらい、通販サイトであれば VPS4G/SSD あれば十分だと思います。

##### 顧客ターゲット

性別：女性／男性／男女 （ご選択ください）

年代：20~30 歳／30~40 歳／40~50 歳／50 歳以上／全て

##### 期待する効果

ブランディング／集客／問い合わせ／資料請求／他

##### 機能と目的

現サイトで利用していて必須の機能や問い合わせのほかに追加したい機能はございますか。

- 例：予約機能、メルマガ機能をつけたい
- 例：○○ に対して ○○ へのコンバージョンを高めたい
- 例：表示高速化させたい

##### リニューアル公開時期

だいたいの予定で構いません。

##### レスポンシブ対応

PC／スマホ／レスポンシブ／他

スマホ表示する際：ご希望の機種はございますか。

##### デザインの希望

雰囲気、色合い、テーマカラー、フォント

※（参考サイトがあれば URL をお送りください）

##### 素材

以下の素材をご提供いただくことは可能でしょうか

- ロゴデータ：ai／psd／png
- 写真データ：サイズが大きめの写真／写真はない

##### コンテンツ保守

HP 完成後のバナー作成、写真差し替え、電話サポートを希望されますか。

##### 保守／ランニング

ご希望の保守（アクセス解析レポート／SEO／広告出稿代行／サーバー保守／ドメイン維持管理／サイト更新／ライティング）

##### ブログなどのデータ移行

あり／なし

#### EC サイト

上記で説明したコーポレートの内容に以下を付け加えます。「新規」と「リニューアル」では見積もり工数が大きく変わるので注意しなければいけません。

※EC サイトの場合は特に、既存サイトがカスタマイズされていたら、カスタマイズ部分を残したまま移行しないといけない時があるので想定外の人日がかかる場合があります。クライアントにカスタマイズされていそうな場所を分かる範囲で良いので聞いておきたいですね。

##### データの移行

顧客データの移行： あり／なし  
※ 希望される場合は CSV でご提供いただく必要があります

商品データの移行： あり／なし  
※ 希望される場合は CSV でご提供いただく必要があります

##### 決済の種類

クレジット決済組込み：あり／なし

##### SSL

ご希望の SSL：安く抑える／国産／携帯対応

※ SSL は、サーバーとユーザー間の通信を暗号化する機能です。

##### サーバ移行などの希望

データ量が多い／少ない

※ ランニングコストやパフォーマンスを改善されたい場合、貴社のデータ量に最適なサーバを提案します

以上、いざという時のサイト制作問い合わせに使えるテンプレートでした。


遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を

Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート


2014 年 12 月 18 日発売の雑誌 Web Designing 2015 年 1 月号に執筆させていただきました。特集 2 の『海外サイトに学ぶこれからのデザイン、UI、表現技術 実践的 Web トレンド分析 2015』に掲載されています。

Web 制作会社の本棚に高い確率で置いてある雑誌「Web Designing」。 本書 84 ページからは海外サイトに学ぶ「これからのデザイン」を学べます。2015 年の話題を先取りした Web トレンド情報が満載です。

筆者の会社でも Web Designing を毎月購読しており、まさかお声をかけていただけるとは思ってもみなかったのでとても嬉しく思いました。

初めての寄稿だったので最初は勝手がわかりませんでしたが貴重な体験となりました。また、編集者さんの校正力の高さにも驚かされ刺激にもなりました。

筆者の執筆テーマは、

- 時間経過によって変化する背景色（P97）
- 背景画像や動画となじみの良いゴーストボタン（P100）
- CSS3 によるホバーキャプション（P101）

の 3 つです。

他にも各筆者さんたちの魅力的な Web トレンド分析が満載です。

- 訴求内容からデザインを構築するコンテンツファースト（text：鈴木慶太朗氏）
- 一歩進んだマルチデバイス対応（text：小川裕之氏）
- タッチデバイスと相性の良いナビゲーション表現（text：中村和正氏）
- ワンページサイトをより魅力的に見せる表現（text：ミナベトモミ氏）
- フルスクリーンで魅せる動画や静止画の多様な表現（text：利倉健太氏）
- 高解像度ディスプレイにも美しく表示できる SVG 画像（text：Mana 氏）
- 日本語 Web フォントとタイポグラフィ（text：永井大輔氏）

ぜひ読んでみてください。

[Web Designing (ウェブデザイニング) 2015 年 01 月号を購入する](http://www.amazon.co.jp/Web-Designing-%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0-2015%E5%B9%B4-01%E6%9C%88%E5%8F%B7/dp/B00QKSM8QU%3FSubscriptionId%3DAKIAJHRAR7UZYV5GQDTA%26tag%3D1093045-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00QKSM8QU 'Web Designing (ウェブデザイニング) 2015年 01月号 [雑誌]')


2014年12月18日発売の雑誌WebDesigning2015年1月号に執筆させていただきました。特集2の『海外サイトに学ぶこれからのデザイン、UI、

Web Designing 2015年 1月号に執筆させていただきました


## TL;DR

前回（<a href="https://commte.net/4861" target="_blank">あのサイトでさりげなく使われていた CSS 小技集</a>）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。

### インタラクティブ

#### １．マウスオーバーで自動スクロールさせる

最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分は<code>overflow: hidden;</code>で隠しながら<code>transition</code>で遅延させ擬似的にスクロールしているように見せます。
html

```html
<div class="box-fixed">
  <div class="field-wrap">
    <div class="field-detail"></div>
  </div>
</div>
```

css

```css
.box-fixed {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.field-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.field-detail {
  transition: all 1s;
}

.field-detail img {
  width: 100%;
}

.field-detail:hover {
  margin-top: -2000px;
  transition: all 15s;
  -webkit-transition: all 15s;
}
```

#### ２．背景を固定し、ゴーストボタンを天地中央に配置

画像を背景いっぱいまで広げ固定させ、天地中央に配置したゴーストボタンを配置する見せ方が近年では多くなってきました。<code>background-attachment: fixed;</code>で背景を固定し<code>background-size: cover;</code>で背景をピッタリ配置します。天地中央にしたいので<code>display: table;</code>を使います。ボタンの視認性を高めるために画像の上に透過色をのせています。
html

```html
<div class="fixed-header">
  <span>SAMPLE</span>
</div>
```

css

```css
.fixed-header {
  background: url(img/long.png) 0 0 no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: table;
  height: 200px;
  width: 100%;
}

.fixed-header p {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.fixed-header span {
  border: 1px solid #fff;
  padding: 10px 20px;
}
```

上を利用して、WordPress のアイキャッチ画像を記事ごとに取得し背景に使うことも出来ます。<code>background:url()</code>は記事ごとに変更する必要があるので直接ソース内に記述してもいいですね。

```php
<div style="background: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>) 0 0 no-repeat; background-attachment: fixed; background-size: cover; background-position: center; opacity: 0.9;">
```

### ボックス

#### ３．ボックスを左右中央に配置し、中を等幅にする

float を使わず横並びと均等配置させたいのでフレキシブルボックスレイアウトを使います。横並びは要素に<code>display: flex;</code>と記述するだけで実現可能でしたよね！後は、<code>justify-content: center;</code>で中央に詰めて配置、後は width で横幅を指定すれば等幅になります。モバイル時には display: block;などで解除します。
html

```html
<ul class="fbox">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
```

css

```css
ul.fbox {
  display: flex;
  display: -webkit-box; /* Safari */
  list-style: none;
  padding: 0;
  justify-content: center;
  -webkit-box-pack: center;
}

ul.fbox li {
  background: #ccc;
  margin: 10px;
  padding: 10px;
  width: 20%;
  word-wrap: break-word;
}
```

#### ４．ページネーション：中を等間隔にする

こちらも<code>display: flex;</code>で横並び、<code>justify-content: space-around;</code>を使い等間隔にしています。<code>justify-content</code>は詰め方を指定するプロパティです。
html

```html
<ul class="pagination">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
```

css

```css
ul.pagination {
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 0;
  /* Safari 6.1+*/
  display: -webkit-flex;
  -webkit-justify-content: space-around;
  text-align: center; /*旧ブラウザ用*/
}

ul.pagination li {
  background: #ccc;
  display: inline-block; /*旧ブラウザ用*/
  margin: 10px;
  padding: 10px;
  word-wrap: break-word;
}
```

#### ５．自動計算させる

割り切れないような中途半端な数字に対しては calc で自動計算するという方法もあります。以下の例だと合計 2%だけマージンを取って、<code>width: calc(98% / 3);</code>といった感じで、残りの 98%を３分割します。両端にマージンを入れたくない時や、ボーダー分の幅を引きたい時に。
html

```html
<ul class="cal">
  <li></li>
  <li></li>
  <li></li>
</ul>
```

css

```css
.cal {
  list-style: none;
  padding: 0;
  overflow: hidden;
  zoom: 1;
}

.cal li {
  background: #222;
  margin-right: 1%;
  height: 30px;
  float: left;
  width: 32.6%; /*非対応ブラウザ用*/
  width: calc(98% / 3);
}

.cal li:last-child {
  margin-right: 0;
}
```

### UI

#### ６．ナビゲーション：下線を中心から開く

<code>transform</code>プロパティは拡大・縮小・回転などの変形処理を行うことができます。こちらはマウスオーバー時に中心からアンダーラインが広がっていくように見える方法です。ボーダーを使わず、要素を拡大・縮小させる<code>transform: scale();</code>を使って開閉させます。
html

```html
<nav class="gn">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

css

```css
.gn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.gn li {
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

nav.gn li a {
  color: #222;
  letter-spacing: 2px;
  position: relative;
  text-decoration: none;
}

nav.gn li a:hover:before {
  visibility: visible;
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

nav.gn li a:before {
  background-color: #222;
  bottom: -5px;
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  visibility: hidden;
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
}
```

#### ７．カテゴリリスト：CSS で円と矢印を同時に作る

<code>before</code>要素で円、<code>transform: rotate(45deg)</code>で矢印をつくり円の上に乗せます。矢印は<code>border-radius</code>で滑らかにします。同じスピードで戻るように transition を hover 以外にも指定します。
html

```html
<ul class="arrow">
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
```

css

```css
.arrow li {
  background: #ddd;
  color: #9e9e9e;
  list-style: none;
  margin: 0 0 1px 0;
  padding: 15px;
  position: relative;
  transition: 0.5s linear;
}

.arrow li::before {
  background: #eee;
  border-radius: 50%;
  content: '';
  padding: 14px;
  position: absolute;
  right: 11px;
  top: 10px;
  width: 1px;
}

.arrow li::after {
  border-right: 4px solid #9e9e9e;
  border-top: 4px solid #9e9e9e;
  border-radius: 2px;
  content: '';
  margin: 0 0 0 10px;
  height: 10px;
  right: 20px;
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 17px;
  width: 10px;
}

.arrow li:hover {
  background: #bbb;
  color: #fff;
  transition: 0.5s linear;
}
```

#### ８．タグクラウド：CSS で三角形と円を同時に作る

擬似要素を使い before で三角形、after で円をつくりタグクラウドを作ります。
html

```html
<div class="tagcloud">
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
  <a href="#">テキスト</a>
</div>
```

css

```css
.tagcloud a {
  background-color: #ccc;
  border-radius: 2px 0 0 2px;
  color: #222;
  display: inline-block;
  height: 30px;
  margin: 5px 10px;
  line-height: 1.8;
  padding: 0 15px;
  position: relative;
  text-decoration: none;
  transition: all 1s linear;
}

.tagcloud a:hover {
  color: #3498db;
}

.tagcloud a:after {
  background: #eee;
  border-radius: 50%;
  content: '';
  padding: 5px;
  position: absolute;
  right: 0;
  top: 10px;
  width: 1px;
}

.tagcloud a:before {
  border: 15px solid transparent;
  border-left: 15px solid #ccc;
  content: '';
  position: absolute;
  right: -30px;
}
```

### マウスオーバーとキャプション

#### ９．グラデーションのキャプションを出す

マウスキャプションの種類の中でもグラデーションをオーバーレイするのは、まだ少ないかなと思ったので。<code>translateY()</code>で Y 軸方向に移動させます。通常時は<code>translateY(100%)</code>で外に出し、マウスオーバー時に元の位置に戻しています。
html

```html
<figure class="overray">
  <figcaption class="overray-cap">キャプション</figcaption>
</figure>
```

css

```css
figure.overray {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.overray-cap {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: all 0.35s;
  width: 100%;
  -webkit-transition: all 0.35s;
}

figure.overray:hover .overray-cap {
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

figure.overray img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.overray-cap p {
  padding: 25% 0;
}
```

#### １０．一旦モノクロに変更し、マウスオーバー時に色をつける

横並びを実現する<code>display:box</code>を使い横に並べます。画像をグレースケールにする<code>-webkit-filter: grayscale()</code>の値をマウスオーバー時に 0%に変更しグレーを解除させます。
html

```html
<div class="sample-filter"></div>
```

css

```css
.sample-filter img {
  -webkit-filter: grayscale(100%);
}
.sample-filter img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}
.sample-filter {
  display: box;
  display: -webkit-box;
}
.sample-filter img {
  width: 30%;
  transition: 0.4s;
}
```

#### １１．テキストと下線を中心から開く

マウスオーバー時に要素を拡大・縮小させる<code>transform: scale();</code>を使って開閉させます。
html

```html
<figure class="txline">
  <figcaption class="txline-cap">
    <span>CAPTION</span>
  </figcaption>
</figure>
```

css

```css
figure.txline {
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

figcaption.txline-cap {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  transform: scaleX(0);
  width: 100%;
  -webkit-transform: scaleX(0);
}

figure.txline:hover .txline-cap {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

figure.txline img {
  vertical-align: bottom;
  width: 100%;
}

figcaption.txline-cap p {
  font-size: 2em;
  margin: auto;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

figcaption.txline-cap span {
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  padding: 10px;
}
```

以上、近い将来使う頻度が高くなるかもしれない CSS 小技集でした。


[続編] 効率的になった！最近のサイトで使われていたCSS小技集


## TL;DR

2014/12/01：続編である「<a href="https://commte.net/4887" target="_blank">最近のサイトで使われていた CSS 小技集</a>」を書きました。

今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。

### 画像

#### １．キュレーションサイト風のランキングボタン

キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。<code>counter-increment</code>で数値を増加させ、<code>content: counter()</code>でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。
html

```html
<ul class="sample">
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
  <li><img src="xxx.png" /><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
</ul>
```

css

```css
ul.sample {
  overflow: auto;
}

ul.sample li {
  counter-increment: sample;
  clear: both;
  line-height: 2;
  list-style-type: none;
  position: relative;
}

ul.sample li:before {
  border-radius: 50%;
  background: #222;
  color: #fff;
  content: counter(sample);
  left: -5px;
  line-height: 1.5;
  font-size: 12px;
  padding: 0 5px;
  position: absolute;
  top: 5px;
}

ul.sample img {
  height: 55px;
  float: left;
  padding: 10px 10px 0 0;
  width: 55px;
}

span.post-title {
  font-size: 14px;
  line-height: 2;
}
```

counter プロパティを適用する要素に before、after 要素を付け content プロパティでカウンタ名を指定することで連番を挿入することができます。
他に content プロパティは、<code>h1{ content: url(logo.png);}</code>のように文章やテキストなどに画像を入れたり置換することも可能です。

<ul>
<li><a href="http://www.htmq.com/style/content.shtml" target="_blank">content－スタイルシートリファレンス</a></li>
</ul>

#### ２．画像の右上に三角形の要素を配置する

長方形のラベルは見かけるけど、三角形はまだ多くないのでメモ。画像の右上に三角形のスペースを作り文字を載せる方法。横幅 200px の画像の上に三角形ラベルを配置したい場合は以下のようになります。
html

```html
<div class="image-inner">
  <span class="triangle">xxxx</span>
</div>
```

css

```css
.image-inner {
  overflow: hidden;
  position: relative;
  width: 200px;
}

.triangle {
  background: #222;
  color: #fff;
  font-size: 14px;
  padding: 70px 0px 3px;
  position: absolute;
  right: -97px;
  top: -41px;
  text-align: center;
  width: 200px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
```

#### ３．透過ネオンカラー

流行りの兆しがありそうなネオンカラーの透過（0.8 の部分は調整してください）カラーコードをいくつかメモしておきます。写真の上に載せるとそれっぽく見えます。画像の上に載せるラベルなどに使ったり。

| 16 進数 | RGBa(赤,青,緑,透過)   |
| ------- | --------------------- |
| #8c24c8 | rgba(140,36,200,0.8)  |
| #4d4dff | rgba(77,77,255,0.8)   |
| #ff6ec7 | rgba(255,110,199,0.8) |
| #ff2090 | rgba(255,32,144,0.8)  |
| #18ff00 | rgba(24,255,0,0.8)    |
| #00ff00 | rgba(0,255,102,0.8)   |
| #83f52c | rgba(131,245,44,0.8)  |
| #ffff00 | rgba(255,255,0,0.8)   |

#### ４．画像の表示範囲を指定

プロパティ clip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。position プロパティの値は absolute にします。rect の中は(上 右 下 左)となります。

<ul>
<li><a href="http://www.tagindex.com/stylesheet/img/clip.html" target="_blank">イメージ/画像を切り抜く - TAG index Webサイト</a></li>
</ul>

#### ５．透過させながら画像を合成する

<code>:cross-fade()</code>を使うと２枚の画像を合成できます。２枚の画像 URL を指定します。100%に近づくにつれ１枚目の透過度が高くなります。

```css
background: -webkit-cross-fade(url(xxx.jpg), url(xxx.jpg), 50%);
```

<ul>
<li><a href="http://blog.webcreativepark.net/2012/09/26-104641.html" target="_blank">クロスフェードを実現するCSS4のcross-fade() - to-R</a></li>
</ul>

#### ６．マスクをかける

WebKit 系のみ可、IE は非対応ですが<code>mask-image</code>を使うとマスクをかけることが出来ます。<code>mask-size</code>は表示サイズ、<code>mask-position</code>は表示位置を示します。

```css
-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
```

<ul>
<li><a href="http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20396442/" target="_blank">SafariとChromeのCSS対応：文字や画像にマスクをかける - builder by ZDNet Japan</a></li>
</ul>

### 簡単に要素を並べる

#### ７．左右に分割して区切り線を入れる

簡単にカラム数を増やし区切り線を入れます。<code>column-count</code>でカラム数を増やし、<code>column-rule</code>で区切り線を入れます。
html

```html
<div>それは一生いよいよその指導者として事のところで作ったた。いくら将来と用意違いはやはりこの採用たでかもから当てばいなけれには使用するだたて、多少にもまかり出ですましたた。 しかも今安心にしてはいませのあるて、中学には、何しろ私かするてするれないない読んられるないないとするて、言葉はかけるて出したん。</div>
```

css

```css
div {
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  -webkit-column-count: 2;

  -moz-column-rule: solid 1px #ccc;
  -ms-column-rule: solid 1px #ccc;
  -o-column-rule: solid 1px #ccc;
  -webkit-column-rule: solid 1px #ccc;
}
```

#### ８．段組（横並びで配置）

要素を横並びさせるならテーブル構造の<code>display: table</code>と<code>display: table-cell;</code>でも表現出来ます。
メリットは<code>border</code>による区切り線の高さを揃えたり、<code>vertical-align: middle;</code>で高さの中心に要素も持ってきたり出来るところです。
html

```html
<div class="column-table">
  <p class="mini-column">そうして筋か正直か誤解を担がたて、今中自分をあらといたいために大指図の絶対に思うらしくまし。</p>
  <p class="mini-column">今をもどうしても考えて蒙りありますですますて、今にいくらとどまるが脱却はなぜ恥ずかしいでのな。</p>
  <p class="mini-column">つまりこう万年は手本が好いで、ほかに何だか考えたでしとするば、ないたべきてそこでお安心へ味わっずたら。</p>
</div>
```

css

```css
.column-table {
  display: table;
  width: 100%;
}

p.mini-column {
  display: table-cell;
  vertical-align: middle;
  width: 30%;
  word-break: break-all;
}
```

#### ９．空要素に色をつける

セレクタに<code>:empty</code>を指定することによって、空要素にスタイルシートを適用することが可能となります。

```css
td:empty {
  background: black;
}
```

<ul>
<li><a href="http://zero.css-happylife.com/selectors/empty.shtml" target="_blank">:empty疑似クラス (E:empty)｜セレクタ｜CSS HappyLife ZERO</a></li>
</ul>

### 条件に応じて

#### １０．条件に一致しないと適用

「○○」じゃない時スタイルを適用したい！そんな時は否定疑似クラス<code>:not()</code>を使います。例えば not(h1)だけだと、body にも「h1 以外」が適用されてしまうので、以下のようにクラス名などをつけ詳細まで指定します。

```css
.logo :not(h1) {
  background: black;
}
```

<ul>
<li><a href="http://weboook.blog22.fc2.com/blog-entry-382.html" target="_blank">CSS3で追加されたセレクタ「:not()」について考えてみました｜Webpark</a></li>
</ul>

#### １１．条件一致すれば適用

こちらは CSS4 からのセレクタです。<code>:matches()</code>を使用すると、指定したセレクタと一致した場合にスタイルを適用出来ます。

<ul>
<li><a href="http://myakura.github.io/n/selectors4.html" target="_blank">CSS4セレクタ (Selectors Level 4) の新機能</a></li>
</ul>

### テキスト

#### １２．中だけ透過させてアウトラインを表示

<code>text-stroke</code>で文字にアウトラインを表示できます。<code>color: transparent;</code>を指定することで中を透過させる事が出来ます。分かりにくい時はフォントサイズを大きくします。

```css
h1 {
  color: transparent;
  -webkit-text-stroke: 1px #222;
}
```

#### １３．文字詰め

<code>text-rendering: optimizeLegibility;</code>でカーニング処理を行います。以下のサイトによると「ヒラギノ角ゴ・明朝」を指定していればカーニングが働くとのことです。

<ul>
<li><a href="http://terkel.jp/2012/09/text-rendering-optimizelegibility/" target="_blank">text-rendering: optimizeLegibility · terkel.jp</a></li>

</ul>

#### １４．アンチエイリアス

<code>font-smoothing</code>で文字を滑らかに表示します。

```css
div {
  -webkit-font-smoothing: antialiased;
}
```

### フルスクリーンメニュー

これから少し多くなりそうな画面全体をオーバーレイさせメニューを表示するものを<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>からチョイスしました。

#### １５．スライド

画面の切り替え時に、画面の縦方向全体を使いブヨっとした動きを出すスライダー。

<ul>
<li><a href="http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/" target="_blank">Wobbly Slideshow Effect | Codrops</a></li>
</ul>

#### １６．全画面モーダルウィンドウ

要素をクリックすることで、全画面に中身が表示されるエフェクト。

<ul>
<li><a href="http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/" target="_blank">Putting CSS Clip to Work: Expanding Overlay Effect</a></li>
</ul>

#### １７．全画面オーバーレイ

オーバーレイでメニューを出します。visibility プロパティでボックスを消さず、表示・非表示を切り替えています。こちらのエフェクトはよく見かけるようになりました。

<ul>
<li><a href="http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/" target="_blank">Fullscreen Overlay Effects</a></li>
</ul>


知っておくと便利！あのサイトでさりげなく使われていたCSS小技集


## TL;DR

どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。

### レイアウトの基本知識

#### １．分割、対称、軸

何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。

- [レイアウトのパターン | イディア：情報デザインと情報アーキテクチャ](http://www.idia.jp/report/pattern-of-layout/)

Photoshop の機能拡張はこちら。

- [黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがう Photoshop の機能拡張 | コリス](http://coliss.com/articles/build-websites/operation/design/photoshop-extension-divine-proportions-toolkit.html)

#### ２．イラストから学ぶ構図

紙面や画面、絵画などにおけるページ全体の構成の型、パーツの配置を構図（コンポジション：composition）といいます。構図パターンを知ることで「理解されやすい」自然なレイアウトを作ることができます。

こちらはイラストについて書かれていますが、配色バランス・構図など広義でのデザインが分かります。空想上のものにリアリティを出す方法、小さく描いた主役を目立たせるにはどうすればよいのかなど「誰にでも見やすい構図」を生み出すための知識。

- [【イラストの見栄えが良くなる】イラストレーター 中村佑介 先生が教える公開講座が凄い！｜萌えイラスト上達法！　お絵かき初心者の学習部屋](http://oekakigakusyuu.blog97.fc2.com/blog-entry-706.html)

こちらは漫画から学ぶ構図や視線の動き。Web コンテンツに漫画を取り入れたい場合や、バナー作成時、読みやすい導線の配置をしたいとき。時間軸、視線の流れの作り方など読みやすさを上げるためのテクニックです。

- [ドラゴンボールの左と右と読みやすさの秘密 - ニカイドウレンジ公式ブログ](http://nikaidorenji.blogspot.jp/2014/03/blog-post.html)

#### ３．ダイナミックシンメトリ―

安定感を感じさせる三角形、緊張感を出す逆三角形。三角形の構図は収まりのよいレイアウトを配置するための手法です。

こちらも構図に関するテクニック。三角形や黄金分割の他に面白かったのが、三分割法と呼ばれる[ダイナミックシンメトリー](http://plus.harenet.ne.jp/~tomoki/newcon/news/2009/031401/index.html)を使った配置方法。

- [漫画『進撃の巨人』の表紙に学ぶ、絵画の構図法 - Ust's Diary](http://syuraw.hatenablog.com/entry/2014/10/04/010106)

シンメトリーについてはこちら。なぜ対称性や規則性が必要なのか、サイトに左右対称・回転を取り入れる場合どうすれば良いのか具体的に解説してあります。

- [シンメトリー（対称性）を取り入れたデザインの基礎 | Web クリエイターボックス](http://www.webcreatorbox.com/tech/symmetry-design/)

#### ４．ホワイトスペース

タイポグラフィやレイアウトでは余白の使い方が重要になります。高級感や清潔感を出したいときなど、余白は何もないようでいて、意図的に配置されています。

例えば、小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。上品さを演出することもできますよね。

> 空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。

- [余白の美](http://hail2u.net/documents/ala-whitespace.html)

余白を calc で自動算出する方法はこちら。

- [余白を割合で分割 - Weblog - Hail2u.net](http://hail2u.net/blog/webdesign/split-margin-with-ratio.html)

#### ５．造形性

新たなものを創造しても上手くいかないことが多いですが、形をつくり整えることで完成度が上がります。筆者が名刺やコンテンツを作るときに、まず意識する部分がここです。

写真や文字をバランスよく配置し、読み手から信頼を得るためのテクニック。どうやって要素を整理整頓していくのか、グルーピングのコツ、アクセントの付け方を学びます。

- [レイアウト｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/miyasuku1.html)
- [デザインの基礎力をワンランクアップしたい私（Web デザイナー）の注意書き](http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/)

#### ６．プロポーション

お次は、ロゴや見出し、グリッドを作る時に使いたいツール。フィボナッチ数列や黄金比を取り入れるとバランスよく見えます。名刺用のテンプレートとグリッドレイアウトテンプレはこちら。

- [黄金比をつかって名刺をつくろう。 | SUECCO（スエッコ）](http://suecco.com/blog/19.html)
- [黄金比を取り入れたグリッドレイアウトの Web デザインを構築する為のテンプレートやアクションなどの補助キット・The Golden Grid - かちびと.net](http://kachibito.net/web-design/the-golden-grid.html)

見出しのサイズで使う場合は、本文の黄金比の(×1.61)倍で設定すると美しく見えます。Web では 16px の本文なら、見出しは 25px くらい。

- [“Twitee Lite”の Twitee(鳥のほう)はフィボナッチ数列を用いてデザインされている | Fum'style](http://fum-s-tyle.com/twitee-lite-about-twitee-design-fibonacci.html)
- [デザインの基礎、黄金比から大和比、第 2 黄金比まで｜ Web Design KOJIKA17](http://kojika17.com/2011/08/type-of-ratio.html)

### タイポグラフィ（基礎）

#### ７．行間・行送り・行長・行送り

文章が伝わっていないと感じたときに見直したいこと。文字を読みやすくするには行間（行の間隔）と行長（行の長さ）の設定も必要です。行間はフォントサイズの 2/3 ～全角くらいが読みやすい。どの文字の字間を詰めるか、空けるかを決定する際に参考になる記事です。

- [文字の読みやすさを生み出す為の知識と方法【後編】 | Basic Design Note](http://basicdesign-note.com/produce-the-readability02/)

イラレと Photoshop の文字を調節するショートカットキーはこちら。

- [文字入力を劇的効率化！Illustrator(Photoshop)16 の文字関連ショートカットテクニック | designek](http://design.iesnek.com/text-shortcut-illustrator-and-photoshop/)

#### ８．カーニング・字送り・文字ツメの違い

以前書きましたが、カーニングは隣り合う２つの文字間を調整すること、トラッキングは複数文字間（テキストブロック全体）を調整することでしたね。Photoshop／Illustrator なら`alt(Opt)+矢印キー`で出来ます。

- [文字組関連編 カーニング、字送り、文字ツメの違い](http://www.adobe.com/jp/print/tips/indesign/category9/page3_1.html)
- [ワンランク上のデザインにはかかせない Photoshop の文字詰め「カーニング・トラッキング」のまとめ](http://creativememomemo.com/phtoshop_kerning_and_tracking/)

#### ９．禁則処理

禁則処理とは句読点・括弧・拗促音（小さなひらがな）・音引き（ー）などの約物を行頭や行末にこないように調整することです。読みやすい文章を作るために必要な処理なので覚えておきます。

- [CSS の禁則処理について、色々調べてみたら大変だった件 - コツコツとブクマを消化していく](http://tamasally.hatenablog.com/entry/2014/03/13/005428)

jQuery で均等割り付けを表示する方法はこちら。

- [均等割り付けで美しい表デザインを実現する jQuery を作ってみました。 | 株式会社 LIG](http://liginc.co.jp/web/js/jquery/51134)

### タイポグラフィ（応用）

#### １０．フライヤーデザインから文字の配置方法を学ぶ

写真に文字を重ねる場合どうすればよいのか、文字の上に文字を重ねるには、文字の改変例など文字の配置問題を解決するためにポスターから学べる応用テクニック。

- [「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。 | Quoitworks blog](http://quoitworks.com/blog/280)

少し気になったので。Web のタイポグラフィのトレンドが今後どういった流れになっていくのか予想してある記事。フォントサイズ・見出し書体の割合など、次にデザイン時に参考にしたい情報です。

- [ウェブ・タイポグラフィーのベスト・プラクティス](http://hail2u.net/documents/web-typography-best-practices.html)

#### １１．和欧混植（書体を組み合わせる）

複数の書体を組み合わせて使う混植。構造が異なるフォントの組み合わせ方、和文と欧文を美しく調和させるためのテクニック。

- [フォントをより美しく魅せる和欧混植と組み合わせ | ニシザワのブログ](http://nishizm.com/index.php/webdesign/fontset/)
- [書体の使い方｜伝わるデザイン](http://tsutawarudesign.web.fc2.com/yomiyasuku2.html)

#### １２．アンチゴチ（書体を組み合わせる）

漫画の吹き出しにも混植があるということで。漫画吹き出しで使われるゴシックとアンチック体（かな専用書体、太い明朝体）の組み合わせ。（参考：[フリーフォントやさしさアンチック](http://www.fontna.com/blog/1122/)）

こちらによると文字の可読性を考えた結果、漢字にゴシック、かなにアンチック体を採用したそうです。

- [連載『嘘じゃない、フォントの話』(supported by モリサワ) 第 5 回：マンガの空気を生み出す「文字」 - 連載・コラム : CINRA.NET](http://www.cinra.net/column/morisawa/morisawa05-1.php)
- [Ustream.tv: ユーザー yuzuya: アンチゴチのおはなし, Recorded on 2010/10/02. デザイン](http://www.ustream.tv/recorded/9951348)

#### １３．スイススタイルを参考にする

1950 年頃スイスに多く見られた、整理整頓（グリッドや黄金比に基づく）されたタイポグラフィを中心としたデザイン。フラットデザインの参考に。

- [今話題のスイスデザインについてのまとめ - the NOIE](http://the-noie.blogspot.jp/2013/08/blog-post_5.html)
- [第 3 回 世界中で愛される書体、ヘルベチカとは | Think IT（シンクイット）](http://thinkit.co.jp/article/727/1)


どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な

2016-6-27

確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開

2015-5-18

Web Designing 2015年 6月号に執筆。Webサイト構築サービス８つ

2015-3-23

Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ

2015-3-16

ここまで動かせる！楽しいcss アニメーションのサンプル集

2015-1-26

今Web制作している人必見の品質・納品チェックシート

2015-1-5

Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート

2014-12-24

Web Designing 2015年 1月号に執筆させていただきました

2014-12-1

[続編] 効率的になった！最近のサイトで使われていたCSS小技集

2014-11-10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014-10-27

デザインセンスが上がった！レイアウトに詳しくなるまとめ