今日は1冊ですべて身につくHTML＆CSSとWebデザイン入門講座を修了し、まとめ復習作業
とりあえず、HTMLの範囲で気になったり覚えておきたい部分をメモりました。
雛型
< !doctype html> これから記述するHTMLのverを指定 HTML5
< html> < /html> htmlの全体を意味する
html=lang="ja" これでWebページの言語を指定する
< head> < /head>
WEBページ内の情報を記述する範囲。ブラウザーには表示されない
< title> < /title>
head内に記述。ページのタイトル 必須。お気に入りに入れた時の名前にもなる
< meta>は、他ページにまとめる
< body> < /body>
HTMLの文書の中心。ブラウザーに表示される部分。
< meta> head内に記述。様々な情報(メタ)を記述する。
・meta charset="utf-8" 文字コード指定 charset
・meta http-equiv="X-UA-Compatible" content="IE=edge"
ブラウザの互換性指定 http-equiv
IEを使用している人向けへの設定。IEを使用する際、最新モードに。
・meta name=robots content="noindex, nofollow"
検索エンジンへのインデックスを避けるための記述
上記の記述をすることにより、検索結果として表示されなくなります。
低品質なページなどをインデックスさせないことで、SEOのマイナス評価を避けることにも繋がるので必要に応じて設定しましょう。
※逆にインデックスさせたいページには間違って設定しないよう注意してください。
・meta name="detection" content="telephone=no"
主にスマートフォンなどが電話番号を勝手にリンク設定することを避けるための記述です。
スマートフォンのブラウザなどでは、ページ内に電話番号のような記述を見つけると勝手にリンクにしてしまう場合があります。誤ってユーザーが架電してしまわないよう設定しておきましょう。
また、「content="address=no, email=no"」とすることで、メールアドレスの自動リンク化を避けることができます。
・meta name="viewport" content="width=deveice-width,initial-scale=1,minimum-scale=1.0"
ページの表示領域を指定
ブラウザーがページを表示する際の大きさを指定する
これが無いと、端末ごとにレスポンシブ対応が反映されない。
・meta name="description" content="ページの概要"
description＝説明 content=今から作るページの説明文
[OPG関連]SNSでシェアされた時の情報記述方法
meta property="og:title" content="ページのタイトル"
基本的にはtitleと同様の意味
meta property="og:description" content="ページの説明文"
descriptionと同じ。
meta property="og:site_name" content="サイト名"
ページのサイト名
meta property="og:url" content="ページのURL"
ページのURL 絶対パスで記述する必要あり
meta property="og:image" content="ページの画像"
SNSでシェアされた時の表示する画像を指定
meta property="og:locale" content="ja_JP" 言語指定
ページの言語を指定。日本語の場合ja_JPとなる
meta property="og:type" content="ページの種類"
種類としては、[website, blog, article]
meta property="fb:app_id" content="App-ID"
組織でサイトを管理している場合などに使用する
meta name="twitter:card" content="summary_large_image"
Twitterでのカードの表示タイプを指定
summary：一般的な形。タイトル、説明、OGP画像を表示します。
summary_large_image：summaryのOGP画像が大きい形。
app：アプリ配布用。アプリ名、説明、アイコンなどを表示します。
player：ビデオ、オーディオなどのメディアを表示。
・コメントアウト方法
< !-- -- >で記述 vscode→ctrl+/ でショートカット
・< table > テーブルタグ
< tr > 横１行を表す
< th > 行の中のセル（見出しを表す）
< td > 行の中の見出し以外のセル
※要素
横方向にセルを繋げる→colspan="繋げるセル数"
縦方向にセルを繋げる→rowspan="繋げるセル数"
・< form > フォームを作るタグ
主な要素
action データの送信先ページを指定
method データの転送方法 主に get か post
name フォームの名前を指定
・< form >内で使うタグ
① 一行テキスト入力欄
よく使う要素 placeholder="〇〇" 入力欄にあらかじめテキストを用意
※type=""種類
text 一行テキスト
search 検索入力欄
email メールアドレス入力欄
tel 電話番号入力欄
url アドレス入力欄
②< input type="radio"> ラジオボタン(複数ある選択しから1つを選択するボタン)
主な使用要素
name ラジオボタンの名称(グループ分けに使う)
value 送信される選択しの値
checked 記述した選択肢を予め選択された状態にする
③< input type="checkbox"> チェックボックス(複数ある選択肢から複数選べるボタン)
主な使用要素は②と同じ
④< input type="submit"> 送信ボタン
主な使用要素
name ボタンの名前
value ボタンに表示するテキスト
⑤< input type="image"> ボタンに画像を使用する場合
主な使用要素
name ボタンの名前
src ボタンに使用する画像のパス,ファイル名
alt 画像を説明する代替テキスト
⑥< select>+< option> セレクトボックス(格納された選択ボックス)
の主な使用要素
name セレクトボックスの名前
multiple shift or ctrl キーで複数項目選択可能にする
< option>の主な使用要素
value 送信される選択肢の値
selected 初めから選択されている状態に指定
⑦< textare> 複数行のテキスト入力欄
主な使用要素
name 名前
placeholder あらかじめテキストを入力
⑧< label> フォームパーツと文字(ラベル)を関連付けさせられる。UI向上
< input type="text" id="〇▲">とパーツにid指定
< label for="〇▲">①の選択肢< /label>の様にforで関連付けしたいパーツのidを指定
HTML内の内容をグループ分けする為のタグ
①< header> ページ上部のヘッダー部に使用
②< nav> メインのナビゲーション部に使用
③< article> 記事等、そこだけ読んでも成り立つ内容の箇所に使用
④< section> 文章の章や節をまとめるタグ。必ず見出しh1~h6が入る。レイアウト目的では使わない。
⑤< main> そのページのメインの部分を囲むタグ
⑥< aside> 記事の補助的な内容を表す時 や サイドバーや広告枠にも使用
⑦< footer> ページ下部に使用。主にコピーライト(©)やSNSリンク等がある部分
⑧< div> 意味を持たないブロックを作る時。レイアウトに使用したい場合に囲むことが多い