
## TL;DR

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

### 画像

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

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

css

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

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

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

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

css

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

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

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

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

css

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

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

html

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

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

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

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

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

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

css

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

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

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

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

html

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

#### ６．鏡像

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

css

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

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

### マスク

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

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

css

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

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

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

html

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

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

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

css

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

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

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

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

css

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

html

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

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

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

css

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

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

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

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

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

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

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

### 文字

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

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

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

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

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

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

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

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

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

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

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

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


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


## TL;DR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

##### transform の種類１

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

##### transform の種類２

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

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

### 他のエフェクト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


## TL;DR

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

### 機能

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

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

### コーディング

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

### ドメイン

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

### UX

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

### 表記とレイアウト

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

### ブログ

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

### WP 管理画面

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

### 管理マニュアル

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

### Google Analytics

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

### SEO

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

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


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

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


## TL;DR

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

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

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

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

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

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

##### ドメイン

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

##### ご予算

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

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

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

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

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

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

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

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

##### 期待する効果

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

##### 機能と目的

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

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

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

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

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

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

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

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

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

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

##### 素材

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

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

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

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

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

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

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

あり／なし

#### EC サイト

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

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

##### データの移行

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

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

##### 決済の種類

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

##### SSL

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

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

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

データ量が多い／少ない

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

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


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

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


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

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

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

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

筆者の執筆テーマは、

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

の 3 つです。

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

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

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

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


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

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


## TL;DR

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

### インタラクティブ

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

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

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

css

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

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

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

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

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

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

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

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

css

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

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

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

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

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

### ボックス

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

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

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

css

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

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

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

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

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

css

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

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

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

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

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

css

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

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

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

### UI

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

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

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

css

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

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

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

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

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

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

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

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

css

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

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

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

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

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

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

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

css

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

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

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

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

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

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

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

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

css

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

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

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

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

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

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

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

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

css

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

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

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

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

css

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

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

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

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

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

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

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


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


## TL;DR

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

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

### 画像

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

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

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

css

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

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

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

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

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

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

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

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

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

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

css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

css

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

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

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

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

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

css

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

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

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

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

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

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

### 条件に応じて

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

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

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

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

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

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

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

### テキスト

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

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

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

#### １３．文字詰め

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

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

</ul>

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

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

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

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

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

#### １５．スライド

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

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

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

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

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

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

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

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


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


## TL;DR

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

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

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

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

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

Photoshop の機能拡張はこちら。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#### ５．造形性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#### ９．禁則処理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


## TL;DR

筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。

### 創業前に準備すること

起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。

#### １．定款作成前

定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。

- 事業所物件候補を見つけたら、不動産屋に連絡
- 回線がひけるかどうか聞く
- 改装可能か、どこまで改造出来るか聞く
- 計画している事業内容で賃貸可能か確認
- 信用審査があるので待つ
- 審査 OK でテナント契約
- リフォーム会社を見つけ見積受け取り、事務所改装開始

#### ２．税金・経費

開業する前の領収書は保管しておきます。税金・経費などの知識は以下を参考に。大体この辺りを読んでおけばよいかなと。

- \[定款（ていかん）\][定款とは何か](http://www.mitaakira.com/teikantowa.htm)
- \[資本金\][株式会社の資本金を決めるために… | inQup](http://inqup.com/capital-stock)
- \[代表者印・銀行印の違い\][印鑑の種類と役割｜芳文堂](http://www.hobundo.jp/homemenu/inkansyuruiyakuwari.htm)
- \[創立費と開業費の違い\][創立費と開業費](http://123k.zei.ac/kamoku/bs/kurinobe-sisan/soukaigyou.html)
- \[青色申告の承認申請書\][個人事業：青色申告承認申請のメリット](http://entre.kokohore.net/self/soho2.html)
- \[棚卸資産の評価方法の届出書\][［手続名］棚卸資産の評価方法の届出｜法人税｜国税庁](https://www.nta.go.jp/tetsuzuki/shinsei/annai/hojin/annai/1554_16.htm)
- \[減価償却資産の償却方法の届出書\][減価償却資産の償却方法の届出｜法人税｜国税庁](https://www.nta.go.jp/tetsuzuki/shinsei/annai/hojin/annai/1554_21.htm)
- \[特別償却\][特別に償却が認められる政策減税](http://www.kk-support.com/setsuzei/gs_toku.htm)
- \[経費で落とせる支払い\][経費にできるもの・できないもの | 個人事業のアレコレ](http://www.mt-tommy.com/bookkeeping/expense/)
- \[交際費\][接待・贈答品などを支出する費用](http://j-net21.smrj.go.jp/well/zeikin/002/20080909_16.html)
- \[会議費\][内部打ち合わせ](http://www.kousaihikazei.com/q5.html)
- \[旅費交通費\][電車、地下鉄、バスなど](http://qqweb.jp/QQW/STATICS/it/keiri_mama/201208.html)
- \[福利厚生費\][全従業員のために支出した費用](http://keiei.freee.co.jp/2014/05/01/hukurikouseihi/)
- \[減価償却費の計算方法\][定額法と定率法の計算方法](http://www.asahi-net.or.jp/~av6h-okn/houzinzei/houzin4.htm)
- \[役員報酬について\][設立初年度の役員報酬の決め方](http://kigyou-no1.com/officers-remuneration-653)
- \[家族を役員にするメリット\][節税効果が大きい妻を役員にすると…](http://setuzei117.blog44.fc2.com/blog-entry-11.html)
- \[役員賞与について\][臨時的に支給される給与で退職給与以外のもの](http://123k.zei.ac/kamoku/pl/jinkenhi/yakuinnhousyuu.html)
- \[売上の計上基準\][販売管理～売上の計上時期（売上計上基準）](http://www.sk-hanbai.com/ship/ship03_keijyou.html)

#### ３．会計・帳簿

会計・帳簿関係はこちらを参考に。会計ソフトを扱う場合にも役立ちます。

- \[現金出納帳\][現金の残高を明確にするための帳簿。現金の流れ](http://www.get-boki.com/27/47/000118.html)
- \[普通預金出納帳\][銀行別にすべての取引を記入、お金の流れ](http://boki.popnavi.net/010/post_27.html)
- \[売掛帳\][売上が上がり、代金をまだ受け取っていない売掛の残高を記入](http://boki.popnavi.net/010/post_25.html)
- \[買掛帳\][代金を借り入れている状態。支払い漏れを防ぐ](http://www.levelup99.net/kojinjigyou/category4/entry46.html)
- \[固定資産台帳\][固定資産課税台帳 - Wikipedia](http://ja.wikipedia.org/wiki/%E5%9B%BA%E5%AE%9A%E8%B3%87%E7%94%A3%E8%AA%B2%E7%A8%8E%E5%8F%B0%E5%B8%B3)
- \[総勘定元帳\][総勘定元帳を作ろう | 複式簿記入門講座](http://boki.popnavi.net/010/post_11.html)
- \[決算書\][決算書.com:決算書の読み方・使い方・見方がわかる!](http://www.kessansho.com/general/study/)
- \[収入印紙（印紙）・印紙税\][収入印紙（印紙税）の知識＋印紙税額一覧表](http://encyclopedia.aceplanning.com/15.htm)

#### ４．事業計画書／補助金

事業計画書の書き方など。筆者は事業計画書をもとにして、創業補助金の申請書を作りました。創業補助金の申請書は写真や会社のロゴを入れたら見栄えが良くなると思います。Web 制作系だと専門用語が多くなるので噛み砕いて簡潔に書きます。

創業補助金の申請は、応募者の概要、事業内容、本事業の動機、将来の展望、事業の知識、経験、人脈、熱意・・・など記載することが沢山あります。自分で困難だと感じた場合は税理士さんに聞いてみましょう。

- \[事業計画とは\][1-3.事業計画書の作り方](http://knowhow.dreamgate.gr.jp/manual/id=3)
- \[事業計画書サンプル\][創業計画書・事業計画書サンプル](http://www.kaigyou-sougyou.com/category/1479668.html)
- \[ビジネスモデルの書き方\][ビジネスモデル 書き方](http://www.linzylinzy.com/profitability.html)
- \[助成金一覧\][知ってトクする助成金活用：一覧](http://www.dreamgate.gr.jp/knowhow/subsidy_list/)
- \[創業補助金\*現在終了\][創業補助金（創業促進補助金）公募のご案内](http://www.smrj.go.jp/utility/offer/075939.html)

#### ５．事務所改装確認事項

事務所を改装するにあたり事前に確認しておきたいこと。一人でやらないといけない場合、他の準備に追われて意外と忘れてしまいそうな部分。

- 壁紙・床板の取り替え、外の目立つ位置に看板の取り付けは可能か
- 流し台・トイレなどの設備、排水口、換気扇
- セキュリティ・鍵の種類＞鍵屋さんで詳しく聞きます
- 外壁にポストの取り付けは可能か
- エアコンの取り付け前に電気を通せるか確認
- 事務所が高所にある場合、室外機は窓から取り付け可能か
- 電気のアンペア数の確認＞筆者は入居直後ブレーカが落ちた…
- 電話回線の場所を確認
- ネット回線契約・工事日の確認とプロバイダ ID を準備
- 電話・FAX の回線を分けるか統一するか
- タウンページに登録するか＞勝手に連絡が来ます

#### ６．登記申請に必要な定款の内容

最初に税理士さんに会社設立の相談をしたところ、司法書士さんを紹介してくれました。（税理士さんと司法書士さんはセットの場合が多い）筆者は登記申請を司法書士さんにお願いしました。

商号（※１）・住所・目的（※２）・役員と数・資本金（※３）・株主総会・発起人・取締役任期・公告の方法（官報で OK。HP の場合は公告ページのアドレスまで出来ていないと指定不可）など定款に必要な内容を決めます。定款は会社のルールブックみたいなものです。

※１．商号（会社名）は司法書士さんに重複がないか調べてもらいます。筆者はここで時間を取られるのが嫌だったので司法書士さんに丸投げしましたが、自分で行う場合は法務局で照合します。この後、実印・銀行印・角印・ゴム印を作成します。印鑑に関しては[会社印鑑の種類とそれぞれの法的効力の違い：起業のための必須知識 | inQup](http://inqup.com/ones-seal)を参考に。

※２．目的は現在計画しているものだけでなく、今後やっていきたい事業内容も盛り込んでおきましょう。目的は定款の絶対的記載事項なので後々追加したいと思ったら、その場合は改めて登記申請を行う必要があります。

定款目的の例はこちらから検索可能です。司法書士さんに言えば辞書をコピーしてくれます。[会社定款目的記載例検索サイト；イー目的ドットコム](http://www.e-mokuteki.com/access/)

※３．資本金は１円からでもできますが、あまり低すぎると会社の信用が得られないそうです。（小話：司法書士さんの話によると実際 30 円で登記した人が、1 か月後に信用云々の関係で 100 万円で登記しなおしてくださいと言ってきたそうです。）

定款認証を受けてから、個人の銀行口座に資本金を入金します。定款認証を受ける前に口座に資本金を入れていても認証後の日付での入金が必要となります。（筆者はそれを知らずに入金し、やり直しさせられました・・・）

#### ７．銀行口座の開設

登記が終わったら会社名義の銀行口座を開設し、個人口座から資本金を移動させます。銀行には定款のコピーや登記事項証明書・会社の印鑑証明・銀行印・運転免許証などを持っていきました。銀行員さんは慣れているので、サクサクやってくれます。

- [法人口座開設をスムーズに行う方法：起業前に知らないと後悔する？！ | inQup](http://inqup.com/banking)

#### ８．ドメイン名を決める

会社用のドメインは「co.jp」。重複がないか調べ、ドメインを抑えたら会社登記情報を仮登録しておきます。法人化した後に本登録可能となります。

- [属性型 JP ドメイン（.co.jp・.or.jp）と汎用 JP ドメイン（.jp）はどこが違うの？ | よくある質問 | ムームードメイン](http://muumuu-domain.com/?mode=faq&state=answer&id=000658)

#### ９．ロゴ作成と商標登録

作成したロゴデータを作成後特許事務所にて調査してもらい、料金がかかりますが重複がなければ商標登録申請を依頼することもできます。

- [商標権のトラブルを避けるための措置 | 商標の活用法 | 商標とは？ | 正林国際特許商標事務所](http://www.sho-pat.com/j/trademark/method/method2.html)
- [商標登録ならおまかせください！【商標登録専門サイト】](http://www.jazy-ip.com/)
- [商標チェック・登録サービスについて | ランサーズ](http://www.lancers.jp/help/trademark_check)

#### １０．GoogleApps 設定

メーラーを使わなくても、独自ドメインメールを Gmail で使用できるのは便利。勤怠管理や一斉メール送信もできるので導入しておきます。メールにはフッターに共通で入る「署名（会社名・肩書・住所・TEL・FAX・E-mail・URL）」を設定しておきます。

- [Google Apps 使い方、機能紹介 | グーグルアップス【MasterApps】](http://www.master-apps.jp/casestudy)
- [Apps ステータスダッシュボード](http://www.google.com/appsstatus#hl=ja)
- [Google Apps for Work](http://www.google.co.jp/intx/ja/enterprise/apps/business/)

#### １１．サーバの準備と設定

サーバのレコードを設定し、ネームサーバを変更することで GoogleApps、サーバでのドメイン運用が可能となります。ネームサーバーの設定後は数時間～３日は不安定なので、表示されないときがあるので少し待ちます。

さくら VPS がおすすめです。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

- [初心者でもわかる！さくら VPS | Sakura VPS 設定マニュアル](http://www.xn--vps-073b3a72a.com/)
- [さくら VPS の初期設定 | 離島に住みたい FE ブログ](http://blog.orangemittoo.net/post/sakuravps_init/)
- [さくら VPS で１０分で wordpress の設定をする - 甘噛み最前線](http://billyback.hatenadiary.jp/entry/2013/12/02/171120)

#### １２．名刺データ

名刺には会社の住所や電話番号、アドレスが必要なので法人登記やドメイン設定が終わった後で作成することになります。名刺などのカラー印刷物は、シアン・マゼンタ・イエロー・ブラックの４色で刷られることが多いので、カラーモードは「CMYK（光が紙などに反射し、目に届く色）」で制作します。

[名刺のデザインを新しくしました | Web クリエイターボックス](http://www.webcreatorbox.com/inspiration/my-new-business-card/)を参考にさせていただき、名刺の紙質は[マシュマロホワイト](http://www.superprint.jp/product/marshmallowwhite.asp)で依頼。枚数：100 枚、Illustrator でデータ入稿しました。

- [レイアウトやタイポグラフィに関するまとめ](https://commte.net/4547)

#### １３．事務所の備品を用意する

どういった備品を用意するかは、個人によると思いますが、こういったものを準備するといいと思います。開業直後は訪問者の方と自社の事務所で打ち合わせする機会も多くなるのでデスク・椅子等・冷蔵庫の什器などは先に用意しておくといいかもしれません。

- デスク・椅子・会議机・会議椅子・本棚／各数台
- キャビネット・棚板・パーテーション
- Nas・無線 LAN・SSD・CPU・PC モニター／各数台
- スイッチング Hub・ケーブル・打ち合わせ用のノート PC
- モニターアーム・キーボード（Realforce）
- ホワイトボード・スクリーン・シュレッダー・プロジェクター
- オフィスソフト・会計ソフト・adobe CC
- プリンタ兼用 ラベルシール（住所と名前を印刷する用）
- 事務用クラフト封筒 角形 2 号
- RHODIA（NO11/16）・STAEDTLER・STABILO・BIC など書きやすいもの

### 制作フローまとめ

Web 制作関係で独立する前におさらいしておきたいこと。企画・提案から納品、保守契約までの簡単な流れをまとめます。Web 制作で起業する場合に知っておきたいこと。

#### １４．企画・提案

提案書に必ず書いておきたいこと。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。

- [Web 制作に特化した「提案書」に入れておきたいこと](https://commte.net/4125)

#### １５．制作フローの確認

Web 制作の一連の流れ。ヒアリングシート・見積もり・などの書類関係から実際にウェブサイトを構築するときの一連の流れ、制作フロー。

- [Web 制作フローが「完璧」にわかる資料や流れ](https://commte.net/4058)

#### １６．コーディングに入ったら

コーディングについてのフロー。仕様書の確認からスケジューリング、マークアップ、CSS、設計全般、WordPress 組み込みまで。

- [コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)](https://commte.net/4089)

#### １７．ドメイン、DNS、メール設定

独自ドメインで HP と gmail を運用させるまでの流れとメール受信設定、さくら VPS にて WordPress を動かす方法、ターミナルから ssh 接続してからの必須コマンド一覧など受注後必要となる知識。

- [サイト制作時に知っておくと「意外」と役に立つこと](https://commte.net/4641)


筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので

起業するときに助かる！Web制作者が独立するために必要なまとめ


## TL;DR

CMS を組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。

2016/07/03：高速化についての新しい方法を追加しました。[確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開](https://commte.net/5753)。

### VPS

高速化のために VPS で試して比較的効果があったことを、次回また組み込む時のためにメモ。

#### １．VPS / SSD に

リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、

[さくらの VPS](http://px.a8.net/svt/ejp?a8mat=2BTZIY+7WL7XU+D8Y+BWVTE)SSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。

- [さくら VPS | Sakura VPS 設定マニュアル](http://www.xn--vps-073b3a72a.com/)
- [さくら VPS の初期設定 | 離島に住みたい FE ブログ](http://blog.orangemittoo.net/post/sakuravps_init/)
- [さくら VPS で１０分で wordpress の設定をする - 甘噛み最前線](http://billyback.hatenadiary.jp/entry/2013/12/02/171120)

#### ２．TSO を off にする

さくら VPS（CentOS）にてファイルのダウンロード速度が極端に遅い場合は、ターミナルで root に切り替え tcp segmentation offload を off に設定します。

- [さくらの VPS で回線速度が遅くアクセスに時間がかかります。｜よくある質問｜さくらインターネット公式サポートサイト](https://sakura.custhelp.com/app/answers/detail/a_id/1368#gs=eyJndWlkZUlEIjoxLCJxdWVzdGlvbklEIjoxLCJyZXNwb25zZUlEIjoxLCJndWlkZVNlc3Npb24iOiJWYWtscjQqbCIsInNlc3Npb25JRCI6IlZha2xyNCpsIn0.)

#### ３．PHP アクセラレータの導入

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

- [ServersMan@VPS (CentOS) eAccelerator で PHP の高速化](http://temog.info/vps/serversmanvps-eaccelerator-php.html)
- [APC で PHP の処理を高速化 | Web クリエイターネット](http://www.webcreator-net.com/tips_memo/server/20120612083050.html)

#### ４．Apache の不要モジュール削除

メモリ消費を抑えるために Apache の不要モジュールもコメントアウトします。

- [さくらの VPS で動いている Apache の不要モジュールを削除する | Web エンジニアライフ](http://webengineerlife.com/2012/03/02/sakura-vps-apache-module/)

#### ５．キャッシュを利用し、転送量を軽減

Apache のモジュール、mod_expires を使いキャッシュを保持させ、転送量を軽減させて負荷対策します。ひとつはコマンドと htaccess の一例。

もう一つは[さくらのレンタルサーバ](http://px.a8.net/svt/ejp?a8mat=2BTZIY+7X6NJM+D8Y+67RK2)での設定方法。

- [【負荷対策】Apache のモジュール mod_expires でキャッシュを利用する - エーエイチレフ linux サーバー技術情報](http://www.ahref.org/tech/server/apacche/389.html)

### 画像軽量化

サイトのコンテンツに大きめの写真を使うことが多くなってきました。画像の転送時間は馬鹿にならないので、画像の余分なデータを削除します

#### ６．JPEG Exif 削除

画質を下げてファイルを軽減するのは一番楽な方法ですけど、ユーザーに良い印象を残すことができません。Exif（日時・場所・機種・画素数などの情報）を削除するソフトを使い軽量化します。

JPEG 画像を劣化させずに軽量化するウェブサービスであれば[JPEGmini](http://www.jpegmini.com/)がおすすめ。

- [\[フリーソフト\] JPEG 画像の Exif 情報をドラッグで一括削除できるソフト「ExifEraser」](http://antarespc.com/tool/exiferaser.html)
- [\[フリーソフト\] 「JPEG Cleaner」と「JpegAnalyzer Plus」](http://internet.watch.impress.co.jp/cda/biz_tool/2008/06/17/19953.html)

#### ７．PNG 軽量化

PNG にも Exif 等のデータが含まれています。PNG は透過色を指定できますが、フルカラーにすると JPEG よりファイルサイズが大きくなるといったデメリットもあります。こちらは画質をある程度損なわずにファイルを削減するソフトとサービス。

- [\[フリーソフト\] 見た目の画質や不透明度はそのまま、PNG 画像のファイルサイズを 70％削減する「PNGoo」 - 窓の杜](http://www.forest.impress.co.jp/docs/review/20140228_637513.html)
- [TinyPNG](https://tinypng.com/)

#### ８．GIF、SVG 画像

JPG、PNG、GIF、SVG 画像を圧縮して小さくしてくれる「Compressor」 は対応している画像が多いです。

- [無料で JPG、PNG、GIF、SVG 画像を圧縮して小さくしてくれる「Compressor」 - GIGAZINE](http://gigazine.net/news/20140527-compressor/)

### JavaScript

テーマ作成するときなんかに、リクエスト数など極力減らしておきたいこと。

#### ９．JavaScript を圧縮

JavaScript に含まれるタブやスペース・改行などを削除し圧縮するウェブサービス。

- [JavaScript ソースコードを圧縮してサイズを小さくする。またはソースを整形する JavaScript プログラムメモ｜プログラムメモ](http://logic.moo.jp/data/513.html)
- [CSS や JavaScript ファイルを連結、圧縮·Minify MOONGIFT](http://www.moongift.jp/2009/01/minify/)
- [\[試\] サイト表示速度を高速化する方法 | ファイル圧縮（Minify）による表示速度改善 | 試行錯誤ライフハック](http://marubon.info/method-speed-up-display-of-web-site-with-contents-minify-3109/)

#### １０．非同期で読み込む

非同期にすることにより JavaScript の読み込みが完了していなくても他の部分を読み込むことが可能になります。こちらはユーザーの体感速度やページを早く表示されるための施策まとめ。

- [ユーザーの体感速度を高めるための JavaScript チューニング（前編） | HTML5Experts.jp](http://html5experts.jp/yoshikawa_t/877/)
- [\[M\] WordPress で script 要素をまるっとサクッと非同期化する方法 | mbdb (モバデビ)](http://mbdb.jp/hacks/wp-javascript-add-async.html)

#### １１．遅延読み込み

サイズの大きい画像やファイルの読み込みのタイミングを遅らせることで、ページ表示を早く感じさせる遅延ロード(Lazy Load)とプラグイン。

- [Web サイトの読み込み体感速度が 2 秒くらい上がるかも。SNS ボタンは後から読み込め！ - Web 学び](http://fukuyama.co/lazyloadsns)
- [画像の読み込みを遅延ロードさせる jQuery プラグイン Lazy Load](http://web.showjin.me/jquery_lazyload.html)

### リクエスト数・他

#### １２．HTTP リクエストを最小限に

リクエスト数が増えてくると応答に時間がかかり、結果表示がもたついてしまいます。こちらは HTTP リクエストの削減について。

- [HTTP リクエストを減らすために【序章】HTTP リクエストは甘え — MOL](http://t32k.me/mol/log/reduce-http-requests-overview/)
- [JavaScript と CSS ファイルの HTTP リクエストを最小限にし圧縮・キャッシュする -BoxJS と BoxCSS | コリス](http://coliss.com/articles/build-websites/operation/work/simple-package-management-service-boxjs-and-boxcss.html)

#### １３．高速化ライブラリ

スマホでは使えないけど、こういう方法もあるんだなぁということでメモ。リンクをマウスオーバーで先読みする方法。リンク先ページをロードして pjax 化する高速化ライブラリ。

- [2 行追加するだけで Web サイトを高速化する InstantClick.io - atskimura-memo](http://atskimura.hatenablog.com/entry/2014/02/18/215538)

#### １４．gzip 圧縮

gzip 圧縮を使いデータの転送量を減らす方法。

- [ウェブサイトを gzip 圧縮で高速化する: 小粋空間](http://www.koikikukan.com/2012/06/19-015555.php)
- [gzip 圧縮で Web コンテンツを高速化 | Web クリエイターネット](http://www.webcreator-net.com/tips_memo/server/20120525083004.html)

#### １５．プラグインの使用数を減らす

WordPress テーマを自作したことある人なら、極力プラグインを使わずに高速化させるコーディングを試みたことがあると思います。こちらはよく使われそうなプラグインの代替案をまとめてあります。

- [【WordPress まとめ】13 プラグインを減らして高速化！その方法を解説するよ - ゆめぴょんの知恵](http://wispyon.com/noplugin-wordpress-matome/)


CMSを組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。2016/07/03：高速化につい

2015-3-23

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

2015-3-16

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

2015-1-26

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

2015-1-5

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

2014-12-24

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

2014-12-1

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

2014-11-10

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

2014-10-27

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

2014-9-16

起業するときに助かる！Web制作者が独立するために必要なまとめ

2014-8-18

ずいぶん速くなった！ページ表示高速化テクニックまとめ