フルスクラッチでwebアプリと作るときに気をつけること一覧

ドキュメントタイプを宣言する

文書がHTMLで作成されたことをブラウザに宣言するための記述。<html>タグよりも前に書く。

html4 の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

html5 の場合

<!DOCTYPE html>

HTMLページの言語を指定

<html lang="ja">

文字エンコーディングの指定

<meta charset="UTF-8">

これがないと英語版のブラウザで日本語で作成されたウェブページにアクセスした場合などに文字化けが起きる可能性がある。

ページの概要を記述

検索結果のスニペットやSEOに使用される。120文字以内がいい。

<meta name="description" content="○○○">

リセットcss を設置

リセットcss をタグの間に設置して、ブラウザ間の表示差をなくす。ress.css を使った例。

<head>
<link rel="stylesheet" href="css/ress.min.css">
</head>

レスポンシブ対応

viewportを使う

<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

viewport(ビューポート)とは、表示領域のこと。
width=device-width で、表示領域の幅を、PCやスマホなどの端末画面の幅に合わせる。
initial-scale=1 は初期のズーム倍率を表す。

タイトルとURLをコピーしました