WEBページの作り方－コメントアウト・スマホ対応－
皆さん、こんにちは(*'ω'*)
梅雨らしいお天気が続いていますが、
いかがお過ごしでしょうか？
沖縄地方の梅雨明けが発表され、
他の地域も梅雨明けまであと少し！
水分補給をしっかりしながら、体調管理に気を付けて
行きましょうね(^_-)-☆
さて、前回はHTMLを使う際は
最初にDOCTYPE宣言をすることや
<head>タグや<body>タグについて解説しました。
今回はコードを見やすくする方法(コメントアウト)や
文字コードについて解説していこうと思います！
DOCTYPE宣言や<head>、<body>タグの使い方を
知りたい方は下記URLより前回の記事を
ぜひ見てみて下さいね！
URL：WEBページの作り方－HTMLの書き方－ - nikusukixのブログ
この記事で学べること！
- キーボードの『Ctrl』キーと
『？・/め』のキーを同時に押してコメントアウト
- HTMLでは『UTF-8』という文字コードを指定する
- <meta name>タグにcontennt属性で
『width-device-width』と指定すること
でスマホ対応できる
それでは、始めていきましょう(^^)/
目次
1.コメントアウトとは
コードを書くにつれて量が多くなり、
後で見返した時や他の人に引継ぎをする時など、
見にくくなってしまいます。
そこで、部分ごとにコード内容をコメントで
記載しておくと見返した際にコードの構造が
分かりやすくなります！
コメントを記載することを
『コメントアウト』と言います。
ここで身に着けておくと便利です。)
2.コメントアウトのやり方
見ていきましょう！
下記の手順に従って実際にコメントアウトして
みましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②コメントアウトする
<html>タグの横でエンターキーを2回押して
スペースを空け、3行目をクリックして
コメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れる。
③コメント入力部分にコメントを入力する
コメント入力部分(緑色の部分)中央をクリックする。
コメント入力部分(緑色の部分)中央に、
『headここから』と『headここまで』を入力する。
(head部分の範囲を明確にするため)
④body部分も同様にコメントアウトする
<!-- headここまで -->と書いた横で
エンターキーを2回押してスペースを空け、
②、③の順で同様にコメントアウトする。
(9行目をクリックすることに注意！)
コメント入力部分(緑色の部分)中央に、
『bodyここから』と『bodyここまで』を入力する。
(body部分の範囲を明確にするため)
これで<head>部分と<body>部分の範囲が明確になりましたね(*'ω'*)
コメントアウトすることでコードの構造が分かり、
後で見たときにコードが見やすくなるので、身に着けてみて下さいね！
3.文字コードを指定する
『文字コードって何？』と思われた方も
多いかと思います。
文字コードとは文字をコンピュータ上の固有の数値に
置き換えるものを言い、HTMLで文字コードを
指定することで文字化けを防ぐことが出来ます。
HTMLでは『UTF-8』という文字コードが推奨されています。
4.<meta>タグで文字コードを指定する
①<head></head>タグの間をクリックして改行する
<head></head>タグの間をクリックし、エンターを押して改行する。
②<meta charset>タグで文字コードを指定する
<meta charset>タグで下記のようにUTF-8を指定する。
コード中の『＝』を入力すると、
自動でダブルクオーテーション『“”』が入力されます。
これで、文字コードの指定完了です！
5.スマホ対応にする
皆さん、ネットにアクセスする際は
スマートフォン・パソコンどちらを使っているで
しょうか？
スマートフォンとパソコン、両方を使っている方も
多いですがスマートフォンのみ使っている方も
少なくありません。
よって、スマートフォンからWEBページを見た際にも
きちんと表示されるよう調整する必要があるのです。
ここではその準備として、
<head>タグ内にスマートフォン表示に対応できる
タグを記述します。
①<meta name>タグを記述する
先ほど指定した文字コードの行でエンターを押して
改行し、<meta name>タグを下記のように記述する。
content属性で『width-device-width』とすることで
WEBページの表示サイズを各自のスマートフォンの
画面の幅に合わせて変えることが出来るように
なります！
(これをレスポンシブ対応と言います)
これで、WEBページを各自のスマートフォンの
画面の大きさに合わせる(レスポンシブ対応)の設定は
完了です(^^♪
今回はこれで終わりにしてゆっくり休みましょう(^^)/
6.本日の文法まとめ
- コメントアウトすることで後で誰が見ても
コードの構造を把握することが出来る。
-
<meta charset>タグで文字コードを
指定することで文字化けを防ぐことが出来る。
-
<meta name>タグとcontent属性を使うことで
スマートフォンの画面の幅に合わせて
WEBページの表示サイズを変えることが出来る
ようになる。
次回はWEBフォントの使い方やGoogleなどの
クローラーにWEBサイトの概要を認識してもらうための
<meta name>タグの使い方を見ていこうと思います(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
