Chapter-01

Chapter-02

Chapter-03

Chapter-04

1段組のレイアウト

このページと、次のページに渡って、以下のような1段組のページを作成します。

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

ファイルの準備

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

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

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

    chap2

  • index.html
  • style.css

      • img

    • bg.png
    • main.jpg

htmlの入力

htmlの入力

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

index.html
<div id="container">

<h1>北海道情報大学</h1>

<img src="img/main.jpg" alt="メイン画像">

<h2>本学の特長</h2>

<div class="txt-box">
<h3>大自然の中に佇む緑のキャンパス</h3>
<p>HIUのキャンパスは､北海道の大自然が保存される原始の森｢野幌森林公園｣に隣接｡ 校舎群は周囲の景観にマッチするよう構成されるなど､緑豊かな快適な環境です｡ 平成23年には新たに「ｅＤＣタワー」が建てられ、周囲から一際目立っています。 また､北海道の中心地･札幌までのアクセスも良好(高速バスで約25分)｡ まさに絶好のロケーションといえるはずです｡</p>
</div><!-- txt-box END -->


<div class="txt-box">
<h3>最先端のハイテク設備が充実</h3>
<p>通信教育用の｢PINE-NETII｣を活用した先進メディア教育を展開｡また､クリエイティブな映像表現を実践するための｢バーチャルスタジオ｣､｢モーション キャプチャー｣､｢ノンリニア編集システム｣から､各種実習室､図書館､AVルームなど､最先端の設備･施設を積極的に導入し､次世代教育を実践しています｡</p>
</div><!-- txt-box END -->

<div class="txt-box">
<h3>90％を超える就職決定率</h3>
<p>｢産･学･研共同｣による関連企業や研究機関との連携により､情報技術の最前線のニーズに呼応したカリキュラムを確立｡生きた教材を活用することで極めて実践的なスキルの取得が可能です｡また､IT技術関連の各種資格取得をバックアップする受験講座やガイダンスも随時実施｡資格取得をサポートしています。</p>
</div><!-- txt-box END -->



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

白い角丸のメインボックスに「container」というID名をつけ、その下の3つのテキストボックスには、「txt-box」というClass名をつけました。

スタイルを適用していこう

まずは、ブラウザでデフォルトで指定されている余白を0にしましょう。

style.css
*{
    margin:0;
    padding:0;
}
*{ ～ }全ての要素にスタイルを適用します。

これで、直接余白を指定していない要素に、勝手に余白がつくのを防げます。
前回は入れていませんでしたが、今後webページを作る際は必ず設定しましょう。

背景を指定する

見本を見ると、ページ全体に斜線の背景、メインのボックスに白い角丸の背景、テキストボックスに薄いベージュ色の背景が設定されています。

まず、ページ全体の背景は<body>に対して設定します。 斜線のパターンが画像なので、前回やった色指定とは少し違います。

style.css
body{
    background:url("img/bg.png");
}
url("○○")○○に画像のパスを指定すると、背景に画像を設定できます。

（上記のように、追加するコードのみを表示するので、style.cssに追加していってください）

メインボックスのスタイル設定

次に、メインボックスに背景色と、幅、角丸、シャドウを設定します。背景と幅はこれまでと同様の手順ですね。

style.css
#container{
    background:rgb(100%,100%,100%);
    width:640px;
    border-radius:7px;
    box-shadow:1px 1px 1px rgba(0%,0%,0%,0.3);
}
border-radius:○px;○px分、ボックスを角丸にします。
box-shadow:○ ○ ○ ○;ボックスのシャドウを設定します。
左から順に、横、縦、ぼかし、色です。
rgba(○,○,○,○)アルファチャンネル付RGBです。
左から、赤（R）緑（G）青（B)、透明度（A）です。
最後の透明度は、%ではなく0.0～1.0の間で指定します。

テキストボックスのスタイル設定

テキストボックスに、背景色と枠線、角丸を設定します。特に新しいスタイル指定はありません。

style.css
.txt-box{
    background:rgb(95%,95%,90%);
    border:3px double rgb(60%,60%,60%);
    border-radius:5px;
}

枠線のスタイル「double」は2重線です。指定する際は、幅が3px以上必要です。

全ての見出しに色を設定

見本では、一番大きなh1見出し、2番目のh2見出し、その下のh3見出しそれぞれに、同じ青系の色が設定されています。h3には下に線もついていますね。

この場合、今までのやり方だと以下のように設定するかと思います。

style.css
h1{
    color:rgb(10%,30%,30%);
}
h2{
    color:rgb(10%,30%,30%);
}
h3{
    color:rgb(10%,30%,30%);
    border-bottom:1px solid rgb(10%,30%,30%);
}

これでも間違いではなく、正しく色が適用されるはずです。
しかし、同じスタイルを設定するときは、もう少し楽な方法があります。

style.css
h1, h2, h3{
    color:rgb(10%,30%,30%);
}
h3{
    border-bottom:1px solid rgb(10%,30%,30%);
}

このように、「,（カンマ）」で区切ると、複数のセレクタにまとめてスタイルを適用することが出来ます。

しかし、h3には下に線がついているので、もう一度h3だけに追加で指定してやります。

画像に角丸を設定

見本では、メイン画像が角丸になっています。これは、画像自体が角丸になっているのではなく、ボックス同様、スタイルで角丸を適用しています。

style.css
img{
    border-radius:5px;
}

このように、<img ～>にもスタイルを適用することが出来ます。

確認

ボックスや見出しのスタイルを指定したので、実際にブラウザで確認してみましょう。

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

それぞれのボックスに正しく背景などが設定されました。

しかし、最初の見本と比べると、余白が全く無かったり、メインボックスが左に寄っていたりと大分違いますね。

次のチャプターでは、余白設定し、見た目を整えていきます。

このページで作成した全てのソース

ソースを表示

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ホームページのタイトル</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="container">

<h1>北海道情報大学</h1>

<img src="img/main.jpg" alt="メイン画像">

<h2>本学の特長</h2>

<div class="txt-box">
<h3>大自然の中に佇む緑のキャンパス</h3>
<p>HIUのキャンパスは､北海道の大自然が保存される原始の森｢野幌森林公園｣に隣接｡ 校舎群は周囲の景観にマッチするよう構成されるなど､緑豊かな快適な環境です｡ 平成23年には新たに「ｅＤＣタワー」が建てられ、周囲から一際目立っています。 また､北海道の中心地･札幌までのアクセスも良好(高速バスで約25分)｡ まさに絶好のロケーションといえるはずです｡</p>
</div><!-- txt-box END -->


<div class="txt-box">
<h3>最先端のハイテク設備が充実</h3>
<p>通信教育用の｢PINE-NETII｣を活用した先進メディア教育を展開｡また､クリエイティブな映像表現を実践するための｢バーチャルスタジオ｣､｢モーション キャプチャー｣､｢ノンリニア編集システム｣から､各種実習室､図書館､AVルームなど､最先端の設備･施設を積極的に導入し､次世代教育を実践しています｡</p>
</div><!-- txt-box END -->

<div class="txt-box">
<h3>90％を超える就職決定率</h3>
<p>｢産･学･研共同｣による関連企業や研究機関との連携により､情報技術の最前線のニーズに呼応したカリキュラムを確立｡生きた教材を活用することで極めて実践的なスキルの取得が可能です｡また､IT技術関連の各種資格取得をバックアップする受験講座やガイダンスも随時実施｡資格取得をサポートしています。</p>
</div><!-- txt-box END -->



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

</body>
</html>
style.css
*{
    margin:0;
    padding:0;
}
body{
    background:url("img/bg.png");
}
#container{
    background:rgb(100%,100%,100%);
    width:640px;
    border-radius:7px;
    box-shadow:1px 1px 1px rgba(0%,0%,0%,0.3);
}
.txt-box{
    background:rgb(95%,95%,90%);
    border:3px double rgb(60%,60%,60%);
    border-radius:5px;
}
h1, h2, h3{
    color:rgb(10%,30%,30%);
}
h3{
    border-bottom:1px solid rgb(10%,30%,30%);
}
img{
    border-radius:5px;
}
PAGE TOP