株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | HTML基礎 その4

2017.11.14

CATEGORY - web

ひととおり、HTMLとはなんぞや?ってところと、要素の説明、タグの簡単な説明が終わったので、今回は、実際にHTMLでWEBページを作ってみようと思います^^

いちよ、最終的に作るものとしては、うちの会社でリリースしてるアプリ「moco Running」のLPページを作ってみようと思います。

最終的なページは、こんな感じです ↓↓

HTML基礎

※CSSでスタイル(見栄えって感じですかね。。)を指定してるので、とりあえず、今回は、HTMLで文書を構造化していこうと思います。

 

このページで作成する部分のファイルはこちらからダウンロードできます↓↓
HTMLの基礎 ファイル

WEBページの基本的な構造を考える

上の画像を元に、基本的な構造を考えていきましょう^^

HTML基礎

構造的にはこんな感じですかね。

【ヘッダー】
[ロゴ画像]
[メニュー]
【メイン】
[メインスクリーン]
[ABOUT]
[CHARACTOR]
[FAQ]
[DOWNLOAD]
【フッター】

縦に並んでるだけなので、簡単ですね♩

HTMLで構造化していく

それでは、順番にHTMLを書いていきましょう。

ヘッダー

<header>
  <!-- ロゴ -->
  <h1>
    <img src="assets/images/common/logo.png" alt="モコランニング" width="200">
  </h1>

  <!-- メニュー -->
  <nav>
    <ul>
      <li>
        <a href="#">
          ABOUT
        </a>
      </li>
      <li>
        <a href="#">
          CHARACTOR
        </a>
      </li>
      <li>
        <a href="#">
          FAQ
        </a>
      </li>
      <li>
        <a href="#">
          DOWNLOAD
        </a>
      </li>
    </ul>
  </nav>
</header>

ヘッダーは、ロゴとメニューに分かれてる感じですね。
大見出しはロゴになると思うので、ロゴの画像を <h1> にしました。

また、メニューは、<nav> にして、4つのメニューが同列に並ぶので、<li>で書くことにしました。

 

※ちなみに、

<!-- ぺけぺけ -->

の部分は、コメント書きになります。ブラウザ上には表示されません。ソースコード上で、その部分に何が書かれているかをわかりやすくするために、このコメントをよく書きます。

 

メイン:[メインスクリーン]

はい、では、次にメインスクリーンです。

<main> の中に書いていきます。

<main>の中の1セクションと考えれば <section> タグで書いてもいいのかとも思いますが、見出しが特にないので、<div>タグで表すことにします。

<div>
  <img src="assets/images/top/main.png" alt="モコランニング" width="1000">
</div>

メイン:[ABOUT]

ABOUT の項目を作っていきます。見出しがあるので、<section>として書いていきます。

<section>
  <h2>
    <p>ABOUT</p>
    <p>アプリについて</p>
  </h2>
  <div>
    <div>
      <img src="assets/images/top/about_1.png" alt="モコランニング" width="250">
    </div>
    <div>
      <div>
        mocoキャラがランニング中に応援してくれる!
      </div>
      <p>
        1kmごとにお気に入りのキャラが声援を送ってくれるよ!<br>
        お気に入りの声優さんを見つけるのも楽しみのひとつ♩
      </p>
    </div>
  </div>
  <div>
    <div>
      <img src="assets/images/top/about_2.png" alt="モコランニング" width="250">
    </div>
    <div>
      <div>
        ランニングを続けられる機能が満載!
      </div>
      <p>
        ポイントを使って新しいmocoキャラを呼び出そう!<br>
        毎月のランキングでモチベーションもUP!
      </p>
    </div>
  </div>
</section>

こんな感じですかね。
ABOUT の項目が2つ並んでいて、タイトル部分は、<h3>として見出しとして表示しておきます。

メイン:[CHARACTOR]

次は、CHARACTOR の項目ですね。こちらも、ABOUTと同様、<section>として書いていきます。

<section>
  <h2>
    <p>CHARACTOR</p>
    <p>キャラクター紹介</p>
  </h2>
  <ul>
    <li>
      <div>
        <img src="assets/images/chara/icon_1.png" alt="一ノ瀬麻衣" width="220">
      </div>
      <div>
        一ノ瀬麻衣
      </div>
    </li>
    <li>
      <div>
        <img src="assets/images/chara/icon_2.png" alt="平山彩菜" width="220">
      </div>
      <div>
        平山彩菜
      </div>
    </li>
    <li>
      <div>
        <img src="assets/images/chara/icon_3.png" alt="橘あかり" width="220">
      </div>
      <div>
        橘あかり
      </div>
    </li>
    <li>
      <div>
        <img src="assets/images/chara/icon_4.png" alt="ナンナ・リモノフ" width="220">
      </div>
      <div>
        ナンナ・リモノフ
      </div>
    </li>
    <li>
      <div>
        <img src="assets/images/chara/icon_5.png" alt="凛" width="220">
      </div>
      <div>
        凛
      </div>
    </li>
  </ul>
</section>

キャラクターの一覧は、並列なので、こちらも <li> でリストとして書きました。

メイン:[FAQ]

FAQの項目です。
まあ、同様な感じですね。

<section>
  <h2>
    <p>FAQ</p>
    <p>よくある質問</p>
  </h2>
  <ul>
    <li>
      <div>
        Q.アプリを使用するのに費用はかかりますか?
      </div>
      <div>
        A.ダウンロードは無料です。新しいキャラクターを使用するのに費用がかかる場合もあります。
      </div>
    </li>
    <li>
      <div>
        Q.どんな時に応援してくれるのですか?
      </div>
      <div>
        A.スタート時、ゴール時、あとは、1kmごとなどに応援してくれます。
      </div>
    </li>
    <li>
      <div>
        Q.使用するために必要なことはなんですか?
      </div>
      <div>
        A.位置情報の設定をオンにしてください。電波が届かない場所では使用できません。
      </div>
    </li>
  </ul>
</section>

メイン:[DOWNLOAD]

ダウンロード部分は、AppStoreのボタンを置くだけですね。

<section>
  <h2>
    <p>DOWNLOAD</p>
    <p>ダウンロード</p>
  </h2>
  <div>
    <img src="assets/images/common/download.svg" alt="ダウンロード" width="300">
  </div>
</section>

あ。ちなみに、appleのサイトから、ダウンロード画像をダウンロードできますが、svg画像になってます。
pngやjpg と違って、svg画像は、画像を拡大しても、画像が劣化して表示されないので、きれいに表示されます。

フッター

最後に、フッターを配置します。

<footer>
  <p>&copy; モコランニング</p>
</footer>

コピーライトだけ書いてあるだけです。
ちなみに、HTMLではいろいろな特殊文字を表すことができます。
特殊文字を書くときは、”&”と”;”で囲んで書きます。

いろいろあるので、どんなのがあるのか知りたい人は、「HTML 特殊文字」とかでググってみてくださいw

HTMLでの構造化が完了

以上で、ひととおり、HTMLでの構造化が完了しました。

では、こちらのファイルを .html で保存して、ブラウザにドラッグアンドドロップしてみてください。

HTML基礎

こんな感じで表示されたかと思います。

HTML構造化のまとめ

今回で、ひととおり、HTMLの基礎は完了です^^
ざっくりHTMLとはどういうものなのかという部分がわかったでしょうか。

基本は、HTMLで、文書構造を定義する!という部分を理解していただければ大丈夫かと思います。
あとは、いろいろなタグを使って、肉付けしていくだけなので。

次回からは、WEBページのスタイル(見栄え?)を指定する CSS について学んでいきたいと思います。

それでは。

今回のポイント

  1. HTMLを書く前に、WEBページの基本的な構造を考える!
  2. HTMLはWEBページの文書構造を定義していくだけ!

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP