こんにちは。Supership デザイナーのハガです。今回はcssのお話です。

皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。）

10個のcssテクニック

コアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。

1.カルーセル

<ul class="carousel">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.carousel {
  background: #ffd54f;
  padding: 6px;
  width: 200px;

  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.carousel li {
  background: #fff;
  margin: 2px;
  text-align: center;

  display: inline-block;
}

スマホでのgoogle検索結果で見かけるカルーセル。javascriptを使用しないので軽くて優しいです。-webkit-overflow-scrolling: touchとすることでスマホ時に滑らかなスクローリングを実現します。

2.コメントアウト（一行）

<p class="oneline">ここはすべて極めてこの尊重院についてのの以上が申し上げるなけれませ。とにかく結果に戦争者も正しくその損害ですなでもから飛びてならですがは誤解しべきですて、全くにはしですうないで。</p>

.oneline {
  background: #ffd54f;
  padding: 10px;
  width: 200px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

テキストを途中で…にするcss。リンクのデザインを崩さないようにする時などにとても便利。

3.コメントアウト（複数行）

<p class="maltiple">ここはすべて極めてこの尊重院についてのの以上が申し上げるなけれませ。とにかく結果に戦争者も正しくその損害ですなでもから飛びてならですがは誤解しべきですて、全くにはしですうないで。</p>

.maltiple {
  background: #ffd54f;
  line-height: 1.7;
  padding: 10px;
  width: 200px;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

2の複数行版。javascriptを使わずにcssだけで実現するにくいやつ。line-heightやpaddingの取り方によっては、下に次の行がちょろっとだけ見えてしまうことも…。レガシーブラウザはお断りです。

4.三角（8方向）

<ul class="triangle">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

/三角のcommon css /
.triangle li {
  display: inline-block;

  border-style: solid;
  width: 0;
  height: 0;
}
/上　左から1つめ /
.triangle li:nth-child(1) {
  border-color: transparent transparent #007bff transparent;
  border-width: 0 16px 16px 16px;
}
/右斜め上　左から2つめ /
.triangle li:nth-child(2) {
  border-color: transparent #007bff transparent transparent;
  border-width: 0 16px 16px 0;
}
/右　左から3つめ /
.triangle li:nth-child(3) {
  border-color: transparent transparent transparent #007bff;
  border-width: 16px 0 16px 16px;
}
/右斜め下　左から4つめ /
.triangle li:nth-child(4) {
  border-color: transparent transparent #007bff transparent;
  border-width: 0 0 16px 16px;
}
/下　左から5つめ /
.triangle li:nth-child(5) {
  border-color: #007bff transparent transparent transparent;
  border-width: 16px 16px 0 16px;
}
/左斜め下　左から6つめ /
.triangle li:nth-child(6) {
  border-color: transparent transparent transparent #007bff;
  border-width: 16px 0 0 16px;
}
/左　左から7つめ /
.triangle li:nth-child(7) {
  border-color: transparent #007bff transparent transparent;
  border-width: 16px 16px 16px 0;
}
/左斜め上　左から8つめ /
.triangle li:nth-child(8) {
  border-width: 16px 16px 0 0;
  border-color: #007bff transparent transparent transparent;
}

８方向の三角を実現します。リンクのお供やcssだけでアイコンを作りたい時など、デザインのワンポイントに添えるととてもおしゃれ。http://apps.eky.hk/css-triangle-generator/このジェネレータを使うのがいいです。

5.テキスト画像置換

<p class="hide_txt">団の済んですものしかとうとう今がほとんどましでしし。</p>

.hide_txt {
  background: #0B3399 url(./img/supership.svg);

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

テキストを画像に置換するやつです。これまでよく使われていたtext-indent: -9999pxの代替案です。どのみち文字を非表示にしているのでseo的にどうなの？と疑問は残ります。しかし便利なのは確かなので使っちゃってます。パフォーマンスの改善につながるとの触れ込みですが、最近のハードウェアだとパフォーマンス改善というほどでもないとのこと。http://w3q.jp/t/1914。

6.中央寄せ

6-1.横方向

<div class="center-horizontal"><p>横方向に中央寄せ</p></div>

.center-horizontal {
  background: #ffd54f;
  display: block;
  padding: 10px 0;
  width: 200px;
  height: 200px;
}
.center-horizontal p {
  background: #fff;
  width: 100px;
  height: 40px;

  margin: 0 auto;
}

中央に寄せたいモノのwidth必須。

6-2.縦方向

<div class="center-vertical"><p>縦方向に中央寄せ</p></div>

.center-vertical {
  background: #ffd54f;
  width: 200px;
  height: 200px;

  display: table-cell;
  vertical-align: middle;
}
.center-vertical p {
  background: #fff;
  width: 100px;
  height: 40px;
}

中央に寄せたいモノと、その外側のheightがないと中央に寄りません！

6-3.縦横両方

<div class="center-vh"><p>縦横に中央寄せ</p></div>

.center-vh {
  background: #ffd54f;
  display: block;
  width: 200px;
  height: 100px;

  position: relative;
}
.center-vh p {
  background: #fff;
  width: 100px;
  height: 40px;

  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

これが非常によく使えます。これ一つで縦のみの時（right: 0; left: 0を消す）も、横のみの時（top: 0; bottom: 0を消す）も実現できてしまうのです。ただ、position: relative;の多用はスマホ時に重くなってしまうので、（https://havelog.ayumusato.com/develop/performance/e556-compositingborder and_layer.html）適宜使うのがよろしいかと思います。

7.display: flex

<ul class="flex">
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
</ul>

.flex {
  background: #ffd54f;
  padding: 3px 4px;

  display: flex;
  flex-direction: column;
}
.flex li {
  background: #fff;
  margin: 4px;
  padding: 2px;

  display: flex;
}
.flex li:nth-child(2n) {
  flex-direction: row-reverse;
}
.flex li p {
  background: #ffd54f;
  margin: 0;
}

まず整列させたいタグを囲うタグに対してdisplay: flexします。flex-directionで縦方向か横方向なのかが決まります。columnであれば縦方向。row（初期値）とすれば横方向となります。この時row-reverseとすることで逆向きになります（右から左、下から上）。また入れ子にもできるので、flexの中にflexなんてことができちゃいます。

これもレガシーな奴はお断りです。凄い使えすぎるので色々なところに情報が転がっているのでここでは簡単な説明に留めます。自分的に使うやつをちょろっと載せてみました。

8.:not

<ul class="not">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.not {
  background: #ffd54f;
  padding: 5px;
}
.not li {
  background: #fff;
  display: block;
}
.not li:not(:last-child) {
  border-bottom: 1px solid #000;
}

各liに対してborder-bottom: 1px solid #000を当てたいけど、一番最後のliには当てたくないなんてことがよくあるじゃないですか。そうするとli:last-childだけborder-bottom: 0ってするからその分コードが長くなりますよね。でもこれを使えば1つ書くだけでいいんです！

9.全画面

<div class="full-screen"></div>

.full_screen {
  background: #ffd54f;

  width: 100vw;
  height: 100vh;
}

使い方は%と同じ感じです。ビューポートの幅か高さの1/100の値を入れます。この値が100の時、widthはスクロールバーを含んだ横幅となるので、その部分だけちょっと大きくなっちゃいます。そのためwidthに関しては100%のが良いかもしれません。高さに関してはbodyに100%と打ち込み忘れなんかを気にする必要がないのでオススメです！

さらにこいつの凄いところは文字にも対応しているところです。font-size: 12vwなんてすることでビューポートの大きさに応じたサイズになるのです。レスポンシブの力強い味方ですね。

10.背景全画面

body {
  background: url(img/bg.jpg) no-repeat center;
  background-attachment: fixed;
  background-size: cover;
}

background-sizeにcoverを当てることで、アスペクト比を保持しつつ、親要素の領域を完全に覆うようにしてくれます。また、background-attachment: fixedとすることでスクロールしても背景画像が動きません。素晴らしいテクニックなのですが、残念ながらiosのsafariには対応していません…。そんな時はhttp://webdesign.practice.jp/background-fixed-iosこちらを参考にすると幸せになれそうです。

背景画像ではなくimgに対しても、object-fit: coverとしてやることでimg画像のアスペクト比を保ちつつもimgの外側の要素の全体を覆うようにしてくれます。

おわりに

自分的に使用頻度が高いものから、稀なやつまで駆け足でまとめてみました。ここに載せたもの以外にもmarginにマイナス値をつけることで特定部分だけ親要素からはみ出させたり、ulにcounter-reset: testをなんかをつけて（testには好きな値）、li:beforeなんかにcontent: counters(test,"");counters-increment: testなんてすることでliの先頭に1から順番通りの数字をつけたりする（今回使用している画像内の数字はそのようなやり方で出しています。）のもなかなか面白い気がします。

弊社ではこんなの見るまでもないと思っている皆様のご応募をお待ちしております！その知識をフルに活用して、一緒に最高のモノ作りをしてみませんか？