スタイルシートとは
サイトのデザインを構築するために使用します。スタイルシートをマスターすると、サイトのデザインを簡単に変えることが出来るようになり、まるっきりイメージの違ったサイトにすることが出来るのでとても便利です。
既存のHTMLをスタイルシートで色や形、大きさなどを指定、変化させることでイメージ通りのサイト構築をしていきます。HTMLに対してスタイルシートをどのように絡めて適応させていくかで３種類の方法があります。
スタイルシートの記述場所
HTMLに対してスタイルシートCSSの記述場所をイメージ画像で表しています。
- HTMLの中でstyle要素としてまとめて記述して使用する。
スタイルシートCSSの基本構造を記載しています。
- スタイルシートとして独立した要素を記述し使用する。
今回は「スタイルシートとして独立した要素を記述し使用する」方法について学びます。
・スタイルシートとして独立した要素を記述し使用する。
スタイルシートCSSは独立したソースファイルとして記述してサーバーにアップロードします。ソースファイルはテキストエディタ（メモ帳など）で作成し、ファイル名は「style.css」とし保存します。
スタイルシートCSSソースの一例
h1{ ・・・主見出しh1を指定
background-colore:aqua; ・・・文字の背景色をアクアにする。
color:blue; ・・・文字色を青にする。
}
h3 { ・・・小見出しh3を指定
border: solid 1px blue ・・・小見出しh3を青の実線１pxで囲む
上記のスタイルシートCSSをHTMLに適用するためCSSファイルを読み込むコードをHTMLの中に記述します。「<link rel="stylesheet" type="text/css" href="style.css">」部分がCSSファイルを読み込むためのコードになります。<head>～</head>内に記述します。
HTMLソースの一例
<html>
<head>
<title>タイトルtitleを入力します</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>小見出しh3文字を入力します</h3>
<p>文字を入力します</p>
</body>
</html>
タイトルtitleを入力します
小見出しh3文字を入力します
文字を入力します
CSSファイルを読み込むコードの説明
<link rel="stylesheet" type="text/css" href="style.css">
relはrelation＝関係を表します
stylesheetはスタイルシートを読み込みます。
href="style.css"のhrefとはhypertext referenceの略で参照します。対象となるURLを指定したりします。
0 件のコメント:
コメントを投稿