HTMLに関する知識を、カテゴリ関係なく説明していきます。
動画関連
HTMLで動画を表示・再生するための基本構文となります。
下記のコードは「video.mp4という動画ファイルを、横幅600pxで、操作ボタン付きで表示する」という意味です。
<video controls width=”600″>
<source src=”video.mp4″ type=”video/mp4″>
</video>
videoタグ
<video controls width=”600″>
video
動画を表示するためのタグ
controls
再生・停止・音量などの操作ボタンを表示する
width
動画の横幅を指定する
sourceタグ
<source src=”video.mp4″ type=”video/mp4″>
src
読み込む動画ファイルの場所
type
動画の形式
ポイント
- controls：再生ボタンなどを表示
- autoplay：自動再生（※スマホは制限あり）
- muted：無音（自動再生とセットで使う）
- loop：ループ再生
- poster：サムネ画像
- plyaysinline：スマホで全画面にならず、その場で再生する
- 動画は軽量化は命（MP4 / H.264）
- スマホで自動再生するなら「muted」必須
- ファーストビューで使うと訴求力が上がる
SVG関連
HTMLで「軽くてキレイな画像をコードで扱うため」に使用します。
例えば、アイコン（矢印やハンバーガーメニュー）。PNGよりも軽くて拡大しても劣化せず、色をCSSで変えることが出来ます。ロゴ（企業ロゴなど）。どのサイズでもキレイでレスポンシブにも強いです。装飾（波の背景や斜めの区切り）。デザイン性が高くなります。アニメーション。線がスーッと描けたり、ボタンがふわっと変化します。
以下のコードは「100×100の領域に、青い円を書く」を意味します。
<svg width=”100″ heigth=”100″>
<circle cx=”50″ cy=”50″ r=”40″ fill=”blue” />
</svg>
<svg width=”100″ height=”100″>
- width=”100″：横幅100px
- height=”100″：縦幅100px
<circle cx=”50″ cy=”50″ r=”40″ fill=”blue” />
- cx=”50″：円の中心のX座標（横）
- cy=”50″：円の中心のY座標（縦）
- r=”40″：半径40px
- fill=”blue”：青い塗つぶし
ポイント
- circle：円
- rect：四角
- path：自由な形
- line：線
コーディング規約
コーディング規約とは、「チームで読みやすく・直しやすくするためのルールです」。
- 誰が見ても理解できる
- 後から修正しやすい
- バグが起きにくい
命令規則
<div class=”box1″>
<p class=”textA”></a>
</div>
↑例えば上の例は、何の要素かパッと見て分かりません。
<div class=”card”>
<p class=”card_title”></p>
<p class=”card_text”></p>
<div>
↑このようにすると、
- card：ブロック（まとまり）
- card_title：cardの中にあるタイトル
- card_text：cardの中にある本文
見ただけで構造が分かるようにしてあげることが大事です。
インデント（見た目を揃える）
<ul>
<li><a href=”#”>リンク</a></li>
</ul>
↑上の例は見た目が揃っておらず、ダメな例です。
<ul>
<li>
<a href=”#”>リンク</a>
</li>
</ul>
ネストしたら一段下げるなどを統一することが大事です。
CSSの書き方
.title{font-size:20px;color:red;margin10px;}
↑上の例はぐちゃぐちゃで見ずらいです。
.title{
font-size:20px;
color:red;
margin:10px;
}
まとまりが分かりやすく見やすくすることは大事です。
コメントを書く
/*====
ヘッダー
====*/
どこからどこまでが何のパーツか分かりやすくすることは大事です。
ファイル構成
project/
index.html
css/
style.css
js/
script.js
img/
シンプルで分かりやすい構成にしてあげることが大事です。
MIME
MIMEとは、HTTPを使用してウェブサーバとブラウザが通信を行う種類を指定するものとして使用されているものである。
- MIMEタイプtext/html：意味HTMLドキュメント：拡張子.htmまたは.html
- MIMEタイプapplication/xhtml+xml：意味XHTMLドキュメント：拡張子.xhtml
- MIMEタイプtext/css：意味スタイルシート：拡張子.css
- MIMEタイプtext/javascript：意味JavaScript：拡張子.js
要素や属性
- 要素全般：p要素など終了タグが省略可能なものがある
- aside要素：広告などの記事の掲載にも適している
- a要素：子要素として、div要素を含めることができる
- body要素：セクショニングルートである
- canvas要素：座標は、左上がX=0、y=0である
- dl要素：内部でdiv要素を使用できる
- header要素：複数回出現してよい
- img要素のalt属性：条件により省略可能である
- textarea：alt属性を指定出来ない
- a要素のhref属性：指定しなくてよいというのは誤りである
- img要素のsizes属性：CSS3の長さを表す単位（vw、vh）が使用出来る
- img要素のwidth属性：値に％を使用すると文法エラーとなる
- DOCTYPE宣言：htmlは小文字でなくてもよい
- img要素のsrcset属性：属性の値で使用する「@2x」は、ピクセル密度が2倍の場合に表示されることを示すもとである
- main要素：複数配置の注意点として1つ以外にhidden属性を記述する
- テキスト系要素abbr：略語（ツールチップで正式名称を出す）
- テキスト系要素cite：出典・作品名を示す
- テキスト系要素code：プログラムコード
- テキスト系要素mark：強調（ハイライト）
- テキスト系要素sub：下付き文字（H2Oなど）
- 構成・まとまり要素figure：画像や図などのまとまり
- 構成・まとまり要素figcaption：figureの説明文
- 構成・まとまり要素caption：表（table）のタイトル
- 構成・まとまり要素fieldset：フォームのグループ化
- 構成・まとまり要素legend：fieldsetのタイトル
- 補足・詳細要素datails：開閉できる詳細情報
- 補足・詳細要素summary：detailsの見出し
- 補足・詳細要素dialog：ダイアログ（ポップアップ）
- 意味付け・データ要素data：機械が読めるデータを持たせる
- 意味付け・データ要素time：日時を表す
- 意味付け・データ要素ruby：ルビ（ふりがな）
- その他要素hgroup：見出しのグループ
- その他要素meta：ぺージの情報（文字コード・説明など）
- 入力制御属性accept：アップロードできるファイルの種類指定
- アクセシビリティ属性aria-*：画像読み上げ用の補助情報
- カスタムデータ属性data-*：自分で自由にデータを持たせる
- セキュリティ・通信属性http-equiv：HTTPの動作を指定
コンテンツの種類
ブロックレベル
h1～h6、pなど
インラインレベル
a、imgなど
フローコンテンツ
header、footer、p、ol、ulなど
ヘッディングコンテンツ
h1～h6、hgroupなど
セクショニングコンテンツ
article、aside、nav、sectionなど
フレージングコンテンツ
テキスト、a、b、br、em、i、q、rubyなど
エンベッディドコンテンツ
audio、canvas、videoなど
コメント