ホームページのCSSの編集

ホームページのCSSの編集について。ホームページのCSSを編集する方法としては、テキストエディタによる編集でCSSプロパティを編集し、FTPソフトによるダウンロード・アップロードを行うのが一般的です(ホームページ編集ソフトを利用することもあります)。CSSファイルとしてではなく、<head>内に<style>が挿入され、インラインスタイルとして、スタイルが指定されている場合があります。この場合は、HTML内の該当箇所を編集します。FTPでCSSファイルをダウンロードする場合のほか、ファイルマネージャ上で対象CSSファイルをダウンロードする場合もあります。また、WordPress等のCMSでは管理画面内のテーマ編集等でCSS編集を行います。

ホームページ(ウェブサイト)の外観はスタイルシート・CSSで設定されています。ホームページ修正のうちWebデザイン面の修正・調整はこのCSS編集で行います。なお、ホームページによっては複数のCSSで外観を設定している場合もあります。

CSS編集の基本的な手順

CSS編集の基本的な手順

サイト・ホームページのCSS編集の基本的な手順は、FTP等で編集対象CSSファイルをダウンロードし、ローカル環境でテキストエディタを用いてCSSファイルを修正編集します。そして編集が完了した後は、対象CSSファイルをサーバーにアップロードします。

WordPressなどのCMSではブラウザ上でCSSを編集することができます。また、ブラウザを用いてサーバーのファイルマネージャ上で直接編集できる場合もあります。

<head>内に<style>が挿入され、インラインスタイルとしてスタイルが指定されている場合や、HTMLタグに「style=””」が挿入され、スタイルが要素に直書きされている場合があります。この場合は、HTML内の該当箇所を編集します。

CSSの基本構成と編集

CSSの基本構成と編集

CSSの基本構造としては、適用対象のHTMLタグやid、classを記述し(セレクタ)、プロパティ指定(プロパティとプロパティ値の設定)を行います。

  1. セレクタ
  2. プロパティ
  3. プロパティ値

CSS編集は、対象タグやid、classへのプロパティの追加・削除などによって行います。なお、CSS編集において、新しいセレクタとしてidやclassを設置した場合は、HTML側においてその「CSS指定を適用する部分」を指定する必要があります。

ダウンロードしたCSSファイルを開き、編集対象部分のCSSプロパティを編集していきます。

編集が終わった後は、テキストエディタ上でファイルを上書き保存します。

修正編集が完了したCSSファイルをFTP等でアップロードし、サーバー上のCSSファイルを上書きします。

CSS編集が反映されていない場合

CSS編集が反映されていない場合

編集確認のためにページを強制更新したにもかかわらずCSS編集が反映されていない場合の要因として、CSSを上書き保存できていなかった、アップロード失敗、プロパティ設定等CSS編集にミスがあったというケースが考えられます。

ホームページのCSS・スタイルシート編集方法

ホームページ修正・CSS編集

ホームページ(ウェブサイト)の更新・修正にかかる料金の価格表です。CSS編集にも対応。

ホームページの更新・修正料金 価格表