Webデザイン学習中のWebデザイナーの卵、こぱんです。
Webデザインに興味があるけど、プログラミングって難しそうと思われている方も多いのではないでしょうか？
そこで、この記事では初心者向けにHTMLとCSSの基本についてお話しします。
HTMLとCSSは、Webサイトを作るための基本的な言語です。
難しい言葉を使わずに、初心者の方でも分かりやすく説明します！
といっても、私も学習中なので、みなさん一緒に習得目指しましょ～😊
HTMLとは？
HTML（エイチティーエムエル）は、Webページの構造を作るための言語です。
Webページの骨組みを作るための言葉で、例えば、見出し、段落、画像、リンクなどを作ることができます。
HTMLは「HyperText Markup Language」の略
HTMLの基本構造
HTMLはタグというものを使って書かれます。
タグは、<と>で囲まれた文字列です。
基本的なHTMLの構造は以下のようになります。
<html>
<head>
<title>私の初めてのWebページ</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのWebページです。</p>
</body>
</html>
<!DOCTYPE html>：HTML5を使っていることを宣言します。<html>：HTML文書の始まりと終わりを示します。<head>：ページのメタ情報を含みます。例えば、タイトルやスタイルシートのリンクなどです。<title>：Webページのタイトルを指定します。ブラウザのタブに表示されます。<body>：実際に表示される内容を含みます。
CSSとは？
CSS（シーエスエス）は、HTMLで作ったWebページにスタイルを加えるための言語です。例えば、文字の色やフォント、背景色、レイアウトなどを指定できます。CSSは「Cascading Style Sheets」の略で、Webページの「見た目」を作るものです。
CSSの基本構造
CSSは、セレクタ、プロパティ、値という3つの要素で構成されます。
セレクタは、どのHTML要素にスタイルを適用するかを指定し、プロパティはスタイルの種類（例えば、色やフォントサイズ）、値はそのスタイルの具体的な設定です。
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
h1：HTMLの<h1>タグにスタイルを適用します。color：文字の色を指定します。font-size：文字の大きさを指定します。
HTMLとCSSの組み合わせ
HTMLとCSSを組み合わせることで、見た目が素敵なWebページを作ることができます。まず、HTMLで骨組みを作り、それにCSSでスタイルを加えます。以下は、先ほどのHTMLにCSSを加えた例です。
<html>
<head>
<title>私の初めてのWebページ</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのWebページです。</p>
</body>
</html>
上記の例では、<style>タグを使ってHTMLの中に直接CSSを書いています。これを「内部スタイルシート」と呼びます。
CSSの外部スタイルシート
より大きなプロジェクトでは、CSSを別のファイルに保存することが多いです。
これを「外部スタイルシート」と呼びます。外部スタイルシートを使うと、複数のHTMLページで同じスタイルを簡単に適用できます。
まず、CSSファイルを作成します。
例えば、styles.cssという名前のファイルに以下の内容を書きます。
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
次に、HTMLファイルでこのCSSファイルをリンクします。
<html>
<head>
<title>私の初めてのWebページ</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのWebページです。</p>
</body>
</html>
<link rel="stylesheet" type="text/css" href="styles.css">：外部スタイルシートをリンクします。
その他の重要なHTMLタグ
以下は、よく使うHTMLタグの例です。
<h1>から<h6>：見出しタグ。<h1>が一番大きな見出し、<h6>が一番小さな見出しです。<p>：段落を作るタグ。<a href="URL">：リンクを作るタグ。href属性でリンク先を指定します。<img src="画像のURL" alt="代替テキスト">：画像を表示するタグ。src属性で画像のURLを指定し、alt属性で代替テキストを指定します。
その他の重要なCSSプロパティ
以下は、よく使うCSSプロパティの例です。
background-color：背景色を指定します。text-align：テキストの配置を指定します（例：左揃え、中央揃え、右揃え）。margin：要素の外側の余白を指定します。padding：要素の内側の余白を指定します。border：要素の境界線を指定します。
まとめ
今回は、初心者向けにHTMLとCSSの基本について説明しました。
HTMLでWebページの骨組みを作り、CSSで見た目を整えることで、魅力的なWebページを作ることができます。
まずは簡単なWebページを作ってみて、少しずつ慣れていきましょう。
何度も練習することで、どんどん上達しますよ！
Webデザインの楽しさを感じながら、ぜひ挑戦してみてくださいね。
