HTML/CSS 勉強中！その1
プログラミングを勉強中なので、アウトプットを兼ねて自分なりにまとめます。勉強の記録的な感じです。今回は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>補足情報
アンカータグで挟むのは文字。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タグなどで送信機能を構成したりすることもできますが、今日はここまで。
最後まで見ていただきありがとうございます！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？