【第2弾】少しのコードで実装可能な20のCSS小技集

2019年5月17日
CSS

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

↑私が10年以上利用している会計ソフト！

目次

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

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

知っておきたい基本編

1. 画像を丸く表示

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

img { border-radius: 50%; }

See the Pen border-radius by Mana (@manabox) on CodePen

2. 1本線のテーブル

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

table {
  border-collapse: collapse;
}
th, td {
  border:1px solid #ccc;
}

See the Pen 1 Line Table by Mana (@manabox) on CodePen.

3. 1本線の水平線

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

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

See the Pen 1px Line hr by Mana (@manabox) on CodePen.

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

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

p {
  color: pink;
  border: 1px solid;
}

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

div {
  color: pink;
}
p {
  border: 1px solid;
}

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

5. 複数の背景画像

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

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

See the Pen Multiple Background Images by Mana (@manabox) on CodePen

6. 背景画像のサイズ

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

auto
cover
contain
横の値縦の値

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

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

See the Pen backgound-size by Mana (@manabox) on CodePen

7. Webフォントを使う

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

@font-face{
  font-family: 'myWebFont';
  src: url('font/myWebFont-subset.woff') format('woff');
}
.webfont{
  font-family: 'myWebFont';
}

See the Pen Webfont Sample by Mana (@manabox) on CodePen.

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

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

もっと豊かに！装飾編

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

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

/* セピア */
.sepia {
  -webkit-filter: sepia(80%);
  filter: sepia(80%);
}

/* モノクロ */
.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

See the Pen CSS Filter: Sepia & Grayscale by Mana (@manabox) on CodePen.

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

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

li:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #0bd;
  position: relative;
  left: -15px;
  top: -3px;
  display: inline-block;
}

See the Pen Coloured List Marker by Mana (@manabox) on CodePen.

10. グラデーション

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

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

See the Pen CSS linear-gradient by Mana (@manabox) on CodePen.

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

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

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);
}

See the Pen Gradient Border by Mana (@manabox) on CodePen.

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

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

.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;
}

See the Pen Nice Flat Button by Mana (@manabox) on CodePen.

13. 画像をぼかす

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

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

See the Pen CSS Filter: Blur by Mana (@manabox) on CodePen.

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

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

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

.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%;
}

See the Pen Responsive iframe Videos by Mana (@manabox) on CodePen.

15. 要素を真ん中に配置

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

HTML

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

CSS

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

See the Pen Centered box both horizontally and vertically by Mana (@manabox) on CodePen.

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

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

ul {
  display: flex;
}
li:not(:first-child) {
  margin-left: 5px;
}
ul > li:not(:last-child)::after {
  content: ",";
}

See the Pen Comma-Separated Lists by Mana (@manabox) on CodePen.

17. 文字を縦書き

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

p {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

See the Pen Vertical Writing in Japanese by Mana (@manabox) on CodePen.

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

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

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

input[type="text"] {
    width: 150px;
    transition: width .3s;
}
input[type="text"]:focus {
    width: 250px;
}

See the Pen Expanding Text Field by Focus by Mana (@manabox) on CodePen.

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

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

See the Pen Reset iOS Button Style by Mana (@manabox) on CodePen.

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

ios-buttons

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

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

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

20. 線のオフセット設定

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

.offset {
  outline: solid 5px #fdd;
  outline-offset: 10px;
}

See the Pen Outline Offset by Mana (@manabox) on CodePen.

少しのコードで実装可能なCSS小技集シリーズ

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

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

広告掲載について

書いた本

クーポン

Webサイト制作やデザインのオンライン講座、WordPressのテーマ、名刺印刷などに使える、Webクリエイターボックス限定のお得なクーポンがたくさん揃っています！制作の際にぜひお役立てください！

中の人ってこんな人

Mana

Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。さらに詳しく知りたいという方は詳細ページへ。個人的などうでもいいことはTwitter @chibimanaでつぶやいてます。

関連する記事