トップ メニュー

ゼロから学ぶ ウェブ開発-スタータードキュメント
HTML篇


・はじめに
ベーシックレベル講座へようこそ！
ここではhtmlについて基礎的な部分を学んでいく場所になります。前提条件としては、vsコードの使い方がわかっている状態から始まります。実践はスタンダートレベルから受講可能です。


・HTMLとは？

HTML (HyperText Markup Language) は、ウェブページを作成するための標準言語です。
簡単に言えばワードなどを用いて作成するプリントをプログラミング言語で作成する、というようなもの。
ウェブサイトの構造を定義し、テキスト、画像、リンク、ビデオなどの要素を配置します。HTMLを使用することで、ブラウザがウェブページの内容を正しく表示できるようになります。




・HTMLの基本構文

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
    <link rel="stylesheet" href="CSSのファイル名">
    <title>サイト名（ブラウザのタブに表示される）</title>
</head>
<body>
    <!-- ここにページの内容を書き込む -->
</body>
<script src="JavaScriptのファイル名"></script>
</html>

以上がHTMLの基礎的な構文になります。
特徴としては、各命令が大なり > 小なり <で囲われているところです。これはHTML最大の特徴になっているので覚えておきましょう。
さて、上記にある基礎構文ですが、一語一句すべて覚える必要はありません。
場合によってはすべて覚える必要がございますが、本編ではVisual studio Codeを使って開発します。

つまりどういうことかというと、visual Studio Code内のショートカットキーですべて完結するということです。
実際にエディターでやってみてください。

visual Studio Codeを起動　→　ファイル作成　→　言語選択でHTMLを選択・・・

ここで！

先ほど申し上げましたショートカットキーの出番です。
Shiftキーを押しながら1を押して!を表示させてみてください。　奇跡が起きます

何やら変換のようなものが出てきていますね。
これをEnterすると・・・？

このようにHTMLのの基礎構文が出力されました。
以上がVSコードの基本操作、およびHTMLの基礎構文です。


・htmlタグについて

先程、HTMLの基本操作にて要素は「各命令が大なり > 小なり <で囲われている」とやりました。 そして基礎構文の時点で気づいている方もいるかと思います。HTMLの要素は　<> 〜 </>で囲われているということにお気づきでしょうか？
<>はhtml要素の開始宣言になっていて、 </>は終了宣言です。htmlのテキストをこれで囲うことで、文字をおしゃれにしたり、囲いをつけたりと、サイトとしての装飾を施すことができます。
ただし、必ずしもこのように囲われているわけではありません。例としては

<!-- htmlのテキスト符号化形式の宣言 -->
<meta charset="UTF-8">

<!-- cssの読み込み -->
<link rel="stylesheet" href="CSSのファイル名">

<!-- 画像の読み込み -->
<img src="画像のurl" alt="画像が読み込まれなかったときの代替テキスト">
こんな感じです。
htmlタグには要素名が存在しており、<要素名> 〜 </要素名> のように表記されます。



・要素名の例

以下のコードはこのチュートリアルを勧めていく上で頻繁に出てくるので覚えておきましょう。 

大見出し　<h1>大見出し</h1>
見出し　<h2>見出し</h2>

段落　<p>段落（文章をこのタグで囲うことで、かんたんに段落分けすることができます。）</p>

<!-- 改行は文末につけることで、その部分を改行します。 -->
改行　<br>
これらのコードはhtmlの<body>内に書き込むもので、ブラウザの表示に大きく影響します。
コードの意味をばらしていくと、見出しを意味する<h1>や<h2>は英語で「heading」 を意味し、そのイニシャルを取って「h」と表記されます。その横につく数字は見出しの大きさだと思ってください。

段落を意味する<p>は「paragraph」のイニシャル。

改行の<br>は「break」（テキストを強制的に改行する、動的処理では処理の中断に使われる。）という意味の略称です。

htmlタグの特徴は基本的に、英単語のイニシャルもしくは略称になっているのが特徴です。
先にも話しましたが、vscodeには変換機能がございますので、全て覚える必要はございません。最初の1〜3文字覚えておけば問題ありません。


・要素と属性

要素というのは おさらいになりますがHTMLタグ内の命令のこと、今回はそこに付く属性というものを解説していきます。
HTMLの要素の開始宣言の中に更に書き加えることで、ユーザーの目には見えなくてもプログラム内で、特定の処理を行う際に役割を果たすようになるものです。
この属性は既に基礎構文にも出てきており、 <html lang="ja"> 部分に属性がついています。
そう <html lang="ja"> の lang="ja" の部分です。 このタグはhtml本体の開始宣言ですが、ここに更に lang="ja" と宣言することで、どの国の言語で書かれているのか、判別させることができます。

なぜ？必要なのか

例えば先程のように国の言語を意味するタグの場合、宣言することで、ブラウザが「このサイトを翻訳しますか？」と提案してくれます。そうすると、他国からアクセスした方からすれば簡単にサイトを翻訳して記事を読むことができますよね。 なかったらいちいちGoogle先生にコピペして訳してもらわなければいけないわけですから。

ここでは日本語のサイトなので lang="ja" としますが、他の言語の場合は、以下のコードを元に入力してください。

アメリカ英語en-US　ドイツ語　　de　
英語enロシア語ru
フランス語fr韓国語ko
イタリア語it中国語zh
スペイン語es日本語ja

属性はこれ以外にも id や class などが存在していますが、今は属性が どういうものなのかということだけ覚えておいてください。
詳しくはスタンダードレベルから出てきます。

ベーシックレベルは以上です。お疲れ様でした！





・ファイル内の移動を命令

・はじめに
スタンダードレベル講座へようこそ！
ここではhtmlについて実践的に学んで行く場所になります。ただここで習うのは頻繁に使うものであり、マイナーなものは出てきませんので、構える必要はありません。
ベーシックレベル同様に気楽に触れてもらえればと思います。


本題

htmlではいくつかの場面で外部からファイルを参照することがあります。例えば画像の読み込み、JavaScriptの読み込み、CSSの読み込み、ファビコン(タブに表示されるサイトのロゴ)の読み込みなど、、、
これらはurlを貼り付けて読み込むこともできますが、自身が書いたプログラムをいちいち、サーバーにアップロードして、urlにしてからサイトに貼り付け、っていうのはめんどくさいですよね。

そこで使うのが、ディレクトリパスの指定、つまりファイル内の移動の宣言です。
これによって同じコンピュータ内にあるファイルを参照することができます。
今回は画像を例にやってみます。javascriptやcssでも同様に書き込みます。
実際に書き込むのは href="" や src="" の中に書き込みます。

・書き方 

<!-- 同じ場所にあるファイルの読み込み -->
<img src="./画像ファイル" alt="画像が読み込まれなかったときの代替テキスト">
このように、同じ場所から参照する場合は./ファイル名、もしくはフォルダー名を入れて参照します。
では、同じ場所にあるフォルダーの中に読み込みたいファイルがある場合はどうするのか？こうします 
<!-- 同じ場所にあるフォルダーからファイルの読み込み -->
<img src="./フォルダー名/画像ファイル" alt="画像が読み込まれなかったときの代替テキスト">
ね？難しくない。
では今いる場所から一つ前に戻ってフォルダーを開く場合にはどうすべきなのか？./では同じ場所からしか開けない。
そんなときにはこう書きます。 
<!-- 一つ前に戻ってからフォルダーからファイルの読み込み -->
<img src="../フォルダー名/画像ファイル" alt="画像が読み込まれなかったときの代替テキスト">
../としてやることで一つ前のフォルダーに戻ってから参照することができます。
同様に二つ前に戻る場合は../../と重ねてファイルを指定します。
これがディレクトリ操作です。



・データベースの構築

ここではサイト作成にあたって望ましいデータベースの構築をレクチャーします。 webサイトを作る上でフォルダーの配置を樹形図のようなものにあするとこんな感じになります。
※/とついているものはフォルダー 

site/
　┣ index.html
　┗ data/
　　　　┣ html/
　　　　┃　　┗ sub-page.html
　　　　┣ css/
　　　　┃ 　┗ Style.css
　　　　┣ JavaScript/
　　　　┃　　　　　┗ Script.js
　　　　┗ img/
　　　　　　┗ 画像ファイル
ポイントとしては、ファイルの種類ごとにフォルダーを作って分けておくことです。
こうすることで、ファイルの場所を明確にし、同じファイルの重複やデータ量を減らすことができます。



・基礎構文に情報を加える

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <!-- 文字コードの宣言※必須「htmlではutf-8と宣言しないと、サイトが文字化けする。」 -->
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- ファビコンとは、WEBサイトのアイコンを指定するもの。 -->
        <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
        <link rel="stylesheet" href="CSSのファイル名">
        <title>サイト名（ブラウザのタブに表示される）</title>
    </head>
    <body>
        <!-- ここにページの内容を書き込む -->
    </body>
    <script src="JavaScriptのファイル名"></script>
    </html>
ベーシックレベル、基本操作>>にてご紹介に上がりました上記の基礎構文、ここにサイトとして必要になってくる内容を書き込んでいきます。
書き込むのはブラウザのタブに表示させるサイトの名前、これは絶対書き込みましょう。
ファビコンは用意できている場合入れておきましょう。

そもそも<head>って何？
<head>は、サイトの内容や、それに関連する情報を書き込む場所です。
ここには主に<meta ～>や<link ～>などのユーザーにとって目に見えない、機械に対する情報をこのヘッドタグ内に書き込みます。
ハイレベル講座、検索エンジン最適化>>にて、検索に引っかかりやすくする方法や、検索結果に表示させる方法で重要になるタグです。
今はサイト名やサイトのロゴを定義するものだと思っておいてください。

・CSSについて

<head>の中に<link rel="stylesheet" href="CSSのファイル名"> とあります。これはcssの読み込みを宣言するものです。CSSはHTMLの文字や要素を装飾する言語です。
例えば、枠線をつけたり、背景の色を変えたり、背景を画像にしたり…などなど

おしゃれなサイトはcssがあることによって成り立ちます。
cssの読み込みは、スタンダートレベルの最初の講座同様にディレクトパスを入れればokです。
cssの書き方は上部メニューバーのcssのボタンをクリックするとご覧になれます。



・CSSの装飾に使えるタグ

<!-- ホームページの最上部を構成するタグ -->
<header> ヘッダー </header>


<!-- ホームページの最下部を構成するタグ -->
<footer> フッター </footer>


<!-- メニューバーを構成するタグ -->
<nav> ナビゲーション </nav>


<!-- メニューバーを構成するタグ -->
<nav> ナビゲーション </nav>


<!-- 要素をひとくくりにまとめるタグ -->
<div> 要素を収容 </div>
以上のようなものがあります。今は大まかな意味だけ覚えていただければOKです。
これらのタグはHTMLだけでは特に見た目に影響することがなく、CSSで装飾することによってサイトのデザインに大きく影響を与えます。
ただ、実際はCSSを書きやすくするだけのものにすぎず、ここの一番最後に出てきた
「要素をひとくくりにまとめるタグ」<div> 要素を収容 </div>、これでほぼすべて解決します。
理由はスタンダードレベル・　　要素と属性の利用>>　に出てきます。



・JavaScriptに使えるタグ

<!-- ボタンタグ -->
<button> ボタンに表示するテキストをここに書く </button>
ここまでcssとjavascriptで頻繁に使うタグの例を紹介しました。
しかし、これだけでWEBを構築しようとするのは無理があります。なぜ無理があるのか？
その理由は 例えばcssでHTMLを装飾するとします。この時CSSでは特定の個所を装飾するために、どの部分を装飾するのか指定します。（CSSの書き方はCSS偏にて） この時、HTMLに同じタグが２つ以上存在する場合、どちらか一方を装飾したくても、そのタグすべてに装飾のプログラムが適応されてしまいます。
これはJavaScriptでも同様なことが起きます。JavaScriptの特徴について少し触れると、JavaScriptは他の言語に比べて、DOM操作（ドキュメントファイルに変化を与える動的な操作）を行うことができます。
例えば、HTMLのクイズサイトで、ユーザーがどの選択肢を選んだのか判定する際、JavaScriptはHTMLから要素を取り出します。この時、一応JavaScriptはHTMLの要素を＊配列＊として取り出す能力を持っていますが、プログラムを書く上では重複する要素がない限り非効率です。
そうなると理想のサイトのデザインは決まりませんね………
そこで、次のようなものを使います。


＊配列とは？＊同じ種類のデータをまとめて効率的に管理するために使われ、インデックス番号という住所が各配列内に与えられる。
javascript ベーシックレベル 配列の定義>>
例えば： 
ユーザー１ ＝ 荒科さん
ユーザー２ ＝ 今井さん
ユーザー３ ＝ 佐藤さん
# 出力の処理
puts = ユーザー１

このように同じようなデータを１個ずつデータを作っていくのは面倒、なので配列にまとめて 
# Rubyの例
配列名 = [荒科, 今井, 佐藤]

# 出力の処理
puts = 配列名[インデックス番号]
あらスッキリ。呼び出すときは配列名[インデックス番号]のたったこれだけ。
JavaScriptでも上記の例のように、同じような要素が複数回出てくる場合は配列にまとめる方が効率的です。
ただ、一つの要素だけを取り出したいときに、配列を使っているようじゃ効率的ではありません。


・要素と属性の利用

ベーシックレベルの第５章・要素と属性>>に出てきた”属性”のセレクター系を扱っていきます。
ここで覚えておいてほしいものがあります。それはid="id名"とclass="class名" です。
ベーシックレベルで少し書き方を触れました。おさらいすると、 <htmlタグ 属性="名前"> のように、HTMLタグの中に書き込むのでしたね。
書き方は同様で、htmlタグの中にある属性の部分をid="id名"やclass="class名"に書き換えるだけです。
id="id名"やclass="class名"の意味は同じで、htmlタグに名前を付けるというものです。名前は自分にとってわかりやすいものでOKです。
例えば <div class="main-page"> ～ページの内容～ </div> などのようにつけることで、cssなどで装飾する際、この名前を付けたHTMLタグだけに作用するようになります。
詳しいことは CSS ベーシックレベル講座 ・CSSの基本構文>> とJavaScript篇で扱っていきましょう。





・hrefとsrc

スタンダードレベルの第１章・ファイル内の移動を命令>>に出てきたhrefとsrcについて、おさらいもかねて多用されるタグをご紹介いたします。
HTMLの属性であるhrefとsrcは、どちらも外部リソースを指定するために使用されますが、その役割と対象要素には明確な違いがあります。href属性（Hypertext Referenceの略）は、現在のドキュメントと外部リソース間の「ハイパーリンク」を指定するための属性で、リンク先への「移動」を意図しています。

主に、リンクを作成する<a>要素や、外部スタイルシートやファビコンを指定する<link>要素で使用されます。 

<!-- リンク付きテキスト、または要素を作るタグ（クリックすると指定のURLあるいはディレクトリに移動させることができる） -->
<a href="https://www.google.com/"> Googleに行く場合はここをクリック </a>

<!-- cssの読み込み（復習：linkタグには終了の</>が存在しない。） -->
<link rel="stylesheet" href="cssファイルの場所">

<!-- ファビコン（ウェブサイトのアイコン） -->
<link rel="icon" href="アイコンファイルの場所">


一方で、src属性（Sourceの略）は、外部リソースを現在のドキュメントに「埋め込む」ための属性であり、画像ファイルを指定する<img>要素、
JavaScriptファイルを読み込む<script>要素、
他のHTMLドキュメントを埋め込む<iframe>要素、
さらにはオーディオやビデオを埋め込む<audio>や<video>要素などで使用されます。 
<!-- 画像ファイルの読み込み -->
<img src="画像ファイルの場所" alt="画像が読み込まれなかったときの代替テキスト">

<!-- JavaScriptの読み込み -->
<script src="jsファイルの場所" ></script>

<!-- HTML内に外部のHTMLファイルを埋め込む -->
<iframe src="HTMLファイルの場所" ></iframe>

<!-- サウンドファイルの読み込み -->
<audio src="サウンドファイル（mp3, ogg, m4a...etc）の場所" ></audio>

<!-- 動画ファイルの読み込み -->
<video src="動画ファイル（mp4, webm, mkv...etc）の場所" ></video>

<!-- 動画ファイルはブラウザによって再生がサポートされてないファイルがあるので、動画のタイプを指定してあげるとよい。 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.mkv" type="video/x-matroska">
  お使いのブラウザは動画タグをサポートしていません。
</video>


<!-- ブラウザは、広告主がユーザーに対して無差別なコンテンツを配信することを防ぐために、
サウンド付きの動画ファイルの自動再生を禁止している。
再生するにはユーザーのアクションが必要。
自動再生する場合は、videoタグにミュートを宣言する必要がある。
映像をループさせるときはloopとつける -->

<!-- 動画の自動再生（今回はmp4を例にする） -->
<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  お使いのブラウザは動画タグをサポートしていません。
</video>
それぞれの属性は、リソースへの「参照」と「埋め込み」という異なる意図を持って使い分けられます。
ディレクトリパスの書き方はスタンダードレベルの第１章・ファイル内の移動を命令>>をご参照ください。



スタンダードレベルの講座は以上です。お疲れ様でした。




ハイレベル講座

ハイレベル講座ではベーシックレベルやスタンダードレベルと違い、WEBサイトの公開に向けた開発を行っていきます。

・検索エンジン最適化

検索エンジンの最適化とはその名の通り、自分のWEBサイトを検索エンジン（ GoogleやBingなど… ）の検索結果に表示されやすくするものです。
スタンダードレベル、基礎構文に情報を加える>> にて<head>について解説いたしました。
検索エンジン最適化は、このヘッドタグ内に書き込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 以下検索エンジン最適化、サイトの内容を定義 -->
    <meta name="description" content="サイト内の説明、検索エンジンにのみ表示されます。
        例：この記事では、検索エンジン最適化（SEO）の基本から応用まで、効果的な手法を網羅的に解説します。">

    <!-- 以下検索エンジン最適化、検索に引っ掛かりやすくするキーワード
        （注意：サイトの内容と無関係のキーワードの埋め込みは検索エンジンの利用規約違反になります。）
        違反例：自分の日記サイトにYoutubeやX、Amazonなどの検索率の高いワードを埋め込んで閲覧数を稼ぐ -->
    <meta name="keywords" content="キーワード１, キーワード２, キーワード３, キーワード４, キーワード５, ">

    <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
    <link rel="stylesheet" href="CSSのファイル名">
    <title>サイト名（ブラウザのタブに表示される）</title>
</head>
    <!-- 以下ページの内容を書き込む -->

最低限これくらいは必要です。
こうすることによって、検索エンジンに引っ掛かりやすくなり、より多くの人に自分のサイトを閲覧してもらえるようになります。




・ホスティング（WEBサイトの公開）

まず、サイトを公開する上ではホスティングサーバというものを契約する必要があります。
ホスティングサーバというのは、ウェブサイトをインターネット上で公開するためにデータやファイルを保存し、ユーザーがアクセスできるようにするサーバーのことです。
有名なものを挙げるなら GMOペパボ が運営するロリポップというサービスです。
しかし、ロリポップは安価でありながらもお金がかかってしまいます。またホスティングの際、FTPというファイル転送ツールが必要になることから、個人で扱うには少しハードルが高くなっています。（当サイトはロリポップにホスティング）
そこで、今回は無料かつ簡単に扱えるDRV.TWという台湾のホスティングサービスを使って公開していきます。
このホスティングサービスは、Googleドライブや、Microsoft One Driveをホスティングサーバのようにしてサイトを公開することができるというものです。
このサービスはなんと！無料！安全！ダウン時間なし！帯域幅制限なし！FTPソフトは不要！　マジか！？
ただ、デメリットもあり、phpが動かないという欠点があります。

・公開の手順


まず最初にGoogleドライブにアクセスします。

そしたら新規から、公開したいサイトのフォルダーをドライブにアップロードします。
アップロードが完了したら、そのフォルダーを右クリックして、共有を選択します。

共有はリンクを知っている全員が閲覧できるようにしておきましょう。コメント可や編集者にはしない

これで、サイトのアップロードは完了です。次はホスティングを行います。

ホスティングには先に書いたようにDRV.TWを使います。

ここではGoogleドライブを使ったので、Drv.twのHost on Google Driveをクリックして、アカウントでログインします。

そうするとこんな感じでアクセスの要求が来るので、続行を押しましょう。（台湾を信用できない人はサブ垢でやりましょう。）

すると管理者のページに飛びます。Your Pagesと書かれているところに、アップロードして、アクセス許可を出したフォルダーの名前が書き出されます。 この中から公開したいサイトのファイルを探し出しましょう。探し出せたらそのリンクを踏みます。するとwebサイトとして公開され、アクセスができるはずです。

ページの最下部にサイト名を変更する部分があるので、わかりやすい名前に書き換えておくことをおすすめします。
これでサイトの公開は完了です。サイトを更新するときは、ドライブに上書き保存すれば、勝手に更新されます。

ただこれだけでは検索してもサイトは検索結果に表示されません。





どうやってGoogleの検索結果に表示するのか？

ハイレベル、検索エンジン最適化>> にて、ヘッドタグ内に検索に引っ掛かりやすくするためのタグを書き入れたかと思います。
この情報がGoogleに登録されない限り、検索結果には表示されません。
使うのはGoogle Search Consoleというものです。
このツールを使うことで、サイトの検索トラフィックや掲載順位を測定できるほか、問題を修正し、Google 検索結果でのサイトの注目度を高めることができます（フルコピペ）
当然ですが無料で使えます。
どのように使うのか、

検索結果登録の申請のぺージで上記画像のような画面が出てきます。
申請手段は2つあり、ドメインで申請する方法とurlで申請する方法があります。ドメインを購入している方でもurl申請を推奨します。


URLを指定する場合、drv.twでエンコードしたリンクをコピーして、そのままURL プレフィックスのフォームに貼り付けて続行を押せばokです。


続行ボタンを押すと所有権確認の画面が出てきます。
ここで所有権確認を行う簡単な方法は、上から2つ目の HTMLタグを推奨します。
すると
<meta name="google-site-verification" content="認証コード" />
のようなHTMLタグが出力させます。
これをサイトの<head>タグ内に入れて保存し、再度Googleドライブのフォルダーに上書きし、drv.twから ページが更新されたか確認します。もし更新されていたら、確認ボタンを押してGoogleの対応を待ちましょう。
数秒待機して、認証に成功すればok!
数日後、指定したキーワードで検索した際に結果に出てくるはずです。

これでHTMLの全過程が終了しました！お疲れさまでした！