HTMLの基本的なところ

9378 ワード
HTML 初心者エンジニア HTML テキストリンク

最初に

カレンダー企画2020の5日目
プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。

HTMLの基本的なところ

今回はHTMLの基本的なことをまとめようと思います！

そもそもHTMLとは？
まさにこれです！今見ているこの記事はそのHTMLを使って表示しています！
ブログとかネット上で文字をみる場合はHTMLが使われていると思います！
ページの構造や要素をブラウザに伝える時に使う言語であります。

ファイルで保存する時は必ずファイル名の後に.html(拡張子)をつけて保存することでHTMLファイルとして認識されます！(ex: qiita_post.html こんな感じに名前をつけます)
他にもWordは.docxやExcelは.xlsxみたいなものを見たこと無いでしょうか？HTMLにもそのようなものが必要ということです^^

HTMLの書き方

qiita_post.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="qiita_post.css" />
    <title>qiita_post_demo</title>
  </head>
  <body>
    <h1>qiita_post_demo</h1>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

用語も一緒に解説していきますね

インデント

行頭に空白を使ってコードの書き始めをずらすことが出来ます。
これはコードを書きいてく上でとても大切です。何故ならば上記のコードのようにタブがどこからどこまで関わっているのか？といった構造が読みやすくなります。自分だけしか見ないのであれば気にしなくてもよいかも...ですがコードを誰かが見てUPDATEしてくれたり、誰かに教えて貰う時などは相手が見やすいように書くのがとても重要になります。インデントの必要性がわかるようにこんなことをしてみます。

qiita_post.html
ダメな例①
<!DOCTYPE html>
<html lang="ja">
    <head>
  <meta charset="UTF-8">
        <link rel="stylesheet" href="qiita_post.css">
    <title>qiita_post_demo</title>
  </head>
<body>
    <div class="box1">
      <div class="box2"></div>
  </div>
  </body>
</html>
qiita_post.html
ダメな例②
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="qiita_post.css">
<title>qiita_post_demo</title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

いかがでしょうか？
このようにインデントが崩れるだけで一気に見くくなります！
なのでコードを書く時は気をつけよう！ってことです^^

インデントの空白には厳密なルールはないので半角スペース2つや4つでも問題ないです！(私は2つ派です^^)
しかし、チームで行う場合はルールとして決めて置かないと一個目のダメな例みたいに全体が崩れますので注意です！

要素

HTMLはブラウザで表示させると言いましたがその時にどのように表示するのかを指示する必要がある
その役割をすることを要素と言います

例えば
<h1>qiita_post_demo</h1>(上記から抜粋)

この抜粋した全部を要素と言います。
因みにこれは「見出しとして表示して」という指示になります。こんな感じで表示される

qiita_post_demo

変なところに見出し作ってしまいましたね^^;

要素の構成については
- 開始タブ
- 指示する表示内容の始まりを示すタブ。上記の <h1> に当たる部分
- コンテンツ
- ブラウザで表示させたい内容。上記の qiita_post_demo に当たる部分
- 終了タブ
- 指示する表示内容の終わりを示すタブ。上記の </h1> に当たる部分

要素の中身のタブは沢山あるので必要な時少しずつ覚えて行くのが良いと思います。
中には終了タブが必要ないものもあります。空要素と呼ぶそうです！(例として書いた中にも,には終了タブ無いですね！)

タブには属性というのがある

例：<div class="box2"></div>
- div → 要素名
- class → 属性名
- "box2" → 属性値(基本的に””で囲む)

属性名 + 属性値 = 属性
属性もまた沢山ありますので都度都度覚えて行くのが良いかと思います^^

HTMLの構成について

HTMLの構成派大きく分けると2つです！
これは上にあるものと全く同じものです。

qiita_post.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="qiita_post.css" />
    <title>qiita_post_demo</title>
  </head>
  <body>
    <h1>qiita_post_demo</h1>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

<head>と<body>があるの分かりますか？
HTMLの2つの構成はこれらです。

head要素

この働きはブラウザや検索エンジン「google」とか「yahoo」などに伝えたい情報を記述します
この要素内で書かれたものは実際のWEBページに表示されることは無いです。
ネットで調べたら上に出てくるタブに表示されているものはここに書かれているtitle内のものだったりします。

<!DOCTYPE html>
これはHTMLファイルである認識をさせる為に必要(バージョンによって異なることがある。)
<meta charset="UTF-8" />
上記のやつとセットで覚えておきましょう！これを記述しないと文字化けとかするみたいです
<link rel="stylesheet" href="qiita_post.css" />
これはこのHTMLファイルで使用するCSSファイルを指定する。
<title>qiita_post_demo</title>
タイトルです！

body要素

実際にブラウザに表示させたい内容を記述していく

qiita_post.html
<h1>qiita_post_demo</h1> <!--コメントを書ける。この部分はブラウザには表示されない-->

<!-- --> の部分はコメントアウトといって記述に対してメモみたいに残しておくことが出来る。ブラウザには表示されないです。

これしか表示されないです！

最後に

以上でHTMLの基本的なところを終わります。
まだまだ取りこぼしている基本があるかもしれないですが…頑張ってまとめて見ました！
最後までみて頂きありがとうございます。