ハンデプログラマー

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

トップ > HTML/CSS入門 > 実際にサイトを作ってみよう(ロゴ)

実際にサイトを作ってみよう(ロゴ)

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

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

@charset "UTF-8";

body{
background:#ffffff;
}

.space{
position:relative;
width:980px;
margin:0 auto;
}

.guide{
position:absolute;
top:20px;
right:10px;
margin:0;
}

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

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

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

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

<div class="space">
	<a href="../homepage.html"><img src="images/logo.jpg" alt="ロゴ"></a>
	<p class="guide">
		サイト説明文を表示します。
	</p>
</div>

</body>
</html>

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

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

CSSで設定したレイアウトが領域別に表示されます。

●spaceクラスではヘッダー部分の宣言を行なっています。

.space{
position:relative;
width:980px;
margin:0 auto;
}
positionではrelativeにして相対の配置にします。
widthでは980ピクセルの幅に設定します。
marginでは画面の中央に表示されるようにします。

●guideクラスではサイト説明文の配置を設定します。

.guide{
position:absolute;
top:20px;
right:10px;
margin:0;
}
positoinではabsoluteにして絶対の配置にします。
topでは上からの配置距離を設定します。20ピクセルの位置にしています。
rightでは右側からの配置距離を設定します。10ピクセルの位置にしています。
marginはゼロに設定します。

HTMLの方ではロゴの表示を行ないます。

<div class="space">
	<a href="../homepage.html"><img src="images/logo.jpg" alt="ロゴ"></a>
	<p class="guide">
		サイト説明文を表示します。
	</p>
</div>
spaceクラスの中で記述します。spaceの設定が有効な部分として認識されます。
<a href="../homepage.html"><はリンクの設定を行ないます。ロゴをクリックしたらhomepage.htmlというHTMLページに移動するようにしています。
<img src="images/logo.jpg" alt="ロゴ">でロゴファイルを表示するようにしています。画像の表示です。
サイト説明文はguideクラスの中に書きます。guideの設定が有効な部分として認識されます。

ヘッダーの上部には大体このような配置を行ないます。次はメニューの表示を行ないます。

プログラミング言語

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

ページのトップへ戻る