コーディングをしていると、「ちょっとした見た目を整えたい」「もっと効率よくコーディングしたい」と思うことはありませんか？
本記事では、初心者でもすぐに使えるCSSの小技と便利テクニック10選を紹介します。
知っておくだけでサイトの表示をおしゃれにできたり、作業効率がぐっと上がる内容ばかりなので、ぜひ参考にしてみてください。
タイピングエフェクト
See the Pen タイピングエフェクト by et (@eito-oda) on CodePen.
JavaScriptを使わず、CSSのみで作成したタイピングエフェクトです。
@keyframesとsteps()を組み合わせることで、文字が一文字ずつ現れるような打ち込み動作を再現しています。
また、右端の縦線（カーソル）もborder-rightと点滅アニメーション（blink）で表現しており、まるで実際に入力しているかのような自然な動きを演出できます。
コードもシンプルで軽量なため、見出しやキャッチコピーなどに動きを加えたいときに手軽に使えるエフェクトです。
テキストを3点リーダー（…）で省略表示
See the Pen テキストを3点リーダー（…）で省略表示 by et (@eito-oda) on CodePen.
長いテキストを一定の行数で省略し、最後に「…」を表示するCSSのテクニックです。
-webkit-line-clampを使うことで、指定した行数（この例では3行）を超えた部分を自動的に隠し、省略表示にできます。
JavaScriptを使わずに実装できるため、ブログカードやニュース一覧など、文字量が不揃いなデザインでも見た目を整えたいときに便利です。
簡単に導入でき、デザインの統一感を保ちながら、情報をスッキリと見せることができます。
【おしゃれなUI】ガラスのような透明感を出すCSS
See the Pen Untitled by et (@eito-oda) on CodePen.
背景が透けて見える“ガラス調”デザインを、CSSだけで実現しています。
backdrop-filter: blur(8px); を使うことで、背面の背景をぼかし、透明なガラス越しに見えるような質感を演出できます。
ポートフォリオサイトや企業のメインビジュアルなどに使うと、洗練された印象を与えられます。
文章の2行目以降を字下げしてインデントを揃える
See the Pen Untitled by et (@eito-oda) on CodePen.
複数行のリストや段落で、1行目の番号（または記号）を基準に2行目以降をそろえるためのCSSテクニックです。
通常のリストは長い文章になると、2行目以降のテキストが左端まで出てしまいますが、padding-left と text-indent を組み合わせることで、きれいに揃ったインデント表示を実現できます。
番号付きリストや説明文など、整然とした印象を与えたいときに便利です。
テキストをグラデーションや画像で切り抜く
See the Pen Untitled by et (@eito-oda) on CodePen.
CSSの background-clip: text; を利用することで、文字の形に沿って背景のグラデーションや画像を切り抜くような表現が可能になります。
このテクニックでは、color: transparent; と -webkit-background-clip: text; を組み合わせ、テキストの中にだけ背景が表示されるようにしています。
単色では出せない立体感やデザイン性の高い演出ができるため、タイトルやロゴ、キービジュアルなどに効果的です。
背景をグラデーションから画像に変えることで、さらに印象的なテキストデザインに応用することもできます。
外側borderグラデーション
See the Pen Untitled by et (@eito-oda) on CodePen.
CSSの linear-gradient() を背景に設定し、内側に白いボックスを重ねることで、枠線（ボーダー）部分だけがグラデーションで光るようなデザインを実現しています。
通常の border プロパティでは単色しか指定できませんが、この方法ならCSSのみでカラフルなグラデーション枠を表現可能です。
角丸や太さも自由に調整でき、ボタン・カード・見出し装飾などに使うとデザインの印象をぐっと引き上げられます。
コードもシンプルで、装飾を増やしても軽量に保てるのがポイントです。
テキストの周りに白いグロー効果（発光）を付与
See the Pen Untitled by et (@eito-oda) on CodePen.
CSSの text-shadow プロパティを活用することで、文字のまわりに光をまとったような発光効果（グロー）を表現できます。
このコードでは、白いシャドウを複数重ねて指定することで、ぼんやりと広がる柔らかい光を再現しています。背景が暗い場合に特に映え、タイトルやキャッチコピーなどの強調表現にも最適です。
JavaScriptを使わず、CSSのみで実現できるので、軽量で汎用性の高い演出方法です。
色を変えれば、ネオン風のデザインにも応用できます。
画像に自然な影をつける
See the Pen Untitled by et (@eito-oda) on CodePen.
CSSの filter: drop-shadow() プロパティを使うことで、画像の周囲に自然な影（ドロップシャドウ）を付けることができます。
この方法は、box-shadow と違って画像の透過部分を考慮して影を落とすため、PNGなど背景が透過された画像にもきれいに影を付けられるのが特徴です。
デザインに立体感や奥行きを持たせたいときに便利で、アイコンやロゴ、商品画像などを背景から浮き上がらせるような演出が可能です。
影の距離・ぼかし具合・色を調整すれば、柔らかい印象から強調感のあるスタイルまで幅広く表現できます。
文章の改行位置を揃える
See the Pen Untitled by et (@eito-oda) on CodePen.
CSSの text-align: justify; を使うと、文章の両端をきれいに揃えて整列させることができます。
通常、テキストは左揃えで表示されますが、この指定を加えることで、新聞や雑誌のように行ごとの左右の余白が均等になり、読みやすく上品な印象を与えられます。
特に、文章量が多い段落や説明文などに使うと、見た目がすっきりし、デザイン全体のバランスも向上します。
CSSのみで簡単に整ったレイアウトを実現できる便利なプロパティです。
縦書きテキスト
See the Pen 縦書きテキスト by et (@eito-oda) on CodePen.
テキストを縦方向にレイアウトしたデザインです。
writing-mode: vertical-lr; を使うことで、横書きとは異なる印象を与える縦書き表現を CSS だけで実装しています。
和風デザインや紙面風レイアウトに適したスタイルです。
まとめ
今回紹介した10のCSS小技は、すぐに使えてデザインや作業効率をアップさせるものばかりです。
どれも数行で実装できる手軽なテクニックですが、使い方次第で見た目の印象や使いやすさが大きく変わります。
ぜひ一つひとつ試しながら、自分のスタイルに合った活用方法を見つけ、日々の制作に活かしてみてください。
