1つ前の記事ではWordPressでテーマを作る為の内容を書き始めましたが、
HTMLの基礎の部分でコピペしていたり、とりあえず覚えて書いていたコードがあったので、
まずそれを理解しようっていう、かなり個人的な内容でむしろメモになっちゃってますが。
HTML書き始めの基本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>タイトル</title>
</head>
<body>
</body>
</html>
私エディタはAtomを使用していますが、!+tabで上記のコードが表示されます。
<!DOCTYPE html>
HTMLを使いますよ宣言
meta
文章に関する情報を指定する際に使う
head内、titleの上
charset
character setの略。文字コードを宣言する。
（charset属性はHTML５から単独で使えるようになった属性）
複数使用は出来ない。UTF-8が推奨されている。
どんなOSでも使用可能で、世界中の文字を表示できるからだそう。
参考
ほんっとにはじめての HTML5 と CSS3 meta要素の charset属性で文字コードを指定しよう
viewport
viewportは表示領域、PCで言うとブラウザウィンドウの表示領域
meta要素のname属性をviewportにする。
content属性にviewportのプロパティと値を入力して、meta viewportの指定をする。
widthは表示領域の幅、ここではdevice-widthでデバイス(パソコンのブラウザや携帯端末)の幅に合わせている。
そのほかpxで指定することもある(例えばスマホ対応)
initial-scaleは初期倍率、1で等倍。
参考
もう逃げない。HTMLのviewportをちゃんと理解する
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
viewportを指定すればメディアクエリが必要ないのか？
逆にメディアクエリを使えばviewportは指定しなくていいのか？と疑問も湧いてきましたが、
こちらのサイトでわかりやすく説明されています！
http-equiv
http=hypertext transfer protocolの略(初めて知った！)
equiv=equivalentの略で、相当の・同義のという意味。
http-equiv属性ではブラウザの動作を指定できる。
meta要素はhttp-equiv属性が指定されるとプログラマ指示子となる。
プログラマ指示子とは？？
ブラウザに対してHTML文書の状態・動作を指示するもの。
通常はサーバーが担当している”ウェブページをどのように提供するか”の情報をHTML上で指定することができる。
使い方
<meta http-equiv="○○" content="△△">
必ずcontent属性とセットで使うこと！
X-UA-Compatible
IEの互換表示設定の指定。
content属性の値をIE=Edgeとすることで、
IEがそのバージョンの標準モードでレンダリングするよう促している。
参考
ほんっとにはじめての HTML5 と CSS3 meta要素の http-equiv属性で動作を指示しよう
こちらのほんっとにはじめての HTML５とCSS３はとても細かく書いてくださっていて、初心者の救世主様です泣
なぜIE対策としてこのタグを記入するのか
IEはバージョンごとにレンダリングが変わり、互換表示と標準表示がある。
IEでwebページがうまく表示されない時には、互換モードになっていることが多いとのこと。
なので標準モードにさせる必要がある。
というかそもそも互換って言葉の意味がわからず、それも調べてみた笑
「機械の同一部品の間では、どれを使っても当てはまるというように、互いに取換えがきくこと」だそう。
外部ファイルからCSSを読み込む
フォルダ直下にstyle.cssを保存している場合
<link rel="stylesheet" href="style.css">
rel=relation(関係)の略。
relでファイルとの関係性を指定 ”hrefで指定したファイルはstylesheetです”
href=hypertext reference(ハイパーテキスト参照)の略。
ファイルのURL（ここではファイル名）を記入。
CSSフォルダを作ってその中に入れている場合(reset.cssなど)
<link rel="stylesheet" href="css/reset.css">
フォルダ名/ファイル名
fontawesomeを使う
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
他にもlinkタグでできることがたくさん
HTMLのlinkタグとは？基本的な書き方とrel属性まとめ
サルワカって名前なだけあって、猿でもわかるってくらいわかりやすいです、こちらも神。。
HTMLで意味もわからずとりあえずコピペして出来た気になっていたのが、上記のタグたち。
いろいろなサイトのソースを見ると、meta要素がたくさんあるので、使い方に合わせてもっと勉強していきたいです！