スタイルシートとは
サイトのデザインを構築するために使用します。スタイルシートをマスターすると、サイトのデザインを簡単に変えることが出来るようになり、まるっきりイメージの違ったサイトにすることが出来るのでとても便利です。
既存のHTMLをスタイルシートで色や形、大きさなどを指定、変化させることでイメージ通りのサイト構築をしていきます。HTMLに対してスタイルシートをどのように絡めて適応させていくかで３種類の方法があります。
スタイルシートの記述場所
HTMLに対してスタイルシートCSSの記述場所をイメージ画像で表しています。
- HTMLの中でstyle要素としてまとめて記述して使用する。
スタイルシートCSSの基本構造を記載しています。
今回は「HTMLの中でstyle要素としてまとめて記述して使用する」方法について学びます。
・HTMLの中でstyle要素としてまとめて記述して使用する。
スタイルシートの基本構造
使用例：背景色・文字色を指定する。
下記コードは<head>～</head>の間に記述します。<style>～</style>までがスタイルシートCSSになります。通常タイトルタグは<title>~</title>で囲まれ見出しタグh1となるのですが、今回は特別に「h6」タグを指定しました。
このブログで使用している見出しタグで文字の大きさや文字色等に影響が出るからです(笑)。他のページにも影響が出ないように配慮しました。
<html>
<head>
<h6>タイトルを記入します</h6> ・・・h1だと当ブログに影響が出るので(笑)
<style type="text/css">
h6{
background-color: red;
color: white;
}
p {
color: blue;
margin-leftt: 1em;
}
</style>
</head>
</html>
HTMLのみ、スタイルシートなしの表示
タイトルを記入します
HTMLにスタイルシートCSSを付加の表示
文字を入力します。
文字を入力します。
文字を入力します。
スタイルシートCSSのタグ要素を説明します。
0 件のコメント:
コメントを投稿