【第2弾】少しのコードで実装可能な20のCSS小技集
  • 公開日時 2016年2月2日
  • タグ

はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！

目次

  1. 画像を丸く表示
  2. 1本線のテーブル
  3. 1本線の水平線
  4. 線色を指定しなくても文字色と同一色になる
  5. 複数の背景画像
  6. 背景画像のサイズ
  7. Webフォントを使う
  8. 画像をモノクロやセピアにする
  9. リストマーカーの色を変更
  10. グラデーション
  11. グラデーションボーダー
  12. フラットだけど立体的ボタン
  13. 画像をぼかす
  14. レスポンシブに対応した動画
  15. 要素を真ん中に配置
  16. カンマで分けたリスト
  17. 文字を縦書き
  18. フォーカスすると伸びるテキストボックス
  19. iOSでボタンのスタイルをリセット
  20. 線のオフセット設定

codepen
HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブをご覧ください！

知っておきたい基本編

1. 画像を丸く表示

画像をまんまるに表示するには、縦横比が1：1のものを用意し、その画像に border-radius: 50%; を与えればOK。もちろん画像以外の、div など他の要素にも加えることができます。まんまるではなく、角丸にするには、各頂点の丸みの値を指定しましょう。

1
img { border-radius: 50%; }


目次へ。

2. 1本線のテーブル

通常、table や td 要素に border プロパティーで線を加えると、セルの間に空白ができ、二本線になってしまいます。そこで border-collapse: collapse; を加えて空白を消してしまいましょう！

1
2
3
4
5
6
table {
  border-collapse: collapse;
}
th, td {
  border:1px solid #ccc;
}


目次へ。

3. 1本線の水平線

水平線を表示する hr 要素は、デフォルトだとほんのり立体感のある装飾になっています。一旦 border: 0; で立体感をリセットして、影のない1pxの線を設定しましょう。線の太さはお好みで変更してくださいね！

1
2
3
4
hr {
  border: none;
  border-top: 1px solid #aaa;
}


目次へ。

4. 線色を指定しなくても文字色と同一色になる

これは本当にちっちゃな小技なんですけど…w 線で囲んだ要素に color で文字色を指定している場合、border プロパティーで色を指定しなくても、文字色が継承されます。言葉で説明してもわかりにくいと思うので一例を…。

1
2
3
4
p {
  color: pink;
  border: 1px solid;
}

border
こんな感じで、border 要素に色を指定していなくても、線はピンク色になります。

1
2
3
4
5
6
div {
  color: pink;
}
p {
  border: 1px solid;
}

同様に、親要素に color で色を指定していても、子要素に線色は継承されます。
目次へ。

5. 複数の背景画像

カンマで区切って複数の背景画像を重ねて表示することができます。リピートや表示位置を指定するときも、各プロパティーごとにカンマで区切って指定。背景のためだけに使う無駄な div を作る必要もなくなります。

1
2
3
4
5
div {
  background-image:  url(images/img1.png), url(images/img2.jpg);
  background-position: center, left top;
  background-repeat: no-repeat;
}


目次へ。

6. 背景画像のサイズ

背景画像を使用する時に、画像をRetina対応するために background-size を使ったことがある方もいらっしゃるかと思います。しかし、この background-size は縦横のpxを指定するだけでなく、様々な値が用意されています。

  • auto
  • cover
  • contain
  • 横の値 縦の値

最近はやりのフルスクリーン画像を背景に使ったサイトを作るには、この中の cover がとっても便利。画像の縦横比を保ったまま要素にフィットさせて表示できます。例えば下の例では横幅900pxの画像を背景に使っていますが、横幅640pxのdivにフィットさせて表示しています。

1
2
3
4
div {
  background: url(images/bg.jpg) no-repeat;
  background-size: cover;
}


目次へ。

7. Webフォントを使う

Webフォントとは、サーバー上にフォントファイルを置いて、デフォルト以外の素敵フォントを表示できちゃう技術。
フォントファイルをサーバーにアップロード後、@font-face を使ってWebフォントの利用ができるようにします。以前はEOTやTTF等、様々な形式のフォントファイルを用意していましたが、現在はWOFF形式のみでOK。あとはWebフォントを指定したいセレクターに font-family でフォント名を指定すれば完了です。

1
2
3
4
5
6
7
@font-face{
  font-family: 'myWebFont';
  src: url('font/myWebFont-subset.woff') format('woff');
}
.webfont{
  font-family: 'myWebFont';
}


すると、こんな感じに表示されます。

日本語フォントは文字数が多くてデータ量が増え、表示速度が低下するおそれがあるため、利用する文字だけを抜粋する「フォントのサブセット化」も有効です。詳しくは過去記事「Webクリエイターボックスを（プチ）リニューアルしました」で紹介しているので、参考にしてみてください。
目次へ。

もっと豊かに！装飾編

8. 画像をモノクロやセピアにする

filter を使って画像の色を調整できます。カーソルを合わせると画像の色調を変化させる…なんてことも簡単にできますね。※IE非対応

01
02
03
04
05
06
07
08
09
10
11
/* セピア */
.sepia {
  -webkit-filter: sepia(80%);
  filter: sepia(80%);
}
 
/* モノクロ */
.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}


目次へ。

9. リストマーカーの色を変更

リストマーカーは通常黒ですが、擬似要素を使って色付きのマーカーを追加できます。Webクリエイターボックスのリストもこの方法で色を変えています。四角いマーカーにするには下記コードの border-radius: 100%; を消してくださいね。

01
02
03
04
05
06
07
08
09
10
11
li:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #0bd;
  position: relative;
  left: -15px;
  top: -3px;
  display: inline-block;
}


目次へ。

10. グラデーション

グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。角度を変えたり、円形にグラデーションをかけることも可能。詳しくは過去記事「美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！」をご覧ください！

1
2
3
body {
  background: linear-gradient(#05FBFF, #1E00FF);
}


目次へ。

11. グラデーションボーダー

グラデーションネタでもう一つ。先ほどのように背景をグラデーションにし、background-clip でくり抜いちゃいます。色や線の太さを調整して、素敵デザインに！

1
2
3
4
5
6
7
8
9
div {
  width: 600px;
  height: 300px;
  box-sizing: border-box;
  border: 10px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#FFAFBD, #ED4264);
}


目次へ。

12. フラットだけど立体的ボタン

フラットデザインのボタンって、押した感じがなかなか伝えづらいですよね。そこで box-shadow で影をつけてみましょう！さらに position をうまく使って、カーソルを合わせた時にへこんだ感をプラス！ちなみにこの小技は私の所属しているFrogのWebサイトで活用しています :)

01
02
03
04
05
06
07
08
09
10
11
12
.btn {
  background: #5fb2c1;
  box-shadow: 0 3px #3b8a98;
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 10px 20px;
}
.btn:hover {
  box-shadow: 0 1px #3b8a98;
  top: 1px;
}


目次へ。

13. 画像をぼかす

こちらもホバーに使うと良さそうな小技。8. でも使ったCSSフィルターを使って画像をぼかします。過去記事「jQueryとCSS3で手軽に実装できるスクロールエフェクト」では、スクロールに合わせてぼかしを解除する方法も紹介しています。※IE非対応

1
2
3
4
img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}


目次へ。

かゆいところに手が届く応用編

14. レスポンシブに対応した動画

WebページにYouTubeやVimeo等の動画を埋め込んだ場合、幅の狭いデバイスで閲覧すると横スクロールしてしまったり、変に縦長になってしまったりします。そこで埋め込み動画を div 等で囲み、以下のスタイルを加えてあげると、16:9の比率を守って伸び縮みしてくれます。デモ画面右上の「Edio on CODEPEN」をクリックして、画面幅を変更してみてください。

01
02
03
04
05
06
07
08
09
10
11
12
13
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


目次へ。

15. 要素を真ん中に配置

縦横のサイズがわからないボックスを中央に配置したい時はFlexboxを使いましょう！親要素に以下のCSSを加えるだけです。

HTML

1
2
3
<div class="wrapper">
  <p>文章など...</p>
</div>

CSS

1
2
3
4
5
6
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}


目次へ。

16. カンマで分けたリスト

通常縦並びに表示するリストを横並びにし、カンマで区切る小技。もちろん content の値を読点（、）やスラッシュ（/）に変更してもいいですね。

1
2
3
4
5
6
7
8
9
ul {
  display: flex;
}
li:not(:first-child) {
  margin-left: 5px;
}
ul > li:not(:last-child)::after {
  content: ",";
}


目次へ。

17. 文字を縦書き

あまり使う機会はないかもしれませんが、テキストを縦書きにする小技。writing-mode を使えば、本来の日本語の通り上から下、右から左に縦書き表示できます。

1
2
3
4
p {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}


IEで表示するとガッタガタに崩れる時は、min-height で要素の高さを指定してあげるといい感じになります。
目次へ。

18. フォーカスすると伸びるテキストボックス

ページの面積を節約するため等、最初は短めに表示しておき、フォーカスするとむにゅーんと伸びるテキストボックス。CSSだけで簡単に実装できます。

1
2
3
4
5
6
7
input[type="text"] {
    width: 150px;
    transition: width .3s;
}
input[type="text"]:focus {
    width: 250px;
}


目次へ。

19. iOSでボタンのスタイルをリセット

以下のデモ画面、PCやMacで見るとなんの変哲もないボタンですよね…。

ところがiOSデバイスで見ると、なにやら丸っこく、グラデーションがかかって表示されてしまいます。

ios-buttons

そこで下記のコードをプラスして、装飾をリセットしましょう。

1
2
3
4
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

QR
↑QRコードを用意してみたので、お手持ちのiPhoneやiPadから確認してみてくださいね。
目次へ。

20. 線のオフセット設定

通常、ラインは要素のすぐ外側に表示されますが、 outline-offset プロパティを使うと、線から指定の距離だけ離してオフセット表示できます。今までは画像等に padding を指定して実装できていましたが、こちらは div 等のボックスにも適用できます。※IE非対応

1
2
3
4
.offset {
  outline: solid 5px #fdd;
  outline-offset: 10px;
}

「これは使える！」なんて発見があれば幸いです。皆さんがよく使う素敵小技も教えてくださいね ;)
目次へ。

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)