ハンデプログラマー

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

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

実際にサイトを作ってみよう(メイン)

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

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

#contents{
background:#ffffff;
width:980px;
height:300px;
margin:0 auto;
}

#main{
box-sizing:border-box;
float:left;
width:70%;
}

#sub{
box-sizing:border-box;
float:right;
width:30%;
}

h1{
padding:10px 0;
font-size:21px;
color:#333;
border-top:3px solid #710000;
border-bottom:3px solid #710000;
}

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

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

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

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style12.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>

<div id="contents">
    <div id="main">

        <h1>文章タイトル</h1>
        <p>
            文章を書き込む。
        </p>

    </div>
</div>

</body>
</html>

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

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

CSSとHTMLで記述したメイン部分が表示されます。

●8章のようにレイアウト部分の設定を追加します。

#contents{
background:#ffffff;
width:980px;
margin:0 auto;
}

#main{
box-sizing:border-box;
float:left;
width:70%;
}

#sub{
box-sizing:border-box;
float:right;
width:30%;
}
この部分は8章をご参考ください。今回は背景色と高さは省いています。

●文章のタイトル部分の設定を行ないます。

h1{
padding:10px 0;
font-size:21px;
color:#333;
border-top:3px solid #710000;
border-bottom:3px solid #710000;
}
テキストのサイズ、色を設定します。
border-topで領域の上部分に線を引きます。
border-bottomで領域の下部分に線を引きます。

HTMLの方ではメイン部分の表示を行ないます。

<div id="contents">
    <div id="main">

        <h1>文章タイトル</h1>
        <p>
            文章を書き込む。
        </p>

    </div>
</div>
CSSで設定したようにメイン部分に文章タイトルとメイン文章が表示されます。

メイン部分に自分の発信したい文章、画像等を記述していってホームページを作っていきます。

プログラミング言語

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

ページのトップへ戻る