Webデザインの教科書
- Web制作 基本編 -
Scroll
  1. ホーム
  2. CSS 基本編
  3. Web制作-基本編

実際に作ってみよう！webデザインの基本レイアウトと作り方

今回は実際にシンプルなWebページを作ってみましょう。

最初から最後まで一通り制作して、作り方の流れを学ぶことが出来ます。

そんなに難しいことはしません。制作時間はおよそ30分ほどです。

実際に制作するページ

制作時間 30分
難易度
使用した
HTMLタグ		 10種類
使用した
CSSプロパティ		 11種類
対応表 パソコン
スマホ

上のようなWebページを作ってみます。

画像をクリックすると、実際に作るページを確認することが出来ます。

シンプルなページなので、そんなに難しくありません。

それではやってみましょう！！

実際に作ってみよう

それでは実際に作ってみましょう。

テキストエディターを起動して入力出来る状態まで準備してください。

まずは、HTMLファイルとCSSファイルを作るとこからいきます。

Webページの基本設定

  1. ファイル名:basic-layout.htmlで作成する。
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="basic-layout.css">
    <title>BASIC DESIGN</title>
    </head>
    <body>

    </body>
    </html>
  2. ファイル名:basic-layout.cssで作成する。
    @charset "UTF-8";
Webページの初期設定
  • HTMLの設定

    HTMLの設定を行います。

    「html」タグや「head」タグの中に、設定を書いていきます。

    • 日本語ページであることを宣言

      「html」タグにlang属性を付けて、日本語のページであることを宣言します。

      英語のページを作成する時は、「en」に変更します。
      <html lang="ja">
      </html>
    • 文字コードの設定

      ページを表示する時の、文字コードを「meta」タグを使って設定します。

      一番文字化けが少ないと言われている「UTF-8」を指定します。

      <meta charset="UTF-8">
    • 表示の仕方を設定

      Webページの表示の仕方を設定します。

      パソコンやスマホなどの画面(ブラウザ)の大きさに合わせて表示するように指定します。

      これを設定することで、簡単なスマホ対応が出来ます。

      <meta name="viewport" content="width=device-width, initial-scale=1">
    • CSSファイルを繋げる

      別で作ったCSSファイル「basic-layout.css」をHTMLの中で読み込みます。

      この時CSSファイルはHTMLファイルと同じところに作成していることを確認して下さい。

      Web練習フォルダ/
       ├basic-layout.html
       └basic-layout.css
      <link rel="stylesheet" type="text/css" href="basic-layout.css">
    • Webページのタイトル

      このWebページの全体のタイトルを設定します。

      ブラウザのタブや検索結果に表示されるため、とても重要な部分です。

      上記の画像の場合では「ここがタイトルだよ」がタイトルとして表示されます。

      今回は「BASIC DESIGN」をタイトルにします。

      <title>BASIC DESIGN</title>
  • CSSの設定

    CSSの設定を行います。

    CSSのファイルの中に、文字コードの設定をして終了です。

    • 文字コードの設定

      CSSファイルの中でも、HTMLと同じように「UTF-8」を指定します。

      @charset "UTF-8";

これで保存して完了です。

もし文字化けする時は、保存する時にテキストエディターの文字コードを違うのかも知れません。

テキストエディター側でも「UTF-8」になっているか確認してください。

Webページの構造

<!DOCTYPE html>
<html lang="ja">
<head>
・・・
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
Webページの構造
header
最初の印象
main
メインの記事
footer
ページの一番下

Webページ全体の構造を作ります。

今回は「header」「main」「footer」の3つの構造を作ります。

  • ヘッダー(header)

    画面の一番上にくる一番最初に表示される部分です。

    Webページの最初の印象になる、とても大切な部分になります。

    綺麗な画像やイラスト、インパクトのある見出しを入れるなど、いろんな使い方が出来ます。

    <div class="header"></div>
  • メイン(main)

    Webページのメインになる記事が入ります。

    画像や動画などを含めながら記事を書いていくと見やすくてわかりやすい記事になります。

    <div class="main"></div>
  • フッター(footer)

    ページの一番下にくる部分です。

    ほとんどのサイトがコピーライトやロゴなど、著作権や権利を明記しています。

    <div class="footer"></div>

これで基本的な構造は完成です。

ここからページ全体を作っていきます。

まずはヘッダーから作っていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
...
</head>
<body>
<div class="header">
<h1>オランダ王国</h1>
<p>
西ヨーロッパにある国で首都は"アムステルダム"で面積はおよそ4万2000km<sup>2</sup>あります。
</p>
<p>
オランダは世界が誇るチーズが有名な国で山羊乳を使ったチーズやスパイスが入ったチーズもあります。
</p>
<p>
参考サイト<a href="https://www.meiji.co.jp/meiji-shokuiku/worldculture/netherlands/" target="olanda">meiji 明治の食育</a>
</p>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
@charset "UTF-8";
/* ここから追記 */
/* ボディー */
body {
font-size: 18px;
margin: 0;
}
/* ヘッダー */
.header {
background: #2a5c84;
color: white;
text-align: center;
padding: 100px 5px;
}
.header a {
color: white;
padding: 5px 10px;
margin: 0 3px;
border: solid 1px white;
border-radius: 10px;
transition: all .5s;
}
.header a:hover {
background: white;
color: #2a5c84;
}
ヘッダーのデザイン
  • ヘッダー

    ヘッダー全体のデザインをします。

    • 背景の色

      背景の色をカラーコードを使って紺色に変更します。

      「background」プロパティの値を「#2a5c84」に指定します。

      .header {
      background: #2a5c84;
      }
    • 文字の色

      文字の色を白に変更します。

      背景を紺色にしたので、「color」プロパティの値を「white」に指定します。

      .header {
      color: white;
      }
    • 文字の中央寄せ

      文字を中央にくるように寄せます。

      「text-align」プロパティの値を「center」に指定します。

      .header {
      text-align: center;
      }
    • 内側に余白を作る

      ヘッダークラスの内側に余白を作ります。

      上下の方向に「100px」左右の方向に「5px」の余白を作ります。

      .header {
      padding: 100px 5px;
      }
    どうして余白を作ったの？
    コンテンツ

    要素の内側に上下左右の余白を作ったのは2つの理由があります。

    • 上下方向の中央寄せのため

      上下の方向にそれぞれ「100px」の余白を作りました。

      これはヘッダー内にある文字が上下方向に中央に来るようにしています。

      正確には上下の余白を作ることで、中央寄せしてるように見せています。

    • 画面が小さくなった時のため

      左右の方向にもそれぞれ「5px」の余白を作りました。

      スマホなどの小さい画面では文字が画面端に寄ってしまうため、読みづらくなってしまいます。

      そこで、左右の方向にも余白を作って画面端から離れるようにしています。

  • ヘッダーのリンク
    maiji 明治の食育

    ヘッダーの中にあるリンクをデザインします。

    • 文字の色

      文字の色を白に変更します。

      アンカーリンクの「a」タグは、初期値で青色が設定されています。

      背景の紺色と色が被ってしまうので、白に上書きしています。

      .header a {
      color: white;
      }
    • 枠線で囲む

      リンクの周りを白の線で枠を作ります。

      リンクであることをわかりやすくする目的で目立つようにします。

      .header a {
      border: solid 1px white;
      }
    • 枠線の角を丸める

      枠線の角を丸めて柔らかい印象にします。

      それぞれの角から「10px」の大きさで丸くします。

      .header a {
      border-radius: 10px;
      }
    • 内側に余白を作る

      リンクの内側に余白を作ります。

      上下の方向に「5px」の余白、左右の方向に「10px」の余白を作ります。

      先ほど作成した枠線と中の文字が被らないようにしています。

      .header a {
      padding: 5px 10px;
      }
    • 外側に余白を作る

      リンクの外側に余白を作ります。

      リンク要素の左右の方向に「3px」の余白を作ります。

      リンク要素の前後の文字との間隔を調整しています。

      .header a {
      margin: 0 3px;
      }
  • リンクのホバーアニメーション
    maiji 明治の食育

    リンクにマウスカーソルを乗せた時にアニメーションします。

    見た目が変化することで、クリックが出来ることを知らせます。

    • アニメーション設定

      「transition」プロパティでマウスを乗せた時のホバーアニメーションを設定します。

      all
      「header a」で指定したすべてのCSSプロパティの値の変化を検知します。
      値に変化があった時は変更前から変更後までを徐々に変化させてアニメーションします。
      .5s
      変更前から変更後までを0.5秒かけて徐々に変化します。
      • 1秒間 = 1s
      • 1.2秒間 = 1.2s
      • 0.2秒間 = 0.2s or .2s(どちらでも可)
      .header a {
      transition: all .5s;
      }
    • ホバー

      リンクにマウスカーソルを乗せた時の動作を設定します。

      今回は背景の色と文字の色を変更します。

      「transition」プロパティが設定されているので、アニメーションしながら色が切り替わります。

      .header a:hover {
      background: white;
      color: #2a5c84;
      }
  • ボディーの設定

    Webページ全体をデザインを決めます。

    「body」タグをCSSで変更します。

    • 文字サイズ

      文字サイズを「18px」に変更します。

      Webページ全体の文字サイズが「18px」になります。

      body {
      font-size: 18px;
      }
    • 外側の余白を消す

      「body」タグの外側の余白を「0」にして、外側の余白を消します。

      body {
      margin: 0;
      }
    bodyに"margin:0"は必要？
    • デザイン的に必要不可欠

      「body」には最初から上下左右に余白が設定されています。

      もしそのままにすると...

      上下左右に余白が入ってしまい、デザイン的に良くありません。

      なので、この白いスペースを消すために「margin」の値を「0」にしてスペースを埋めて消す必要があります。

これでヘッダーの作成は終了です。

次はメインの記事を作成していきます。

今回は画像を使用するので、好きな画像を用意して下さい。

メイン記事の作成

<!DOCTYPE html>
<html lang="ja">
<head>
...
</head>
<body>
<div class="header">...</div>
<div class="main">
<h2>アムステルダム</h2>
<img src="image/amsterdam.jpg" alt="オランダの首都アムステルダム">
<div class="mokuji">
<h3>目次</h3>
<ul>
<li><a href="#amsterdam">アムステルダムについて</a></li>
<li><a href="#cheese">世界が誇るチーズ</a></li>
<li><a href="#hu-sha">チューリップと風車の国</a></li>
</ul>
</div>
<h2 id="amsterdam">アムステルダムについて</h2>
<div class="contents">
<p>
アムステルダムは美しい運河が多い街で特徴的な建物が並んだ風景が印象的です。
</p>
<p>
寒い季節になると凍った運河の上を滑って遊ぶこともあるようです。
</p>
<p>
冬季オリンピックのスピードスケートでオランダ選手が常に上位にいるのもこれのおかげかもしれないですね！！
</p>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
</div>
<h2 id="cheese">世界が誇るチーズ</h2>
<div class="contents">
<img src="image/cheese.jpg" alt="世界が誇るオランダのチーズ">
<p>
オランダのチーズは世界的に知られた産地です。
</p>
<p>
オランダの全土で作られていてオランダの食生活になくてはならない存在です。
</p>
<p>
酪農が盛んな国なので、チーズ以外に牛乳やヨーグルト、バターなどの乳製品も食生活に欠かせません。
</p>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
</div>
<h2 id="hu-sha">チューリップと風車の国</h2>
<div class="contents">
<img src="image/hu-sha.jpg" alt="オランダの風車">
<h3>チューリップ</h3>
<p>
3月後半〜５月前半の期間、広大な公園に広がる数え切れないほどのチューリップ畑を見ることが出来ます。
</p>
<p>
オランダにある世界最大の花の公園「<b>キューケンホフ公園</b>」はチューリップだけでなく様々な花が咲いていて観光に訪れたら一度は行きたい場所です。
</p>
<h3>風車</h3>
<p>
オランダを代表ずるものの一つである風車はさまざまな役割があります。
</p>
<ol>
<li>水を書き出すためにポンプの役割</li>
<li>粉を引いたり、丸太を切ったり、工業用の動力の役割</li>
</ol>
<p>
オランダには今も全土に1000基ほどの風車が残っていて、<b>キンデルダイク</b>にある19基の風車はユネスコの世界遺産にも登録されています
</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
@charset "UTF-8";
/* ここから追記 */
/* メイン */
.main {
background: #2da9af;
padding: 10px 0 40px 0;
}
.main h2 {
color: white;
text-align: center;
margin: 40px 0;
}
.main img {
width: 100%;
}
.mokuji {
background: white;
width: 250px;
margin: 30px auto;
padding: 10px;
border-radius: 10px;
}
.mokuji h3 {
text-align: center;
margin: 0;
}
.mokuji ul {
margin: 10px 0;
}
.mokuji a {
transition: all .5s;
}
.mokuji a:hover {
color: orange;
}
.contents {
background: white;
width: 80%;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
}
.contents p {
padding-left: 5px;
border-left: solid 10px #2da9af;
}
.contents b {
color: orangered;
}
.contents ol {
margin: 10px 0;
}
.circle {
width: 20px;
margin: 40px auto;
}
.circle div {
background: white;
width: 20px;
height: 20px;
margin-bottom: 10px;
border-radius: 100%;
}
メインのデザイン
  • メイン

    メイン全体のデザインをします。

    • 背景の色

      背景の色をカラーコードを使って水色に変更します。

      「background」プロパティの値を「#2da9af」に指定します。

      .main {
      background: #2da9af;
      }
    • 内側に余白を作る

      メインクラスの内側に余白を作ります。

      要素の内側の上に「10px」下に「40px」の余白を作り、左右は余白なしにします。

      .main {
      padding: 10px 0 40px 0;
      }
  • 見出し(h2)

    メインクラスの中にある「h2」タグの見出しをデザインします。

    • 文字の色

      文字の色を白にします。

      背景を水色にしたので、「color」プロパティの値を「white」に指定します。

      .main h2 {
      color: white;
      }
    • 文字の中央寄せ

      文字を中央にくるように寄せます。

      「text-align」プロパティの値を「center」に指定します。

      .main h2 {
      text-align: center;
      }
    • 外側に余白を作る

      見出しの外側に余白を作ります。

      上下の方向に「40px」の余白を作ります。

      .main h2 {
      margin: 40px 0;
      }
  • 画像

    メインクラスの中にある3枚の画像の大きさの指定します。

    • 画像の保存先

      3枚の画像は「basic-layout.html」と同じ階層に「image」フォルダを作成してその中に保存しています。

      Web練習フォルダ/
       ├basic-layout.html
       └image/
        ├amsterdam.jpg
        ├cheese.jpg
        └hu-sha.jpg
      <img src="image/amsterdam.jpg" alt="~">
      <img src="image/cheese.jpg" alt="~">
      <img src="image/hu-sha.jpg" alt="~">
    • 画像の大きさ

      画像の大きさを、親要素の最大まで広げます。

      「width」プロパティの値を「100%」に指定します。

      画像の大きさを「100%」にすることで、画面からはみ出るのを防ぐためでもあります。

      .main img {
      width: 100%;
      }
  • 目次
    目次
    • アムステルダムについて
    • 世界が誇るチーズ
    • チューリップと風車の国

    どんな記事が書かれているのか一目でわかるように、目次を作成してデザインします。

    • 背景の色

      「background」プロパティの値を「white」にして、背景を白に変更します。

      .mokuji {
      background: white;
      }
    • 横幅の大きさ

      目次の横幅の大きさを固定で指定します。

      「width」プロパティの値を「250px」に指定します。

      .mokuji {
      width: 250px;
      }
    • 内側に余白を作る

      目次の内側に余白を作ります。

      上下左右に「10px」の余白を作ります。

      .mokuji {
      padding: 10px;
      }
    • 外側に余白を作る

      目次の外側に余白を作ります。

      目次の上下の方向に「30px」の余白、左右の方向に「auto」にして余白を作ります。

      左右の余白を「auto 」にすることで、目次を画面(ブラウザ)の中央に配置するように自動調整しています。

      .mokuji {
      margin: 30px auto;
      }
    • 目次の角を丸める

      目次の角を丸めて、柔らかい印象にします。

      「border-radius」プロパティの値を「10px」にして角を丸めます。

      .mokuji {
      border-radius: 10px;
      }
  • 目次の見出し(h3)

    目次の見出しをデザインします。

    • 文字の中央寄せ

      文字を中央にくるように寄せます。

      「text-align」プロパティの値を「center」に指定します。

      .mokuji h3 {
      text-align: center;
      }
    • 外側に余白をなくす

      見出しの外側の余白をなくします。

      「h3」タグには初期値で外側の余白が設定されています。

      「margin」プロパティの値を「0」にして余白を消します。

      .mokuji h3 {
      margin: 0;
      }
  • 目次のリスト

    目次のリストをデザインします。

    目次のリストをクリックするとスクロールが出来るリストを作成します。

    • 外側の余白を小さく

      「ul」タグの外側の余白を小さくします。

      初期値の余白は少し大きすぎるので、上下の方向の余白を「10px」に変更します。

      .mokuji ul {
      margin: 10px 0;
      }
    • リストのアニメーション設定

      リストにマウスカーソルを乗せた時のアニメーションを設定します。

      「transition」プロパティを使って、変化対象を「all」変化時間を「0.5秒」に設定します。

      .mokuji a {
      transition: all .5s;
      }
    • ホバー

      リストにマウスカーソルを乗せた時に、文字の色をオレンジ色に変えます。

      .mokuji a:hover {
      color: orange;
      }
メインのデザイン
  • 記事のデザイン

    記事のレイアウトやデザインを設定します。

    • 背景の色

      背景の色を白に変更します。

      「background」プロパティの値を「white」に指定します。

      .contents {
      background: white;
      }
    • 横幅の大きさ

      記事の横幅の大きさを指定します。

      「width」プロパティの値を「80%」に指定して、レスポンシブデザインにします。

      .contents {
      width: 80%;
      }
    • 内側の余白を作る

      記事の内側に余白を作ります。

      要素の内側に上下左右「10px」の余白を作ります。

      .contents {
      padding: 10px;
      }
    • 記事を中央に配置する

      記事の大きさを「80%」に設定したので、記事を中央に設置します。

      「margin」プロパティの値を「auto」にして、中央寄せします。

      .contents {
      margin: 0 auto;
      }
    • 記事の角を丸める

      目次の角を丸めて、柔らかい印象にします。

      「border-radius」プロパティの値を「10px」にして角を丸めます。

      .contents {
      border-radius: 10px;
      }
  • 記事のコメント
    アムステルダムは美しい運河が...
    寒い季節になると凍った運河の...

    記事のコメントをデザインします。

    • 左側に余白を作る

      コメントの左側に「5px」の余白を作ります。

      「padding-left」プロパティで左側だけ余白を作ります。

      あとで左側に太い線を引くので、線から離すために余白を作っています。

      .contents p {
      padding-left: 5px;
      }
    • 左側に太い線を作る

      コメントの左側に太い線を作ります。

      「border-left」プロパティで左側だけ「10px」の水色の線を作ります。

      .contents p {
      border-left: solid 10px #2da9af;
      }
  • 記事のポイント
    「キューケンホフ公園」は...
    キンデルダイクにある...

    記事の中で重要なポイントを色を変えて目立たせます。

    • 文字の色

      記事の中で重要なポイントをオレンジレッドに変更します。

      さらに「b」タグで太文字にします。

      .contents b {
      color: orangered;
      }
  • 番号付きリスト
    1. 水を書き出すために...
    2. 粉を引いたり、丸太を...

    番号付きのリストの外側の間隔を初期値より小さくします。

    • 外側の余白を小さく

      リストの上下の方向の余白を「10px」に変更します。

      初期値の余白は少し大きすぎるので、小さくしています。

      .contents ol {
      margin: 10px 0;
      }
  • 区切りデザイン

    記事との間に3つの白いを縦に並べて、視覚的に区切ります。

    • 全体の大きさ

      3つの白いを囲む、親要素全体の大きさを設定します。

      横幅の大きさを「20px」の大きさに指定します。

      .circle {
      width: 20px;
      }
    • 要素の中央寄せ

      「20px」の大きさの要素を中央に配置します。

      上下の方向に「40px」の余白、左右の方向は「auto」に指定して要素を中央寄せします。

      .circle {
      margin: 40px auto;
      }
  • 白い円の作成

    3つの白いを作成します。

    「circle」クラスの中にある「div」タグを使って白い円を作成します。

    • 円の横幅

      円の横幅を、「circle」クラスと同じ「20px」の大きさを指定します。

      .circle div {
      width: 20px;
      }
    • 円の高さ

      円の高さを「20px」に指定して、正方形を作ります。

      .circle div {
      height: 20px;
      }
    • 背景の色

      背景の色を白に変更します。

      「background」プロパティの値を「white」にして、白い正方形を作ります。

      .circle div {
      background: white;
      }
    • 角を丸めて円にする

      作成した白い正方形の角を丸めて円にします。

      「border-radius」プロパティの値を「100%」に指定して、完全な円にします。

      .circle div {
      border-radius: 100%:
      }
    • 円の間隔を空ける

      作成した白いの間隔を空けます。

      白いの下に、「margin-bottom」プロパティを使って「10px」の余白を作ります。

      .circle div {
      margin-bottom: 10px;
      }

これでメインの記事の作成は終了です。

最後にフッターを作成して完成させましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
...
</head>
<body>
<div class="header">...</div>
<div class="main">...</div>
<div class="footer">
&copy; 2019 BASIC DESIGN
</div>
</body>
</html>
@charset "UTF-8";
/* ここから追記 */
/* フッター */
.footer {
background: #f76560;
color: white;
text-align: center;
padding: 10px 0;
}
フッターのデザイン
  • フッター

    フッターのデザインをします。

    • 背景の色

      背景の色を明るい赤に変更します。

      「background」プロパティの値を「#f76560」にして、白い正方形を作ります。

      .footer {
      background: #f76560;
      }
    • 文字の色

      文字の色を白に変更します。

      背景を明るい赤にしたので、「color」プロパティの値を「white」に指定します。

      .footer {
      color: white;
      }
    • 文字の中央寄せ

      文字を中央にくるように寄せます。

      「text-align」プロパティの値を「center」に指定します。

      .footer {
      text-align: center;
      }
    • 内側に余白を作る

      フッターの内側に余白を作ります。

      上下の方向に「10px」の余白を作ります。

      .footer {
      padding: 10px 0;
      }
  • コピーライト

    フッターの中に、コピーライトを作成します。

    • コピーライトとは？

      コピーライトとは、一番下の「© 2019 BASIC DESIGN」の部分です。

      これはこのサイトで作成された記事や画像、動画などすべてのコンテンツに著作権がありますとわかりやすく明記するためによく書かれます。

    • 書き方
      書き方
      ©2019BASIC DESIGN
      1. コピーライトマーク

        このマークは「Copyright」の最初の頭文字「C」を取ったマークです。

        このマークはキーボードで「&copy;」と入力すると簡単に表示出来ます。

      2. 発行年

        ここには公開した年を書きます。本サイトは2019年に公開したので「2019」と書きます。

      3. 会社名・名前

        ここはなんでもいいのですが、会社でサイトを公開するのなら「会社名」、個人で公開するなら「ご自身の名前」など著作権を持つ会社・名前を書くといいと思います。

      &copy; 2019 BASIC DESIGN
    コピーライトは必要？

    実際は、コピーライトを記述しなくても自動的に著作権は発生します。

    正直あっても無くても変わりません。

    昔からの習慣・風習のような理由で明記してるサイトがほとんどなので、そんな細かく考えることはしなくて大丈夫です。

    参考サイト : LIC

これでWebページは完成です。

最後におまじないを書いてスクロールアニメーションを追加しちゃいましょう。

スムーススクロール

@charset "UTF-8";
/* 一番上に追記 */
html {
scroll-behavior: smooth;
}
スムーススクロール
  • スムーススクロールとは？

    目次のリンクをクリックした時に、その記事のところまでなめらかにスクロールすること。

    目次
    • アムステルダム
    • ...
    • ...
    アムステルダム
    オランダの首都の...
    〜
    〜

    スクロールアニメーションをすることで、下の記事まで移動したことがわかるので、利用者が使いやすくなります。

  • HTMLタグにスタイルを適用する

    おそらくHTMLタグにCSSスタイルを適用することはあまりないと思います。

    このなめらかにスクロースしてくれるCSSプロパティはHTMLタグに適用させないと動作しません。

    html {
    scroll-behavior: smooth;
    }
    対応ブラウザ
    • 使えるブラウザ
      • Chrome
      • Firefox
      • Opera
      • Edge
      • Android系の一部のブラウザ
      Edgeは2020年1月公開のchromiumから有効です。
    • 使えないブラウザ
      • Safari
      • IE
      • Opera Mini
      • iOS系のすべてのブラウザ

    このように、使える環境が2020年1月現在で限られています。

    対応していないブラウザは自動スクロールしなくなるだけなので、今後対応することも考えてCSSを書いておくと良いと思います。

    ブラウザの対応についてはCan I use...で調べることが出来ます。

以上でWeb制作基本編は終了です。

お疲れ様でした！！！

このように基本的なテクニックだけでWebページは作れます。

そんなに難しくないですよね！！

Webページの完成

すべてのHTMLとCSSのコードが下にあります。

このように作成出来ていれば正解です。

確認程度によかったら確認してみて下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="basic-layout.css">
<title>BASIC DESIGN</title>
</head>
<body>
<div class="header">
<h1>オランダ王国</h1>
<p>
西ヨーロッパにある国で首都は"アムステルダム"で面積はおよそ4万2000km<sup>2</sup>あります。
</p>
<p>
オランダは世界が誇るチーズが有名な国で山羊乳を使ったチーズやスパイスが入ったチーズもあります。
</p>
<p>
参考サイト<a href="https://www.meiji.co.jp/meiji-shokuiku/worldculture/netherlands/" target="olanda">meiji 明治の食育</a>
</p>
</div>
<div class="main">
<h2>アムステルダム</h2>
<img src="image/amsterdam.jpg" alt="オランダの首都アムステルダム">
<div class="mokuji">
<h3>目次</h3>
<ul>
<li><a href="#amsterdam">アムステルダムについて</a></li>
<li><a href="#cheese">世界が誇るチーズ</a></li>
<li><a href="#hu-sha">チューリップと風車の国</a></li>
</ul>
</div>
<h2 id="amsterdam">アムステルダムについて</h2>
<div class="contents">
<p>
アムステルダムは美しい運河が多い街で特徴的な建物が並んだ風景が印象的です。
</p>
<p>
寒い季節になると凍った運河の上を滑って遊ぶこともあるようです。
</p>
<p>
冬季オリンピックのスピードスケートでオランダ選手が常に上位にいるのもこれのおかげかもしれないですね！！
</p>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
</div>
<h2 id="cheese">世界が誇るチーズ</h2>
<div class="contents">
<img src="image/cheese.jpg" alt="世界が誇るオランダのチーズ">
<p>
オランダのチーズは世界的に知られた産地です。
</p>
<p>
オランダの全土で作られていてオランダの食生活になくてはならない存在です。
</p>
<p>
酪農が盛んな国なので、チーズ以外に牛乳やヨーグルト、バターなどの乳製品も食生活に欠かせません。
</p>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
</div>
<h2 id="hu-sha">チューリップと風車の国</h2>
<div class="contents">
<img src="image/hu-sha.jpg" alt="オランダの風車">
<h3>チューリップ</h3>
<p>
3月後半〜５月前半の期間、広大な公園に広がる数え切れないほどのチューリップ畑を見ることが出来ます。
</p>
<p>
オランダにある世界最大の花の公園「<b>キューケンホフ公園</b>」はチューリップだけでなく様々な花が咲いていて観光に訪れたら一度は行きたい場所です。
</p>
<h3>風車</h3>
<p>
オランダを代表ずるものの一つである風車はさまざまな役割があります。
</p>
<ol>
<li>水を書き出すためにポンプの役割</li>
<li>粉を引いたり、丸太を切ったり、工業用の動力の役割</li>
</ol>
<p>
オランダには今も全土に1000基ほどの風車が残っていて、<b>キンデルダイク</b>にある19基の風車はユネスコの世界遺産にも登録されています。
</p>
</div>
</div>
<div class="footer">
&copy; 2019 BASIC DESIGN
</div>
</body>
</html>
@charset "UTF-8";
/* HTML */
html {
scroll-behavior: smooth;
}
/* ボディー */
body {
font-size: 18px;
margin: 0;
}
/* ヘッダー */
.header {
background: #2a5c84;
color: white;
text-align: center;
padding: 100px 5px;
}
.header a {
color: white;
padding: 5px 10px;
margin: 0 3px;
border: solid 1px white;
border-radius: 10px;
transition: all .5s;
}
.header a:hover {
background: white;
color: #2a5c84;
}
/* メイン */
.main {
background: #2da9af;
padding: 10px 0 40px 0;
}
.main h2 {
color: white;
text-align: center;
margin: 40px 0;
}
.main img {
width: 100%;
}
.mokuji {
background: white;
width: 250px;
margin: 30px auto;
padding: 10px;
border-radius: 10px;
}
.mokuji h3 {
text-align: center;
margin: 0;
}
.mokuji ul {
margin: 10px 0;
}
.mokuji a {
transition: all .5s;
}
.mokuji a:hover {
color: orange;
}
.contents {
background: white;
width: 80%;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
}
.contents p {
padding-left: 5px;
border-left: solid 10px #2da9af;
}
.contents b {
color: orangered;
}
.contents ol {
margin: 10px 0;
}
.circle {
width: 20px;
margin: 40px auto;
}
.circle div {
background: white;
width: 20px;
height: 20px;
margin-bottom: 10px;
border-radius: 100%;
}
/* フッター */
.footer {
background: #f76560;
color: white;
text-align: center;
padding: 10px 0;
}

ヒツジのサイトを使ってくれてありがとうございます。

よかったらTwitterでシェアしてくれると嬉しいです！！

作ってみよう
CSS 中級編