ホームページ制作・Web制作

サイト・ホームページのCSSの編集

サイト・ホームページのCSSの編集

サイト・ホームページのCSSの編集について。ホームページのCSSを編集する方法としては、テキストエディタによる編集でプロパティを編集し、FTPソフトによるダウンロード・アップロードを行うのが一般的です(ホームページ編集ソフトを利用することもあります)。また、WordPress等のCMSでは管理画面内のエディタでCSS編集を行います。

ホームページ(ウェブサイト)外観(Webデザイン)はスタイルシート・CSSで設定されています。ホームページ修正の基本はとCSSの編集で行います。

ホームページ修正の基本はこのHTMLとCSSの編集で行います。「CSS」は主にHTMLとは独立したCSSファイルを中心に、連続・連鎖的に記述されたスタイル定義・指定を指します。類義語の「スタイルシート」は、スタイルに関する定義・指定のすべてを指します。

サイト・ホームページのCSS編集の基本的な手順

サイト・ホームページのCSS編集の基本的な手順

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

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

CSSの基本構成と編集

CSSの基本構成と編集

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

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

  • セレクタ
  • プロパティ
  • プロパティ値

CSS編集は、対象タグやid、classへのプロパティの追加・削除などによって行います。

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

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

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

スタイルの適用 HTMLのid、class

スタイルの適用 HTMLのid、class

CSSの適用について、一般的なHTMLタグそのものへの指定は、そのままHTMLタグをセレクタとしてプロパティを記述すれば適用することができます。

例)

p {font-size:100%;}

その他は、HTML側にid、classを付けてスタイルを適用します。

例)

.con {font-size:100%;}

<div class=”con”></div>

CSSの優先順位

CSSの優先順位

ホームページ内に複数のCSSが設置されている場合で、同一部分の指定がなされていた場合、後から呼び出された側のCSSが優先されます。

一旦CSSが指定されて、その後で別のCSSによって「上書き」されるというイメージです。