htmlって何？！ 初心者のためのウェブサイト作成教室

個別に設定する

タグを個別で指定する方法を紹介します。

ページ内にまとめて設定

<html>
<head>
<title>ウェブサイトのタイトル</title>

<style type="text/css">
h1.ex1 {
  color: #0000ff;
  }
h1.ex2 {
  color: #008000;
  font-size: medium;
  }
p.ex1 {
  color: #ff0000;
  font-size: x-small;
  }
p.ex2 {
  color: #0000ff;
  font-size: x-large;
  }
td.ex1 {
  text-align: center;
  color: #0000ff;
  font-size: small;
  background-color: #ffff00;
  width: 100px;
  }
td.ex2 {
  text-align: center;
  color: #ff0000;
  font-size: x-small;
  }
table {
  width: 300px;
  border: 1px solid #555555;
  }

#ex1 {
  text-align: center;
  font-size: large;
  color: #008000;
  }

</style>

 

<body>

<h1 class="ex1">見出し1</h1>

<h1 class="ex2">見出し2</h1>

<p class="ex1">文章1</p>

<p class="ex2">文章2</p>

<table>
<tr>
<td class="ex1">セル1</td>
<td class="ex1">セル2</td>
<td class="ex1">セル3</td>
</tr>
<tr>
<td class="ex2">セル4</td>
<td class="ex2">セル5</td>
<td>セル6</td>
</tr>
</table>

<p id="ex1">文章3</p>

</body>
</html>

 

xx.yy (h1.ex1) class属性の指定です。使用したい場所に <xx class="yy">で指定します。
ちなみに、 yy は、最初の文字が数字でなければ、好きなように英数を 組み合わせて決めて構いません。
#yy (#ex1) id属性の指定です。使用したい場所に <xx id="yy">で指定します。
１つのid属性は、１ページ内で１か所だけ使うことができます。
color 文字の色を指定します。
#XXXXXX カラーコードです。red などのカラーネームでも可能です。
font-size 文字の大きさを変えます。
text-align: center; テキストを中央に表示します。right に変えると右側に、left に変えると左側に表示できます。

 

表示はこのようになります。

 

見出し1

見出し2

文章1

文章2

セル1 セル2 セル3
セル4 セル5 セル6

文章3

 

 

カラーコードは検索すればすぐ分かると思いますが、標準のものを載せておきます。

色 赤 青 黄 緑 白 黒
カラーネーム red blue yellow green white black
カラーコード #ff0000 #0000ff #ffff00 #008000 #ffffff #000000