Programming

【超初心者向け】HTML/CSS入門テキスト版【前半①〜⑩】

HTML_CSS入門 HTML編

 

YouTube動画で解説するHTML/CSS入門のテキスト版です(`・ω・´)!

 

【HTML/CSS入門①】HTMLとは?環境構築からファイル作成まで解説!

HTML_CSS入門① HTMLとは?

まずは、HTMLについて、理解を深めていきましょう。

 

▼YouTube動画はこちら

HTMLとは?何の略称なの?

 

HTMLとは、Hyper Text Markup Languageのことです。

Languageは「言語」という意味ですが、、、他の部分がちょっとよく分からないですよね。

 

Hyper Text(=ハイパーテキスト)と、Markup(=マークアップ)について、もう少し深掘りしていきます。

 

Hyper Textとは?

ハイパーテキストは、ハイパーリンクを使えるテキストのことです。

もっと簡単にいうと、ハイパーテキストはリンクが使えるテキストですね。

 

たとえば、紙とペンで書くテキストは、リンク機能はついていないですよね。

それに対して、いま読んでいるようなネット上の記事は、以下のようにリンク機能をつけられます。

≫参考 : 早くもチケット待ち5時間…再開が決まったディズニーランドに様々な声。

 

このリンクを開くと、NAVERまとめの記事に飛んで、以下のようなテキストが書かれています。

ハイパーリンク 例

そして、出典の部分をクリックすると、さらに次のページへ行けるようになっています。

これが、ハイパーリンクを持ったテキストです。

 

つまり、ハイパーテキストとは、ネット上で公開されているテキストのことですね。

難しいことを考えずに、「ネット上のテキストのことを言っているんだ〜」という認識で大丈夫ですよ。

 

Markupとは?

Markup(=マークアップ)とは、文字どおりマークをつけてあげることです。

もうちょっと正確にいうと、テキストにタグ付けすることです。

 

少し具体例を見てみましょう。

<h1>サンプルの文章</h1>

 

上記のように、「サンプルの文章」の前後に、<h1></h1>が付いています。

こんな感じで、ネット上でキレイに表示したいテキストの前後に、タグ付けしてあげることをマークアップと言います。

<h1>の詳しい解説は、後ほど紹介していきますね。

 

HTMLの特徴

 

以下の2つあります。

  • Webサイトを作るための言語
  • 初心者でも独学しやすい

 

順番に見ていきましょう。

 

Webサイトを作るための言語

 

HTMLは、テキストをWeb上でキレイに表示するための技術です。

ゆえに、Webサイトを作るときに使われる言語になります。

 

ここでは大きく「Webサイト」とひとまとまりにしていますが、Webアプリも同様です。

 

Webアプリ例① : メルカリ

メルカリ

≫参考 : メルカリ

 

  Webアプリ例② : Twitter

Twitter

≫参考 : Twitter

 

普段スマホのアプリで使っているようなメルカリ・Twitterは、Web上で動くアプリケーションもあります。

そして、Web上で動くアプリは、HTML/CSSが使われるわけですね。

 

初心者でも独学しやすい

 

HTML/CSSは、プログラミング初心者にピッタリの言語です。

 

その理由は、以下のとおり。

  • 目に見えるので、勉強していて楽しい
  • 目に見えるので、直感的で分かりやすい
  • HTML/CSSで挫折する人が少ない

 

“プログラミング”と聞くと、やはり「難しそう」といったイメージを持ちますが、HTML/CSSは直感的で分かりやすいです。

ゆえに、挫折する人が少ないのも特徴。

プログラミングを勉強したいと思ったら、まずはHTML/CSSに入門するので間違えないでしょう。

 

HTML/CSSに必要なもの

 

結論、以下の2つです。

  • ブラウザ : HTMLを表示するもの
  • エディター : HTMLを書くもの

 

要するに、エディターでHTMLを書いて、ブラウザで結果を表示するってことですね。

そして、それぞれのおすすめは以下です。

 

下の画像で言うと、

  • 右側 : Visual Studio Code
  • 左側 : Google Chrome

ですね。

Google Chrome VSCode

これだけあれば、HTML/CSSの勉強を始められます。

 

しかも、どちらも無料です。

 

HTMLファイルの作り方

 

HTMLを書くには、HTMLファイルを作成する必要があります。

Excelを使うときに、〇〇.xlsmというファイルを準備するのと同じですね。

 

今回は、Visual Studio Codeでファイル作成する方法を紹介していきます。

 

STEP① : Visual Studio Codeを開く

 

まずは、Visual Studio Codeを開きましょう。

Macをお使いの方は、アプリケーションにあるVisual Studio Codeをダブルクリックします。

HTMLファイル 作り方1

 

アプリケーションの場所が分からない場合には、画面右上の虫メガネをクリックしましょう。

HTMLファイル 作り方2

 

そうすると、以下のように検索する画面になるので、”Visual Studio Code”を入力します。

HTMLファイル 作り方3

 

Windowsを使っている場合は、画面左下のWindowsマークから検索できます。

 

Visual Studio Codeを開いたら、ディスクトップでフォルダを作成しましょう。右クリックすると、フォルダを作成できます。

HTMLファイル 作り方4

 

ファイル名はなんでもOKですが、今回はhtml_lessonにしておきましょう。

HTMLファイル 作り方5

 

フォルダの作成が完了したら、作成したフォルダをVisual Studio Codeに、ドラック&ドロップします。

※フォルダを長押ししながら、Visual Studio Codeに持っていくだけです!!

HTMLファイル 作り方6

 

そうすると、Visual Studio Codeの左側が少し変わっているはずです。

いくつかアイコンが出ているはずなので、一番左をクリックしてファイルを作成しましょう。

HTMLファイル 作り方7

 

ファイル名は、index.htmlにしておきます。

HTMLファイル 作り方8

 

ファイル名を入力できたら、以下のような画面になり、ちゃんとHTMLファイルを作成できているはずです。

HTMLファイル 作り方9

 

一応、先ほど作成したフォルダを見てみます。

HTMLファイル 作り方10

 

しっかりファイル作成できていますね!

これで、HTMLの勉強をする準備が整いました。頑張ってHTMLを勉強していきましょう(`・ω・´)!

 

【HTML/CSS入門②】HTMLの構造を理解しよう!

HTML_CSS入門② HTMLの構造

▼YouTube動画はこちら

 

HTMLは、構造が決まっています。

 

先にコードだけ書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>
</html>

 

Webページを作っていくとき、上記の構造でコードを書いていく感じです。

 

一見すると複雑なように見えますが、大枠は以下のようになっています。

<!DOCTYPE html>
<html lang="ja">

</html>

 

  • <!DOCTYPE html> : ドキュメント(=ファイル)がHTMLであることを表す
  • <html></html> : このタグの中に、コードを書いていく

上記のとおり。

 

<!DOCTYPE html>は、おまじないのようなものなので、気にする必要はありません。

実際のコードは、<html></html>に書いていけばOKで、シンプルにすると、これだけのことです。

 

それでは、さらに<html></html>の中身を見てみましょう。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>

 

こちらも、シンプルにすれば、2つのタグが使われているだけです。

  • <head></head> : 本文には含まない情報を書いておく
  • <body></body> : HTMLのコードを書いていく

上記のとおり。

 

<head></head>の中には、いくつかタグが含まれていますが、これはおまじないだと思えば大丈夫です。

なので、HTMLを書いていくときは、基本的に<body></body>で書いていけばOKということになります。

※`<head></head>`については、CSSを活用する後半になると活躍してきます。

 

【HTML/CSS入門③】見出し(h1〜h6)を作ってみよう!【ちょっとずつSEO対策】

HTML_CSS入門③ 見出し

▼YouTube動画はこちら

 

それでは、少しずつコードを書く練習をしてみましょう。

まずは以下のコードをVisual Studio Codeで書いてみましょう。

<h1>テキストテキストテキスト</h1>
<h2>テキストテキストテキスト</h2>
<h3>テキストテキストテキスト</h3>
<h4>テキストテキストテキスト</h4>
<h5>テキストテキストテキスト</h5>
<h6>テキストテキストテキスト</h6>

 

HTML入門3 見出し

上のような結果になります。

 

この<h1><h6>は、見出しタグと呼ばれるものです。

通常の文章とは違って、見出しをつけたいときに使います。

 

たとえば、こんな感じです。

<h2>プロフィール</h2>
<h3>趣味</h3>
<h3>仕事</h3>

 

プロフィールという<h2>があって、それに関連する「趣味」とか「仕事」を<h3>にしていきます。

 

  見出しの注意点

  • <h1>は、1ページに1つまで
  • <h1>から順番に使っていく

上記が、見出しを使うときの注意点です。

 

基本的に、<h1>は1ページに1つまでにしましょう。

Webページを作るのであれば、サイトのタイトルが<h1>になります。

<h1>〇〇のサイト</h1>
<h2>プロフィール</h2>
<h3>趣味</h3>
<h3>仕事</h3>

 

なお、<h2>以降のタグは、複数使っても問題ありません。

ただ、<h1>から順番に使うようにしましょう。

 

以下のように、<h3>を使ってから<h2>を使うのは、NGな例です。

<h3>名前</h3>
<h3>年齢</h3>
<h2>プロフィール</h2>
<h3>趣味</h3>
<h3>仕事</h3>

 

  見出しを順番に使うべき理由

それは、ページの構造を分かりやすくするためです。

とはいえ、普通に見ただけじゃ、どれがどの見出しかなんてわからないですよね。

 

たとえば、この記事でも見出しを使っていますが、「いま<h2>を使っているんだな〜」なんて分かりません。

では、誰にとって分かりやすい構造にするのかといえば、それはGoogleのロボットです。

 

Google検索すると表示されるページは、すべてGoogleのロボットによって把握されています。

そして、このロボットに”良いページである”と判断されると、検索上位にあがりやすくなります。

 

この検索上位にあげる技術をSEOといい、正しいタグの使い方は、SEO対策で必須の項目になります。

 

ちょっと難しい話かもしれません。

今はとりあえず「順番に見出しを使っていけば良いんだ」と把握しておきましょう。

 

【HTML/CSS入門④】段落(p)を使って、テキストを表示しよう!【頻出】

HTML_CSS入門④ 段落

▼YouTube動画はこちら

 

Webページを作るとき、見出しだけでは成立しません。

普通のテキストを入力するには、<p>タグを使います。

<h2>テキストテキストテキスト</h2>
<p>テキスト1</p>
<p>テキスト2</p>
HTML入門 段落

 

上記のとおりです。

比較のために<h2>も書いていますが、明らかに大きさが違いますね。

<p>タグは、1つ使うごとに改行されるようになっています。

 

さらに具体的な使い方を書くと、以下のようになります。

<h2>プロフィール</h2>
<p>私について、紹介します。</p>
<p>簡単なプロフィールだよ!</p>
<h3>名前 : はやたす</h3>
<p>私はYouTubeでHTML/CSSを教えています。
<h3>好きな女優 : 浜辺美波</h3>
<p>可愛すぎ。
HTML入門 段落

こんな感じで、見出しタグと合わせてあげると、かなりWebページっぽくなりますよね。

見出しタグの下に、細かい文書を書きたいと思ったら、<p>タグを使うようにしましょう。

 

【HTML/CSS入門⑤】画像(img)を使って、サイトらしくしよう!

HTML_CSS入門⑤ 画像

▼YouTube動画はこちら

 

ここまで、主にテキストの書き方について学んできました。

でも、Webページには、画像が使われていることが多々あります。

 

HTMLで画像を表示するには、以下のように書いてあげます。

<img src="画像のファイル名" alt="画像が表示されなかったときの文章">

上記のとおり。

srcの中には画像のファイル名を書いてあげます。

 

さらに、ページを見ているユーザーによっては、画像が表示されない場合があります。そんなときのためにaltで予備のテキストを書いておきましょう。

※ちなみに、これはSEO対策にもなったりします。

 

具体的な例で解説するなら、以下の感じです。

<h2>仕事について</h2>
<img src="job.jpg" alt="仕事に関する画像">
HTML入門 画像

こんな感じで、<h2>で書いていた文字の下に、画像が表示されています。

なお、今回は同じフォルダ内に画像があったので、src="job.jpg"と書いていました。

HTML入門 画像

もし違うフォルダに画像が入っていたら、、、以下のようになります。

<img src="フォルダ名/job.jpg" alt="仕事に関する画像">

 

同じフォルダ内に画像がある場合、フォルダ名は省略して書けます。

なので、今回はフォルダ名が不要でした。

 

おそらく、HTML/CSSを勉強していくと、画像はimagesとかimgといったフォルダの中に入れるはずです。

そうすると、以下のようになります。

<img src="images/job.jpg" alt="仕事に関する画像">
<img src="img/job.jpg" alt="仕事に関する画像">

 

このimg/job.jpgをPATHと呼んだりします。

頭の片隅に入れておきましょう!

 

【HTML/CSS入門⑥】リンク(a)を使って、他のサイトにアクセスできるようにしよう!

HTML_CSS入門⑥ リンク

▼YouTube動画はこちら

 

HTMLは、リンク機能を持つテキストでした。

そんなリンクの使い方は、以下のとおりです。

<a href="リンク先のURL">テキスト</a>

上記のとおり。

 

hrefの中にリンク先のテキストを書いていきます。

 

具体的に<a>を使ってみると、以下のようになります。

<p>私のブログは<a href="https://tech-diary.net">こちら</a></p>
HTML入門 リンク

青くなっている部分がリンクです。

このリンクをクリックすることで、他のページにアクセスできるようになります。

 

他にも、あとで学習するCSSを使えば、<a>タグを使ってボタンを作成できます。

<a>タグは使う機会が多いので、しっかり書き方をおさえておきましょう。

 

【HTML/CSS入門⑦】リスト(ul, li)で箇条書きを上手く活用しよう!

HTML_CSS入門⑦ リスト

▼YouTube動画はこちら

 

ここまで、Web上で文章を書くためのタグが多かったですが、たまには箇条書きを使いたいときもあるかと思います。

 

箇条書きを使うには、以下のように書きます。

<ul>
  <li>浜辺美波</li>
  <li>玉城ティナ</li>
  <li>小芝風花</li>
</ul>
HTML入門 リスト

こんな感じで、<ul>を使うと先頭に点がついたリストを作成できます。

 

先頭に番号がついた箇条書きを使うなら以下です。

<ol>
  <li>浜辺美波</li>
  <li>玉城ティナ</li>
  <li>小芝風花</li>
</ol>
HTML入門 リスト

あとで紹介するCSSを使えば、点や数字を外した箇条書きも作成できます。

 

ちょっとテキストを書く方法を整理しましょう。

  • <p>タグ : 文章を書く
  • <ul>または<ol>タグ : 箇条書きを使う

上記のとおり。

基本的には<p>タグを使ってあげて、箇条書きしたいときだけ<ul><ol>を使っていきます。

 

  <ol>と<ul>の違い

<ul><ol>って、ちょっとややこしいですよね。

でも、なんの略なのか知っておけば、ハッキリ分かるようになります。

  • <ul> : unorderd list(順序のないリスト)
  • <ol> : ordered list(順序のあるリスト)

上記のとおり。

 

こうやって意味を考えると、分かりやすいですよね。

HTMLのタグには、必ず意味があります。「ちょっと覚えられないな…」と思ったら、意味を考えてみるのがおすすめですよ!

 

【HTML/CSS入門⑧】表(table)を使って、分かりやすく情報をまとめよう!

HTML_CSS入門⑧ テーブル 表

▼YouTube動画はこちら

 

料金表とか、バスの時刻表は、箇条書きよりも<table>を使うのがベターです。

ちょっとコードがメンドイですが、表の作り方は以下になります。

<table border="1">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>仕事</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>趣味</td>
    <td>旅行</td>
  </tr>
  <tr>
    <td>好きな女優</td>
    <td>浜辺美波</td>
  </tr>
</table>
HTML入門 テーブル

 

ここで登場したタグをおさえておきましょう。

  • <tr> : table row(テーブルの行)
  • <th> : table header(ヘッダー部分、カラム名)
  • <td> : table data(テーブルの中身)

上記のとおりです。

 

コードだと少し見づらいのですが、、、分解すると分かりやすいです。

tr th th th(←見出し)
tr td td td
tr td td td

要するに、上記のように作ってあげればOKなわけですね。

 

また、<table>のままだと、線が表示されません。

 

そのため、<table border="1">と書くことで、線のついた見やすい形になります。

 

【HTML/CSS入門⑨】フォーム(form)の見た目を作成して、お問い合わせする場所を作ろう!

HTML_CSS入門⑨ フォーム

▼YouTube動画はこちら

 

Webサイトを見ると、よくお問い合わせする場所がありますよね。

<form>を使えば、お問い合わせフォームを作成できます。

<form action="form.php" method="POST" name="form-name">
  <input type="text" name="field-name">
  <input type="submit" value="送信">
</form>
HTML_CSS入門 フォーム

ちょっと複雑になってきたので、1つずつ分解して解説します。

 

<form>タグ

 

まずは、<form>タグの中身です。

<form action="form.php" method="post" name="form-name"></form>

 

分解すると、以下のとおり。

  • action : フォームに書かれた情報を渡すphpファイルを指定する
  • method : フォームに書かれた情報の「渡し方」を指定する(ほぼ”post”です)
  • name : フォームの名前。ご自由にどうぞ。

 

methodについては、ほぼ”post”を使うと考えて問題ないです。

また、nameも自分で好きな名前を決めればOKですね。

 

問題はactionなのですが、、、これはPHPを学習していないと、ちょっと難しいです。

本来、お問い合わせフォームに書かれた情報は、サーバーという場所に送信されます。

そして、そのサーバー側で動かしておくプログラムが、PHPで書かれている感じです。

 

なので、actionではPHPファイルの名前を指定しています。

※なお、WebサイトならPHPですが、WebアプリならRubyやPythonなど、サーバー側で動くプログラミング言語はたくさんあります。

 

今はとりあえず、「PHPファイルの名前を指定すれば良いんだな」と認識しておきましょう。

 

<input>タグ

 

<input>タグは、色々な種類があります。

<form action="form.php" method="POST" name="form-name">
  <input type="text" name="field-name">
  <input type="search">
  <input type="email">
  <input type="tel">
  <input type="url">
  <input type="submit" value="送信">
</form>

“name”は省略していますが、上記のとおり。

 

画像で確認すると、以下のようになります。

HTML_CSS入門 フォーム

type="submit"以外は、すべて同じ形で表示されていますね。

たとえば3番目のtype="email"で普通に文字を入力すると、@マークを含めるように怒られます。笑

HTML_CSS入門 フォーム

ただ、これだけだと、すべて同じ見た目なので、間違えて入力しても仕方なしですよね。

そんなときのために、<label>を使います。

 

<input>タグと<label>タグ

 

<label>を使った書き方は、以下のとおりです。

<form action="form.php" method="POST" name="form-name">
  <label for="text">テキスト:</label>
  <input type="text" id="text">
  <br>
  <label for="search">検索:</label>
  <input type="search" id="search">
  <br>
  <label for="mail">メールアドレス:</label>
  <input type="email" id="mail">
  <br>
  <label for="tel">電話番号:</label>
  <input type="tel" id="tel">
  <br>
  <label for="url">URL:</label>
  <input type="url" id="url">
  <br>
  <input type="submit" value="送信">
</form>
HTML_CSS入門 フォーム

<label for="xxx"><input id="xxx">が紐づくようになっています。

こうやって紐づけておくと、テキストの部分をクリックしてもフォームを選べます。

HTML_CSS入門 フォーム

※画像だと、ちょっと分かりづらいですね。ぜひお手元のPCにてご確認ください。

 

<input><label>は頻出項目なので、しっかりおさえておきましょう。

 

【HTML/CSS入門⑩】ブロック要素(div)で、要素をひとまとまりにしよう!

HTML_CSS入門⑩ ブロック

▼YouTube動画はこちら

※7/10アップ

 

今まで学んできたタグは、言ってみればどれも独立していました。

<h2>で書いた部分は見出しだったし、<p>タグで書いた部分は段落になっていましたよね。

 

ただ、このあとCSSを学んでいくと「<h2><p>もまとめて装飾したい」といった場面が出てきます。

たとえば、背景色をつけるときなど。1個ずつ背景色をつけていたら、、、わりと面倒です。

 

そんなとき、背景色をつけたい部分をまとめておけるのがブロック要素<div>です。

使い方はカンタンで、以下のように「他のタグ要素を囲んであげるだけ」です。

<div>
  <p>テキストテキスト</p>
</div>
HTML入門 ブロック要素

ブロックで囲っただけなので、見た目は変わりません。

でも、今後CSSを学んでいくと、ブロック要素の大切さが分かってきます。

 

ちなみに、<div>タグは、”意味を持たない”ブロック要素です。

逆に”意味を持つ”ブロック要素が、以下のとおり。

  • <header></header> : ヘッダー
  • <nav></nav> : ナビゲーションメニュー
  • <article></article> : 記事部分
  • <section></section> : 1つのテーマを持ったグループ
  • <main></main> : メインコンテンツ
  • <aside></aside> : サイドバー
  • <footer></footer> : フッター

上記も同じブロック要素ですが、それぞれ意味を持っています。

 

たとえば、ヘッダーを作るときに使うのは<header>タグだし、サイドバーを作るときに使うのは<aside>です。

 

わざわざ意味を持つブロック要素が用意されている理由は、サイト構造を分かりやすくするためです。

誰に分かりやすくするのかといえば、、、もう分かりますよね。Googleのロボットです。

 

要するに、SEO対策するとき、「意味を持つブロック要素」が大事になってきます。

 

なので、ヘッダーなどの主要なパーツを作っていくときは、それぞれ用意されているタグを使いましょう。

 

 

【超初心者向け】HTML/CSS入門テキスト版【前半①〜⑩まとめ】

 

というわけで、前半戦は終了です。

HTMLについて、かなり理解できたのではないでしょうか。

 

後半の⑪〜⑳では、主にCSSを学んでいきます。

今まで学習したタグと、CSSを駆使するだけで、Webサイトが良い感じに仕上がるようになります。

 

カンタンなサイト作成までやっていくので、この記事がよかったら後半戦も勉強してみてください!

 

なお、この記事はYouTube動画を書き起こしたものです。

プログラミング初学者は、テキストだと学習しづらいと思うので、よかったらYouTubeで動画を使って学習してみてください(`・ω・´)!

 

それでは、後半戦もお待ちしています!