覚えておくと便利なCSSでの実装テクニック7選｜takememo Vo.14

BLOG 2017.12.01 ｜ AIブログ , WordPress , ウェブ制作

こんにちは！AIコミュニケーションのコーダーのたけうちです。

先月11月末にWordPressが4.9.1にバージョンアップされましたが、ついにファイルエディターが改善されました！
HTMLやCSSの入力ミスや記述漏れがなくなるのでとてもありがたいです。
まだバージョンアップされていない方は、お早めにバージョンアップしてくださいね！

さて、今回のtakememoでは覚えておくと便利なCSSでの実装テクニックをご紹介します。

便利な実装テクニックは多くありますが、今回は少ない記述で実装できるもののみに絞ってみました。
コピペで使用していただいて構いません( ˘ω˘ )！

リストなどを使う時に、marginなどで余白を調整したりすることがあると思いますが、その際に最後の要素にはmarginをつけたくない、といったときに使えます。

たったの一行で実装できます！！

li:not(:last-child){　/* 最後のli要素以外にmargin-right 20pxを適用 */
    margin-right: 20px;
}

要素を中央に配置したくても親要素に高さがなくて実装できない、と思っていましたが、この数行のCSSで実装が可能です！

ですが、transformの多用は処理が遅くなるため、使い過ぎには注意が必要です。

.box{
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

サイトにデザイン性を持たせたい場合や雑誌などのオシャレな雰囲気を出したい時に使えるCSSです。
文字を大きくしたり、色を変えるだけでアクセントになります！

p:first-letter{
  font-size:20px;
  color:#FFC0CB;
}

こちらもデザイン性を持たせたい時に使えるCSSです。
あまり使うことは多くはないかもしれませんが・・・・( ˘ω˘ )

p:first-line{
  color:#FFC0CB;
}

日本語では1文字下げて文章を書くことが多いですが、スペースではなくCSSで実装できます！
文字を左揃えなどにした際に、1文字下げるとスマートに見えます！

p{
  text-indent: 1em;
}

注意書きや注釈などで※（米印）を使用した時に2行目を1文字下げると綺麗にみせることができます。

※（米印）が2行目以降の文字とかぶるのなんとかならないかな～と思っていたので私も今後よく使うと思います(‘_’)！

p{
  text-indent: -1em;
  padding-left: 1em;
}

ブログの記事内の単語やブログのタグなどで単語が途中で改行されると見にくくなってしまいますが、span要素などで単語をくくってあげて、CSSを1行付け加えてあげればこれだけで見やすくなります！

span{
  white-space: nowrap;
}

わずかなコードで実装できることばかりなので、今後のウェブ制作に活用できればと思います！