１カラムのページを作ってみよう

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

何はともあれ、見てみよう。


1カラム　参考サイト

最近流行なのが１カラムのページだそうです。
スマホ向きに作ったページです。
2カラムのページ等も、１カラムのページを作っておいてそこからCSSでデザインしてカラムを増やしていくのが良いといわれます。
カラムというのは、画面が縦に割れているもので、2つに割れているのを２カラムといいます。

まず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>

まずHEADを見返しましょう。

<head>
まず、charsetの指定。HTML5になって、簡単になりました。
<meta charset=UTF-8">
次に、スマホやタブレットで大きさが変わるようにする指定がこれ。
<meta name="viewport" content="width=device-width">
これは、検索サイト用のキーワードの表示です。
<meta name="keywords" content="，で切って、キーワードを並べる">
下は、検索したときに表示される文章。
<meta name="description" content="ページの内容を短く書く">
CSSへのリンクを張りデザインをそこでするようにする。
<link rel="stylesheet" href="main.css">
<title>タイトルを書く</title>
</head>
<body>
<header>
</header>
<h1>見出し</h1>
<footer>
</footer>
</body>

bodyのIDを変える

次にボディのIDを書き換えます。
IDは、「一つだけ指定できる」、classは「何カ所でも指定できる」でしたね。
これでこのページ全体（ボディ）のデザインが指定できます。(これは又後で) 

<body id="sub1">
これで、このページのレイアウトができます。（又後で使う予定です）

まず<h1></h1>の見出しを変えてみましょう。

CSSは次のようになっています。
セレクタ どのHTML要素にCSSを適用させるのかを指定する。
例）h1 .class #idなど
プロパティ 線や色など、何を変えるのかを指定する部分。
例） background-color paddingなど
値 プロパティに対して、内容を指定する部分。
例）palevioletred 10px solidなど

3つ並べて下のようになります。
セレクタの後は｛｝で囲みます。
プロパティの後は：（コロン）をつけて
値の後に；（セミコロン）をつけます。
プロパティは並べて書くことが出来ます。
セレクタ プロパティ 値
h1 {
background-color : palevioletred ;
}
実際に見出し【<h1>ほげ</h1>】タグをcssでデザインしましょう。
見出しタグは<h1>から<h6>まであります。<h1>が中心の見出しとされています。
そこで、以前は<h1>は一つのページに一つだけと決められていました。
これはデザインを担当するタグで、【ブロッククラス要素】の一つです。
ブロッククラスは、高さや幅、マージンやパディングなどを指定できます。 

@charset "utf-8";

h1{
    text-align: center;
    background-color: aquamarine;
    border: 2px solid blue;
    padding: 2px 2px 2px 2px;
    margin: 5px 5px 0px 5px
    font-size: 30px;
    height: 20px;
    width: 100px;
}
ボーダーなどを書き換え、それが何かの復習をしておきます。

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

CSSを書き換えてみましょう。
自由に数字や色や文字を書き換えて、 パディング、ボーダー、マージンを自分の好きなように変えてみましょう。
画面の例えば左側半分ほどに、ｂｌａｃｋｅｔｓ（エディター）を立ち上げ、ＣＳＳとsub1.htmlを読み込みます。
そして　sub1.htmlをクリックし編集できる状態にしておいてから
blacketsの右上にあるZのような模様をクリックすると、グーグルクロームが立ち上がり、HTMLを表示します。
この状態でsub1.cssをクリックして中身を変えると、グーグルクロームの表示が変わります。

@charset "utf-8";

h1{
    text-align: center;
    background-color: aquamarine;
    border: 2px solid blue;
    padding: 2px 2px 2px 2px;
    margin: 5px 5px 0px 5px
    font-size: 30px;
    height: 20px;
    width: 100px;
}

ボーダーなどを書き換え、それが何かの復習をしておきます。


font-size: 30px;　→　50pxなど。
ackground-color: aliceblue;　→　yellow　
border-color: black;　→、black を#2233ccなどと000000からffffff16進6桁の数字指定に。
border: 2px solid blue;　→　pink。
padding: 20px 20px 20px 20px;　上右左したと時計回りにパディングが指定されます。一つずつ数字を変えてみましょう。
margin: 25px; これも数字を変えてみましょう。

こうしてデザインしていくのです。
次は今回つかったファイルを使います。

次の問題へ進む