はじめに
ハッカソンでフロントエンドを担当する機会を頂きましたが、理解が乏しいため備忘録として記事に残し、少しでも整理していきたいと思います。
個人的な備忘録です。IT未経験のため間違っている点がありましたらご指摘いただけますと幸いです。
HTMLコードの<head>部分の意味
コード例をもとに、各部がどのような意味をもっているのかコメントで整理してみます。
<head>はメタ情報を記述する部分なので、ブラウザには直接表示されません。
作成する画面が複数ある場合、<head>の部分はbase.htmlに記述し、それを各ページで読み込む形にすることが多いです。これはFlask,Djangoなどのフレームワークの機能を利用します。
<!-- ブラウザにHTMLであることを明示 -->
<!DOCTYPE html>
<!-- HTML文書の開始。日本語を指定 -->
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- レスポンシブデザインを有効化 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO用のページの説明文 -->
<meta name="description" content="ページの説明">
<!-- タブや検索結果に表示されるページタイトル -->
<title>ページタイトル</title>
<!-- ファビコンの指定 -->
<link rel="icon" href="img/favicon.ico">
<!-- ブラウザ間のスタイルの違いを防ぐためにリセットCSSを適用 -->
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<!-- このページに適用するcssファイルを指定 -->
<link rel="stylesheet" href="css/style.css">
</head>
</html>
用語の意味の補足
-
<link>タグhref属性について
"Hypertext REFerence" の略です。どこにリンクさせるか？を指定します。リンク先はURLやファイルのパスを指定することでHTMLファイルと紐づけることができます。 -
<link>タグrel属性について
"RELationship" の略です。hrefでリンクさせた先が何であるかを明示します。たとえばstylesheetであればCSS、iconであればファビコンを表します。 -
リセットCSSについて
ブラウザによってスタイルのデフォルト設定に違いがあるため、その差異をなくすために使用されます。なにも指定しなかった場合に、ブラウザが自動的に適用しているデザインがあります。これをリセットすることで、どのブラウザで開いても共通の見た目となります。いくつか種類がある様です（Eric Meyer’s ResetやNormalize.cssなど）。
まとめ
何度も練習すれば当たり前のように書けるようになると思いますが、各部がどんな意味を持つのか、しっかり理解した上で記述していけるように学習を継続していきます。