BLOG スタッフブログ

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

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

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

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

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

要素の最後だけスタイルを適用しない

リストなどを使う時に、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文字下げる

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

p{
  text-indent: 1em;
}

2行目以降の文字を1文字下げる

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

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

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

単語を途中で折り返さない

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

span{
  white-space: nowrap;
}

まとめ

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

Twitter Facebook