これはHTML,CSS初心者向けの記事になります。
今回は実際に基本的なHTMLを記述して基本の書き方を習得していきましょう！
前回で紹介した環境を使用して説明を行うので説明がイマイチ分からなかった方はそちらをご覧ください。
では早速参りましょう！
実際にHTMLを書いてみよう
htmlファイルを作成する
Sublime Text3を起動して新しいファイルを作成してください。
新しいファイルを作成したら ctrl + s（Macの場合はCommand + s）で保存してください。
ファイル名は「index.html」としてください。
※アイコンが出てない方も後でクロームで開くとアイコンが表示されます。
記述＆実行
ファイルが作成できたら以下のプログラムをコピペして実行してみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>あいうえお</h1> <h2>かきくけこ</h2> <h3>さしすせそ</h3> </body> </html>
実行をする前に必ず保存を行ってください。
保存は ctrl + s（Macの場合はCommand + s）でできます。
保存できたかどうかを確認する場合はSublime Text3画面上部のタブでわかります。
実行方法について。
初めての方はファイルを起動すると使用するアプリを聞かれるので「Google Chrome」を選択してください。
※お好みでもかまいません。後で変えられます。
上記のようなぺージが表示されたでしょうか！
ぺージを表示するのって思っているよりも簡単だと感じられたのではないでしょうか。
htmlは<>（タグ）を使ってかたまりを囲んで記述していきます。
他のプログラミング言語と少し違いますが、簡単なので誰でもすぐ慣れると思います。
以下で上記のプログラムの仕組みを簡単に解説します！
基本事項
<!DOCTYPE html>
htmlを使用するという宣言のこと、DOCTYPE宣言と呼ばれる。
<html lang="ja"> ... </html>
lang属性を付加。ここではWebのコンテンツの言語を日本語(ja)に設定している。
<head> ... </head>
Webぺージに関するさまざまな設定を記述する部分。ヘッダ情報と呼ばれる。
<title> ... </title>
タイトルを挿入するためのタグ。
<body> ... </body>
Webぺージのコンテンツ部分。
<h1> ... </h1> <h2> ... </h2> <h3> ... </h3>
見出しを表現するためのタグ。数字が小さいほど大きい見出し。
続いてCSSも記述していきましょう。
実際にCSSを書いてみよう
CSSは主にWebぺージを装飾するために使われます。
では早速、新しいファイルを作成してください。名前は「index.css」としてください。
そして以下のコードをコピペしてください。
h1 {
color: red;
background-color: yellow
}
h2 {
color: blue;
background-color: green;
}
h3 {
color: green;
background-color: gray;
}そして、最初に作った「index.html」のタイトルの下に以下の行を挿入します。
........ <title>タイトル</title> <link rel="stylesheet" href="index.css"> .........
できたら2つのファイルを保存して実行します。
上画像のようになりましたか！
cssではさまざまな設定を行うことができます。
下線や透明度など...
より詳しく知りたい方は「CSSプロパティ」と調べればたくさん出てくるのでそちらで確認してみてください。
まとめと次回
今回は実際に基本的なコードの記述を行ってもらい、html,cssがどのように記述されるとWebぺージとして表示されるかが少しイメージがわいたのではないでしょうか。
次回はdivをしっかりやっていこうと思います。
divは初心者の方は少し躓く方もいらっしゃるので次回はより丁寧に解説していきたいと思いますのでどうぞよろしくお願いいたします！
読んでいただきありがとうございました。