
## TL;DR

余白とはなにか、漠然としていたので、今回は余白の種類や使い方を少しでもマスターするために参考になる知識をまとめました。

### 余白とはなにか

余白（margin）とはタイポグラフィやレイアウトにおいて何も書かれていない空間、もしくは何も配置されていない空白部分のことをいいます。一見何も存在しない真っ白のスペースのようでありながら、意図的に配置されていることもあります。だからといって白である必要はありません。

つまり、余白とは「一見何もなさそうだけど ○○」といったような感じです。例えば…

西洋画に余白を使った絵は少ないですが、雪舟のような水墨画では「間」や「静かさ」を演出するなどの余白の使われ方によって、しみじみとした余情を感じることができます。

雑誌などの紙面では小さなテキストを広い余白に配置し存在感を出したり、視線の滞在時間をコントロールするなどの活用方法があります。

コメディアンは「間」という余白を使って観客を熱狂させます。スピーチの前に沈黙という余白を作ることによって、観客を静かにさせるような手法もあります。交渉相手に沈黙を使って主導権を握る人もいます。

Web サイトやポスターなどにおいては、何かに注視させたいときやキービジュアルを引き立たせたいときに余白を活用します。

このようにデザインだけでなく生活のいたるところに余白は存在します。余白は一見目立たないようでいて、見る人をナチュラルにコントロールする重要な要素なのです。

#### ビジュアルホワイトスペース

文字・画像・ボタンなどが配置されていない余白部分をホワイトスペースといいます。こちらは画像・アイコン周辺の余白に関するビジュアルホワイトスペース、ノド余白のレイアウトスペースに関する基礎知識と、それがなぜ必要なのかが書かれてあります。

[UX デザインに余白が重要な 4 つの理由 | freshtrax \[フレッシュトラックス\] | btrax ブログ](http://blog.btrax.com/jp/2016/09/20/white-space-for-ux/)

#### ゲシュタルト・プレグナンツの法則

ゲシュタルトとは

> 全体性を持ったまとまりのある構造 [ゲシュタルト心理学 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B2%E3%82%B7%E3%83%A5%E3%82%BF%E3%83%AB%E3%83%88%E5%BF%83%E7%90%86%E5%AD%A6)

とのことですが、この中に記載してあるプレグナンツの法則に

- 近接の要因：近接（近いもの）しているもの同士はひとまとまりになりやすい
- 類同の要因：同じ種類同士はひとまとまりになりやすい
- 閉合の要因：互いに閉じあっているもの同士はひとまとまりになりやすい

と書いてあります。逆をいえば離れていたり（余白がある）、異なっていたりするとグループとして認識されにくいということです。

距離が近いオブジェクトや似ているものを一つのグループとして認知する性質をゲシュタルトの法則といいます。

[ゲシュタルトの法則 – イディア：情報デザインと情報アーキテクチャ](http://www.idia.jp/report/principle-of-gestalt/)

#### 8 の倍数

ブログやサイトリニューアルを考えるときに一番最初に思い浮かぶサイトの横幅と余白。ユーザーの使っているモニターの解像度を参考にするか、美しく収まりのよい対比を採用するか。サイト横幅に最適な値はあるのか。

以下の記事を読んで「デザインは 8 の倍数でつくることができる」という仮説をもとに、物は試しということで、サイトをリニューアルしたときは横幅は 1280px、余白は 16px を採用。画像やアイキャッチなどの要素は黄金比で統一すると収まりのよいレイアウトに。

[デザインは 8 の倍数でできている｜ 1 pixel ｜サイバーエージェント公式クリエイターズブログ](http://ameblo.jp/ca-1pixel/entry-11837685575.html)

#### ウィリアム・モリスのページマージン比率

ウィリアム・モリスが提唱した冊子などに使われる美しいマージンの比率について書かれてあります。パンフレットやチラシ作成時に。

[ページデザインのマージンについて | mon étude](http://kakochan.com/out/?p=1) [デザインをするときは版面を最初に決める｜いまさら聞けない!? 印刷・DTP の基礎知識｜ OKI データ](http://www.okidata.co.jp/special/tips1/tips08a.html)

#### 三分の一の法則

画面を三分割し、分割したときにできる基準線を基準として、要素を分けたりアクセントを境界線にくるように配置するレイアウト法です。横長の紙面の場合は横に分割し、縦長の場合は縦に分割することが多いようです。簡単に綺麗な構図を作成できるので使いやすいです。

[黄金比って Web ではどうなの？～三分割法と黄金比の話～ 株式会社アクトゼロ｜デジタルマーケティング・訪日インバウンド施策](http://www.actzero.jp/developer/report-3973.html)

#### アクティブ・ホワイトスペース、パッシブ・ホワイトスペース

アクティブ・ホワイトスペースとは視線誘導するためとか意図的に作ったスペースで強調のために配置し、パッシブ・ホワイトスペースは行間など元から定められているスペースで要素周辺に配置します。

[アクティブ・ホワイトスペース（active white space）とは？｜グラフィックデザイナーのための英語講座](http://ameblo.jp/fishtailstudio/entry-11568651429.html) [Web デザインの基礎スキルに「余白」が重要な理由 - WPJ](https://www.webprofessional.jp/using-white-space-how-emptiness-can-give-so-much-to-design/) [余白の美](https://hail2u.net/documents/ala-whitespace.html)


余白とはなにか、漠然としていたので、今回は余白の種類や使い方を少しでもマスターするために参考になる知識をまとめました。余白とはなにか余白（mar

余白とはなにか。デザインが上達する６つのTips


## TL;DR

リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。

### CSS3

#### オートフィルの背景色を解除

chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので

```css
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px 色指定 inset;
}
```

を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。
無事消えました。

<ul>
<li><a href="https://coderwall.com/p/xpko7w/change-background-color-for-autocompleted-inputs-in-google-chrome" target="_blank">Coderwall | Change background color for autocompleted inputs in Google</a></li>
<li><a href="http://blog.shg25.com/?p=99" target="_blank">Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも</a></li>
</ul>

#### backface-visibility で Chrome のチラつきを解決

fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイドバーで fixed を使っている箇所が 1px ずれたり、チラつきが発生する現象が起きることがあります。そんな時に「backface-visibility」を使って解決。

```css
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
```

を body に設定。<code>backface-visibility</code>は、transform の種類で裏面の表示／非表示を指定するものです。

<blockquote>
プロパティは要素の裏面がユーザに面したときに、裏面を可視にするかどうかを決めます。
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/backface-visibility" target="_blank">backface-visibility - CSS | MDN</a>
</blockquote>

<code>hidden</code>にすると裏面の鏡像を表示しないとのことですが、ブログ内で<code>visible</code>を使うシーンは無さそうなので採用。
但し、<code>-webkit-font-smoothing</code>と併用するとレタリングに影響を与えるみたいなので、注意が必要とのことです。

#### 背景画像と色を合成し中心に配置させ、高さをブラウザの大きさとフィットさせる

背景を中心に寄せ、色と合成し、ブラウザの大きさに応じて自動で高さを合わせたい。

<ul>
<li><a href="https://commte.net/404" target="_blank">404ページ</a></li>
</ul>

ショートハンド・プロパティの background で（色、背景画像、位置、サイズ）を一括指定できます。位置とサイズの間にはスラッシュ「/」を入れると上手く表示されます。
後は<code>background-blend-mode</code>で背景色と画像を合成させ、背景画像と高さをブラウザの大きさとフィットさせたかったので、ビューポートの高さに対する割合を示す<code>vh</code>で要素の高さを 100%にします。
<code>vh</code>は viewport height の略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

```css
background: #000 url(./img/404.jpg) no-repeat center/cover;
background-blend-mode: hard-light;
height: 100vh;
```

と３行だけ記載。画面の解像度は 1920x1080 が多いので、背景画像は大きめ（横 2000px くらい）のものを使います。
これでブラウザ幅が変わっても天地にフィットするし、合成する色を簡単に変えることができるし効率的。background-blend-mode の対応状況はこちら。IE 以外は大体 OK。

<ul>
<li><a href="http://caniuse.com/#feat=css-backgroundblendmode" target="_blank">Can I use / background-blend-mode</li>
<li><a href="http://caniuse.com/#feat=viewport-units" target="_blank">Can I use / viewport-units</a></li>
</ul>

#### レスポンシブに最適な今時のフォントサイズ指定

フォントサイズは CSS3 の rem を使った指定に変更。rem は親要素のサイズの影響を受けず相対的にフォントサイズを指定できるので分かりやすいです。em は親要素の font-size を 1 とした倍率に対して、rem は html 要素の font-size を 1 とした倍率になります。
計算しやすいように html には<code>font-size: 62.5%;</code>を指定。ブラウザの対応状況は<a href="http://caniuse.com/#feat=rem" target="_blank">Can I use / rem</a>。

```css
html {
  font-size: 62.5%;
  /* 10px = 1rem */
}

h1,
h2,
h3 {
  /* font-size: 25px; フォールバック */
  font-size: 2.5rem;
}

h4 {
  /* font-size: 20px; */
  font-size: 2rem;
}
```

#### font / 大きさと line-height などを一括指定

フォントの指定も、font-size や line-height を一括で指定するショートハンドプロパティも使いましょう。font-size と font-family は必須の値で他は省略可能です。

```css
/* font-weight: 300;, font-size:12px;, line-height:1.4;, font-family: sans-serif を一括設定 */
p {
  font: 300 12px/1.4 sans-serif;
}
body {
  font: 1rem/1.5 '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}
```

<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/font" target="_blank">font - CSS | MDN</a></li>
</ul>
#### 長方形の画像を正円に「中心」から切り抜く
縦横のサイズが同一でない画像をくり抜きたい時、「border-radius: 50%;」を使うと楕円形にゆがみますが、<code>-webkit-clip-path: circle</code>に「at center」を指定すると正円を中心から繰り抜けます。あとは%で大きさを指定。

```css
img {
  -webkit-clip-path: circle(50% at center);
  clip-path: circle(50% at center);
}
```

#### IE 以外は要素を消す

<code>-webkit-clip-path: circle</code>に 0 を指定すると要素が消えます。
使いドコロが難しいですが、IE でサポートされてない<a href="http://caniuse.com/#feat=css-clip-path" target="_blank">Can I use</a>のを利用して

```css
h1 {
  -webkit-clip-path: circle(0);
  clip-path: circle(0);
}
```

と書けば、IE 以外で要素が消え、IE だけ要素を表示することができます。

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

```css
h1 {
  -webkit-background-clip: text;
  background-image: url('http://placeimg.com/640/480/any');
  color: transparent;
  font-size: 120px;
  text-align: center;
}
```

#### ~個目以降のスタイルを全て変更する

~個目や奇数偶数の指定ではなく、~以降全てに同じスタイルを適用するには擬似要素 nth-child(n+任意の数値)を使います。

```css
.foo:nth-child(n + 3) {
  width: 100%;
}
```

~個までに適用する場合はマイナスを付けます。

```css
.foo:nth-child(-n + 3) {
  width: 100%;
}
```

<a href="https://css-tricks.com/useful-nth-child-recipies/" target="_blank">Useful :nth-child Recipes | CSS-Tricks</a>

#### 記事中の最初の要素指定には擬似要素でなく隣接セレクタ

例えば、記事中の最初の画像だけ width: 100%を適用したい場合、「first-child」などは使えないので「隣接セレクタ」で指定します。以下は ul の次にある img を指定する場合。

```css
section ul + img {
  width: 100%;
}
```

#### iPhone / タップした時の色を変更する

iPhone でリンクをタップした時の色を指定します。

```css
-webkit-tap-highlight-color: red;
```

<a href="https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-tap-highlight-color" target="_blank">-webkit-tap-highlight-color - CSS | MDN</a>

#### iPhone / フォーム要素をリセットする

実機確認しないと忘れがちなところ。角丸を消して、ボタンなどについているデフォルトのスタイルをリセットします。

```css
input[type='button'],
input[type='submit'] {
  border-radius: 0;
  -webkit-appearance: none;
}
```

以上、CSS3 で気づいたことのメモでした。


意外と盲点だったCSS3の役立つ小技まとめ

## 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 小技集でした。


2016-10-17

余白とはなにか。デザインが上達する６つのTips

2016-7-4

意外と盲点だったCSS3の役立つ小技まとめ

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小技集