シングルカラムページ

流行のシングルカラムページ

準備をしよう

前回作ったファイルを利用して中身を作っていきます。
最近流行なのが１カラムのページだそうです。
まずHTML　とCSSを準備しましょう。
まだ作ってない一は、どこか（ディスクトップとかとかワンドライブとかユーザーフォルダの中とか）へ、電気基礎、または、dennkikiso 等と名前をつけたフォルダを作って下さい。
そしてその中へ、CSS1 というフォルダを作り、
その中へ下のHTMLを sub1.html として用意して下さい。
HTMLはこれまで作ったものから背景画像を取り除いたものです。
飯田いいとここんなページです。ここからCSSとHTMLを用意しても良い。
a21.zip ←これを解凍するとできます。

 $<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="，で切って、キーワードを並べる">
<meta name="description" content="ページの内容を短く書く">
<link rel="stylesheet" href="main.css"> 
<title>タイトルを書く</title>
</head>
<body>
    <header>
    </header> 
    <h1>見出し</h1>
    <footer>
    </footer>
</body>
</html>$

ボディの中に中身を書いていきます

<body> の後に書いてみましょう。
<body ID="sub1">

ボディにマークをつけます。

いよいよHTMLのボディを書き換えます。
まず見出しの下に<div></div>をかいてブロックを作ります。
そしてそのブロックをCSSで書き換えられるようにclassを指定します。

 $<div class = content1>
    </div>$

そしてその中に<body> をかいてclassを指定します。

 $<div class = content1>
        <div class="content1a">
        </div>
    </div>$

箱の中にもう一つ箱が入ったイメージです。
そして中の箱に見出し<h2> </h2> と段落<p> </p> を書きます。

 $<div class = content1>
      <div class="content1a">
            <h2>第２見出し１</h2>
            <p>
　　　　　　　　中身の文章１
            </p>
        </div>
    </div>$

中の箱を2つ作るために、コピーして下に貼り、中をちょっと書き換えます。
これで準備完了です。

 $<div class = content1>
      <div class="content1a">
            <h2>第２見出し１</h2>
            <p>
　　　　　　　　中身の文章１
            </p>
        </div>
        <div class="content1a">
            <h2>第２見出し２</h2>
            <p>
　　　　　　　　中身の文章２
            </p>
        </div> 
    </div>$

divタグは、それで囲んだ中がブロッククラス要素にできます。
H2タグもブロッククラスで、デザインが出来ました。
divタグも、これで囲んだ部分を一つのかたまりとして認識するようになりデザインが出来ます。
また、divタグで囲むと新しいかたまりとして認識し、ブロッククラス要素は改行もされます。

CSSを書こう

まず復習です。名前を思い出しましょう。

セ○○タ	今回は
	div で、class=content1 等と名前をつけてあります
プ○○○ィ	線や色など、何を変えるのかを指定する部分。
	例） margin:
値	プロパティに対して、内容を指定する部分。
	例）0px;など

セ○○○		プ○○ティ		値
.content1	{
		margin:	:	0px	;
}

cssにcontennt1aクラスを書いてみましょう

HTMKでマークしたクラス名は、cssでは、【.】名前の前にドットをつけます。
あとは、H1のように、セレクタ、プロパティ、値を書いてデザインしましょう。
中身も、好きに書いてみましょう。
次は写真も貼りますのでそのつもりでいてください。

 $.cintent1{
    margin: 0px;
}

.content1a{
    background-color: aliceblue;
    border-color: black;
    border: 2px solid blue;
    padding: 20px 20px 20px 20px;
    margin: 5px;
}$

学習のために、分かるように色をつけてみました。
ここでも、ボーダー、マージン、パディングを指定しています。
こうしてデザインしていくのです。
飯田の春←こんな感じ
飯田の春←文章は出来た

次の問題へ進む

感想、エラー報告のお願い

ぜひ、ご協力お願い申し上げます。