
## TL;DR

知っておくと WordPress 構築が早くなる、ちょっと便利な WP-CLI コマンドをメモしておきます。

### WP-CLI について

WP-CLI とは、ターミナル上で WordPress に関する色々なことを操作できるツール。

<ul>
<li>WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理</li>
<li>スターターテーマがあるのでオリジナルテーマ開発に便利</li>
<li>管理画面で行う設定等がコマンド一発</li>
<li>固定・投稿ページ・コメント作成</li>
<li>インポート、エクスポート</li>
<li>などなど色々なことが短いコマンドで可能。</li>
</ul>

<a href="http://wp-cli.org/restful/" target="_blank" rel="noopener noreferrer">A more RESTful WP-CLI | WP-CLI</a>

### ローカルに wp-cli をインストール

ローカルの場合

```bash
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
```

確認と権限付与とパスを通す。

```bash
php wp-cli.phar --info
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
```

### レンタルサーバに wp-cli をインストール

レンタルサーバに wp-cli をインストールする場合は、ssh コマンドで接続後、web ディレクトリに移動し以下のサイトに記述してあるシェルスクリプトをダウンロードさせていただき設定。以下はさくらレンタルサーバに WP-CLI をインストールする手順とスクリプト。

シェルスクリプト:<a href="https://www.tecking.org/4169" target="_blank" rel="noopener noreferrer">レンタルサーバに『WP-CLI』をサクっと入れるシェルスクリプト作ってみたよ – 鉄王</a>

フロー:<a href="http://studiodansyaku.com/web/4300" target="_blank" rel="noopener noreferrer">さくらのレンタルサーバーに wp-cli を使って WordPress をインストール – StudioDansyaku</a>

```bash

# スクリプト
wget --no-check-certificate https://raw.githubusercontent.com/tecking/wp-cli.setup.sh/master/wp-cli.setup.sh

# 権限付与、スクリプト実行、設定有効化
chmod +x wp-cli.setup.sh
./wp-cli.setup.sh
source ~/.cshrc
```

任意のディレクトリを作成し、WordPress 本体をダウンロードします。コマンドからデータベース設定・初期設定を行う場合は上記サイトをご覧ください。

```bash
# さくらレンタルサーバにWordPressをインストールする場合
wp core download --path=/home/ユーザー名/www/ディレクトリ名 --locale=ja

# /var/www/html(ドキュメントルート)にインストールする場合
wp core download --path=/var/www/html --locale=ja

# wp-config.php作成
wp core config --dbname=DB名 --dbuser=ユーザー名 --dbpass=パスワード オプション

# WordPressインストール
$ wp core install --url=サイトURL --title=サイト名 --admin_user=ユーザー名 --admin_password=パスワード --admin_email=メールアドレス
```

<a href="http://wp-cli.org/commands/core/" target="_blank" rel="noopener noreferrer">wp core | WP-CLI</a>

### よく使う wp-cli コマンド

空の固定ページを 500 個作成する

```bash
wp post generate --count=500 --post_type=page
```

WP-CLI バージョン確認、アップデート

```bash
wp cli version
wp cli check-update
wp cli update
```

プラグイン bogo を探す

```bash
wp plugin search bogo
```

結果。

```bash
% wp plugin search bogo
Success: Showing 10 of 14 plugins.
+-------------------------------------+-------------------------------------+--------+
| name | slug | rating |
+-------------------------------------+-------------------------------------+--------+
| Contact Form 7 | contact-form-7 | 90 |
| Bogo | bogo | 94 |
| Pricing Deals for WooCommerce | pricing-deals-for-woocommerce | 88 |
| WooCommerce Multiple Free Gift | woocommerce-multiple-free-gift | 88 |
| Wholesale Pricing for WooCommerce | wholesale-pricing-for-woocommerce | 100 |
| WC Role Based Price | woocommerce-role-based-price | 90 |
| PW WooCommerce BOGO | pw-woocommerce-bogo-free | 0 |
| WooCommerce Single Product Checkout | woocommerce-single-product-checkout | 100 |
| BogoXLib | bogoxlib | 0 |
| Bogo translate ACF | bogo-translate-acf | 100 |
+-------------------------------------+-------------------------------------+--------+
```

プラグイン contactform7 をインストール。区切りスペースは空けずハイフンをつけて指定。

```bash
# インストール
wp plugin install contact-form-7

# 有効化
wp plugin activate contact-form-7

# 無効化
wp plugin deactivate contact-form-7
```

プラグインのバージョンを確認

```bash
wp plugin status
wp plugin list
```

WordPress 日本語パッケージアップデート ※推奨

```bash
wp core download --locale=ja --force
```

<a href="http://qiita.com/miya0001/items/96a684e2f819f9d8b4a4" target="_blank" rel="noopener noreferrer">WP-CLI で WordPress を日本語パッケージと同じ構成にする - Qiita</a>

wp-config.php 作成

```bash
wp core download
wp core config --dbname=DB名 --dbuser=ユーザー名
wp core install
```

<a href="http://wp-cli.org/commands/core/config/" target="_blank" rel="noopener noreferrer">wp core config</a>

WordPress コアアップデート

```bash
wp core update
wp core version
```

WordPress マイナーアップデート

```bash
wp core update --minor
```

テーマ スターターキット

```bash
wp scaffold _s sample-theme
```

プラグイン スターターキット

```bash
wp scaffold plugin sample-plugin
```

参考:<a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer">Command line interface for WordPress | WP-CLI</a>


WP-CLIコマンドの使い方


## TL;DR

写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回は Photoshop を使ってアーチや半円などのカーブを描く方法。

こういった感じのファーストビューのデザインカンプを作りたい時に使えるんじゃないかと。

[養命酒 駒ヶ根工場・健康の森｜養命酒製造株式会社](http://www.yomeishu.co.jp/komagane/)

[福岡県飯塚市の皮膚科医院 | 医療法人 ふくはだ皮ふ科クリニック](http://fukuhada.com/)

ワープを使います。ワープとは画像の形・パス・シェイプなどを変形させる機能です。

### アーチ

長方形を作成した後で、上のメニューから、編集＞パスを変形＞ワープから

単純にレイヤーするだけならアーチを選択後、カーブをマイナスに調整すると下向きのアーチ。同じ要領でテキストや写真も曲げることができます。

### 下弦

大きな半円を描く場合はアーチではなく下弦を使います。編集>変形>ワープ>下弦を選択してカーブを調整。

完成。

横向きにしたい場合、編集>変形>ワープ>円弧 でカーブを設定した後に、円弧横のアイコンをクリックすると横向きの扇状の形を作れます。

### テキストに傾きをつける

テキスト左右の遠近感を与えたい場合はカーブさせると違和感があるので、カーブをゼロ、水平の歪みを-60%くらいに設定。

### 複数のオブジェクトを曲げる場合はレイヤー統合が必要

複数の長方形を連動させてカーブさせたい場合は、複数のオブジェクトを選択後「Ctrl+E」を押してレイヤー統合させた後にワープを適用させると上手くいきます。

後は Alt キーを押しながらマスク等をかければ OK。

以上、Photoshop を使って 10 秒でアーチや半円を描く方法でした。


写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回はPhotoshopを使ってアーチや半円などのカーブを描く

Photoshopを使って10秒でアーチや半円を描く方法


## 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 で気づいたことのメモでした。


2017-7-18

WP-CLIコマンドの使い方

2017-6-19

Photoshopを使って10秒でアーチや半円を描く方法

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の役立つ小技まとめ