ランディングページを作りたい。HTML5のおさらいです。

いつもありがとうございます。前回(2020/5/7)、ファイル名と拡張子の付け方、タグの種類を簡単に説明しました。続きからやっていきたいと思います。

PCでHTMLをつくるに"テキストエディタ"と"ブラウザ"の二つが必要となります。テキストエディタは「メモ帳」でもOKです。ブラウザは「Google chrom」がよいです。スマホ画面の確認も簡単にできるためです。

基本的な枠組み

HTML基本構造

上記のように<html>開始終了タグの大きな枠と<head>開始終了タグ、<body>開始終了タグの小さな枠それぞれ2つが基本的な枠です。

・上記、枠の内容です。(<head>開始終了タグ内にPCやスマホなどブラウザへの情報を設定します。<body>開始終了タグ内にブラウザに表示される情報を書き込んでいきます。)
    <!DOCTYPE html>
    <head>                     
          [ここにPCやスマホなどブラウザへの情報を設定する]
    </head>
    <body>
          [ここにブラウザに表示される内容を書いていく]
    </body>
    </html>

<head>開始終了タグに設定する情報は以下のとおりです。(今回は初心      者向けのため簡単にします。)
    <meta charset="UTF-8"> ・・・文字コードUTF-8で表示する(文字化けを                                                           防ぐ)                                                              <title>〇〇</title>   ・・・・・Google chromのタブに表示される文字          ※順番は<meta>→<title>です。     

<body>開始終了タグ内を3つに分ける。

body_構造

上記<body>の内容です。
    <body>
       <header>
           [ここに一番最初に表示される個所としてタイトルなどを書きます。]
       </header>
       <main>
           [ここに本文などを書きます。]    
       </main>
       <footer>
           [ここにコピーライトや会社名などを書きます。]
       </footer>
    </body>

このようにだいたいの枠組みは作っていきます。本日は一旦ここまでといたします。次回はもう少し具体的にHPを作っていきたいと思います。

この記事が気に入ったらサポートをしてみませんか?