HTML/CSSのTips集

HTML/CSSでコーディングする時のテクニックや実装方法などTipsを集めました。

HTMLとCSSの設計にはどんなパターンがある?

HTML と CSS は手軽に書ける一方でサイトの規模が大きくなるにつれて管理が難しくなります。

  • クラスのスタイルが重複して指定されてしまう
  • 同じスタイルがコピペで何箇所も存在する
  • 予期せぬところで!important が使われている

など HTML と CSS はしっかり設計してコーディングできるのが理想です。
設計のパターンはあるパターンがブラッシュアップされたものなど数多く存在します。

最近では Vue.js や React.js でフロントエンドの HTML を作る機会が増え、 静的な HTML と CSS を使う機会が減ってはいますがサイトによってはもちろん設計は必要です。

有名な設計パターンとして下記のようものがあります。

BEM はこの中では特に使っているサイトも多く考え方も広く知られていますがほかにもレイヤーやコンテキストごとにクラスにプレフィックスをつけて管理する設計パターンもあります。

CSSで文字をグラデーションにする

CSSでグラデーションの文字を実現するには背景色をグラデーションにして文字を切り抜いて実装します。

詳しくは「CSSで文字色をグラデーションにする方法」を見てください。

横並びにはdisplay: flexがおすすめ

CSS で横並びを実現するにはいくつかの方法があります。
下記の 3 つのパターンはよく見かける実装のパターンです。

  • 親要素に display: flex を使う
  • 子要素に display: inline-block を使う
  • 親要素に clearfix(もしくは後続で clear)、子要素に float を使う

どの方法を使っても横並びを実現することができますがおすすめは display: flex を使う方法です。
具体的な使い方は「初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法」をご覧ください。

inline-block と clearfix&float を使う方法は古い IE のバージョンに対応する手段としてよく使われていましたが、 IE11 以降やモダンブラウザの対応であれば display: flex;を使うことができます。

display: flex は親の要素に指定するだけでよく、縦方向で中央揃えも align-items: center という指定をするだけで実現することができます。
float のように正しく使わないと後続の要素に影響が出るということもなく対応ブラウザが問題なければ flex を使うのがおすすめです。

グリッドレイアウトをCSSで実現する時のおすすめのコーディング

グリッドレイアウトを実現する時には動的なテンプレートにも対応できるように組むのがおすすめです。

最初や最後の要素に first や last のようなクラスをつけてスペースを開けるのではなくすべて同じ HTML にしておくことで動的なテンプレートの実装がシンプルになります。
要素の数が不確定な場合は最初の要素だったら、最後の要素だったらのような分岐処理が必要となりひと手間かかってしまいます。

HTML はすべて同じにして CSS だけ実装するコードは下記です。

左右のスペースは子要素に padding を指定して、親要素でマイナス margin を使うことで左右はぴったりな状態を作ることができます。
同じような考え方で縦方向には子要素に margin を指定して、親要素でその margin の分だけマイナスの値でずらします。

HTML と CSS しか触っていないと安直に最初や最後の要素にクラスをつけて制御してしまいがちなので意識しておくのがよいと思います。

このページをシェアする
  • ツイートする
  • シェアする

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。