HTML入門講座 SublimeText3を使ってHTMLの基本を書いてみよう

HTML CSS入門

はじめまして。ドルフィンです
このブログにたどり着いたあなたは、htmlについて学びたい、htmlを今よりも詳しく知りたいとお考えだと思います。
そんな読者の皆様が簡単にhtmlを書けるようになり、簡単にウェブサイトを作れるようになるまで、コーディングを解説していきたいと思います

今回は、HTMLの基本について学んでいきます。

  1. HTMLおすすめエディタ SublimeText3のインストール
  2. HTMLをコーディングしてみよう
  3. HTMLの基本 DOCTYPEとソースの確認方法
  4. HTMLの基本 headとbody
  5. まとめ

HTMLおすすめエディタ SublimeText3のインストール

SublimeText3

SublimeTextとは、HTMLを書くために必要な【エディタ】と呼ばれるものです。
既に自分のエディタを使っているという方は、次のタグ書きから一緒に参加しましょう！
これからはHTMLを書くときは、このSublimeTextを使ってコードを書いていくことになります
まずはこちらのSublimeTextをインストールしてください

初期設定だと、Cドライブの中にこのような形でインストールされると思います。
こちらで特に設定はありませんので、Nextを押し続けてインストールを完了させてください。
インストール後は、windows10をご利用の方であれば、左下のスタートメニューを開いて頂き、メニューの1番上に【最近追加されたもの】という項目があり、SublimeText3というソフトが追加されていると思います。

こちらを早速起動してみましょう！以下のような画面が表示されたことが確認できれば、SublimeText3のインストールは完了です！

※ソフトは英語になっていますが、このままでも差支えありません。日本語化の設定方法も後ほど公開いたします。
ここからは、いよいよHTMLのコーディングに入ります。

HTMLをコーディングしてみよう

左上のFileから、New Fileを選択してください。
新しくタブが追加されたかと思います。ここにhtmlを記入していきましょう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
こんにちは！
</body>
</html>

こちらをコピーして、SublimeTextに張り付けしてみましょう！

この【<】で始まって【>】で終わる英語の文字たちが、ページを作るために必要な【タグ】と呼ばれるものです。すべてのサイトは、このタグによって作られています。

左上のFileから、Saveを選択します。すると保存の画面になったかと思うので、ファイル名にindex.html という名前を付けて保存します。保存場所はデスクトップなどで構いません。

※SublimeTextは、まだ閉じないでください

保存したら、そのファイルを右クリックして【プログラムから開く】を選択します。
その中から、いつも自分が使っているブラウザを選択してみてください。

こんにちは！と表示されたでしょうか？

このタグ構成はページを作る上での基本となる形です。この形をベースに、あらゆるサイトが作られているのです

では、その内容について触れていきたいと思います

HTMLの基本 DOCTYPEとソースの確認方法

先ほどのSublimeTextからタグを見てみましょう

 

<!DOCTYPE html>
<html>
<head>


<meta charset="UTF-8">
<title>タイトル</title>
</head>


<body>
こんにちは！
</body>
</html>

1行目の<!DOCTYPE html>とは、これから書く内容がHTMLである、という宣言を行っています。基本的にはどんなサイトでも、1行目にはこのDOCTYPEが必ず宣言されています。

プログラミングの世界では、このような【宣言】という言葉はとてもよく使われます。

それを確認する方法があります。新しいタブで適当なサイトを開いて、Ctrlを押しながらUキーを押してみてください。HTMLタグが大量に現れると思います。

【ページのソース】と言って、あなたが今まさに見ているサイトのHTMLを見ることができる機能です。

そのソースの先頭には、DOCTYPEと書かれていませんか？

どんなサイトでも、この決まりは絶対に守られています。

  • HTMLを書くときは、最初に必ずDOCTYPEを宣言をする。
  • サイトのHTMLは【ソースを表示】で見ることが出来る

この2つを覚えてもらえると幸いです。

HTMLの基本 headとbody

headタグとbodyタグについて説明します

head(ヘッダ)とbody(ボディ)と読むのですが

headは頭でbodyは体という風に覚えてもらえると分かりやすいと思います。

headタグの中では、CSSやJavaScriptといったHTMLに動きを与えるような部分や、あらかじめ読み込んでおく部分を主に書きます。

そしてbodyタグの中で、基盤となるHTMLタグを書いていくことになります。

ほかのサイトでどうなっているか、ソースの表示から確認してみると分かるかもしれません

まとめ

HTMLを書くとき、他サイト等のHTMLを見るときの内容をまとめると

  • SublimeTextを使ってHTMLを編集する
  • 他のサイトのHTMLを見るときは、ソースの表示をする

ページのタグ構成についてまとめると

  • 一番先頭にはDOCTYPE宣言
  • 次にheadタグを読み込んでからbodyタグを読み込む
  • headタグにはCSSやJavaScript。bodyタグにページに表示させるためのタグを書き込む

といった流れになります！

今回の記事はここまでとなります。

分からないことなどありましたら、お気軽にコメントください。

コメント

ホーム
トップ
タイトルとURLをコピーしました