ソニックHTMLとは？CSSとは？を学びましょう！
ここではテキストエディターのことは触れていないのでご注意ください。
（テキストエディター：ソースコードを書くところ）
HTML・CSSとは？
HTMLとは？
HTMLとは、Webページを作るための言語です。
HTML：「Hyper‐Text‐Markup‐Language」（ハイパー・テキスト・マークアップ・ランゲージ）の略です。
Webページに表示したい文章や画像などを「＜＞」タグと呼ばれる特殊文字で囲んで書いていきます。
例
<h1>Hello World</h1>上記の例だと、Web上には、「Hello World」と表示されます。
細かく考えずに、WebサイトはHTMLを使って作られているという風に考えましょう。
CSSとは？
CSSとは、HTMLのみでは白い背景と黒い文字だけの表示しかできないため、そこに装飾ができる言語です。
CSS：「Cascading－Style－ Sheets」（カスケーディング・スタイル・シート）の略です。
HTMLを飾り付ける（色を付ける、大きさを変える など）ことができるのがCSSという風に考えましょう。
例（上のHTMLのh1に対して装飾したと考える）
h1 {
color: red;
}上記の例だと、Web上には、「Hello World」と表示されます。
HTMLを学ぼう！
まずはHTMLファイルを作ろう
テキストエディター（Visual Studio Codeなど）でファイルを作成します。
ファイルを作成する際の拡張子（ファイル名.○○○○ .以降の○○○○のこと）は.htmlと作成します。
例：index.html（※日本語は使用できません）
【ファイル名を付けるにあたって】
・使えない記号がある
・空白は使えない
・小文字で統一する
HTMLファイルの土台
VSCode（VisualStudioCode）では、ファイルを作成後htmlと入力すると予測変換の欄に「html:5」とあるため、
選択すると下記のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>【解説】
<!DOCTYPE html>とは
Doctype（ドクタイプ）宣言と言い、「このドキュメントはHTML5というバージョンですよ」と宣言していると
思ってください。
<html></html>とは
これはHTMLの文書だよということを表しています。「lang=」はWebページの言を設定できる部分です。
lang=”en” はEnglish（英語）
lang=”ja” はJapanese（日本語）
のように設定します。
<head></head>とは
この部分は、ページのタイトルや説明文、使用する外部ファイルのリンクなどのページ情報を記述します。
<meta charset=”UTF-8″>とは
「UTF-8」とは文字コードのことで、ここでは文字コードを指定しています。基本このままで大丈夫です。
<meta name=”description” content=”~”>とは
このページについての説明文を書く部分です。検索エンジンでページタイトルとともに表示される部分です。
<title></title>とは
ページのタイトルを記述します。この名前がブラウザーのタブなどに、検索した時に表示されます。
<body></body>とは
html文書の本体部分です。ここにメインとなるコンテンツを入力することになります。
CSSを学ぼう！
CSSファイルを作ろう
テキストエディター（Visual Studio Codeなど）でファイルを作成します。
ファイルを作成する際の拡張子（ファイル名.○○○○ .以降の○○○○のこと）は.cssと作成します。
例：style.css（※日本語は使用できません）
【ファイル名を付けるにあたって】htmlと一緒です
・使えない記号がある
・空白は使えない
・小文字で統一する
CSSをHTMLに適用させる方法について
適用させる方法は大きく分けて3つあります。
cssファイルを読み込む方法
Webサイトを作成する時は、この方法が最も一般的です。
1つのCSSファイルを複数のHTMLファイルに読み込ませられるので一括で管理できます。
■適用方法
<link rel=”stylesheet” href=”style.css”>をHTMLの<head>タグの中に記述する。
※style.cssの部分はstyleと名の付けたcssファイルを指定している。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>HTMLファイルの<head>内に<style>タグで指定する方法
CSSを記述したHTMLファイルにのみ適用されます。
読み込む方法と違い他のHTMLに適用されるわけではないので、各HTMLファイルに記述が必要になる。
特定のHTMLファイルにのみデザインを変えたいというときに使えます。
■適用方法
<style>~</style>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 { color: #f000; }
</style>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>HTMLタグの中にstyle属性を指定する方法
直接書かれたタグにのみ適用されます。
1つ1つのタグに指定するので時間がかかるうえメンテナンスが大変です。
他の方法より、適用される優先順位が高いため、一部だけ変更したい場合などに使えます。
■適用方法
<h1 style=”color: #f000;”>こんにちは</h1>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: #f000;">こんにちは</h1>
</body>
</html>
コメント