HTML&CSS入門その１『HTMLの基礎＆下準備』

①HTMLとは

HTMLはHyperText Markup Language（ハイパーテキスト・マークアップランゲージ）の略称であり、ホームページを作成する上で最も標準的な言語と言われている。
　Webサイトは、Webデザインしたものをコーディングすることによって完成される。HTMLはそのコーディングの際に使用されるもので、これをマークアップ言語という。

ウェブ開発に関する学習をするとき、RubyやPHP,Python,Javascript,Jayaなど様々な選択肢があるが、ほとんどの場合、HTMLを最初に学ぶことになる。
　その理由として、HTMLがウェブブラウザ（Google chrome,Firefox,Safari等）で表示できる唯一の言語だからという点が大きい。
　言語と言ってもHTML自体はプログラミングではなく、RubyやPHPが行うウェブサーバーの中の処理（データベースのやりとり、データの登録、参照等）において、人間には非常に分かりにくい膨大なデータを見やすくするために、HTMLという形に変換し、ウェブブラウザで表示するという仕組み。

②HyperTextハイパーテキスト（リンク）について

HTML(HyperText Markup Launguage)の略称の半分を占めるHyperText（ハイパーテキスト）とは、Webサイトを利用した人なら当然ご存知クリックすることで別のページに遷移することができる、いわばリンクのこと。
　HTMLの最大の特徴ともいえる機能である。

③Markupマークアップとタグについて

Webサイトを見ていると、文章のタイトル、大見出し、小見出しなどに大文字や太文字など様々な種類の文字が使用されている。
　これらのタイトルや見出しなどを設定する際に用いるのがタグである。

　〇形式
<タグ名>中身</タグ名>

　〇使用例
<h1>こんにちは</h1>

上記の場合、見出しとして『こんにちは』という文字が太字で表示される。
　このように文書構造や視覚表現などの情報をコンピュータが正しく認識できるようにするコードをマークアップと言う。

④下準備（VSCodeのインストール）

HTML/CSSを動かすには、特別なツールをインストールする必要はなく、パソコンの中にもともとある『メモ帳』ソフトでも問題なく記述することができる。
　しかし、実際の現場ではより効率的な開発をするために、プログラミング専用のエディタ（ファイル編集ソフト）が使われる。

　以降は、その中でも最もよく使われるVisual Studio Code（vscode）というソフトウェアで解説を進めていく。

こちらからインストール
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

インストールして立ち上げた時点ではすべて英語表記となっているので、日本語へ変換する。

１，左中央の四角形が４つ並んでいるボタンを押す
２，左上に出た入力欄に「japanese」と入力
３，検索候補の一番上に出てきたJapaneseの地球儀をクリック
４，インストールボタンをクリック
５，インストールが終了すると、右下に英語で通知が来るのでそれをクリック

これで一度自動的に再起動された後、日本語表記になる。

⑤下準備（フォルダの作成）

学習する上でたくさんのファイルを作るため、専用のフォルダを作成する。
　フォルダ名と作成場所は各々自由だが、ここでは一つの例として私のやり方を紹介する。

１，デスクトップに「test」という名前でフォルダを新規作成する
２，その中に「html」という名前でフォルダを新規作成する
３，フォルダが出来たらvscodeに移り、最初の画面の「フォルダーを開く」を選択する
４，先ほど制作した「test」フォルダを選択する

これで下準備は完了。

⑥初めてのコード

最後に、検証として一つのコードを制作する。
htmlフォルダに「first.html」というファイルを作成する。
作成すると、右に「first.html」のエディタが表示されるので、下記の内容を記述する。

<h1>Hello World!</h1>

入力が終わったら、Ctrlキーを押しながらsキーを押すことで、ファイルが保存される。
　上部メニューからファイルを保存することも可能だが、Ctrl+sの方が圧倒的に効率がいいので、キー操作による保存に慣れた方がいい。
　このような、ある操作をキーの組み合わせで実行することをショートカットキーと言う。

　よく使う、便利なショートカットキー一覧
・すべて選択　「Ctrl+a」（画面上に表示されている全ての文字を選択することができる）
・コピー　　　「Ctrl+c」（選択した文字をコピーすることができる）
・貼り付け　　「Ctrl+v」（コピーした文字を張り付けることができる）
・一つ戻す　　「Ctrl+z」（Enterキーを押し、確定したところまでひとつずつ戻すことができる）

最後に、「test」フォルダから保存したファイルをダブルクリックで表示する。
　ブラウザにファイルの内容が表示されていたら成功。