Archives for 2020

MySQLをMAMPを使ってWindows環境にインストールする方法

2020-08-05 By プログラミング入門ナビ編集部

Windows環境にMAMP（マンプ）を使って、MySQLをインストールする方法について説明します。

前置き

この記事は、オンライン講座「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」と、Prolgus「SQL入門」コースのサポート記事です。
Windows 10を利用しています。Windows 8では、UIが一部ことなる場合があります。
企業から貸与されたパソコンを使用する場合、セキュリティソフトや、ソフトウェアイントール制御ソフトがインストールされている場合があります。この場合、MAMP等の開発系のツールがインストールできない場合があります。手順を工夫して回避することは現実的ではありません。お手数ですが勤務先のシステム管理者にご相談ください。
MAMPは一般大衆向けのソフトウェアでは無いため、扱いが難しいと感じる部分もあるかもしれません。言い換えると、誰でも使いこなせるわけではないため、スキルとして市場価値が生まれます。

MAMP（マンプ）とは

オープンソースのソフトウェアで、Web開発の環境一式をインストールするのに用いられます。
「MAMP」という名前は、「Macintosh」「Apache」「MySQL」「PHP」の頭文字から来ています。
無料版の「MAMP」と有料版の「MAMP PRO」がありますが、学習用途であれば無料版の「MAMP」で十分です。本記事では「MAMP」の方を扱います。

すでにインストールしたMySQLのアンインストール

すでにWindows環境に、MySQLをインストールしている方は、混乱を避けるために、インストール済みのMySQLを削除しておくことをおすすめします。
削除しない場合については、検証しておりません。

MySQL 5.7 for Windowsのアンインストール方法

※ 補足：すでにXAMPPがインストールされている場合は、同時に起動しなければ問題は無いようです。

MAMPのインストール方法

MAMPのトップページ

MAMPのトップページを開きます。
MAMP

「Downloads」をクリックし、更にWindowsのロゴが書かれたボタンをクリックします。

インストールファイルがダウンロードされる

ブラウザの設定を変更していなければ、「ダウンロード」フォルダにダウンロードされます。

ネットワークの状況等などの要因により、ダウンロード完了までに1時間弱程度かかる場合もあります。

ダウンロードに失敗する場合は、時間を開けて再度試してみてください。

MAMPのインストーラーの起動

ダウンロードしたファイルをダブルクリックして、インストーラーを起動します。

ユーザーアカウント制御ダイアログ

Windowsの設定によっては、ユーザーアカウント制御ダイアログが出ます。
「はい」をクリックしてインストールを進めます。

セットアップダイアログが起動

Nextボタンをクリックします。

今回使用するのはMAMPの無償版なので、二つともチェックを外します。

利用規約の内容を確認し、「I accept the agreement」をクリックしてNextボタンをクリックします。

インストール先の選択です。特別な事情がなければ、デフォルト設定のC:¥MAMP にインストールします。Nextボタンをクリックします。

プログラムのショートカットを置くフォルダを選択します。特に変更が無ければ、そのままNextボタンをクリックします。

デスクトップにアイコンを作成するか選択します。アイコンを作成したくない場合は、チェックを外します。Nextボタンをクリックします。

インストール内容を確認します。Installボタンを押すと、インストールが開始します。

インストール中

しばらく時間がかかります。

インストール完了

このような画面が表示されたら、Finishボタンを押してインストール完了です。

MAMPの起動

先ほどデスクトップにアイコンを作成した場合は、アイコンをクリックしてMAMPを起動します。

このような画面が表示されれば、MAMPの起動完了です。MAMPでは起動と同時にサーバーも起動されます。
サーバーを停止したい場合は、上のServersボタンからStopボタンを選択してクリックします。

ネットワークの設定（表示される場合のみ）

MAMPを起動した際に、このような警告が出る場合があります。どちらの場合も、「プライベートネットワーク」を選択して、「アクセスを許可する」をクリックします。なお検証は行っていませんが、ここでキャンセルしてもMySQLだけ使う分には問題ないと考えられます。

MySQL Workbenchへの接続方法

ここでは、MAMPを用いてMySQL Workbenchへ接続する方法について説明します。

MySQLサーバーの起動

まずMAMPを開き、「MySQL Server」の文字の右に緑色のランプが付き、MySQLサーバーが起動した状態であるか確認してください。

MySQL Workbenchの起動

MySQL Workbenchを起動します。すると、このような画面が開きます。

DBへの接続設定

新規コネクションの作成を行います。

プラスアイコンをクリックします。

以下のような設定画面が開きます。新規コネクションの作成を行います。

「Connection Name」の部分は任意の接続名を入力します。

また、MAMPのMySQLサーバーは、デフォルトで3306番のポート番号を用いるので、ポート番号を3306と指定します。

そしてパスワードを設定するため、「Store in Kyechain …」というボタンをクリックします。

初期パスワードとして”root”の4文字を入力して、「OK」ボタンをクリックします。

接続の確認

「Test Connection」ボタンを押してテスト接続を行います。

このように表示されたらテスト接続成功です。OKボタンを押します。

OKボタンを押します。

コネクションの起動

最初の起動画面に戻るので、今作成したコネクションをクリックします。

このような画面が表示されればOKです。

MySQL Workbenchとの接続に成功しました!

おわりに

UdemyでSQL入門講座を公開中

世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）にて、SQL初心者向けのオンライン講座を公開中です。

ベストセラーコースにも選ばれたことがある人気のコースです。
ぜひ、ご利用ください。

はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース

エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ。データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。MySQL使用。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

ウェブ開発でわからないことがあったらどうすればいい？MDNの使い方やメリットを紹介！

2020-07-28 By プログラミング入門ナビ編集部

はじめに

HTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう？」「この記述は必須？不要？どっちだったっけ？」といった疑問が出ることがよくあります。

全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。

この記事ではウェブ開発においてわからないことが出てきた時のおすすめの調べ方を紹介します。

動画解説

本記事の内容を動画でも解説しています。

https://youtu.be/eQBXwLYrXXc

MDNとは

MDNはMozilla Developer Networkの略称で、ブラウザのFireFoxなどを開発しているMozilla Foundationが運営している公式サイトです。

ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。

わからないことがあったら、まずはこのMDNを参照するのがおすすめです。

強くおすすめする理由としては次のようなものがあります。

信頼性の高い情報が手に入る

ウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。

それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。

よくまとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。

結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。

こうなってしまうと貴重な時間と労力の無駄ですね。

一方、MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。

個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。

ウェブ開発に関する情報が一通り揃っている

MDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。

HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。

特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。

HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。

無料で使用可能

ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。

教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。

リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。

取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。

MDNを使ってみよう

早速、MDNの使い方を見てみましょう。

ブックマークしておくのがおすすめ

MDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。

MDN web docs

特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。

例えばHTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。

「テクノロジー」メニューでHTMLをクリックし、左側の「HTML elements」をクリックして展開すると<a>がありますね。

これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。

Google検索も便利

もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。

たとえばHTMLの段落要素<p>について調べたいとき「mdn html p」とGoogle検索してみましょう。

検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。

まとめ

ウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。

自分で調べる癖が付けられると、学習スピードがぐんと上がります。

ぜひプログラミング学習のお供に活用してください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTML文書で改行やインデントがないとどうなる？なぜ必要なのか理由を解説

2020-07-25 By プログラミング入門ナビ編集部

はじめに

HTML文書を書いたことのある方なら誰でも一度は「改行やインデント（行の開始位置を数段ずらすこと）をいちいち入れないといけないなんて面倒だな…自分の好きなように書いちゃダメなの？」と考えたことがあるのではないでしょうか？

この記事ではそんな疑問に対するお答えと、改行やインデントの必要性について説明します。

動画解説

本記事の内容を動画でも解説しています。

https://www.youtube.com/watch?v=YkmQ5ZIdD0I&feature=youtu.be

改行やインデントがないとどうなる？

例えばこのようなHTML文書を考えてみましょう。VSCodeなどのエディタで実際に打ち込んでみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
     h1 {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

これをブラウザで表示すると下記のようになります。

次にコードから改行やインデントを取り除いてみましょう。下記のように、とても雑然としたコードになります。これでは実際のページもレイアウトが崩れてしまいそうですが、実際はどのようになるのでしょうか？

 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> はじめてのHTML</title> <style> h1 { color: red; } </style> </head> <body> <h1>はじめての見出し</h1> <p>はじめての段落</p> </body> </html>

エディタで保存したら先ほどのブラウザをリロードしてみましょう。

なんと表示はそのまま変わりません。実は、改行やインデントがなくても正しく書けてさえいればこのようにきちんと表示されるのです。

改行やインデントはなぜ必要？

これではますます冒頭のように「改行やインデントなんて、Word文書みたいに自分の好きなタイミングで付けたらいいのでは？」という思いが強まってしまうかもしれませんが、お待ちください。

どんなプログラミング参考書でも改行やインデントは必ずつけるよう指南があります。

それだけ、改行やインデントには実は非常に重要な役割があるのです。ここからはその理由を説明していきます。

コードを読みやすくする

これは直感的に理解しやすいかもしれません。先ほどの改行・インデントなしのコードを見て「何が書いてあるのかわかりづらくなったな…」と思われた方が多いのではないでしょうか。

先ほど改行やインデントを取り除いてもきちんと表示できたのは、ブラウザが改行やインデントを無視してコードを読み込むためです。

「HTML文書の存在理由はブラウザに読み取ってもらってWebページとして表示されることなので、それさえできればいい」といってしまえばそれまでなのですが、その考えは少々短絡的といえます。

というのも、実際のWebサイトはいくつものWebページを保有する大規模なものであるため、基本的には複数人で開発します。そのため、誰かが書いたコードは人間である他の開発者が目にすることが多いです。

ページ同士の連携や機能拡張のために修正する等、目的は様々ですがそんな時に先ほどのような改行やインデントのないコードを書いていれば、間違いなくブーイングが起きます。

エンジニアのお作法として、他の人にも読んでわかりやすいように必ず改行やインデントを入れるようにしましょう。

バグを少なくする

それなら、せめて改行は入れるけどインデントまではなくてもいいのでは？と思われたかもしれません。

インデントのない下記のコードを見てください。実はこのコードでブラウザに表示させようとすると、真っ白な画面になってしまいます。

どこかにバグがあるからなのですが、見つけられますか？

<html lang="ja">
<head>
<meta charset="utf-8">
<title> はじめてのHTML</title>
<style>
h1 {
color: red;
}
</head>
<body>
<h1>はじめての見出し</h1>
<p>はじめての段落</p>
</body>
</html>

次にインデントを付けた下記ならばどうでしょうか。インデントの有無以外で上記のコードと差はありません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
      h1 {
        color: red;
      }
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

8行目でh1のスタイル指定が終わった後「}」から、9行目の</head>まで通常ならばインデントが1段ずつ戻るのが、一気に2段下がっているのが不自然です。

本来はこの8行目の下に終了タグ</style>があるべきでしたが、無いということが見つけやすいですね。

このように、インデントがあれば書かれたコードを見ても不自然な箇所からバグを見つけやすいですし、書いている途中でもインデントを意識していれば間違いに気付きやすいです。

また、要素ごとにインデントがあるのでHTML文書の要素同士の階層構造が見やすいという利点もありますね。

まとめ

HTML文書での改行とインデントの重要性について説明しました。

無くともブラウザに表示はされますが、エンジニアの嗜みとして改行とインデントは必ず入れるようにしましょう。また、他の言語でも同様の理由から入れるようにしてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

簡単なHTMLを書いてみよう！前準備からページの表示まで初めての方にも分かりやすく手順を紹介！

2020-07-22 By プログラミング入門ナビ編集部

はじめに

HTMLを学習したいけれど、どんな風に書くのかイメージがわかない、難しそう…と考えてはいませんか？

HTMLは数あるプログラミング言語の中でも比較的易しく、取り掛かりやすいため、とにかくやってみるのがおすすめです。

この記事では、はじめてHTMLを書く方向けに1つ1つステップを踏んで方法を解説します。

macOS、Windowsで手順は同じです。しかし、ステップごとの見た目が少々異なるため両方のイメージで説明していきます。

動画解説

本記事の内容を動画でも説明しています。

[macOSの場合]

https://www.youtube.com/watch?v=lHkwuFKbh4I&feature=youtu.be

[windowsの場合]

https://www.youtube.com/watch?v=m-4ftze8F94&feature=youtu.be

ウェブページの完成イメージ

このような簡単なウェブページをHTMLで作ってみましょう。

下準備

まずはデスクトップに学習用の「web」というフォルダを作成してください。

フォルダ名は任意ですが、この後の流れでは「web」という名称で進めるため同じにしておいた方がわかりやすいです。

[macOSの場合]

[windowsの場合]

コーディング

HTMLに限らず、コーディングを行う際はエディタを使うと便利です。エディタはプログラミング言語に応じて文字を見やすく色付けしたり、ファイル同士の見比べをしやすくレイアウトしたりといった機能があります。

おすすめのエディタはVisual Studio Codeです（VSCodeと略称でも記載されます）。ほぼ全てのプログラミング言語に対応し、使い勝手も良く近年人気が急上昇しています。

特にこだわりがなければインストールして使ってみましょう。下記から入手できます。

Download Visual Studio Code

Visual Studio Codeでの前準備

以降、VSCodeでの画面例になります。

[macOSの場合]

VSCodeを開いたら、Fileメニュー->Openから先ほど作った「web」フォルダを開きます。

[windowsの場合]

VSCodeを開いたら、Fileメニュー->Open Folderから先ほど作った「Web」フォルダを開きます。

「web」を指定すると、下記のような画面になります。webフォルダの中にさらにフォルダを作成しましょう。

エクスプローラ（「EXPLORER」と記載のある部分）に表示された「WEB」フォルダの横のアイコン（カーソルを置くと「New Folder」と表示されるところ）をクリックし、テキストボックスに「html-basic」と入力すれば作成されます。

下記のようになればOKです。

次に、この「html-basic」の中にHTMLファイルを作成していきます。html-basicをクリックして色が変わった状態で「New File」のアイコンをクリックしてください。テキストボックスに「index.html」と入力します。

下記のようになっていればOKです。index.htmlをダブルクリックすると右側の部分にファイルの中身が開きます。今はまだ何も書かれていませんが、この中にHTMLを記述していきましょう。

HTMLの注意点

実際のコーディングに入る前に、いくつか注意点があります。

ファイル名には原則として日本語を使わない
拡張子は.htmlとする
全角・半角を意識する

1の理由として、ウェブ系の基礎となる技術は日本以外の国で開発されることが多く、日本語の使用が想定されていません。ファイルの中身にコンテンツとして日本語を書くのは問題ないのですが、ファイル名に日本語を使うと想定外のトラブルが発生することがよくあるためです。

このような本質的でないトラブルに引っ掛かり解決に時間がかかるのを防ぐためにも、ファイル名には日本語を使わないのが得策でしょう。

3についてはこの後のコーディングで詳しく説明しますが、同じ数字や記号でも全角・半角の使い分けができないとブラウザがうまくHTMLを読み込めません。正しい使い分けを意識しましょう。

シンプルなページ

index.htmlの中に下記のコードを記述していきます。完成形は下記ですが、理解を深めるため順を追って記述していきましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
    はじめての見出し
    はじめての段落
  </body>
</html>

まず1行目はDOCTYPE宣言という部分で、この文書がHTMLだということを宣言しています。

<!DOCTYPE html>

この<>で書く部分のことをタグと呼びますが、初心者の方は、よく全角で書くミスをしがちです。

下記のように「!」が全角の「！」になっていたりするとブラウザがHTMLを読み込めませんので注意してください。

<！DOCTYPE lang=ja>

2行目以降にはhtmlタグを記述します。HTMLでは、下記のようにスラッシュなしの「開始タグ」、スラッシュありの「終了タグ」がワンセットとなっていて、その間に中身を書いていくのが基本です。この開始タグ＋中身＋終了タグのかたまりを「要素」と呼びます。

終了タグを忘れないよう、開始タグを書いたらセットで書いてしまうのが良いでしょう。

<html>
</html>

html開始タグの中には「属性」といって、そのタグに適用できるオプションを記述可能です。下記のように記述すると、htmlタグの中で使用する言語として日本語が指定できます。

属性についてはまた後の記事で紹介します。

<html lang="ja">
</html>

次にhtml要素の中にhead要素とbody要素を記述します。head要素はこのhtml文書に関する情報を記載する部分、body要素はHTML文書の本体を記載する部分です。

さらにhead要素の中に、文書のタイトルを入れるためのtitle要素、文書に関するメタデータを入れるためのmeta要素を記述しましょう。

title要素とmeta要素はhead要素の中に入れ子として入る形になるので、見やすくするためにタブでインデント（一段右にずらすこと）します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta>
    <title></title>
  </head>
  <body>
  </body>
</html>

タイトルとして、<title>と</title>の間に「はじめてのHTML」と記載します。

meta要素にはHTML文書で使用する文字セットとしてutf-8の指定を行います。ざっくり言えば日本語を文字化けせずに使うための設定と考えてください。

body要素には下記のように本文を記載しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
  </head>
  <body>
    はじめての見出し
    はじめての段落
  </body>
</html>

ここで、meta要素には終了タグがないことにお気づきでしょうか。

先ほど、基本的に開始タグと終了タグはワンセットになると述べましたが、中には終了タグを付けてはいけない要素もあります。

全てを暗記する必要はなく、使用したい要素があればその都度下記のサイトで調べることが可能です。

MDN web docs：HTML要素リファレンス（Mozilla）

ここまで記述できたら、ファイルを保存しましょう。ファイルが保存されていない状態では、VSCodeのタブの右横に丸いマークがついています。

保存にはショートカットが便利です。macOSの場合は[Command+s]（Commandキーとsキーを同時に押す）、Windowsの場合は[Ctrl+s]（Controlキーとsキーを同時に押す）で保存できます。

必ず、VSCodeのタブ横の丸いマークが消えたことを確認してください。

保存できたら、早速ブラウザで見てみましょう。

[macOSの場合]

下記のように、EXPLORERの「index.html」を右クリックし「Reveal in Finder」をクリックしてください。

開いたFinder上で「index.html」を右クリック->このアプリケーションで開く->Google Chromeを選択してください。

[windowsの場合]

下記のように、EXPLORERの「index.html」を右クリックし「Reveal in File Explorer」をクリックしてください。

開いたエクスプローラ上で「index.html」を右クリック->プログラムから開く->Google Chromeを選択してください。

こうしてブラウザで表示してみると、下記のようになります。

タブの部分に、title要素に記述した「はじめてのHTML」が表示され、本体には「はじめての見出し」「はじめての段落」が並びで表示されていますね。

コードの中では、改行してこの2文を書きましたが、ブラウザでみると改行が入らないことを覚えておいてください。

また、冒頭で示した完成イメージと違い、この2文が同じ太さで書かれていますね。完成イメージのように、2文を別々な見せ方にするにはどうすれば良いのでしょうか。

マークアップしてみよう

マークアップというのは、HTMLの要素の機能を使って、文章の意味づけを行うことです。

下記のように「はじめての見出し」をh1要素で、「はじめての段落」をp要素で囲ってください。

終了タグにはスラッシュが必要なことや、タグに全角を使ってはいけない点に注意しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

再度、ファイルを保存し、ブラウザで表示してみてください。

先ほど表示したブラウザがそのまま残っていれば、ブラウザのリロードボタンをクリックするかF5キーを押せば保存した内容が更新されます。

今度はイメージ通りになりました。

このように、h1要素でマークアップするとフォントが大きくなって見出しとして表示され、p要素でマークアップすると段落として別の行に表示されます。

h1要素やp要素があることでブラウザが見出しや段落として表示しなければならないことを理解し、ふさわしい表示ができるようになったわけです。

スタイルを指定するには

補足ですが、この例では文章の見た目（スタイル）を変更するためにHTMLの要素を利用しましたが、本来HTMLは文書のレイアウトのために使用されるものであり、細かなスタイルの指定には利用しません。

スタイルの指定まで同じ文書内で行うとコードが複雑になり、本来のレイアウト構造が見にくくなるためです。

スタイルをより詳細に指定するためには別のプログラミング言語であるCSSを使用します。少しだけ体験してみましょう。

見出しの文字色を赤くするには下記のように、head要素内にstyle要素を追加します。今回はわかりやすさのために同じ文書内に書きましたが、通常はこのスタイル部分を別のファイルにすることが多いです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
     h1 {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

ブラウザで表示してみましょう。

このように、style要素で文字色等を変更することができます。

まとめ

HTMLでのプログラミングの流れを説明しました。エディタでコードを書いて、ブラウザで確認するだけなので、難しい環境構築等が不要で始めやすいですね。

はじめての方にとってもイメージを掴むきっかけになれば幸いです。ぜひお手元でもチャレンジしてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTML学習の第一歩！基本的な構文と構造について理解しよう

2020-07-20 By プログラミング入門ナビ編集部

はじめに

HTML学習において一番最初に学ぶことはコードの書き方ですが「どんなルールで書くのか？」「全体としてどんな構造になるのか？」が最も重要です。

この記事では、その要となるHTMLの基本的な構文と構造について解説します。

HTMLの基本構文

タグでコンテンツを挟む

HTMLのコードに共通しているのは下記の構文です。なんとなく目にしたことがあるかもしれません。

<タグ名>コンテンツ</タグ名>

HTMLには様々な機能があり、どの機能を用いてコンテンツを表現したいか？を「タグ」を用いて記述します。

例えば、段落として「はじめてのHTML」というコンテンツをWebページに載せたいとしましょう。

その場合は下記のように記述します。「p」が段落の機能を意味します。

<p>はじめてのHTML</p>

コンテンツとは日本語で「情報の中身」のような意味合いで、上記では「はじめてのHTML」がそれにあたります。

一部の例外（inputタグ等）を除き、ほとんどのHTMLはこのようにタグでコンテンツを挟むのが基本構文です。

最初のタグを「開始タグ」、終わりのタグを「終了タグ」と呼び、この「開始タグ+コンテンツ+終了タグ」のまとまりを要素と呼びます。

上記の例は段落「p」のタグで挟んでいるため「p要素」と呼ばれたりもします。

注意点

基本的には上記のように大変シンプルな構文ですが、下記の点に注意してください。

終了タグのスラッシュ「/」を忘れない
タグは大文字ではなく小文字で

動画解説

本項の内容を動画でも解説しています。

https://www.youtube.com/watch?v=nOLKK0HtPz4&feature=youtu.be

HTMLの基本構造

次にHTMLの基本構造を見て見ましょう。

DOCTYPE宣言とhtml要素

HTML文書の基本的な構造は上図のようになっています。

まず、HTML文書の先頭にはDOCTYPE宣言と呼ばれる「使用するHTMLの種類」の宣言を行う部分が必要です。

その次がhtml要素で、<html>で始めて</html>で閉じます。これはHTML文書の最上位要素で、この中に他の要素を入れていきます。

html要素の中に入る代表的な要素はhead要素、body要素です。

head要素には文書タイトル、文字コード、キーワード、説明文、関連ファイル等、文書の基本情報を記述します。

このhead要素に記述された内容はwebページには表示されません。

body要素は文書の本文を記述する部分で、ここに記述した内容がwebページとして表示されます。アクセスしてきたユーザーから見える部分です。

コード例

説明だけではイメージが掴みにくいので、実際のコード例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
     <p>Hello HTML</p>
  </body>
</html>

まず最初にDOCTYPE宣言でhtmlを使用することを明言しています。

その後、html要素がありその中にhead要素、body要素がありますね。

さらにhead要素の中にはmeta要素、title要素があります。

meta要素にはメタデータを記述しますが、メタデータというのはデータそのものではなく、データに関する情報のことを指しており、ここではcharset=”utf-8″という情報がありますね。

意味は、この文章の文字セット（キャラクターセットと呼びます）はutf-8を使う、ということです。

文字セットとはコンピュータで表示するために定められた文字集合のことで、ウェブブラウザが文章を解析して表示する際に参照する決まりのようなものと捉えてください。

例えば、日本語で書いたのにロシア語の文字セットを使うとウェブブラウザがロシア語だと思って表示してしまうので、文字化けの原因となります。

title要素では、このHTML文書のタイトルを定義することが可能です。

例えばGoogle Chromeのタブでウェブページを表示するとそれぞれのタブに文字列が出ていますね。この部分がtitle要素で記述されたものです。

続くbody要素の中にはp要素があり、冒頭の例の通り、段落として表示される部分です。

要素の入れ子とドキュメントツリー

HTML文書は、上図左側のように要素の中にさらに別の要素があり、さらにその中に別の要素が…といったように、要素の入れ子構造になっています。

これは言い換えると右側のように階層構造とも見られるのが特徴です。

例えばhtml要素の中にbody要素があるので、これらは親子関係にある（html要素が親要素、body要素が子要素）といったり、body要素の中でh1要素とh2要素は同列にあるので兄弟関係にあるといったりします。

動画解説

本項の内容を動画でも説明しています。

https://www.youtube.com/watch?v=VyArkIObSXc&feature=youtu.be

まとめ

HTMLを学ぶうえで最初に知っておくべき基本的な構文と構造について説明しました。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する