Chapter-01

Chapter-02

Chapter-03

Chapter-04

2段組のレイアウト

チャプター3では、以下のような2段組レイアウトのページを作成します。

見本ページを新しいタブで開く

ファイルの準備

今回は、宣言文のみ入力したhtmlファイルと、白紙のcssファイル、必要画像の入ったimgフォルダを用意しました。

ファイルセット「chap3.zip」をダウンロード

上のボタンからダウンロードし、解凍後、以下の階層構造になっていることを確認してください。

    chap3

  • index.html
  • style.css

      • img

    • bg.png
    • main.jpg

htmlの記述

htmlの入力

まずは<body>～</body>内に必要なタグと本文を記述しましょう。
本文はこちらからコピーしても構いません。

index.html
<div id="header">
	<h1>北海道情報大学</h1>
	<p>ここは北海道情報大学のホームページです</p>
</div><!-- header END -->

<div id="container">

<div id="left">
	<h2>MENU</h2>
	<ul>
	<li><a href="">ホーム</a></li>
	<li><a href="">大学案内</a></li>
	<li><a href="">学部・学科</a></li>
	<li><a href="">大学院</a></li>
	<li><a href="">国際交流</a></li>
	<li><a href="">入試情報</a></li>
	</ul>
</div><!-- left END -->

<div id="right">
	<img src="img/main.jpg" alt="メイン画像">
	<h2>実践力を養うユニークなカリキュラム</h2>
	<p>｢産･学･研共同｣による関連企業や研究機関との連携により､情報技術の最前線のニーズに呼応したカリキュラムを確立｡生きた教材を活用することで極めて実践的なスキルの取得が可能です｡また､IT技術関連の各種資格取得をバックアップする受験講座やガイダンスも随時実施｡資格取得をサポートしています。</p>
	<h2>インターネットを存分に使える環境を用意</h2>
	<p>大自然に囲まれたキャンパスも校舎内に一歩足を踏み入れると､そこは別世界｡学内は超高速ネットワーク｢ギガビットLAN｣により数百台のコンピュータが接続され､学生一人ひとりがe-メールアドレスが持てるなど､インターネット利用環境も充実｡</p>
	<h2>90％を超える就職決定率</h2>
	<p>就職指導では就職委員会とゼミ担当委員､学生サポートセンターが一丸となって学生をバックアップ｡また､就職指導コーナーには会社案内･求人票などの就職情報を検索できる専用端末を用意するなど､多角的なサポート体制により､毎年､90％以上の高い就職決定率を確保しています｡</p>
</div><!-- right END -->

</div><!-- container END -->

<div id="footer">
	<p>Copyright © 2014 Hokkaido Information University ALL RIGHTS RESERVED.</p>
</div><!-- footer END -->

基本的なCSSの記述

はじめに、以下のCSSだけ指定しておきましょう。

style.css
*{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    background:url(img/bg.png);
}
list-style:○;リストの先頭につくマーカーの種類を指定します。
マーカーを外したい場合はnoneを指定しましょう。

前回と同じように、余白の初期化と、ページ全体に背景画像の指定をしました。

4行目の「list-style:none;」は、リストの先頭に中黒のマーカーが自動で付くのを外しています。

PAGE TOP