
## TL;DR

日本語と英語の切り替えができる多言語サイトを超簡単に作りたい時に便利な方法。あくまでも簡易的な方法となります。

### Bogo インストール

Contactform7 の作者である三好さん（<a href="https://ideasilo.wordpress.com/" target="_blank" rel="noopener noreferrer">iDeasilo</a>） の<a href="https://ja.wordpress.org/plugins/bogo/" target="_blank" rel="noopener noreferrer">Bogo — WordPress プラグイン</a>をインストール。WP-CLI なら以下でインストール。

```bash
# インストール
wp plugin install bogo

# 有効化
wp plugin activate bogo
```

Bogo でできること

<ul>
<li>管理画面内で言語選択</li>
<li>任意の場所に言語切替メニューを表示</li>
<li>投稿・カスタムポストの言語切替</li>
<li>タグ・カテゴリの言語切替</li>
<li>グローバルナビゲーションメニューの言語切替</li>
</ul>

勝手に翻訳されるわけではないので日本語と英語で表示切替をしたい場合は、日本語と英語両方のコンテンツを用意する必要があります。サイトタイトル・キャッチフレーズ・カテゴリー名・タグ名・メニューは管理画面のテキストの翻訳から設定可能、投稿・固定ページの記事は翻訳版を複製、その他コンテンツは条件分岐を使う感じです。

まずは、functions.php に以下を追加してショートコードで出力されるアイコンやテキストの変更が行えるようにしておきます。

<a href="https://qox.jp/blog/bogo-wordpress/" target="_blank" rel="noopener noreferrer">Bogo を使って WordPress を多言語化 | 株式会社クオックス | QOX Inc.</a>さんの記事が分かりやすいです。

```php
// bogo ショートコード
// bogoショートコード関数削除
remove_shortcode( 'bogo', 'bogo_language_switcher' );
// 複製したショートコード関数追加
add_shortcode( 'bogo', 'my_language_switcher' );

function my_language_switcher( $args = '' ) {
    $args = wp_parse_args( $args, array(
        'echo' => false,
    ) );

    $links = bogo_language_switcher_links( $args );
    $total = count( $links );
    $count = 0;

    $output = '';

    foreach ( $links as $link ) {
        $count += 1;
        $class = array();
        $class[] = bogo_language_tag( $link['locale'] );
        $class[] = bogo_lang_slug( $link['locale'] );

        if ( get_locale() == $link['locale'] ) {
            $class[] = 'current';
        }

        if ( 1 == $count ) {
            $class[] = 'first';
        }

        if ( $total == $count ) {
            $class[] = 'last';
        }

        $class = implode( ' ', array_unique( $class ) );

        $label = $link['native_name'] ? $link['native_name'] : $link['title'];
        $title = $link['title'];

        if ( empty( $link['href'] ) ) {
            $li = esc_html( $label );
        } else {
            $li = sprintf(
        // 言語切替が表示されるところ
        '<a rel="alternate" hreflang="%1$s" href="%2$s" title="%3$s">%4$s</a>',
                $link['lang'],
                esc_url( $link['href'] ),
                esc_attr( $title ),
                esc_html( $label ) );
        }

        if ( apply_filters( 'bogo_use_flags', true ) ) {
            $flag = bogo_get_flag( $link['locale'] );
            $flag = preg_replace( '/(?:.*?)([a-z]+)\.png$/', '$1', $flag, 1 );
            $flag = sprintf(
        // 国旗のマークが表示されているところ
                '<span class="bogoflags bogoflags-%s"></span>',
                $flag ? $flag : 'zz' );

            $li = sprintf( '<li class="%1$s">%3$s %2$s</li>', $class, $li, $flag );
        } else {
            $li = sprintf( '<li class="%1$s">%2$s</li>', $class, $li );
        }

        $output .= $li . "\n";
    }

    $output = '<ul class="bogo-language-switcher">' . $output . '</ul>' . "\n";

    $output = apply_filters( 'my_language_switcher', $output, $args );

    if ( $args['echo'] ) {
        echo $output;
    } else {
        return $output;
    }
}
// bogo ショートコード ここまで
```

参考:<a href="https://ja.wordpress.org/support/topic/bogo%E3%80%80%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%89%E6%9B%B4/" target="_blank" rel="noopener noreferrer">トピック: bogo 　デザイン変更 « サポートフォーラム — WordPress</a>

### ヘッダーに書いておきたいもの

header.php などにショートコードを埋め込みます。言語切替表示をしたい場所に以下を入力。

<?php echo do_shortcode( '[bogo]' ); ?>

一応忘れずに header.php に language と body class のテンプレートタグを入れておきます。こうしておくと日本語の時は lang 属性が 「lang="ja"」、英語に切り替えたときは「lang="en-US"」。body クラスには ja、en-US が付与されるので扱いやすくなります。

```php
<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
<head>
<meta charset="UTF-8">
...
<body class="<?php body_class(); ?>">
```

### 置換

次にショートコードの文字を置換します。 自動で入る(United States)を削除。

```php
// bogoショートコード文字置換
add_filter( 'my_language_switcher','r_bogo_text');
function r_bogo_text($output){
 return str_replace(' (United States)','',$output);
}
```

<a href="https://joppot.info/2017/03/29/3657" target="_blank" rel="noopener noreferrer">wordpress の bogo プラグインのショートコードをカスタマイズする – joppot</a>

### 言語条件分岐

言語条件分岐する場合の一例。英語の時「See More」、それ以外の言語は「続きを見る」など。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale  ) {
  echo 'See More';
} else {
  echo '続きをみる';
}
?>
```

### メニューの翻訳

投稿・固定ページ・グローバルナビゲーションメニュー・ウィジェットの翻訳版も管理画面から追加できるようになっています。追加したら表示したい言語にチェックを入れるだけ。

### タグやカテゴリの翻訳

カテゴリ名やタブなども任意の翻訳ができます。管理画面>言語>テキストの翻訳から英語を選び編集が可能です。

### ポストの言語条件分岐

投稿一覧などのループで使うと全ての言語が出力されてしまうのでフィルターをかけて言語の条件分岐をします。

get posts を使う場合は、言語フィルタを実行させるために suppress_filters を false に変更します。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale  ) {
$args = array(
  'posts_per_page' => 3,
  'paged' => $paged,
  'suppress_filters' => false, //フィルタ実行
  'lang' => 'en-US' //英語のみ出力
);
} else {
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'suppress_filters' => false, //フィルタ実行
'lang' => 'ja' //日本語のみ出力
);
}
$lastposts = get_posts( $args );
foreach ( $lastposts as $post ) :
  setup_postdata( $post ); ?>
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php the_content(); ?>
<?php endforeach;
wp_reset_postdata(); ?>
```

wp_query を使う場合は suppress_filters は不要です。

```php
<?php
$locale = get_locale();
if ('en_US' == $locale) {
  $loop = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'lang' => 'en_US' //英語のみ出力
  ) );
} else {
  $loop = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'lang' => 'ja' //日本語のみ出力
  ) );
}
?>
<?php if ( $loop->have_posts() ) : ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
```

カスタムポストを対応させる場合は、こちら<a href="https://gist.github.com/gatespace/9966808" target="_blank" rel="noopener noreferrer">WordPress で Bogo を使った多言語サイトでのカスタム投稿タイプ</a>を参考にしてください。

以上、bogo を使った多言語サイトの作り方のメモでした。

[recommend_wordpress]


WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方


## TL;DR

不規則な円を取り入れたい時に。デザインカンプなどに使える、Photoshop で不規則な円を作る方法。とても簡単ですぐ使えるのでメモしておきますね。

### 不規則な円の作り方

楕円形を作成します。

アンカーポイントの切り替えツールを選択

Ctrl を押しながらアンカーポイントをクリック

パスを引っ張り、微調整をする

Ctrl でパスを移動、Shift で角度を 45 度できます。

三角形をベースにすると、ユニークな形に変形できます。後は、この形のマスクで写真を切り抜くもよし、透過させて写真にのせるもよし。

### 不規則な円形の線

線を描く場合は色を消して、境界線をつけるといい感じになります。

### 波の作り方

こちらの波を作る方法と組み合わせれば、柔らかい雰囲気のデザイン案が作れそうですね。

<a href="https://commte.net/6468" target="\_blank">Photoshop で波を作る最も簡単な方法 | コムテブログ</a>

以上、Photoshop で不規則な円を作る方法でした。


不規則な円を取り入れたい時に。デザインカンプなどに使える、Photoshopで不規則な円を作る方法。とても簡単ですぐ使えるのでメモしておきますね。不

Photoshopで簡単にできる不規則な円の作り方


波を取り入れたファーストビューを提案したい時に。デザインカンプなどに使える、Photoshop で波や曲線を作る方法。

長方形を作ります。

フィルター＞変形＞波型

波型を 3、後は以下のように調整します。

波ができました。

ペンツールを使う方法

p を押して、ペンツールを選択し、長方形の中心をクリック。アンカーポイントが追加されます。

Ctrl を押すとハンドルを引っ張ることができるのでシェイプを変形させます。Shift + Ctrl を押しながらハンドルを引っ張ると 45° で切り替えながら角度を調整することができます。

アンカーポイントを増やし変形を繰り返すと複雑な波ができます。

以上、Photoshop で波や曲線を作る方法でした。


波を取り入れたファーストビューを提案したい時に。デザインカンプなどに使える、Photoshopで波や曲線を作る方法。長方形を作ります。フィルター＞変形＞

Photoshopで波を作る最も簡単な方法


## TL;DR

コーダーの方なら利用されている人が多いであろう codepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。

### codepen とは

ブログなどに貼り付け可能な無料のコードシェア（オンラインエディタ）サービスです。有料にすることでプライベートモード（非公開）でコードを管理したり、リアルタイムで同時閲覧、ブログに埋め込んだ時のレイアウトをかっこよくカスタマイズすることもできます。

通常のエディタのように更新＞プレビューも必要なく、normalize.css や外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習やテストにもってこいです。

[CodePen](http://codepen.io/)

普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったのとブラウザテストツールを使いまわしたかったので、年$75 の有料プランにしてます。

プランは無料/PRO/SUPER PRO/TEAM PRO に分かれていて、有料版の「PRO 版」と「SUPER PRO 版」を比較すると以下のような違いがあります。

| プラン                    | PRO   | SUPER PRO |
| ------------------------- | ----- | --------- |
| 年                        | $75   | $300      |
| アセット ホスティング容量 | 1GB   | 5GB       |
| 共同編集                  | 2 人  | 6 人      |
| リアルタイム編集同時視聴  | 10 人 | 35 人     |
| ライブビュー              | 可    | 可        |
| プライベート              | 可    | 可        |
| カスタム CSS              | 可    | 可        |

TEAM PRO については[CodePen Plans](https://codepen.io/signup/plans/)をご覧ください。

### codepen で何ができるのか

ざっくりと以下のようなことができます。

- スニペット管理
- [Pro] プライベートモード / コードの非公開
- コードのテンプレート化
- コードを zip でダウンロードする
- インデント幅の編集
- ブログなどにコードの埋め込み
- [Pro] カスタム CSS / 埋め込みのレイアウト編集
- ビューの変更
- デバッグ
- コンソール編集
- 豊富なプリプロセッサ
- CSS：Normalize/Reset を追加
- オートベンダープレフィックス
- メタタグ（viewport）の差し込み
- [Pro] リアルタイム同時閲覧・チャット
- ペアプログラミング（共同編集）
- オンラインエディタ
- オートコンプリート
- ブラウザテスト
- アセット管理（素材をアップロード）
- オートセーブ
- シンタックスハイライトのテーマ変更

### codepen の使い方

アカウント登録やコード作成の手順はネットに沢山情報が転がっているのでここでは割愛します。

##### ペンをブログに沢山埋め込む時に気をつけること

コードをブログなどに埋め込むには右下の「Embed」を押すとポップアップが出るので下のコードをコピペすれば OK なんですが、

複数貼る場合は「Use click-to-load」にチェックを入れておきましょう。チェックを入れておくと静的画像のみが表示され、ユーザーが任意でペンを再生できるようになります。 これにチェックを入れておかないと、自動で再生されてしまうので貼り付けたページが激重になってしまいます。

### [Pro] 埋め込みテーマのカスタマイズ

Embed Theme Builder（埋め込みレイアウトのカスタマイズ）について。無料版は制限があるのですが、有料版になると外部スタイルシートを読み込ませ、ロゴを消したり、動きをつけたり、細部までカスタマイズできるようになります。ブログの雰囲気に馴染ませることができるようになります。

右上のアカウントから「Embed Theme Builder」をクリックします。

テーマ編集画面に移動したら「+ Create Theme」をクリックします。

#### [Pro] レイアウトカスタマイズ

例えば、この画像のようにロゴだけフワフワ動かしたり、事細かにスタイルを変更したい場合、有料版の「Custom CSS」の場所に読み込ませたいスタイルを書いた CSS を設定すれば OK。

「Custom CSS」は埋め込みのレイアウトを細かくカスタマイズする機能で外部 CSS を読み込むことができますが、コードペンで作った CSS/js はホスティングされるのを利用して、それを読み込ませることができます。

適用するための CSS を「コードペン」で作成し、URL に.css と付け加えると

css の中身が表示されます。この URL を

Custom CSS に適用させれば OK です。こうすれば自分でスタイルシートを用意しなくてもいいですね。また、コードペンで作成したスタイルシートは CDN 経由でホスティングされているので、外部サイトにも読み込ませることができます。

デフォルトテーマがこちら

<iframe height="265" scrolling="no" title="-webkit-background-clip: text;" src="//codepen.io/commte/embed/2feb3bd4592faef0de7685263b6a5228/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/">-webkit-background-clip: text;</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>

オリジナル CSS を読み込ませたものがこちら

<iframe height="300" scrolling="no" title="-webkit-background-clip: text;" src="//codepen.io/commte/embed/2feb3bd4592faef0de7685263b6a5228/?height=300&theme-id=26727&default-tab=css,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/'>-webkit-background-clip: text;</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.</iframe>

今の CodePen のボタン UI が少し嫌だったのでボタンをシンプルに変え、分かりやすいようにロゴを少し動かしてみました。

#### [Pro] ヘッダーの表示・非表示

Tab Bar で埋め込みテーマのヘッダー（html / css / js / Result / ロゴ）などの部分を表示・非表示にすることができます（有料版のみ） 。

Hide で保存したテーマを適用させると、このようにロゴやボタンを消すことができます。

無料版で変更できる箇所はこちら。

ボタンの色やテキストカラーなどは変更可能です。コードとビューの間のボーダー色を変えたり、コードペンのロゴを消すなどの細かいカスタマイズは有料版で対応できます。

#### [Pro] プロフェッサーモード

コードを書いている過程をリアルタイムで閲覧することができます。多くの生徒さんなどにサポートしながら一つのコーディングの過程を見せたい時に便利な機能です。削除可能なコメント・チャット機能付きです。

#### オートコンプリートを設定しよう

ソースコードのオートコンプリートは便利なので設定しておきましょう。

アカウント＞ Setting に入り「Editor Options」の「Autocomplete」にチェックを入れて保存。

#### リアルタイム同期・ペアプログラミング

「collab Mode」を選択すると共同でプログラミングすることができます。有料版は最大６人までリアルタイムでやり取り可能です。

[この動画](https://player.vimeo.com/video/154349112)のように、GoogleDrive のごとくリアルタイムで共同作用が行え、チャットでやり取りができます。

[Collab Mode - CodePen Blog](https://blog.codepen.io/documentation/pro-features/collab-mode/)

#### [Pro] 複数の端末でリアルタイム同期

[この動画](https://player.vimeo.com/video/157650786)のように複数の端末のリアルタイムビューのみも可能です。スクロールの位置まで反映されます。

[Live View - CodePen Blog](https://blog.codepen.io/documentation/pro-features/live-view/)

#### 表示領域とパラメータ

URL にパラメータをつければ、エディタの表示形式を変更することができます。

| パラメータ                       | 表示領域                     |
| -------------------------------- | ---------------------------- |
| ?editors=001                     | JS 表示                      |
| ?editors=010                     | CSS 表示                     |
| ?editors=011                     | CSS/JS 表示                  |
| ?editors=100                     | HTML 表示                    |
| ?editors=101                     | HTML/JS 表示                 |
| ?editors=110                     | HTML/CSS 表示                |
| ?editors=1111                    | Console を開く               |
| ?editors=1112                    | Console を拡大表示           |
| URL の「pen」を「full」に変更    | 編集領域を全て非表示         |
| URL の「pen」を「details」に変更 | 編集領域の下に作者情報を表示 |
| URL の「pen」を「collab」に変更  | 共同作用                     |

[Resizing Code Editor Panels - CodePen Blog](https://blog.codepen.io/documentation/editor/full-screen-editing/)

[コラボモード - CodePen ブログ](https://blog.codepen.io/documentation/pro-features/collab-mode/)

#### ブラウザテスト

管理画面の「Change View」＞「Open on CrossBrowser Testing」で各ブラウザのテストが出来るようになっています。コードペンからサインアップ・ログインすれば無料で試すことができます。Pro 版に入っておくと、元ファイルを更新した時（保存は不要）でもブラウザツール上でリアルタイムに反映されます。

これがあると暇な時に作成したスニペットをテストしておいて、いざという時にすぐ使えますね。

[Web エディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた！ | シェアしたくなる最新の Web サービス・IT ニュース情報をチェック！ APPGIGA!!（アプギガ）](http://plus.appgiga.jp/masatolan/2015/03/09/55531/)

OS の選択

ブラウザの選択

スマホは iPhone4s~iPhone7 Plus、Nexus、Galaxy、iPad、Android2.2~4.0 系などほぼ網羅。これは嬉しいですね。

「Run Test」を押すとシュミレーターが立ち上がります。またスクリーンショットなどを保存可能です。

元のファイルを変更すると、保存の有無に関わらず、シュミレーター上でもリアルタイムで変更内容が反映されます。

#### アニメーションのループ

「Animations should」は、埋め込みコードを Result で再生させたとき、アニメーションを 5 秒後に停止するか、ループさせるか選択できます。

#### [Pro] 素材のホスティング

Asset Manager ではファイルをドラッグで直接アプロードできます。アップロードしたファイルには画像パスが割り振られるので、それをコピーして任意の箇所に貼り付ければ OK。

またアップロードしたロゴや素材を保管・管理できます。同じ名前のファイルがアップロードされた場合はファイル名がリネームされるので上書きの心配は不要です。

アセットマネージャー

コード一式をダウンロードしたいときは、Export から Gist / zip などでダウンロード・保存ができます。

#### シンタックスハイライトの種類

「Syntax Highlighting」でコード表示のスタイルを変更可能です。テーマを一覧画像にしました。

以上、CodePen の使い方でした。


コーダーの方なら利用されている人が多いであろうcodepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。

コーディングに便利なCodepenの使い方とカスタマイズ（有料版と無料版）


## TL;DR

いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。

### アニメーション１２の基本原則を確認

こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（<a href="https://en.wikipedia.org/wiki/12_basic_principles_of_animation" target="_blank">12 basic principles of animation - Wikipedia</a>）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。

<iframe src="https://player.vimeo.com/video/93206523" width="640" height="254" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<a href="https://vimeo.com/93206523">The illusion of life</a> from <a href="https://vimeo.com/centodesign">cento lodigiani</a> on <a href="https://vimeo.com">Vimeo</a>.

<a href="http://the12principles.tumblr.com/" target="_blank">THE ILLUSION OF LIFE</a>

CSS アニメーションとサンプルソースコードなどについてはこちらで解説しています。

<iframe class="bookmarklet hatena-embed" src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fcommte.net%2Fblog%2Farchives%2F5082" title="&#x3053;&#x3053;&#x307E;&#x3067;&#x52D5;&#x304B;&#x305B;&#x308B;&#xFF01;&#x697D;&#x3057;&#x3044;css &#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x96C6; | &#x30B3;&#x30E0;&#x30C6;&#x30D6;&#x30ED;&#x30B0;" style="border:none;display:block;margin:0 0 1.7rem;overflow:hidden;height:155px;width:100%;max-width:100%;"><a href="https://commte.net/5082" target="_blank">ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ</a></iframe>

### 基本

<iframe height="381" scrolling="no" title="fluffy" src="//codepen.io/commte/embed/a016ec36211130f2fbcc7769f2b64202/?height=381&amp;theme-id=0&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/a016ec36211130f2fbcc7769f2b64202/">fluffy</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

以下のように、<code>transform:translateY</code>で縦方向の動きを指定するだけで上下に「ふわふわ」します。無限再生させるために<code>infinite</code>をつけます。

```css
.foo {
  background: #000;
  width: 100px;
  height: 100px;
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-15px);
  }
  25% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
```

<code>transform:translateY</code>を<code>transform:translateX</code>に変更すると横にふわふわ動きます。

<iframe height="265" scrolling="no" title="fluffy X" src="//codepen.io/commte/embed/c4d0089e59d57a2414b40df3b4b586f1/?height=265&amp;theme-id=0&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/commte/pen/c4d0089e59d57a2414b40df3b4b586f1/">fluffy X</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

#### スカッシュ＆ストレッチ

１２の基本原則にある「ベタンと潰れて伸びる」ような比較的シンプルな動きは<code>scale</code>と<code>translate</code>を組み合わせて作れます。少しだけアニメーションっぽい動きになってきました。

<iframe height='437' scrolling='no' title='Squash&Stretch' src='//codepen.io/commte/embed/e7020619fb9589c6510435cb45cbe788/?height=437&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/commte/pen/e7020619fb9589c6510435cb45cbe788/'>Squash&Stretch</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

```css
.foo {
  background: #000;
  width: 20px;
  height: 100px;
  margin: 100px;
  animation: squash 1s ease-in-out infinite;
}

@keyframes squash {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(10, 0.5) translate(0, 300px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
```

### アニメーションお助けツール

一つ一つ作っていては非効率なので、以下のバウンス作成ツールを使うとよいでしょう。
ありきたりなアニメーションではなく、テレビアニメに出てくるようなトリッキーな動きなら、このオンラインツールで簡単につくれます。
主観ですけど以下のような動きが可能です。

<ul>
<li>road runner:びっくりして逃げるような動作</li>
<li>slinky:猫が獲物を追いかけて捕まえるような動作</li>
<li>swoosh:ヒーローが横から登場するかのような動き</li>
<li>spin:歪みながら回転</li>
<li>jelly:ゼリーのような弾力</li>
<li>clock:時計の針</li>
<li>splat:飛散する</li>
</ul>
サイドバーからアニメーションの種類を選び、ループボタンとPLAY ANIMATIONを押すとアニメーションのソースコードを出力してくれます。
<a href="http://bouncejs.com/" target="_blank">Bouncejs</a>
シンプルなアニメーションならこのツールでhtmlとCSSを吐き出してくれます。
<a href="https://coveloping.com/tools/css-animation-generator" target="_blank">CSS Animation Generator</a>
FLOATを選ぶだけで「ふわふわ」のアニメーションが出来上がります。あとは出力されたCSSをコピペするだけです。とっても簡単ですね！出力されたCSSは以下、短くて分かりやすいです。

```css
.float {
  animation: float_2979 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_2979 {
  0% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-6px);
  }
  66.66667% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
```

<a href="http://waitanimate.wstone.io/#/" target="_blank">WAIT! Animate</a>
イージングを細かく指定したい場合はこちらのツールが分かりやすいです。というか勉強になるので、動きを確認しながら学習したい時にいいですね。
<a href="http://www.joelambert.co.uk/morf/" target="_blank">Morf</a>
基本的な CSS アニメーションならこちらのサイトで確認。クリックするとシンプルなソースコードが表示されます。
<a href="http://leaverou.github.io/animatable/#" target="_blank">Animatable: One property, two values, endless possibilities</a>
こちらのツールはキーフレームをタイムランで調整しながら、プロパティの値を確認できます。
<a href="http://cssanimate.com/" target="_blank">cssanimatecom</a>
アニメーションの進み具合が分からない場合は
<a href="http://easings.net/ja#" target="_blank">Easing Function 早見表</a>で確認しましょう。マウスオーバーで動きが確認できます。
Chrome の開発者ツールでも確認可能です。
Ctrl+Shift+I で開発者ツールを開き、右上のメニューから More tools ＞ Animations をクリックすると右下に、アニメーションを編集するツールが開きアニメーションの再生や停止ができます。
以上、CSS3 のアニメーションでアニメっぽい動きを実現するためのツールなどでした。


CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール


## TL;DR

ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。

### 透過処理で文字のくり抜き

<code style="font-family: Source Han Code JP;">background-clip</code>プロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、<code style="font-family: Source Han Code JP;">-webkit-background-clip: text;</code>と<code style="font-family: Source Han Code JP;">-webkit-text-fill-color: transparent;
</code>指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。

```css
.foo {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

<iframe height="265" scrolling="no" title="-webkit-background-clip:text CSS effect " src="//codepen.io/Jintos/embed/preview/crlxk/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Jintos/pen/crlxk/">-webkit-background-clip:text CSS effect </a> by Jintos (<a href="http://codepen.io/Jintos">@Jintos</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<a href="http://codepen.io/Jintos/pen/crlxk" target="_blank">-webkit-background-clip:text CSS effect</a>

### スクイグル

スクイグル（squiggle - ドナルド・ウィニコットが提唱した芸術療法の一つ。<a href="http://itakura-med.com/1785" target="_blank">なぐり描き法 | 医療法人板倉医院</a>）を表現。なぐり描いたような、クネクネ曲がったアニメーション。filter プロパティで SVG の filter で定義した設定を使いフィルタをかけています。

```css
.foo {
  filter: url(#squiggly-1);
}
```

<iframe height="265" scrolling="no" title="Squiggly Text" src="//codepen.io/lbebber/embed/preview/KwGEQv/?height=265&amp;theme-id=dark&amp;default-tab=html,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/lbebber/pen/KwGEQv/">Squiggly Text</a> by Lucas Bebber (<a href="http://codepen.io/lbebber">@lbebber</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/lbebber/pen/KwGEQv" target="_blank">Squiggly</a>

### アップダウン

keyframes に <code style="font-family: Source Han Code JP;">transform: translateY();</code>を設定し上下にテキストを動かしています。translateY()関数で Y 方向の移動を指定するだけ。

```css
@keyframes change {
  0%,
  12%,
  100% {
    transform: translateY(0);
  }
  17%,
  29% {
    transform: translateY(-25%);
  }
  34%,
  46% {
    transform: translateY(-50%);
  }
  51%,
  63% {
    transform: translateY(-75%);
  }
  68%,
  80% {
    transform: translateY(-50%);
  }
  85%,
  97% {
    transform: translateY(-25%);
  }
}
```

<iframe height="265" scrolling="no" title="Text animation" src="//codepen.io/yoannhel/embed/preview/sJpDj/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/yoannhel/pen/sJpDj/">Text animation</a> by Yoann (<a href="http://codepen.io/yoannhel">@yoannhel</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/yoannhel/pen/sJpDj" target="_blank">Text animation</a>

### スモーキー

テキストを煙のようなエフェクトを使いフェードさせる珍しい動き。各文字を span で囲う必要がありますが、文字に移動・変形・回転・傾き・縮尺を指定して違和感なく文字を消してます。

```css
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
```

<iframe height="265" scrolling="no" title="Smoky Text" src="//codepen.io/bennettfeely/embed/preview/lgybC/?height=265&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/bennettfeely/pen/lgybC/">Smoky Text</a> by Bennett Feely (<a href="http://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/bennettfeely/pen/lgybC" target="_blank">Smoky Text</a>

### バウンド・クラッシュ

文字どうしをクラッシュ・バウンドさせるエフェクトです。<code style="font-family: Source Han Code JP;">transform: scaleY</code>で縦方向へ縮尺、<code style="font-family: Source Han Code JP;">transform-origin</code>で原点を指定し、滑らかにバウンドしているように見えます。

<iframe height="371" scrolling="no" title="Bounce css Animation - v2" src="//codepen.io/Eprz/embed/preview/zxoNbP/?height=371&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Eprz/pen/zxoNbP/">Bounce css Animation - v2</a> by Elia PEREZ (<a href="http://codepen.io/Eprz">@Eprz</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/Eprz/pen/zxoNbP" target="_blank">Bounce css Animation - v2</a>

### フェード

<code style="font-family: Source Han Code JP;">transform: scale</code>で拡大・縮小、後は text-shadow と opacity で滑らかにフェードさせています。

<iframe height="374" scrolling="no" title="CSS3 Text Animation Effect" src="//codepen.io/Sonick/embed/preview/HthaI/?height=374&amp;theme-id=dark&amp;default-tab=css,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/Sonick/pen/HthaI/">CSS3 Text Animation Effect</a> by Nick Mkrtchyan (<a href="http://codepen.io/Sonick">@Sonick</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/Sonick/pen/HthaI" target="_blank">CSS3 Text Animation Effect</a>

### カウントダウンタイマー

一見するとどうやってんだろうと思うのですが、数値に一つ一つ span を振り、各桁にアニメーションの長さを指定する<code style="font-family: Source Han Code JP;">animation-duration</code>を設定し数値の動きに変化をつけています。

<iframe height="366" scrolling="no" title="CSS-Only Countdown Clock" src="//codepen.io/kindofone/embed/preview/DkhAz/?height=366&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/kindofone/pen/DkhAz/">CSS-Only Countdown Clock</a> by Yogev Ahuvia (<a href="http://codepen.io/kindofone">@kindofone</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/kindofone/pen/DkhAz" target="_blank">CSS-Only Countdown Clock</a>

### マスク

こちらは<code style="font-family: Source Han Code JP;">mask-image</code>を使ってマスクをかけています。ちなみに<code style="font-family: Source Han Code JP;">mask-size</code>は表示サイズ、<code style="font-family: Source Han Code JP;">mask-clip</code>は表示エリア。

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

<iframe height="389" scrolling="no" title="Text with Texture" src="//codepen.io/zitrusfrisch/embed/preview/vjwgl/?height=389&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/zitrusfrisch/pen/vjwgl/">Text with Texture</a> by Daniel Riemer (<a href="http://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/zitrusfrisch/pen/vjwgl" target="_blank">Text with Texture</a>

### ブレンド

<code style="font-family: Source Han Code JP;">mix-blend-mode</code>プロパティを使い、グラデーションとテキストをブレンドしています。

<iframe height="358" scrolling="no" title="CSS Gradient Text in Firefox" src="//codepen.io/giana/embed/preview/RPdLaQ/?height=358&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/giana/pen/RPdLaQ/">CSS Gradient Text in Firefox</a> by Giana (<a href="http://codepen.io/giana">@giana</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/giana/pen/RPdLaQ" target="_blank">CSS Gradient Text in Firefox</a>
mix-blend-mode の値の違いはこちらで確認できます。

<iframe height="265" scrolling="no" title="mix-blend-mode" src="//codepen.io/team/css-tricks/embed/preview/ZYdjmZ/?height=265&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/css-tricks/pen/ZYdjmZ/">mix-blend-mode</a> by CSS-Tricks (<a href="http://codepen.io/css-tricks">@css-tricks</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

### シャドウ

<code style="font-family: Source Han Code JP;">text-shadow</code>を使ったパターン 4 種。<code style="font-family: Source Han Code JP;">text-rendering: optimizeLegibility;</code>で文字のレンダリングを行ってます。

<iframe height="363" scrolling="no" title="CSS3 text-shadow effects" src="//codepen.io/juanbrujo/embed/preview/yGpAK/?height=363&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/juanbrujo/pen/yGpAK/">CSS3 text-shadow effects</a> by Jorge Epuñan (<a href="http://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>

<a href="http://codepen.io/juanbrujo/pen/yGpAK" target="_blank">CSS3 text-shadow effects</a>


CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10


## 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>


2017-6-5

WordPressで多言語サイトを作る時に便利なプラグイン「bogo」の使い方

2017-5-22

Photoshopで簡単にできる不規則な円の作り方

2017-3-21

Photoshopで波を作る最も簡単な方法

2016-12-12

コーディングに便利なCodepenの使い方とカスタマイズ（有料版と無料版）

2016-12-5

CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール

2016-11-28

CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10

2016-10-17

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

2016-7-4

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

2016-6-27

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

2015-5-18

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