ソースコードの表示方法
右クリックで「ソースを表示」で、該当のソースコードが見れる。
デバックには右クリックで「検証」でディベロッパーツールが表示される。表示位置はアイコンをクリックで変更可能。
上段はHTMLが表示され、下段はCSSが表示される。
レスポンシブをデバッグするとき
左上のアイコンをクリックして、スマホ画面にして作業する。「Responsive」で機種を選択→「Show device frame」で実機のフレームも表示される。キャプチャや当て込みに便利。
スマホでソースコードを表示する
Androidの場合
Chromeの場合はサイトURLの前に、「view-source:」を入力してサイトを閲覧するだけでHTMLソースの確認が可能。
iPhoneの場合
App Storeから無料アプリの「View Source」をインストールしてHTMLソースを表示。
ソースを表示したいサイトをブラウザで開き、「共有ボタン」をタップして「その他」をタップ。
アクティビティにて「View Source」を許可すると、「View Source」のボタンが作成されるのでタップ。
開発環境・手順
まず、案件ごとに開発用フォルダを作成して中に個々のコードファイルを入れてまとめていく。通常、TOPページはindex.htmlとする（参照順の話）。「images」フォルダの中に画像を入れていく。
エディタは、TeraPadがおすすめ。
エディタ設定
タブ
デフォルトだと８文字設定。「表示」＞「タブの文字数」＞４文字に変更する。
言語設定
「表示」＞「編集モード」＞「HTML」や「CSS」など言語を選択できる。
空白（特殊文字）の区別
「表示」＞「オプション」＞「表示タブ」＞「マーク」をすべてチェックする。
文字コードと保存方法
保存時に注意！
シフトJISは日本語の文字が少ない。EUCはLinuxなどによく使われる。UTF-8はワールドワイドに使える文字を開発しよう！というユニコード。そこから作られたのがUTF-8。今はBOMを判断できないプログラムが多いので、BOMなしで書いていく。
「ファイル」＞「文字／改行コード指定保存」＞「UTF-8N」で保存。一度保存されれば大丈夫。だが、コード中に日本語が入ってない状態で保存すると、次回開いたときにSHIFTJISで開かれる（デフォルトなので）
レイアウト
現在の主流は２タイプ
- ヘッダーから全体がすべて同じ幅
- ヘッダー＆フッターは全幅でボディはセンターで少し幅が狭い（今の流行はこっち）
HTMLとCSSとは？
リンクや埋め込み、文章の構造を定義するのがHTML。
レイアウトや文字色など、デザイン・見栄えについて定義するのがCSS。
現在はHTML5とCSS3
HTML文法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>（Webページのタイトル）</title>
</head>
<body>
（Webページの内容を記述）
</body>
</html>（上から説明）
ドキュメントタイプ宣言。HTML5であればと記述する。
HTML文書宣言。日本語サイトはja。 検索エンジンはここを見て「翻訳しますか？」と聞いてくる 。
head要素には、文書のメタデータを記述する。
重要 titleタグ
検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があり、SEO的には語順なども重要。
body要素には文書の本文を記述する。bodyの範囲がwebページとして表示される。（普通の人が見てるところ）
metaデータ
文字コード指定
<meta charset="UTF-8"> HTMLを記述している文字コードを指定。UTF-8NでもNは書かない。
ページの説明文
<meta name="description" content="（サイトの説明文）">一般的には検索サイトでページ概要として表示され、PCは120文字程度、スマホは50文字程度が表示文字数となる。
ページのキーワード
<meta name="keywords" content="（キーワード）">ページの検索キーワードをカンマ（,）で区切って指定。昔に比べて、SEOにおけるこの項目の比重は下がった。※不正利用が相次いだため。現在は、こちらよりも本文中の単語の方がキーワードとして機能する。
ページの作者情報
<meta name="author" content="（作者情報）">Webサイトの作成者情報を指定。あまり書かなくても大丈夫らしい。
ビューポート（viewport）
<meta name="viewport" content="width=device-width, initial-scale=1.0">Webページの表示領域を指定。上記の「width=device-width」デバイスの表示幅に合わせた表示領域を使用することを示し「initial-scale=1.0」は1.0倍の倍率で表示。viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示される。viewportを指定して複数の装置のデザインを実装することを「レスポンシブWebデザイン」といい、正しく実装するには、HTMLにviewportを記述すると同時にCSSにレイアウト調整を行う記述が必要となる。詳しくは後程の講義で解説。
linkタグ
外部CSSファイルの紐付け
<link href="（スタイルシートファイルのパス名）" rel="stylesheet" type="text/css">ファビコンファイルの紐付け
<link href="（ファビコンファイルのパス名）" rel="icon">一般的なファビコンファイル名は「favicon.ico」。icoファイルはジェネレーターサイトで作成した正方形画像を使って作成。
Favicon ジェネレーター
https://favicon-generator.mintsu-dev.com/
