ハンデプログラマー

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

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

実際にサイトを作ってみよう(トップ画像)

1、テラパッドを開きstyle10.cssファイルを開きます。

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

.topimg{
text-align:center;
}

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

4、テラパッドを開きtest10.htmlファイルを開きます。

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

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

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

<hdmenu>
    <div class="space">
	<ul class="menu">
	    <li><a href="../index.html">ホーム</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
</hdmenu>

<div class="topimg">
<img src="images/top.jpg" alt="トップ画像">
</div>

</body>
</html>

3、このファイルをtest11.htmlのファイル名で保存します。

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

CSSとHTMLで記述したトップ画像が表示されます。

●画像を画面の中央に表示されるようにクラスを作ります。

.topimg{
text-align:center;
}
これは<div>タグで中央に表示されるための記述です。

HTMLの方ではトップ画像の表示を行ないます。

<div class="topimg">
<img src="images/top.jpg" alt="トップ画像">
</div>
CSSで設定したように画面の中央に表示されます。

プログラミング言語

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

ページのトップへ戻る