プログラミングと旅と映画の日々

普段はスマホ決済サービスの会社でバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

HTML5の基本を理解しておく<文系エンジニアのプログラミング>

HTMLは、今までネットの情報を元に最低限のキャッチアップのみで使っていたため、体系的にちゃんと勉強してきませんでした。

 

業務で使うようになったことをきっかけに、今一度ゼロから勉強していこうと思います。

 

◆HTMLとは

端的にいうとWebページを作成するためのコンピュータ言語。

初めから定義されているタグを利用することで、人間にもコンピュータにも理解出来るドキュメントを構成することがHTMLの役割です。

1つのwebページは必ず1つのHTMLが必須です!

 

*タグについて

タグは200種類以上も用意されており、全部の使い方を覚えるのは大変です!

でも実際に使うタグは30〜40種類ほどのはずなので、最低限必要なものだけ押さえておけばOKかと!

 

◆HTMLの書式を理解しよう

(例)<a href = "http://sbcr.jp">SBのページ</a>

タグ名:a

開始タグ:<a..>

終了タグ:</a>

コンテンツ:SBのページ(*コンテンツががブラウザに表示される)

属性:href = "http://sbcr.jp" (*hrefはリンクさせたい時に指定する属性です)

 

HTMLタグは開始タグと終了タグで囲み、その中にコンテンツや属性を記載します。

また、開始タグ終了タグで囲ったタグは要素と呼ばれます。

リンクの属性であるhrefはaタグ固有の属性ですが、class、idなどの属性はどんなタグにも利用でき、グローバル属性と呼ばれます。

 

◆終了タグのない空要素

上記の例で示したaタグのように、多くのタグは開始タグと終了タグがセットで必要です。

しかし、終了タグの必要ない空要素といったものが存在します。

終了タグがないため、テキストなどのコンテンツを持てません。

 

*代表的な空要素

meta,link,br,img,input

 

◆関連

CSSの基本を理解しておく<文系エンジニアのプログラミング> - hoz blog

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

新品価格
¥2,678から
(2017/1/31 20:14時点)