更新履歴 [2021年10月16日]「RedHat8 / CentOS8 に FTP をインストールして利用できるまでの手順」を更新。

タグ: ,

トップページ > サイト作成 > スタイルシート > ウェブサイトのスタイルシート（CSS）の 3 つの書き方

ウェブサイトのスタイルシート（CSS）の 3 つの書き方


[初回公開] 2013年05月22日

ウェブサイトで利用するスタイルシート（CSS）には 1 つのファイルに CSS まとめたり、ページごとや HTML のタグごとに記載するといった 3 つの書き方がありそれらについて解説する。

ウェブサイトのスタイルシート（CSS）の 3 つの書き方

このページの目次

  1. CSS を外部ファイルにまとめる書き方
  2. CSS をページごとにまとめる書き方
  3. CSS を HTML タグごとに指定する書き方

1. CSS を外部ファイルにまとめる書き方

ウェブサイトにスタイルシート（CSS）を書く方法の 1 つに、CSS だけを記載したファイルを HTML ファイルとは別に用意して、HTML ファイルはその CSS ファイルを読み込む方法がある。
まず、CSS のファイルには下記のようにタグまたは id、class 指定で記述して拡張子 .css にして保存する。

body {}
#id_01 {}
.class_01 {}

次に HTML ファイルの head タグ内に次のように CSS ファイルを読み込む設定を行う。

<link href="{スタイルシートへのパス}"; rel="stylesheet" type="text/css">

2. CSS をページごとにまとめる書き方

ウェブサイトにスタイルシート（CSS）を書く方法の 1 つに、個々のウェブページとなる HTML ファイルに CSS をまとめて各方法がある。
HTML ファイル内にまとめて記載する場合は下記のように STYLE タグを用いて記載する。

<style type="text/css"> 
body {}
#id_01 {}
class_01 {}
</style>

3. CSS を HTML タグごとに指定する書き方

ウェブサイトにスタイルシート（CSS）を書く方法の 1 つに、HTML タグごとに CSS を指定して方法がある。
例えば img タグに CSS を記載する場合は stype オプションを用いて記載する。
2 つ以上のプロパティを指定したい場合は 1 つのプロパティごとに ;（セミコロン）を付けて連続して記載する。

<img src="{画像のパス}" style="{プロパティ 01}:{値}; {プロパティ 02}:{値};" >

関連記事

スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法

CSS, 携帯端末

ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。

ウェブサイトで利用されるスタイルシート（CSS）とは

CSS, Web制作

スタイルシートとはフォントや行間など文書の装飾を定義するもので、一部のソフトウエアでも互換性を持たせるために利用されているが、一般的にウェブサイトの制作現場で用いられるスタイルシートについて解説する。

Web サイトの作成方法と作成にまつわる TIPS

Web制作

Web サイトを作成するための基本的な情報から検索結果に上位表示するための SEO、プログラムの TIPS などを紹介する。

SEO に適した h タグの使い方とやってはいけない使い方

Web制作

HTML の h タグは見出しとして利用されるものだが、Web サイトやブログを掲載する際にただ文章を連ねるのではなく適切に見出しと段落を使い分けることで読みやすくなり、検索結果の表示順位にも良い影響を与えるため正しい h タグの使い方と SEO への影響について紹介する。

favicon（ファビコン）の適切なサイズでの作成方法とSEO への影響

Web制作

ブラウザの一部表示機能であった favicon（ファビコン）が最近では検索結果画面にも表示されるようになり他サイトとの差別化と権威性を示す指針になりつつあるので、favicon（ファビコン）の作成方法と SEO への影響について紹介する。

検索

タグ一覧

最新記事

2005 - 2021 Copyright Webolve. All Rights Reserved.