作成日：2021/04/12　更新日：2022/09/21

#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タグで囲んだ枠はcssによってすべて変更されてしまい、デザインするにはなかなか不便です。 ですので、枠の一つ一つに名前をつけ枠を個別にデザインすることで解決しましょう。

枠に名前を付けるには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;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.visual{
  height:400px;
  border: 1px solid #00F;
}
.copy{
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
.text{

}
.menu{

}
.footer{

}
このような表示になり、幅を指定した枠は左側に寄ります。 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">text</div>
    <div class="menu">menu</div>
  </div>

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

 </body>
</html>



.header_contents{
  width:980px;
}
.contents{
  width:980px;
}
.foter_contents{
  width:980px;
}
cssにも上記のセレクタを追加します。
cssファイルに追加する方法ですが、html文章内でクラス名が出てきた順に追加してけばよいです。
.header_contentsは.headerと.logoの間に出てくるので、cssでもその位置に追加しましょう。
▼解説


.header{
  height:150px;
}
.header_contents{
  width:980px;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.contents{
  width:980px;
}
.visual{
  height:400px;
  border: 1px solid #00F;
}
.copy{
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
.text{

}
.menu{
  
}
.footer{

}
.footer_contents{
  width:980px;
}

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

marginプロパティを使います。margin:0 auto;マージン ゼロ オートと呼びます。
センタリングしたい（中央揃えしたい）要素にmarginを入れてみましょう。 

.header{
  height:150px;
}
.header_contents{
  margin:0 auto; /* ←追加 */
  width:980px;
}
.logo{
  width:200px;
  border: 1px solid #000;
}
.contents{
  margin:0 auto; /* ←追加 */
  width:980px;
}
.visual{
  height:400px;
  border: 1px solid #00F;
}
.copy{
  height:250px;
  margin-top:50px;
  border: 1px solid #000;
}
.text{

}
.menu{
  
}
.footer{

}
.footer_contents{
  margin:0 auto; /* ←追加 */
  width:980px;
}

このような表示になると思います。

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

これぐらいになると、保存してブラウザでリロードしても意図したように表示されないことがあります。
だいたいは 記述ミス によるものです。
ありがちなミスとしては、
  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にはもうひと工夫が必要のようです。 いまは下記のような表示になっていると思います。
縦並びの枠を横並びにしたいときには、2つをさらに大きな枠（wrapperラッパー）で囲ってあげ、displayプロパティをつけることで可能になります。
このように複数の枠をさらに囲ってあげる考え方を「ラッピングする」といいます。
textとmenu枠をtext_wrapperという名前をつけた枠でラッピングし、 cssではdisplayプロパティで横並びにし、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;
}


このような表示になります
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. Homebrewのインストール
  3. Gitでファイルのバージョン管理
  4. Gitを視覚的に確認
  5. Gitでファイルを共有する
  6. Gitでファイルの取り込み

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで。誰でも無料でできます
cbc-study.slack.com 質問の仕方はこちらをごらんください
powerd by logo