PR

スタイルシートの基本

HTML
HTMLHTML&CSS
スポンサーリンク
このページはマジで!英語が苦手なナナヨが、ホームページ作成に必要なHTMLとCSSの
基本と応用を快適に使う為、忘れないように作ったメモページです。
悪戦苦闘する過程の中で、得たヒントを少しでも、
共有または参考にしていただけると幸いです。

スタイルシート/CSS

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

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

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

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

使い方は、3通り

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

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

ブラウザ表示

こんにちは

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

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

方法その① 「〇〇.html」のタグの中に直接書く

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

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

HTMLソースコード
<html>
<head>

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

方法その② 「〇〇.html」のヘッドタグの中に書く

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

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

HTMLソースコード
<html>
<head>
 <style>
   p {color:blue;}
 </style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

方法その③ 「〇〇.css」ファイルを用意する

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>

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

タイトルとURLをコピーしました