知っておくと役に立つCSSの便利なTips


CSSを使っている中で、これは便利と思えた要素をいくつか紹介します。

  • 画像から正方形のサムネイルを切り出す
  • 複数行の文字列を省略して「...」を付ける
  • 要素の幅を片方固定サイズ、別の方を可変にする
  • Placeholderの文字色を替える

🎂 画像から正方形のサムネイルを切り出す

縦横比が正方形でない画像から正方形の画像を切り出す手順です。HTML側は次のようになります。

<div class="square-box">
  <div class="content">
    <div class="center-box">
      <img class="thumb" src="/path/thumbnail.png">
    div>
  div>
div>

CSS側は次のようになります。

.square-box {
  position: relative;
}
.square-box:before {
  display: block;
  content: "";
  padding-top: 100%;
}
.square-box .content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.thumb {
  width: 100%;
  height: auto;
}

.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

🐠 複数行の文字列を省略して「...」を付ける

複数行の文字列を一定のサイズで区切ってそれ以降は「…」を付ける方法です。まずHTMLは次のようになります。


<html>
  <head>
    <link rel="stylesheet" href="style.css">
  head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatibus, officiis debitis neque accusamus iure repudiandae voluptate reiciendis facere voluptates ipsum ipsam soluta ullam fugit minus harum esse corrupti aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatibus, officiis debitis neque accusamus iure repudiandae voluptate reiciendis facere voluptates ipsum ipsam soluta ullam fugit minus harum esse corrupti aut.p>
    div>
  body>
html>

CSS(SCSS)側は次のようになります。

// Variables
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 3;

// Reset
p {
  margin: 0;
}

// Multiline text with ellipsis
// Supported IE and Firefox
.container {
  background: #eee;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      position: absolute;
    }
    &:before {
      content: "...";
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: "";
      height: 100%;
      width: 100%;
    }
  }
}

🐡 要素の幅を片方固定サイズ、別の方を可変にする

レスポンシブデザインで左右の要素がある場合に一方を固定サイズで指定して、もう一方の要素のサイズをデバイスに合わせて可変にしたい場合は次にように記述します。

.left {
  width: -moz-calc(100% - 110px);
  width: -webkit-calc(100% - 110px);
  width: -o-calc(100% - 110px);
  width: calc(100% - 110px);
}
.right {
  width: 100px;
}

🚕 Placeholderの文字色を替える

フォームのinputタグの中のPlaceholderの文字色を変えたい場合は次のように記述します。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFF;
  opacity: 0.8;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #FFF;
  opacity: 0.8;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #FFF;
  opacity: 0.8;
}
:-moz-placeholder { /* Firefox 18- */
  color: #FFF;
  opacity: 0.8;
}

🚜 大文字・小文字指定：text-transform

CSSでテキストの大文字、小文字等を制御するのがtext-transformです。

オプション 説明
none 記述したとおりに表示
capitalize 単語の先頭文字を大文字で表示
lowercase すべてを小文字で表示
uppercase すべてを大文字で表示

出力は次の用になります。

# 指定なし(none)の場合
John due

# capitalizeの場合
John Due

# lowercaseの場合
john due

# uppercase
JOHN DUE

🎉 横スクロールナビを組むためのCSS

Appleのスマートフォンサイトのような横スクロールのナビゲーションバーのサンプルです。

HTML

<nav class="nav-container">
  <div class="nav-inner">
    <ul class="list">
      <li><a href="#">Applea>li>
      <li><a href="#">Bananaa>li>
      <li><a href="#">Grapea>li>
      <li><a href="#">Pineapplea>li>
      <li><a href="#">Peara>li>
    ul>
  div>
nav>

CSS

.nav-container {
  overflow: hidden;
  height: 3em; /* 可視領域の高さ */
  width: 100%;
}
.nav-container .nav-inner {
  height: 5em; /* 横スクロールする理屈上の高さ */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
}
.nav-container .list {
  display: inline-table;
  max-width: 100%;
}
.nav-container .list li {
  display: table-cell;
}

🎃 横スクロールでテキストを表示するためのCSS

上記とほぼ同じですが、折り返しがあるとうまくいかないパターンがあったので念の為メモ。

HTML

<div class="text-container">
  <div class="text-inner">
    Apple, Banana, Grape, Pineapple, Pear
  div>
div>

CSS

.text-container {
  overflow: hidden;
  height: 3em; /* 可視領域の高さ */
  width: 100%;
}
.text-container .text-inner {
  height: 5em; /* 横スクロールする理屈上の高さ */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
}

😎 参考リンク

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍