1p
トップ　>　超初心者でも分かるホームページの作り方　>　超初心者でも分かるCSSの書き方

超初心者でも分かるCSSの書き方

はじめに

初心者向けに、CSSの書き方をレクチャーします。CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）と言うのは、ホームページのスタイルを指定するための言語です。CSSは、HTMLと組み合わせて使用して、CSSではそれらをどのように装飾するかを指定します。 例えば、ホームページの色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声や動画の再生スタイルなど、 ホームページの表示・出力・再生について指定することができます。HTMLで、ホームページの内容を書いて、CSSで、そのスタイルを指定します。最近は、この分業が、盛んです。CSSファイルを作っておけば、全てのHTMLファイルの装飾を変えることができます。

CSSの導入方法の説明

HTMLファイルに追加する


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ホームページ作成中</title>
<link rel="stylesheet" type="text/css" href="hp01.css">
</head>
<body>


</body>
</html>
これで、「hp01.html」に「hp01.css」の内容が、反映されるようになります。

CSSの練習用のHTMLファイル

今後の解説の為のファイルを示します。「hp01.html」にコピペして、保存しておいてください。もしくは、以下をクリックして、ダウンロードしてみてください。

hp01（UTF-8版）のダウンロード

上部の「ダウンロード」を押すと、「許可画面」が出ますので、「許可」してください。すると、ファイルが、ダウンロードされます。どこにダウンロードされるかは、お使いのブラウザによって違うので、探してみてください。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ホームページ作成中</title>
<link rel="stylesheet" type="text/css" href="hp01.css">
</head>
<body>

<h1>大きな見出し</h1>
<p>段落を書く</p>
<h4>小さな見出し</h4>
<div>ひとかたまりの範囲</div>

<pre>超初心者でも分かる
改行の仕方</pre>

<a href="hp01.html">相対パス</a>
<a href="https://1p-info.suz45.net/HP-b/index.htm">絶対パス</a>

<ol>
<li>一番目の内容。</li>
<li>二番目の内容。</li>
</ol>

<ul>
<li>順番は付きません。</li>
<li>左のマークを変えられますが、また後で説明します。</li>
</ul>

<img src="https://1p-info.suz45.net/HP-b/HP-picture/HP-0.jpg" alt="内閣">

<table border="1">
<tr>
	<th>表題１</th>
	<th>表題２</th>
</tr>
<tr>
	<td>内容１</td>
	<td>内容２</td>
</tr>
</table>

</body>
</html>

豆知識



前へ　　目次　　次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。

Copyright (C) SUZ45. All Rights Reserved.