#8 簡単なwebサイトを作ってみよう

例えばこういったデザインのホームページを作ろうと思ったとします。 自分で作る場合はラフデザインを書くところからスタートします。紙に鉛筆書きで結構です。
webブラウザで見れるように、デザインをhtmlとcssで作るにはちょっとしたポイントを 押さえれば簡単に組み立てることが可能です。
それが「枠」という考え方です。
webブラウザで表示される枠(要素)は必ず 四角い枠 で構成されます。 三角や斜めや丸といった形も画面上で表示されているように見えますが、実際は 四角い枠 に入っています。
構造は必ず 四角い枠 で構成されるということを覚えておきましょう。

#9 枠をなぞってhtmlを作る

デザインを枠線だけで表現してみると単純な構造が見えてきます。 紙と鉛筆と消しゴムを用意して、デザインから長方形だけを使って枠を書き出してみよう。 そしてこの 枠(要素) 名前 をつけてあげましょう。

枠に名前をつけるとhtml文書が出来上がる


枠の名前を上から順番に書いていき、枠に開始タグと終了タグを入れていけば...
html文章が出来上がります!
テキストエディタでは、下の絵のようにわかりやすくするため インデント(字下げ)をつけて書いていきましょう。 今回の枠は汎用的な <div> タグを使って構文を作っていきましょう。


<html>
<head>
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  body
  <div>
    header
    <div>
      logo
    </div>
  </div>

  <div>
    visual
    <div>
      copy
    </div>
  </div>

  <div>
    text
  </div>
  <div>
    menu
  </div>

  <div>
    footer
  </div>

</body>
</html>

先程のindex.htmlに書いた内容を削除して、このように書いてみましょう。

ただし枠は、汎用的なdivタグで記述しました。このままだとcssでdivセレクタを指定した際に、すべての枠にプロパティが反映されてしまいます。
divタグ(枠)に名前をつけてそれぞれのタグ(枠)に個別にプロパティが反映されるようにします。次の章で枠に名前をつけてみましょう。

#10 枠に名前をつけて個別にデザインする

cssファイルに「div」セレクタを使って、プロパティでデザインする方法は理解できたと思います。 しかし、divで囲んだ枠はすべて変更されてしまいデザインするにはなかなか不便です。 そこで、枠の一つ一つに「名前」をつけ「枠を個別にデザインする」方法をとれば解決することができます。

枠に名前を付けるには「div class="名前"」 といったように、タグにclass=" "という 属性タグ (タグを補足するためのタグ)を追加してダブルクオーテーションのなかに自分で決めた「名前」を指定します。
クラスはそのままの意味で、例えば学校の1年生という大きなくくりがあり、1組、2組...とかのクラスに分けるということです。 div年生のheader組、logo組のような感じですね。
先程のindex.htmlに書いた内容を削除して、このように書いてみましょう。

<html>
<head>
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div class="header">
    header
    <div class="logo">logo</div>
  </div>
  <div class="visual">
    visual
    <div class="copy">copy</div>
  </div>
  <div class="text">text</div>
  <div class="menu">menu</div>
  <div class="footer">footer</div>
</body>
</html>
なんかイメージと違う。。。でも大丈夫です!
htmlは構造を作るための言語なので、このように順番通り表示されていれば 問題ありません。高さや幅や色などはcssで操作します。

枠に名前をつけ、cssで枠を指定したいとき


htmlでdivタグの名前をheaderとした場合(<div class="header">)、cssでは .header{ }として色や幅を指定すれば、 <div class="header"> </div>の中の要素をデザインすることができます。

#11 枠を中央に配置するmargin

まずは要素の“幅、高さ”と“線”の指定を行います


.header{
  height:150px;
}
.header_contents{
  width:980px;
  border: 1px solid #000;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.visual{
  height:400px;
  border: 1px solid #00F;
}
.copy{
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
このような表示になり、幅を指定した枠は左側に寄ります。 htmlでは特に指定がない限り、左側からの表示になります。

枠には2種類の幅があります

htmlでは固定した幅変化する幅という2種類の幅があります。
ブラウザ(デバイス)の画面の幅は人それぞれです。 PCだったりスマホだったり、大きい人もいれば小さい人もいます。紙の印刷物と違い人によって表示されるデザインは異なるのです。 それに対応するために幅を調整していきます。

AとBで画面幅は違いますが、固定の幅と変化する幅の2種類がみられます。

固定した幅

この時、固定され画面のサイズが変わっても動かない幅を「枠」に指定します。例でいえば、下の赤い部分が同じサイズ(980px)で固定されています。
幅が変化する枠の中に、幅が固定された枠が入るイメージです。

固定する幅のことを考えたhtmlの書き方

html構文の中に変化する枠の中に、固定される枠を入れていきます。
今回の例だと固定幅の枠は3つになります。 固定する枠にも名前をつけてあげましょう。

<html>
 <head>
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>

  <div class="header">
    header
    <div class="header_contents">
      <div class="logo">logo</div>
    </div>
  </div>

  <div class="contents">
    <div class="visual">
      visual
      <div class="copy">copy</div>
    </div>
    <div class="text_wrapper">
      <div class="text">text</div>
      <div class="menu">menu</div>
    </div>
  </div>

  <div class="footer">
    footer
    <div class="footer_contents">
      ©cri
    </div>
  </div>

 </body>
</html>

幅を指定した枠を、画面の中央に配置したいとき

marginプロパティを使います。margin:0 auto;マージン ゼロ オートと呼びます。

表示されない場合の間違いやすいポイント

これぐらいになると、保存してブラウザでリロードしても意図したように表示されないことがあります。
だいたいは 記述ミス によるものです。
ありがちなミスとしては、
  1. cssで値の最後の ;(セミコロン)が→ :(コロン)になっている
  2. htmlのクラス名とcssのセレクタ名が違う。class="contents"なのに .cotents{ }になってるなど
  3. htmlのクラス名の付け方が class-"" とかになっている

#12 2つの枠を横並びにするflex

どんどん書き込んでいきましょう


.header{
  height:150px;
  margin-bottom:20px;
  border: 1px solid #000;
}
.header_contents{
  margin:0 auto;
  width:980px;
  border: 1px solid #000;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.contents{
  margin:0 auto;
  width:980px;
  border: 1px solid #00F;
}
.visual{
  height:400px;
}
.copy{
  width:300px;
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
.text{
  width:380px;
  border: 1px solid #F0F;
}
.menu{
  width:360px;
  border: 1px solid #0F0;
}
.footer{
  height:120px;
  margin-top:30px;
  border: 1px solid #000;
}
.footer_contents{
  margin:0 auto;
  width:980px;
  text-align: center;
}

こんな表示になります。が、textとmenuにはもうひと工夫必要です。 いまは下記のような表示になっていると思います。

上の状態のものを下のようにするには、 ふたつをさらに枠で囲ってあげることで可能になります。

このように複数の枠をさらに囲ってあげる考え方を「ラッピングする」といいます。 枠「text」と枠「menu」をラッピングしそのラッピングした枠(ラッパー)に「text_wrapper」という名前をつけ、 cssプロパティ(justify-content)で中の要素を「左右のセンターに配置する」という特性をつけます。

.text_wrapper{
  height:200px;
  display:flex;  /* flex形式にします */
  justify-content: center; /* 子要素をセンタリング */
  border: 1px solid #ccc;
}
いまはdisplayプロパティや、flexについては「そんな事ができるんだな」程度の認識で結構です。入門2で詳しく説明します。

#13 枠だけのホームページが完成

ひとまず完成したhtmlとcss


<html>
 <head>
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>

  <div class="header">
    header
    <div class="header_contents">
      <div class="logo">logo</div>
    </div>
  </div>

  <div class="contents">
    <div class="visual">
      visual
      <div class="copy">copy</div>
    </div>
    <div class="text_wrapper">
      <div class="text">text</div>
      <div class="menu">menu</div>
    </div>
  </div>

  <div class="footer">
    footer
    <div class="footer_contents">
      ©cri
    </div>
  </div>

 </body>
</html>

.header{
  height:150px;
  margin-bottom:20px;
  border: 1px solid #000;
}
.header_contents{
  margin:0 auto;
  width:980px;
  border: 1px solid #000;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.contents{
  margin:0 auto;
  width:980px;
  border: 1px solid #00F;
}
.visual{
  height:400px;
}
.copy{
  width:300px;
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
.text_wrapper{
  height:200px;
  display:flex;
  justify-content: center;
  border: 1px solid #ccc;
}
.text{
  width:380px;
  border: 1px solid #F0F;
}
.menu{
  width:360px;
  border: 1px solid #0F0;
}
.footer{
  height:120px;
  margin-top:30px;
  border: 1px solid #000;
}
.footer_contents{
  margin:0 auto;
  width:980px;
  text-align: center;
}
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで