https://hmaster.net/

当サイトについて | リンクについて | 問い合わせフォーム |

HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

スタイルシートの記述場所

スタイルシートの記述場所は3箇所あり、一つはHTMLソースの<head>～</head>内、 二つ目は<body>～</body>内、三つ目は外部ファイルに記述します。

外部ファイルでCSSを記述する方法が複数のページの文字色や レイアウトを変えるのが一変にできてしまうのでこの方法が 一番効率よくHPを更新できます。

HTML文書にスタイルシートの記述がある場合、スタイルシート言語で記述されていることを 宣言するために<head>～</head>内に
<meta http-equiv="Content-Style-Type" content="text/css"> のメタタグを記述しておきましょう。

■ <head>～</head>内に記述する場合

<style type="text/css">～</style>内に スタイルシートを記述します。
<!- - ～ - ->はスタイルシート に対応していないブラウザの為に記述します。

HTMLソース

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
p{color:blue;}
-->
</style>
</HEAD>
<BODY>
<p>ホームページ</p>
</BODY>
</HTML>

■ <body>～</body>内に記述する場合

本文に直接CSSを記述します。HTMLタグに直接style属性を指定してHTML形式で記述する方法です。

HTMLソース

<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY>
<p style="color:green;">文字</p>
</BODY>
</HTML>

■ 外部ファイルに記述する場合

スタート→プログラム→アクセサリ→メモ帳 の順でメモ帳を起動し下の例のようなスタイルシートだけを 記述します。
外部ファイルに記述する場合は <style type="text/css">～</style> の記述は省略できます。 メモ帳のファイル名はabcd.cssという風に小文字の半角英数字にして拡張子は .cssとします。

外部ファイルのスタイルシートをHTML文書に読み込むには
HTMLソースの<head>～</head>内に
<link rel="stylesheet" href="style.css" type="text/css"> を記述します。 外部ファイルで記述したスタイルシートによりHTMLソースの <body>～</body>内にある <p>～</p>で囲まれた文字は全て赤色になります。

外部ファイル

p{color:red;}

HTMLソース

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<p>ここの文字は赤色</p>
<p>ここの文字は赤色</p>
</BODY>
</HTML>

■ その他の項目

・ スタイルシートの記述方法
・ 個別にCSSを指定する
・ 複数のセレクタで指定
・ @importでCSSファイルを読み込む
・ 外部ファイルのコメント

スタイルシート一覧のページに行く

このエントリーをはてなブックマークに追加 Instagram

HOME
Copyright (C) 2003-2024 ホームページマスター All rights reserved.