HTML基礎
５月のHTML手順を参考にソースを書いてみる。
VSコードを使う・・・VSコードインストール
HTMLの基本となるタグを記述する
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><title></title>
</head>
<body>
</body>
</html>
このようにHTMLで構成要素の意味を定義できたら、CSSでデザインを当てていきます。
今回は、下記のようにしてみましょう。
大見出しの<h1>：
文字サイズを大きくして、文字の色と背景色を変えて、適度に余白をつける
箇条書きの<ol>：
枠線をつけて、適度に余白をつける
そのために、以下を<head>と</head>の間に入れてください。
<style type=”text/css”>
h1 {
font-size: 30px;
background-color: #00af3a;
color: #ffffff;
padding: 8px 14px;
}
ol {
border: 2px solid #F3F3F3;
padding: 14px 14px 14px 32px;
} </style>
４，HTMLファイルとして保存する
ファイル名は「任意の半角英数字.html」としてください
５，作成したファイルをブラウザで表示してみる
HTMLファイルを保存したら、実際にページを表示させてみましょう。
index.htmlを、普段使用しているブラウザ（Google Chrome や Microsoft Edge、Safari など）で開きます。
すると、以下のようなページが表示されます。
h1はページの大見出しを表します
pは文章の段落(paragraph)を表します
- olは番号付きのリスト(ordered list)を表します
- 番号なしのリストにしたい場合は、ul(unordered list)を使います
- li (listition)はolやulの中でリスト内の項目を表します
VSコード日本語表記にならない
下記のようにやってみてください。
◆日本語表記にして頂くには、
①VSコードを開いたら 「View」(表示)をクリック
②「Comand Palette」を選択
③display と入力し、予測で出てくる「Configure Display Language」を選択
④「日本語」を選択し、再起動が促されるので、「Restart」をクリック
⑤解決しなかったら、④の所をいったん「English」を選択して、再起動して今度は
日本語にする。 「Restart」をクリック
⑥日本語表示に戻っていると思います。
