ハンデプログラマー

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

トップ > HTML/CSS入門 > スタイルシートの設定

スタイルシートの設定

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

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

@charset "UTF-8";

body{
background:#0000ff;
}

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

4、2項で作成したHTMLファイルをテラパッドで開きます。

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

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
Hello!HTML
<br />
<img src="images/logotest.jpg" alt="テスト画像">
</body>
</html>

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

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

背景が青色に変わりました。

追加したのはこの1行です。

<link rel="stylesheet" type="text/css" href="style3.css">

これはlinkというタグでHTMLファイルの属性を設定するファイルを読み込んでいます。

style3.cssは今現在HTMLと深いつながりがあるものです。この二つがセットになっているのが定番です。ホームページの配置をHTMLで設定して、CSSで背景や文字のサイズ等の設定をするような形式になっています。

今回の記述は<body>で囲まれた範囲の背景を青色に設定しています。HTMLの色は#0000ffのような書き方をします。

これは決まっているものなので、この色にしたいと思ったらその色のコードを記述します。

色のコードはインターネット上に掲載されているので参考にしてみてください。
色見本ページ例

このHTMLとCSSで大体のホームページの形が成り立っていると考えていただけると理解できると思います。

プログラミング言語

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

ページのトップへ戻る