福祉オンライン

障害者の皆様、就労継続支援事業所運営のITサポートを行なっています。

トップ > プログラミング教育 > 実際にサイトを作ってみよう(メイン)

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

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.png" alt="ロゴ"></a>
	<p class="guide">
	    サイト説明文を表示します。
    </p>
</div>

<hdmenu>
    <div class="space">
	<ul class="menu">
	    <li><a href="../index.html">ホーム</a></li>
	    <li><a href="../support.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で設定したようにメイン部分に文章タイトルとメイン文章が表示されます。

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

サポート内容

幣サイトで運営しているサポート一覧

ページのトップへ戻る