サイトのCSS編集の方法ホームページ（サイト）は基本的にHTMLで構成され外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートで設定されています。
ホームページ（サイト）のCSS（スタイルシート）編集の方法編集対象CSSファイル、HTML（インラインスタイルの場合）をダウンロード
CSS・スタイルシート編集を実施
CSSの基本構造としては、適用対象のHTMLタグやid、classを記述し（セレクタ）、プロパティ指定（プロパティとプロパティ値の設定「幅は何px」等）を行います。
サイトのCSS編集の方法
ホームページ（サイト）は基本的にHTMLで構成されており、その外観やデザインを設定するのがCSS（Cascading Style Sheets）である。
HTMLがホームページの骨格や構造を作るものであるのに対して、CSSはそのHTMLに対して、文字の大きさ、色、余白、幅、高さ、背景、配置、境界線などの視覚的なスタイルを指定する。
そのため、ホームページのデザインを修正したい場合には、HTMLそのものを変更する場合とCSSを変更する場合がある。
例えば、見出しの文字色を変更したい、段落の行間を広げたい、ボタンの背景色を変更したい、画像の幅を調整したい、スマートフォンで表示したときの余白を変更したいといった修正であれば、CSSの編集によって対応できることが多い。
基本的なCSS編集の流れとしては、編集対象となるCSSファイル、またはHTML内に直接記述されたインラインスタイルを確認し、必要に応じてファイルをダウンロードして編集し、サーバーへアップロードするという方法になる。
WordPressの場合には、FTPなどを利用してCSSファイルを直接編集する方法だけではなく、WordPressの管理画面から追加CSSを設定する方法や、テーマのファイルを編集する方法などもある。
CSSはHTMLに対してデザインを指定する
CSSを理解するためには、まずHTMLとの関係を理解する必要がある。
例えばHTMLで、
ホームページ制作について
という段落を作った場合、このHTMLだけでもブラウザ上に文字は表示される。
ここにCSSを適用すると、その文字の色や大きさ、行間、余白などを変更できる。
例えば、
p {
color: #333;
font-size: 16px;
}
というCSSを記述すると、pタグで囲まれた文章に対して文字色や文字サイズを指定できる。
CSSでは、最初に適用対象を指定する。
この部分をセレクタという。
上記の例であれば「p」がセレクタである。
その後に波括弧で囲まれた部分に、どのようなスタイルを適用するのかを記述する。
colorがプロパティであり、#333がプロパティ値である。
font-sizeがプロパティであり、16pxがプロパティ値である。
このように「どのHTMLに」「どのようなデザインを適用するのか」を指定するのがCSSの基本構造である。
CSSの基本構造を理解する
CSSの基本的な書き方は非常にシンプルである。
例えば、
h2 {
font-size: 28px;
margin-bottom: 20px;
}
という記述があれば、h2タグに対して文字サイズと下側の余白を設定している。
「h2」がセレクタであり、「font-size」「margin-bottom」がプロパティ、「28px」「20px」がプロパティ値となる。
この構造を理解すれば、CSSの編集はそれほど難しいものではない。
ただし、実際のホームページでは、単純にh2と指定するだけではなく、classやidを使って特定の場所だけにスタイルを適用するケースが多い。
例えば、
.content-title {
font-size: 32px;
}
というCSSがあれば、HTML側でclass="content-title"が設定された要素に対してスタイルが適用される。
idの場合には、
#header {
width: 100%;
}
のように「#」を使う。
classは「.」、idは「#」という基本的なルールを覚えておくと、既存サイトのCSSを読み解きやすくなる。
CSSファイルをテキストエディタで編集する
静的なホームページなどでCSSを編集する場合、最も基本的な方法の一つがテキストエディタを利用する方法である。
CSSは基本的にテキストファイルなので、特別なソフトウェアがなくても編集できる。
CSSファイルの拡張子は通常「.css」である。
例えばstyle.cssというファイルがあれば、それをテキストエディタで開いて編集する。
Windowsであれば一般的なテキストエディタを利用できる。
ただし、CSS編集ではコードの見やすさが重要なので、行番号表示やコードの色分け、検索機能などを備えたエディタを利用すると作業しやすい。
CSSを編集するときには、まず現在のファイルをバックアップしておくことが重要である。
例えばstyle.cssを編集するのであれば、編集前のstyle.cssを別名で保存しておく。
「style_backup.css」などとして保存しておけば、編集に失敗した場合に元へ戻しやすい。
より安全なのは、ローカル環境に元ファイルを保存したうえで編集することである。
CSSファイルをダウンロードして編集する
サーバー上にあるCSSファイルを直接編集する場合には、FTPやFTPSなどを利用してCSSファイルをダウンロードする。
サーバー上のホームページのファイル構成を確認し、その中からCSSファイルを探す。
一般的にはcssフォルダなどに格納されている場合がある。
ただし、必ずしも「css」という名前のフォルダに入っているとは限らない。
HTMLからCSSファイルの読み込み先を確認することで、どのCSSファイルが使用されているのかを特定できる。
HTMLのhead内に、
のような記述があれば、cssフォルダ内のstyle.cssが読み込まれていることが分かる。
実際のサイトでは複数のCSSファイルが読み込まれていることもある。
そのため、「CSSを修正したのに見た目が変わらない」という場合には、編集対象のファイルが正しいかを確認する必要がある。
CSSを編集したら保存してブラウザで確認する
CSS編集では、「保存」と「ブラウザでの確認」をセットで考える必要がある。
CSSファイルを編集したら保存し、そのファイルをサーバーへアップロードする。
その後、実際のホームページをブラウザで確認する。
ただし、CSSではブラウザキャッシュの影響によって変更がすぐに反映されない場合がある。
そのため、修正したはずなのに変化がない場合には、ブラウザのキャッシュを確認する。
また、WordPressやサーバー、CDNなどでキャッシュ機能を利用している場合には、そちらのキャッシュが残っている可能性もある。
CSS編集では、変更した内容が反映されないことと、CSSの記述そのものが間違っていることを区別する必要がある。
インラインCSSの場合はHTMLを編集する
CSSは外部CSSファイルだけに存在するわけではない。
HTMLのstyle属性に直接記述することもできる。
例えば、
文章
のような記述である。
これはインラインスタイルと呼ばれる。
この場合、CSSファイルを編集しても、その部分のデザインが変わらない可能性がある。
なぜなら、HTML側に直接指定されたスタイルが優先されることがあるからである。
したがって、デザインを変更する場合には「どこにCSSが記述されているのか」を確認する必要がある。
外部CSSなのか、HTML内のstyleタグなのか、インラインスタイルなのか。
さらに、JavaScriptによって動的にスタイルが変更されている場合もある。
単純なCSS編集のつもりでも、実際にはHTMLやJavaScript、WordPressのテーマ機能などが関係している場合があるのである。
ブラウザの開発者ツールを使うとCSSを確認しやすい
CSS編集で非常に役立つのが、ブラウザの開発者ツールである。
Google ChromeやFirefoxなどのブラウザには、表示されているHTMLとCSSを確認するための開発者向け機能が用意されている。
例えば、ホームページ上の見出しを右クリックして検証機能を利用すると、その見出しに適用されているHTMLやCSSを確認できる。
どのclassが指定されているのか。
どのCSSファイルの何行目でスタイルが指定されているのか。
どのプロパティが有効になっているのか。
どのCSSが別のCSSによって上書きされているのか。
こうした情報を確認できる。
さらに、開発者ツール上で一時的にCSSの値を変更して、どのような見た目になるのかを確認することもできる。
これはCSS編集において非常に便利である。
ただし、開発者ツール上で変更した内容は基本的にサーバー上のファイルへ保存されるわけではない。
そこで試したCSSを実際のサイトへ反映するには、最終的にCSSファイルなどへ記述する必要がある。
CSSの「優先順位」に注意する
CSS編集で初心者がつまずきやすいのが、記述したCSSが反映されない問題である。
その原因の一つがCSSの優先順位である。
同じHTML要素に複数のCSSが適用されている場合、すべての指定が同時に同じ強さで適用されるわけではない。
セレクタの詳細度、記述位置、継承、インラインスタイルなどによって、最終的にどの指定が採用されるかが決まる。
例えば、
p {
color: black;
}
としているにもかかわらず、
.content p {
color: blue;
}
が適用されていれば、後者のほうがより具体的な指定となる。
このため、「CSSを書いたのに効かない」という場合には、単純にコードを追加するのではなく、既存のCSSのどこで上書きされているのかを確認することが重要である。
むやみに!importantを追加する方法もあるが、これはCSSの管理を複雑にする原因になる。
一時的な修正では便利な場合があるものの、長期的にはセレクタやCSS構造そのものを整理したほうがよい。
WordPressではCSS編集の方法が複数ある
WordPressでホームページを運営している場合、CSS編集には複数の方法がある。
最も分かりやすい方法の一つが、WordPress管理画面の「追加CSS」を利用する方法である。
使用しているテーマによって表示場所や機能は異なるが、WordPressにはテーマに追加のCSSを設定するための仕組みが用意されている。
既存テーマのCSSファイルを直接書き換えるのではなく、追加CSSとして独自のスタイルを記述することで、テーマ本体への変更を避けながらデザインを調整できる。
これは比較的小規模なデザイン修正に向いている。
例えば、見出しの色を変更する、特定のボタンの余白を変更する、特定のページの表示を調整するといった場合である。
WordPressのテーマファイルを直接編集する方法
WordPressでは、テーマの中にCSSファイルが存在することが多い。
代表的なのがstyle.cssである。
FTPやサーバーのファイル管理機能からWordPressのテーマディレクトリを確認し、使用しているテーマのCSSファイルを編集することもできる。
ただし、ここには注意が必要である。
親テーマのファイルを直接変更すると、テーマのアップデートによって変更内容が失われる可能性がある。
そのため、WordPressを本格的にカスタマイズする場合には、子テーマを利用する方法が一般的である。
子テーマ側に独自のCSSを記述しておけば、親テーマを更新した際にも独自の変更を維持しやすい。
WordPressでは「とりあえずテーマのstyle.cssを直接編集する」という方法を取るのではなく、将来的なアップデートや保守まで考えて編集方法を選ぶ必要がある。
WordPressの「追加CSS」は便利だが万能ではない
追加CSSは非常に便利である。
テーマファイルそのものを変更することなく、管理画面からCSSを追加できるためである。
しかし、サイト全体のCSSを長期的に管理する場合には、追加CSSへ大量のコードを蓄積させることが必ずしも最適とは限らない。
修正を繰り返していくと、「以前のCSSを上書きするためのCSS」が増えてしまうことがある。
そうなると、どの記述が現在のデザインを作っているのか分かりにくくなる。
Webサイトは公開後にも修正される。
そのため、CSSも短期的な修正だけではなく、長期的な保守性を考えて設計する必要がある。
WordPressのブロックエディターとCSS
WordPressでは、ブロックエディターを使ってページを編集する場合もある。
ブロックエディターでは、ブロックごとに追加CSSクラスを設定できる場合がある。
例えば特定の見出しやコンテンツブロックに独自のclassを付け、それをCSSで指定するという方法である。
これによって、ページ内の特定部分だけにスタイルを適用できる。
この方法は、HTMLそのものを直接編集するよりもWordPressの運用に適している場合がある。
一方で、テーマやブロックの仕様によってHTML構造が異なるため、CSSを記述するときには実際のHTMLを確認したほうがよい。
WordPressでCSSを編集する前にバックアップする
WordPressのCSS編集でも、バックアップは重要である。
CSSだけならサイト全体が完全に停止する可能性はPHPファイルの編集ほど高くないが、誤ったCSSによってページのレイアウトが大きく崩れることはある。
さらに、CSSだけを修正したつもりでも、テーマファイルなどを編集している場合には別の問題が発生する可能性がある。
特にテーマのPHPファイルを編集する場合には、CSS編集とはリスクが大きく異なる。
そのため、WordPressでは「簡単な見た目の修正だからバックアップは不要」と考えないほうがよい。
最低限、編集対象ファイルの変更前の状態を保存しておくことが望ましい。
CSS編集ではレスポンシブ対応を忘れてはいけない
現在のホームページでは、パソコンだけでなくスマートフォンやタブレットからの閲覧を前提としてCSSを設計する必要がある。
パソコンでは問題なく表示されていても、スマートフォンでは文字が大きすぎる、画像が画面からはみ出す、ボタンが押しにくい、横スクロールが発生するといった問題が起こることがある。
CSSにはメディアクエリという仕組みがあり、画面幅などの条件によって異なるスタイルを適用できる。
例えば、
@media screen and (max-width: 768px) {
h2 {
font-size: 24px;
}
}
のように記述することで、一定の画面幅以下の場合だけ見出しの文字サイズを変更できる。
ただし、実際のレスポンシブ対応では単純に文字サイズを変えるだけではなく、レイアウト、余白、画像、ナビゲーション、フォームなど多くの要素を確認する必要がある。
CSS編集は「見た目を変えるだけ」と考えない
CSSは基本的にはデザインを制御する仕組みである。
しかし、CSS編集によってユーザー体験は大きく変わる。
文字が小さすぎれば読みづらい。
行間が狭ければ文章を追いにくい。
ボタンが小さければ操作しにくい。
余白が不適切なら情報の階層が分かりにくい。
スマートフォンでレイアウトが崩れれば、その時点でユーザーが離脱する可能性もある。
つまりCSSは単なる装飾ではない。
UI/UXの品質にも関係する重要な技術要素である。
ホームページの目的がWeb集客であれば、CSSによるデザイン調整も最終的にはユーザーの閲覧性や操作性、CVにつながる導線を支えるものとして考える必要がある。
CSSを変更してもHTMLの構造が悪ければ限界がある
CSSによってある程度の見た目は変更できるが、HTMLの構造そのものが不適切であれば、CSSだけで解決するには限界がある。
例えば、本来見出しとして使うべき内容を単なるdivタグで構成している場合、CSSによって見た目を見出しらしくすることはできる。
しかし、それは「見た目が見出しになった」だけであり、HTML上の意味まで見出しになったわけではない。
ホームページでは、HTMLが情報構造を担い、CSSがその情報構造を視覚的に表現するという役割分担がある。
そのため、デザイン修正を行うときでも、HTML構造に問題がないかを確認することが重要である。
CSS編集は小さな修正から始める
CSSを編集する場合、一度に大量のコードを書き換えるのではなく、小さな修正から確認するほうが安全である。
例えば、まず見出しの色を変更する。
保存する。
表示を確認する。
問題がなければ次の修正を行う。
このように変更と確認を繰り返す。
複数箇所を一度に修正してしまうと、どの変更が原因で表示が崩れたのか分からなくなる。
特に既存ホームページでは、複数のCSSが複雑に絡み合っている場合がある。
そのため、修正履歴を残しながら作業することも重要である。
CSS編集で重要なのは「どのファイルを触るか」である
CSSの編集自体は難しくない。
しかし、実務上難しいのは「どのCSSを変更すればよいのか」を特定することである。
ホームページによってCSSの構成は異なる。
複数のCSSファイルが存在することもある。
WordPressではテーマのCSSに加えてプラグイン側のCSSが読み込まれていることもある。
さらに、JavaScriptによってclassが追加される場合や、ページごとに異なるCSSが読み込まれる場合もある。
したがって、CSS編集では単にコードを書く能力だけでなく、既存サイトのHTML・CSS構造を読み解く能力が必要になる。
「色を赤に変える」という作業そのものは簡単でも、「どの要素の色を、どのCSSで、どの範囲に対して変更するのか」を判断することには一定の知識が必要なのである。
ホームページ修正ではCSSだけで済むのかを判断する
ホームページのデザイン修正を依頼された場合でも、必ずしもCSSだけを変更すればよいとは限らない。
文字を変更するのであればHTMLやWordPressの本文編集が必要になる。
HTML構造を変更するのであればHTMLやテーマファイルの修正が必要になる。
表示する内容を条件によって変えるのであればJavaScriptやPHPが関係する場合もある。
画像そのものを差し替える場合には画像ファイルの変更が必要になる。
つまり、ホームページ修正では最初に「何を変更したいのか」を明確にし、そのうえでHTML、CSS、JavaScript、PHP、画像など、どの部分を変更するべきなのかを判断する必要がある。
この切り分けができることが、ホームページを安全に修正するうえで重要である。
CSS編集はホームページ運用の基本的な技術である
CSSはホームページの外観を作る基本的な技術である。
テキストエディタを使ってCSSファイルを直接編集することもできる。
FTPやFTPSによってファイルをダウンロードし、ローカル環境で編集してアップロードする方法もある。
WordPressであれば追加CSSを利用する方法もあり、子テーマを使ってテーマを安全にカスタマイズする方法もある。
どの方法が適切なのかは、ホームページの構成や修正内容によって異なる。
重要なのは、CSSをただ書き換えることではない。
現在どのHTMLにどのCSSが適用されているのかを確認し、変更前の状態を保存し、修正後にパソコンとスマートフォンの両方で確認することである。
そして、ホームページを長期的に運用するのであれば、その場だけ表示を整えるのではなく、将来的な修正やWordPress・テーマのアップデートまで考えてCSSを管理することが重要になる。
CSSはホームページの「服装」のようなものと説明されることもあるが、実際のWeb制作ではそれ以上の役割を持つ。
情報の視認性を高め、操作性を改善し、コンテンツの階層を分かりやすくし、スマートフォンでも閲覧しやすい状態を作る。
その結果として、ユーザーがページを読み進め、必要な情報を見つけ、問い合わせや購入などの行動へ進みやすくなる。
ホームページのCSS編集を考えるのであれば、単純なデザイン変更としてではなく、HTML構造、WordPress、UI/UX、レスポンシブ対応、そしてホームページ全体の運用まで含めて考えることが重要なのである。
ホームページ制作・ウェブ構築とエレクトロニカ 電子音楽を始め、楽器もやります。 ウェブ制作（ホームページ制作）・ウェブ構築についてもちらほら
PR
