HTML/CSS 勉強中！その1

やま

2024年3月29日 21:41

　プログラミングを勉強中なので、アウトプットを兼ねて自分なりにまとめます。勉強の記録的な感じです。今回はHTMLをまとめます。

＊勉強して一か月も経ってないので、バリバリの初心者です。間違っていたら、コメントで指摘をお願いしたいです。

HTMLとは

　HTMLとは、文章の構成（見出し、本文など）を作成するプログラミングです。主にタグというものを使い、表現します。タグとは、「<>」のことです。

<h1> Hello world </h1>

のように、タグとタグで挟むときもあります。挟む場合、終わりのタグでは</>のようにスラッシュを付けます。

　また、文中は「" "」のように挟む必要はないです。また、自分はよくタグとタブを言い間違えるので注意です。

要素とは

　タグの中身のことを要素といいます。「hタグ」でいうところの、「h」です。

よく使うやつ

h タグ

　hタグとは、見出しを意味します。"heading"（見出し）という意味から由来しています。

　これは2つで挟みます。このように表記します。

<h1> Hello world </h1>
<h2> Hello world </h2>
<h3> Hello world </h3>

補足情報

　数字が大きくなるほど、見出し度（？）が下がります。

<h1>~</h1>　大見出し（タイトルぐらい大きい）
<h2>~</h2>　中見出し（そこそこ大きい、この記事では「よく使うやつ」ぐらい）
<h3>~</h3>　小見出し（大きい、この記事では「HTMLとは」「hタグ」ぐらい）

のようにです。

　調べてもあまりわからなかったのですが、この数字のレベルはマークダウン記法でいう「#」の数に対応しているのかなと思います。

p タグ

　pタグとは、段落を意味します。"Paragraph"（段落）という意味から由来しています。見出しの次は本文です。

　このように表記します。これも挟んで使うタイプです。

<p> good morning </p>

good morning

　このように出力されます。

br タグ

　brタグとは、改行を意味します。"break"（区切る）という意味から由来しています。

　このように表記します。これは単独で使うタイプです。

<p> good <br> morning </p>

good
morning

のように改行されて表記されます。

body タグ

　bodyタグとは、文書の中身を表します。

　このように表記します。

<body>
  <p> こんにちは　<p>
</body>

コメントアウト

　コメントアウトとは、コードとして読まれないようにする処置です。
「<! ~~~>」の中になら、~~の個所にどんなコメントを書いても大丈夫です。

　このように表記します。

<! これは2024年 3/29に作成しています>

　共同開発などをする際に「このコードはこういう意味だよ」とコミュニケーションを取る際に使われるそうです。

strong タグ

　strong タグとは、強調を意味します。"strong"（強調）という意味から由来しています。

　このように表記します。太字に表記されます。

<p> <strong> good </strong> morning </p>

good morning

このように表記されます

属性とは

　属性とは、タグの中に追加できる情報のようなものです。ボタンができたり、画像を貼れたりなどいろいろできます。

<h1 class = " ~~~ "> ~~~ </h1>

のように使います。タグの中に class という属性を入れました。

img タグ

　imgタグとは、画像を意味します。"image"（画像）という意味から由来しています。

　このように表記します。これは単独で使い、src 属性を用います。

<img src = "URL">

　これで画像を表示できます。

a タグ

　aタグとは、リンクを表示します。"anchor"（アンカー）という意味から由来しています。

　文字などにURLを載せたい場合に用いられます。href 属性このように表記します。

<p><a href =" https://note.com/sponge_note "> 私のnote </a></p>

私のnote

イメージはこんな感じ。

補足情報

アンカータグで挟むのは文字。p タグは挟めない。

<a href =" https://note.com/sponge_note "> <p>私のnote </a></p>

これでは使えない

href とは「エイチレフ」と呼ぶ
hypertext reference の略称（直訳は「ハイパーテキスト参照」：google 翻訳より）

箇条書き ulタグと liタグ

　ulタグとは、順序なしリストを意味します。"uncontrol"（順序なし）という意味から由来しています。

　liタグは、リストを意味します。list（リスト）から由来しています。このように表記します。

<ul>
  <li> 日本 </li>
  <li> アメリカ </li>
  <li> インド </li>
</ul>

・日本
・アメリカ
・インド

のように出力されます。

表を作る

trタグとは、"row"（行）という意味です。
tdタグとは、"data"（データ）という意味です。行にデータを入れる感じなので列っぽく使います。
tableタグとは、"table"（表）という意味です。
theadタグとは、tableの hタグのような意味です。表の見出しですね。
tbodyタグとは、tableの bodyタグのような意味です。表の中身ですね。

　このように表記します。行の次に列を入れる感じです。

<table>
  <thead>
     <tr>
       <td> ~ </td>
       <td> ~ </td>
     </tr>
  </thead>
  <tbody>
     <tr>
       <td> ~ </td>
       <td> ~ </td>
     </tr>
  </tbody> 
</table>

おわりに

　他にも、formタグなどで送信機能を構成したりすることもできますが、今日はここまで。

　最後まで見ていただきありがとうございます！