HTML・CSSの基礎知識解説、大切なこと5選。
この記事では、将来プログラミングをできるようになるために、HTMLとCSSの今日学んだ基礎知識を解説していく記事です。
今日学んだこと。
ファイルの準備。
ヘッダ情報。
エンコーディングの記述。
viewportの設定。
タイトルの記述。
ファイルの準備。
VS Codeを開いて、Command + N で新しいファイルを作成できます。
続いて Command + S でファイルを保存します。よく使う項目の一番上に表示されている家のアイコンを選択し、developフォルダを選択します。
「尚、前回までの記事を読んでおらずdevelopフォルダを作成していない方は、developフォルダを作成してください」
developフォルダに移動したら、新規フォルダをクリックして、作成したフォルダに名前を付けます。
フォルダが作成できたら、付けた名前のフォルダを選択して移動してください。
移動ができたらindex.htmlと名前をつけて保存をします。
ファイルの保存ができたら、VS Codeでhtml:5と打ち込んで、Tabキーを押しましょう。そうすると、最初のひな型となるコードが展開されます。これを活用し、HTML・CSSなどのレイアウトが行うことができるようになります。
ヘッダ情報。
HTMLファイルにはヘッダ情報という表示される文章とは別で、文書のタイトルや、言語の設定、デバイス別の見え方、検索エンジンやSNSでの見え方を設定する部分があります。
作成したひな型には4〜7行目に<head>タグで囲われている部分があります。ここがヘッダ情報です。
エンコーディングの記述
ひな型の4行目に<meta charset="UTF-8">という記述があると思います。
これはエンコーディングと言い、コンピューターが書かれている文字をどういうルールで読み取るかというルールを指定したものです。
このエンコーディングの指定を間違ってしまうと、文字がめちゃくちゃになって表示される文字化けという現象がおきます。
viewportの設定。
5行目に<meta name="viewport"
content="width=device-width, initial-scale=1.0">という記述があると思います。これはviewport「ビューポート」というもので、画面の表示の大きさを設定するものです。
これを設定しておかなければ、スマートフォンではPCで表示される横幅に合わせて、画面を縮小して表示してしまいます。
いくつか設定項目があるのですが、ほとんどの場合はVS Codeで展開された<meta name="viewport" content="width=device-width, initial-scale=1.0">を使っていくので、最初の方はこれで大丈夫だそうです。
タイトルの記述。
7行目に<title>Document</title>という記述があります。
これは、HTMLとCSSを使ってみようでも出てきたもので、ブラウザのタブの部分に表示するタイトルを指定するものです。
Documentという文言を、自分のしたいタイトル名に変えればタイトルが設定できます。
まとめ
今回の記事ではかなりプログラミングの内容に一気に踏み込んだ記事となりました。特に、viewportの設定には文字数も多く理解するのがとても難しかったです。
自分はまだまだプログラミングの初心者の中の初心者なので、元の記事がないと解説が上手くできないですが、もっと勉強して自分1人の力でも解説できるようになりたいなと考えました。
この記事が気に入ったらサポートをしてみませんか？