スニペット CSS版 【随時更新】

  • 投稿日
  • 更新日
  • 著者 山崎 大祐
  • カテゴリー CSS
CSSスニペットのイメージ画像

CSS クラス

何番目系CSS。こちらを覚えるとCSSの幅が増えました
何番目系の便利なCSSまとめ – Qiita
この辺のはなし。種類-child-of-type最初:first-child:first-of-type最後:last-child:last-of-typen番目:nth-child(n)…
qiita.com

レスポンシブでよく使うテクニックです。
CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び | HPcode
レスポンシブサイトでアイテムを横並びにする時のCSSの指定方法です。ウインドウサイズを変更したときに、ガタガタせずにスムーズに均等に縮めたりするには、CSSのcalc関…
haniwaman.com

大規模なHPで、一覧ページがないメニューを作る時に使います
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
クリック・タッチイベントを無効化するCSS「pointer-events: none;」は簡単に扱えて、他のCSSプロパティーでは実現できないことを可能にします。
techblog.yahoo.co.jp
megamenu.jsにて使用。HP制作過程で使える。
また、他の用途でメニューのアクティブページのみリンクをさせないようにできます。

文字

カンプデータとの差異で、字間（カーニング）や、改行も意識する必要があります。

文字詰めする（カーニング）
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング
「Webでは文字詰めはできない」と諦めていませんか？　美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界…
ics.media
font-feature-settings: “palt”;　で文字詰め

字間を調整する
【CSS】文字装飾の基本を総まとめ！初心者向けに解説
HTML&CSSでの文字の装飾方法を初心者向けにまとめました。サイズや色変更から、太字、斜体、影、テキストの縦書きなどまで。
saruwakakun.com
字間を　letter-spacing:◯◯emで調整

CSS プロパティ・単位

【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改…
creativememomemo.com
スマホで、ボタンの文字が改行されてしまう問題の対策

CSS レイアウト

HTML制作する際、最初に中央揃えの以下のサイトの手順で作成します。
レイアウトの基本である.innerの中央寄せを覚えよう！ | HPcode
中央揃えってサイト制作し始めた初心者にとっては最初の難題かと思います。 この中央揃えですが、実はレイアウトの肝の部分で当たり前に使われる要素なので、最低でもレイ…
haniwaman.com
レイアウトの基本である.innerの中央寄せを覚えよう！
CSS背景画像で「スマホの時にどこを見せるか」で参考にします
CSSで背景画像をレスポンシブ対応する方法 – サンプル
gimmicklog.main.jp
インナーをわかりやすく
background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに) – Qiita
レスポンシブやスマホサイトを制作していて、背景画像を可変対応させたい時があります。みなさんどうやっているでしょうか。sample/* 例:幅640px高さ360pxの画像の…
qiita.com
レスポンシブサイトで、何が理想か模索中。imgよりbackground-imageのほうが使いやすいから、プラスα可変表示させたら使いやすい。とりあえずこれが今のベスト。
Div要素にリンク。タイトルの通りで良く忘れるので参考にしています。
div要素全体にリンクをつける方法 – Qiita
div要素全体にリンクをつけたい時の方法メモ自分用に簡潔にまとめる。 See the Pen div要素全体にリンクをつける方法 by iwato (@iwato) on CodePen.
qiita.com
現在のベストプラティクス

隣接セレクタの便利な使い方
フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） – Qiita
前置きCSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、回答内容を記事として残します。昔、会社のOJTで学ん…
qiita.com
隣接セレクタの使い時 – Qiita
リストを並べる際に下記みたく仕切り線を引きたい。A　|　B　|　C　|　D　|　E　こんな表示をしたい時は隣接セレクタ「+」を使うと便利。よく見る方法list.html…
qiita.com

flexで区切り線　→　 flex-grow:1; で要素を伸ばす

Before 区切りのスペースがイマイチ

隣接セレクタで、２つ目移行の要素に左線を引いています

３PRブロックの見本

After　 flex-grow:1; を子要素に与える

CSSでヘッダメニューを等間隔に並べて区切り線を入れてみる – Qiita
ヘッダメニューを作成する際、区切り線（|）を入れたくなる時がある。例えば、下記の様にul+liのリストを使っている場合index.html<html><hea…
qiita.com
参考サイト

CSS セレクタ

【Tips】意外と知らない？:nth-childで〇番目以降"且つ"偶数・奇数の指定をする小技【CSS】 – Qiita
書き方li:nth-child(n+3):nth-child(even) { 3番目以降の要素、且つ偶数のスタイル}li:nth-child(n+3):nth-child(odd) { 3番目以降の要素、且つ奇数…
qiita.com
nth-childで〇番目以降 “且つ”
初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォトショップ(Photoshop)入門
ホームページ作成に必要な初心者のためのスキルとしてCSS・HTMLなど具体的な使い方や、エクセル(EXCEL)、フォトショップ(photoshop)の講座を紹介します。
www.billionwallet.com
1,4,7,10の指定”且つ”と組み合わせると良い

CSS 装飾

CSSだけで矢印を作ってみた
ワーキングマザーの池島です。年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初…
blog.mmmcorp.co.jp

CSS バックエンド

ライブラリに頼らずに CSS の遅延読み込みを JavaScript で実現する – Qiita
Google PageSpeed Insight から CSS の配信を最適化しなさいと怒られた場合、Above the fold のレンダリングに必要な CSS をインライン化して、残りの CSS を遅延読み込み…
qiita.com
headを触れない場合

この記事を書いた人

山崎 大祐

大阪出身。千葉県松戸市在住。2児の父です。WordPressの構築を60サイト超えました。営業経験を生かしたSEMを得意としております。（企画／デザイン／構築／運営）
すきなもの「赤色・キューブ・コンクリート」

詳細はこちら 記事一覧