|
homepage-navi＞スタイルシートで作る＞スタイルシートの適用
スタイルシートで作る
スタイルシートの適用
スタイルシートを HTML文書 に適用するには、
- スタイルを適用する要素に、style属性の値として適用する。
- head要素に、style要素を記述し適用する。
- 外部スタイルシートファイルを作成し、link要素で適用したいファイルへリンクする。
以上の3方法があります。
ここでは外部スタイルシートを使う方法を説明していますが、他の２つの方法も少し説明しておきます。
外部css
外部スタイルシートとは、HTMLファイルとは別のファイル（拡張子は【.css】）にスタイルシートを記述してリンクさせて適用させていく方法です。
CSSの保存場所がHTMLファイルと同じ場所の場合は
| <link rel="stylesheet" href="ファイル名.css" type="text/css"> |
保存場所がHTMLファイルとは別の場合は
| <link rel="stylesheet" href="保存先フォルダ名/ファイル名.css"type="text/css"> |
を<head>〜</head>内に挿入します。
<html>
<head>
<title>**********</title>
<link rel="stylesheet" href="保存先フォルダ名/ファイル名.css"type="text/css">
</head>
<body>
<p>スタイルシート</p>
</body>
</html> |
この方法で作成したCSSをHTML文書に適用させましょう。
この方法以外に以下の２つの方法があります。
1.インラインStyle
インラインスタイルとはHTML内のタグに直接指定する方法です。タグの中に設定していきます。
| <要素 style=" プロパティ（属性）：プロパティ値（値）； "> |
2.内部css
内部スタイルシートとは、HTMLの<head>〜</head>内にスタイルシートを記述する方法です。
インラインスタイルが個別に指定するのに対し内部CSSは１ページ全体の同一タグについて指定する事が出来ます。
<html>
<head>
<title>**********</title>
<style type="text/css">
<!--
p{
color : red;
}
-->
</style>
</head>
<body>
<p>スタイルシート</p>
</body>
</html> |
上記のように、<style type="text/css">・・・・</style>でマークアップし中に<!--要素｛プロパティ（属性）：プロパティ値（値）；｝-->という形で指定していきます。
ＨＴＭＬ文書に記述する
次にHTMLに適用したCSSをＨＴＭＬ文書内に記述していきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>〜</title>
<link rel="stylesheet" href="ファイル名.css" type="text/css">
</head>
<body>
</body>
</html>
|
この中の<body>〜</body>の間に<div class="○○○">〜</div>で記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>〜</title>
<link rel="stylesheet" href="ファイル名.css" type="text/css">
</head>
<body>
<div class="all">
<div class="header">タイトル</div>
<div class="cont">
<div class="navi">
<div class="btn">1111111</div>
<div class="btn">2222222</div>
<div class="btn">3333333</div>
<div class="btn">4444444</div>
<div class="btn">5555555</div>
<div class="btn">6666666</div>
</div>
<div class="txt">
<div class="title">タイトル</div>
<div class="txt2">内容内容</div>
<div class="title">タイトル</div>
<div class="txt2">内容内容</div>
<div class="title">タイトル</div>
<div class="txt2">内容内容</div>
<div class="title">タイトル</div>
<div class="txt2">内容内容</div>
<div class="title">タイトル</div>
<div class="txt2">内容内容</div>
</div>
</div>
<div class="ci"></div>
<div class="footer">dfsfsefsef</div>
</div>
</body>
</html>
|
これで完成です。どうでしょう
このページ
のように作れたでしょうか？同じように作れなかった場合は、スタイルシート・HTML文書ともにタグの打ち忘れや「；」
や｛｝が、ちゃんとあるかを、もう一度チェックして見ましょう。
そして同じようにできた人は、色や配置をかえたり画像を入れてみたりしてアレンジして見ましょう。 ページTOPに戻る
グッジョブhomepage-navi TOPへ
|
