GASSY’S BLOG

本業の傍らでプログラミングを習得中の、駆け出しエンジニアのブログです。

HTMLの属性タグについて②

こんにちは、GASSYです。

今日も朝から晩まで本業で必死のパッチでした。

私がどんなに追い込まれて必死こいてやっても、当たり前だけど結果だけで評価されます。

できてなかったらダメ。期待に届いてなかったらダメ。

私もそらプロだから仕方ない。

プロとして、顧客の求めるものを常に全力で出し続けていくしかないってことですね。

認められなくてモヤモヤしてる時点で、私はプロとしては2流ってことなのだろうなぁ。

承認欲求からの開放は永遠の課題なGASSYです。

 

さて、今回もHTMLの属性タグについて書いていきます。

前回の続きで主に使用されるタグの種類を紹介したいと思います。

主なタグの種類

<p>タグ

段落を定義する時に使うタグです。

<p>*****</p>みたいな感じで書きます。

このタグで囲われた部分までがひとつの段落の扱いになります。

<h1〜h6>タグ

見出しに使うタグです。h1から順に大きくて、h6が一番小さくなります。

このブログの見出しもhタグで書かれてます。

<img>タグ

画像を表示させるためのタグです。

<img src = "gassy.png">と書くことで画像を指定し、表示させられます。

リサイズなどはCSSでやることが多いです。

imgタグは</img>みたいな閉じタグは使いません。使うとエラーが出ちゃいます。

<a>タグ

他のページへのリンクを生成したい時に使います。

<a href="https://blog.hatena.ne.jp/gassy1985/gassy1985.hatenablog">BLOG</a>

と書くことで、BLOGにGASSYBLOGのリンクを生成できるようになります。

<ul>タグ <liタグ>

リストを生成するためのタグです。

ul=unordered listの略で、順番のないリストを作成する際に使用します。

liと組み合わせて使うことが多いです。

<ul>

 <li>theme1</li>

 <li>theme2</li>

</ul>

こんな感じ。テーマ1、テーマ2というリストをulの中に持たせてます。

<form>タグ

文章入力フォームとか情報を入力できるフォームを生成します。

データのやりとりはRuby on Railsとかで行います。

HTMLはあくまで書いたりできるようになるフォームを作ってくれます。

<button>タグ

ボタンを作成してくれるタグです。デザインはCSSで変えられます。

 <button type = "submit" value = "SEND">

みたいに書きます。ボタンの機能にデータ送信機能をつけ、名前をSENDとしてます。

<select>タグ

セレクトボックスを作ってくれます。セレクトボックスはプルダウン式。

JavaScriptとか他の言語と組み合わせることでよく見るセレクトボックスのような動きをさせられるようになります。

 

と、大きくはこんな感じです。

属性タグはものすごい数ありまして、プロのエンジニアの方でも全部覚えてるなんてことはほぼないそうです。

それよりも用途に応じて検索して使うということが多いとのこと。

エクセルの関数とかと似てますね。

 

mozillaというサイトを見るとHTMLのリファレンスがあって、

そこで属性タグについても詳細に書かれてます。

 

興味を持たれた方は是非。

 

ではでは!

 

参考:Mozilla

https://developer.mozilla.org/ja/