公開記事

フリーランスになりたい。 サービスを作りたい。
すべての道を一緒に考え、 支援するスキルアップ × ライフアップスクール

  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント
  • WEBデザイナー
  • UI
  • UXデザイナー
  • 事業デザイナー
  • WEBディレクター
  • 起業家
  • エンジニア
  • WEBマーケター
  • 新規事業コンサルタント
  • WEBコンサルタント

DAY.3「HTMLの基本」

前回はVisual Studio CodeでHTMLを表示させるところまでやりました。
今回は、もう少しHTMLの書き方について、掘り下げていきます。

では、はじめていきましょう。

目次

  1. HTMLを主に書いていくエリア
  2. HTMLコーディング = タグで意味づけする
  3. たくさんのタグがある
  4. 実際に書き足して見よう
  5. もし、レイアウトが崩れていたら
  6. 運営サービス

HTMLを主に書いていくエリア

前回、下記のようなソースコードをエディタにコピーして頂きました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <meta name="description" content="ディスクリプション">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>



</body>
</html>

基本的に「サイトとして表示される部分」は<body>〜</body>の間です。
なので、下記のタグを<body>〜</body>の間に書きました。

<h1>サンプルテンプレート</h1>

その他の場所は、基本、サイトとしては表示しないと考えてください。
ただ、無意味な内容というわけではありません。
重要な情報を含んでいますので、また改めて説明します。

HTMLコーディング = タグで意味づけする

HTMLのコーディングは、文字や画像を「タグ」で囲んでいくことにより、「意味づけ」していく作業です。

例えば、先程「サンプルテンプレート」を「h1」というタグで囲みました。h1には「大見出し」という意味があります。つまり「h1で囲まれた『サンプルテンプレート』という文字列は、このエリアにおける大見出しだよ」という意味づけをしたことになります。

なお内容を「囲んで」意味づけするという形式上「はじまりのタグ」と「おわりのタグ」に分かれることになります。それぞれタグは<>で表現しますが「おわりのタグ」には 「 / 」 がつきます。

改めて下記のタグを見てください

<h1>サンプルテンプレート</h1>

おわりのタグには / がついていることがわかるでしょう。

そして、HTMLによる意味付けを、コンピューターやブラウザは、しっかり理解しています。もちろん、WEBサイトを検索する時に使う「Google」や「Yahoo!」も理解しています。しっかり意味づけができていると、GoogleやYahoo!を使って、情報が探しやすくなるんですね。

なお、WEBサイトを探す時に使う、GoogleやYahoo!のようなサービスを「検索エンジン」と呼びます。

たくさんのタグがある

もちろん、タグは「大見出し」だけではありません。

「文章」を表すタグや 「リスト」を表すタグ、「コンセプトやサービス、会社概要、商品一覧など、それぞれの情報がまとまったセクション」を表すタグなど、たくさんのタグが用意されています。

それらを適切に使って、WEBサイトの情報に「意味」をつけることができます。いくつか、紹介します。

<p>事業の作り方から、WEB制作の技術まで、すべて学ぶことができます。</p>

上記は「文章」を意味します。
主にじっくり読ませる内容が入ります。​

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

上記は「リスト ( 箇条書き ) 」を意味します。

「ul」で箇条書きの内容全体を囲み、それぞれの項目を「li」で囲みます。
この2つはセットで使われますので、どちらが欠けてもいけません。
また、ulとliの間には他のタグは入れてはいけません。

そして、ulと似たタグにolというタグがあります。

<ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ol>

リストの「連番バージョン」です。

上から順に、各項目の頭に1からはじまる連番が表示されます。これもまた、olとliはセットになっていて、どちらが欠けてもいけません。また、olとliの間には他のタグは入れてはいけません。

<a href="https://uptick.ink/" target="_blank">UPTICK</a>

上記は「リンク」を意味します。

href=””の中にリンク先のURLが入ります。 さらに、target=””の中には_self ( 同じ画面で開く ) _blank  ( 別画面で開く )を主に使います。基本的には外部サイトに飛ぶ時_blankを使い、同じサイト内に飛ぶ時は _selfです。

<h2>小見出し</h2>

上記は、見ての通り「小見出し」です。

大見出し「h1」があるエリアの中で、さらに内容が分かれる時に「h2」が入ります。hタグは1〜6まで用意されています。

同じページ内において、h2があるエリアの中で内容が分かれるならh3。h3の中で、さらに内容が分かれるならh4。というように、中に入れば入るほど、数字があがっていくという指定方法です。

例えば「サービス」という大見出しがあったとします。サービスのコンテンツ内で「WEB制作」「マーケティング」という2つのサービスに分けて説明する時などは「WEB制作」「マーケティング」がh2になります。

そして、さらに「WEB制作」エリア内で「デザイン」「コーディング」に分けて説明するとしたら「デザイン」「コーディング」がh3になります。

図にすると一目瞭然ですね。

実際に書き足して見よう

まず、先日、保存したHTMLファイルを開きましょう。

Visual Studio Codeを開き、左上の「File > Open」をクリック。

index.htmlを選択し「開く」ボタンを押します。

すると、LV.1で保存した内容が表示されるはずです。

開いたら、今後は<body>〜</body>の間に、今度はコピー&ペーストではなく、自分の手で、1文字ずつ、次のソースコードを打ち込んでみてください。

<h1>サンプルテンプレート</h1>
<p>練習用データを作っています。</p>
<h2>小見出しです</h2>
<p>1文字1文字、丁寧に、慎重に打ち込んでください。</p>
<a href="https://uptick.ink/" target="_blank">詳細はこちら</a>
<h3>ありがちなミス3つ</h3>
<ul>
    <li>誤字脱字</li>
    <li>閉じタグがない</li>
    <li>余計なスペースが入っている</li>
</ul>

打ち込んだら、保存して、ブラウザで確認してみましょう。
ブラウザで確認する方法は、LV.1を参考にしてください。
すると、下記のように表示されるはずです。

もし、レイアウトが崩れていたら

自分の手で文字を直接ソースコードを打ってみて、万が一、レイアウトが崩れたり、書いたはずなのに表示されない場合は、下記の3つのミスが無いか、目を凝らして確認しましょう。

  1. 誤字脱字がないか
  2. 閉じタグを忘れていないか
  3. 時計なスペースなどが入っていないか
  4. 保存を忘れていないか

今の段階でうまくいかないとしたら、大抵、この4つのどれかが原因です。

また、この4つは初心者によくありがちなミスです。
1文字1文字丁寧に打ち込んでいくことを意識しましょう。

それでも想定どおりにならないなら、改めて目を凝らして見直してみてください。凡ミスがあるはずです。

今回はここまでとして、次回は、HTMLの他のタグについて、より詳しく進めていきます。

フリーランスになりたい。WEBなど使ってサービスを作りたい。
すべての道を一緒に考え、支援するスキルアップ × ライフアップスクール

専属メンターが、あなたのキャリアから学習内容まで一緒に相談し考えます。

すでに自己実現の成功を収めた、経験豊富な専属メンターが、あなたのキャリアや学習について相談にのります。そして最短で成長し、理想を達成するためのアドバイスを提供してくれるでしょう。彼らはあなたの人生とスキルにおいて、最高の相談役となり、魅力的な未来を歩む手助けしてくれます。

詳しく見てみる!

スキルアップ×ライフアップ公開講座

OPEN COURSE

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

10年後「新時代でも生き残る」WEBクリエイターへの最新ロードマップはこれだ!

こんにちは。uptick運営チームのたきです。 これからWEBクリエイターになりたい方や、学んでいるけど、これからどう進めば良いか迷われている方が、たくさんいらっしゃると、お伺いしました。そこで、これまでの経験と今の時代 […]

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

今後のWEBクリエイターに必須の視点。STEAM教育とは何か。

こんにちは、皆さん。uptick運営チームの上山です。 今日は、STEAM教育について学びましょう。STEAM教育って聞いたことありますか? Sは科学(Science)、Tは技術(Technology)、Eは工学(Eng […]

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

徹底解説! 最速で「フリーランスになれる」スクールとは何か。

はじめまして。uptick運営チームの南と申します。 みなさんの中には「どうすれば最も早くスキルアップできるのか」「どうすればフリーランスに最速でなれるのか」お悩みの方もいらっしゃるのではないでしょうか。 そんな中で、ス […]

uptickが次世代のWEBクリエイター育成スクールである理由

uptickが次世代のWEBクリエイター育成スクールである理由

こんにちは。uptick運営チームの、たまです。 僕たちは、uptickを立ち上げるまでに、9年、クリエイターや起業家人材の育成について、数々のプロジェクトを実践しながら研究してきました。だからこそ、uptickのシステ […]

uptickってどんな人がやってるの?これまで辿った道のりも解説!

uptickってどんな人がやってるの?これまで辿った道のりも解説!

はじめまして! uptick運営チームの岩瀬と申します。 正直、私たちは特にインフルエンサーとして名をあげているわけでもなく、知名度もまだまだ無いので一見「この人たちは誰?」「uptickって、どんな人がやっているの?」 […]

どのプランを選べばいい? プラン参考ケーススタディ集!

どのプランを選べばいい? プラン参考ケーススタディ集!

uptickをご検討頂いている皆様、興味を持っていただき、本当にありがとうございます! uptickは、すべての生徒に専属メンターがつき、すべてのカリキュラムを個人のゴールから逆算した「オーダーメイド」で構築します。ゴー […]

もっと講座を見る

お気軽に無料相談にお越しください!
もちろん、キャリアや学習ロードマップについての相談もさせて頂きます!