ホーム > 記事一覧 > HTMLの基本を徹底解説

HTMLの基本を徹底解説

HTMLはWebサイトを作る上で基本中の基本で必要となってくる知識です。
全てのWebサイトでHTMLが使われています。しかし、HTMLはプログラミングではなくWebサイトの形を整えるためのマークアップ言語と言われるジャンルです。つまり、プログラミングであるような変数に代入したりfor文を使ってコードを書くといったことはありません。Webサイトを作る場合で初心者であってもとっつきやすい言語となっています。ちなみにこのサイトもHTMLが使われています。

本日はそんなHTMLの基本を徹底的に解説していきます。

HTMLとは?全体像を解説

HTMLはWebページを作るための設計図のような言語です。つまり、HTMLはウェブページ上の文章や画像などの構造をブラウザに伝える言語です。では実際のコードの例をご紹介いたします。

タグでタグを囲うという考え方が重要になってきます。タグとは「body」, 「h1」などのことを指します。
ではこれがどのようにサイト上で表示されるかというと

画面全体にはこの「こんにちは!」だけ表示されることになります。つまり「h1」タグは画面に文字を表示させることができるタグなのです。ではどのタグがどのような役割をしているかは後ほどご紹介いたします。

HTMLファイルの作り方・HTMLの基本構造

最初はコードがどういう動きをしているかわかりにくいと思います。その状況の中で1番大事なのは、
まずコードに慣れることです。また、プログラミングには言語(HTML, CSS, JavaScript, Swift, Kotlinなど)というものがあります。その言語は数多く存在するのため、初めはどれから始めたらいいのか悩むことが多いです。

私がおすすめするのはいろんな種類の言語を触れるということです。少しだけでもいいから触れてみることで、コードがどのように動くか理解できるようになっていきます。

またその際にすることは最初はコードを見てどんな結果になるか予想するだけでも十分ですが、慣れてくると自分で実際にコードを書いてみる ことをおすすめします。自分でコードを書く際に覚えていただきたいことが、環境開発です。
この単語の意味は、自分が書いたコードを実行させるために、準備が必要なのですがその準備を整えることを指します。

ではどのようにしてコードを実行できるように準備をしていくのか?

プログラミングの準備を整える方法「環境開発」

まず始めにコードを書くためにエディタと呼ばれるものが必要です。このエディタの意味はコードを書くためのツールです。1番おすすめなのは、VS Code(Visual Studio Code)です。このツールは1番人気であり、信用も絶大です。VS Codeのインストール、つまり自身のパソコンで使えるようにする方法や使い方については以下の記事でお伝えいたしますので、ぜひご確認ください。

作りたいものを作る前にするべきこと「部品」

環境開発を整えることができたら、実際にコードを書くことやそのコードを実行することができますが、慣れていくにつれてコードを書くだけでは物足りなく感じるようになると思います。

では、実際に作りたいものを作っていこう! と思いたいところですが、その段階では技術が理想に追いついていない状況です。その状況の中で必要となることは、部品を作っていくことです。

まずボタンを作るにはどうすればいいのかページを切り替えるにはどうすればいいのか?などモバイルアプリ・Webサイト開発においての基本となる部品の作り方を覚えていく必要があります。
いろんな部品を自分で作っていくことで自分が作れる手札を増やすことに繋がります。

実際に自分の作りたいものを作っていく

自身の作ることができる手札が豊富になったところでやっと本格的に自分の作りたいものを作るタイミングです。SNSアプリや習慣管理系のアプリを作りたいという方もいると思いますが、このレベルのアプリ開発だとどのように実装すればいいのか分からないことがあります。その状況に陥ってしまった時に重要なのが手札の組み合わせです。もし作りたい機能を作るための手札がない場合(どうやって作ればいいのか分からない場合など)はそのための手札を得る必要があります。

ここでChatGPTに聞くことで答えを聞くこともいいですが、自力で探すことをおすすめします。なぜなら、答えを得るまでにその答えに関する知識を得ることができるからです。また、考え方の方向修正にも繋がります。調べる際に、「実装したい機能」+ 「利用している環境やツール」で調べたとします。そうすると検索件数が十分にあればその考え方の方向性が正しいと言えますが、検索件数が不十分(例えば1ページ分しか検索結果が出てこない)といった場合は、その考え方が一般的ではないということを知ることができます。

まとめ

アプリ開発ができるようになるためにはまずコードを読むことに慣れる実際に自分で書いてみる基本的な部品を自分で作ってみる持ち手の手札が整ったら実際に作りたいものを作っていく

こういった流れの学習方法をおすすめします。

最後までお読みいただき、誠にありがとうございます。良いアプリ開発ライフを送ることができるよう願っております。

人気の記事

カテゴリー別

ツール

AWS