ファイルを知る、使いこなす。
.css
CSS
Web・開発CSSはWebページの見た目を指定するテキストです。単体で開いても完成ページにはならず、HTMLから読み込んで適用します。効かないときはファイルの場所、セレクター、優先順位を順に調べます。
- 主な用途
- Webページの色・余白・配置・画面幅への対応
- 中身の種類
- テキスト
目次・よくある質問・根拠資料を見る
内容の最終確認： · 編集：Kai
開き方・操作手順
使っている環境や目的の項目を開いて、手順を確認してください。
操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。
開けないとき：症状から確認
- 変更が反映されない：HTMLのlink先、読み込み失敗、キャッシュを確認します。
- 一部の規則だけ効かない：セレクター、詳細度、後の規則による上書き、括弧の閉じ忘れを確認します。
- スマホだけ崩れる：media queryの条件、固定幅、画像の最大幅、viewport設定を確認します。
- 変更が反映されない：読み込みURL、保存先、キャッシュ、上書き規則を順に確認します。
- 途中から適用されない：閉じ忘れた波括弧、コメント、無効な宣言を確認します。
- 背景画像だけ出ない：url()の相対パスはCSSの位置を基準にすることを確認します。
CSSの保存・サイトへの適用
- プレーンテキストで保存し、HTMLのstylesheet参照先と実ファイルの場所を合わせます。
- PCとスマホ相当の幅で表示し、既存規則への影響を確認します。
- 生成CSSを実際のHTMLで読み込み、PC・スマホと共通利用ページを確認します。
SCSS等を.cssへ改名してもコンパイルされません。制作環境に必要な処理を確認します。
読み込みエラーと上書きを分ける
CSSが取得できていても別の規則で上書きされることがあります。Networkと要素のStylesを分けて確認します。
importantを増やす前に、セレクター、順序、継承、条件付き規則を確認します。
この手順の根拠：Microsoft · CSS, SCSS and Less
共通CSSを編集するときの確認
一つのCSSを複数ページで使う場合は変更が広く波及します。見出し、ボタン、一覧、長い本文を代表ページで確認します。
画面幅だけでなく、文字の増加、長いURL、画像比率も確認します。
この手順の根拠：Microsoft · CSS, SCSS and Less
関連形式との違い
| 形式 | 主な役割 | 選ぶときの注意 |
|---|---|---|
| CSS | スタイル規則 | 適用先HTMLで確認 |
| SCSS | CSS生成用の記法 | コンパイルが必要 |
| HTML | 内容と要素構造 | 見た目はCSS等へ依存 |
取り扱いと安全性
外部CSSは画像・フォント等のURLを参照できます。配布CSSを採用する前に外部参照先とライセンスを確認します。
よくある質問
CSS単体をブラウザーで開けばデザインが見える？
対象のHTML等へ適用して確認します。
後に書けば必ず優先される？
詳細度や重要度なども優先順位に関係します。
SCSSとCSSは同じ？
SCSSには変換処理が必要な機能があります。
CSSを開けばWebページが見える？
スタイル指定が見えるだけです。対応HTMLで適用結果を確認します。
SCSSをCSSに改名できる？
SCSS固有構文はCSSのままでは使えません。対応ビルドでCSSへ変換します。
形式の基本情報：正式名称・MIME type・管理団体
- 名称
- Cascading Style Sheets
- 管理・仕様
- W3C
- MIME type
- text/css
公式・一次情報
- 標準仕様Cascading Style Sheets
CSSの役割と仕様への入口です。
W3C · リンク確認： - ソフトウェア公式CSS, SCSS and Less
CSSの編集と構文チェックの資料です。
Microsoft · リンク確認：