ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > スタイルシートの基本(テキスト)

スタイルシートの基本(テキスト)

1、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを打ち込みます。

@charset "UTF-8";

body{
background:#ffffff;
}

.font1{
color:#ff0000;
}

.font2{
color:#0000ff;
}

.font3{
font-size:xx-small;
}

.font4{
font-size:xx-large;
}

.font5{
font-weight:bold;
}

3、HTMLと同じフォルダに「style4.css」というファイル名で保存します。

4、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを追加します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>

<p class="font1">
font1
</p>

<p class="font2">
font2
</p>

<p class="font3">
font3
</p>

<p class="font4">
font4
</p>

<p class="font5">
font5
</p>

</body>
</html>

3、このファイルをHTML形式で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト4表示

CSSで設定したテキストの表示になります。

CSSではテキストの色、サイズ、太さを指定しています。

.font1{
color:#ff0000;
}
では「font1」というクラスを作り、色を赤に指定しています。

.font2{
color:#0000ff;
}
では「font2」というクラスを作り、色を青に指定しています。

.font3{
font-size:xx-small;
}
では「font3」というクラスを作り、文字のサイズを小さいものに指定しています。

.font4{
font-size:xx-large;
}
では「font4」というクラスを作り、文字のサイズを大きいものに指定しています。

.font5{
font-weight:bold;
}
では「font5」というクラスを作り、文字の太さを太いものに指定しています。

HTMLではstyle4.cssを読み込みます。

<p class="font1">
font1
</p>

<p>というタグは段落を示していましてclass="font1"でCSSのfont1のクラスを指定します。

そうすると表示がCSSの設定通りのテキストに変わります。

同じようにそれぞれの段落でクラスを指定してテキストの属性が変わるようになっています。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る