スタイルシートの基本

HTML

2023.12.04

スタイルシート/CSS

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、

ウェブページのスタイル＝「デザイン」を指定するための言語です。

テキストを大きくしたり、色を変えたり、背景色を入れたりと用途は様々です。

■これもスタイルシートで指定しています。（太文字/文字色：青/背景：黄）

スタイルを書き込む方法は、基本3つあります。

まず、例として下記のように文字を青くする設定パターンで見ていきます。

ブラウザ表示

こんにちは

※下記に紹介するソースコードはすべて同じ表示になります。

また、その方法によって命令の優先順位が変わりますので、それは、別ページで解説します。

ウェブページの「〇〇.html」ファイルの中に直接書く方法は２つです。

一つ目は、該当するタグに直接指定内容を書き込みます。

HTMLソースコード

<html>
<head>

</head>
<body>
<p style="color:blue">こんにちは</p>
</body>
</html>

二つ目は、該当のHTMLファイルのソース上部の＜head＞タグの中に

<style＞～スタイルシートの指定内容～</style＞で記述する方法。

HTMLソースコード

<html>
<head>
　<style>
　　　p {color:blue;}
　</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

htmlファイルと別に「〇〇.css」を用意することで、

トップページ、カテゴリー、記事、問い合わせ…など

ほかのページにも簡単に転用できるようになります。

デザインの統一性を持たせるため、基本的には同じスタイルシートを使います。

ファイルの内容は下記のとおりです。

style.css

p {color:blue;}

「index.html」に「style.css」を読み込むコードを追加します。

HTMLソースコード(index.html)))()

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>こんにちは</p>
</body>
</html>

スタイルシートを読み込ませることで、同じデザインを何回でも使用することが来ます。