「Webサイトを作ってみたいけど、どこから手をつければいいかわからない…」
そんな疑問を持ったあなたへ。
この記事では、HTMLとCSSの基礎を紹介します。
プログラミング未経験者でも、この記事を読めば、あなたも簡単なオリジナルのWebサイトを作れるようになります！
1. Web開発とは？
1.1. Webサイトの構成要素
Webサイトは主に3つの要素で構成されています。
- HTML（構造）
- CSS（デザイン）
- JavaScript（動作）
このガイドでは主にHTMLとCSSに焦点を当てて解説します。
1.2. Web開発の面白さ
Web開発の魅力は、自分のアイデアを形にし、世界中の人々に発信できることです。
また、すぐに結果を確認できるため、学習の過程が楽しく感じられます。
1.3. Web開発に必要なスキル
基本的なHTMLとCSSの知識があれば、シンプルなWebサイトを作成できます。
さらに、JavaScriptやバックエンド技術を学ぶことで、より高度なWebアプリケーションの開発も可能になります。
2. HTMLの基礎
2.1. HTMLとは？
HTML（HyperText Markup Language）は、Webページの構造を定義するマークアップ言語です。テキスト、画像、リンクなどの要素を配置し、ページの骨格を作ります。
では実際に記述方法を見ていきましょう。
2.2. HTMLの書き方
HTMLは<タグ>を使って要素を定義します。
例えば、
<h1>これは見出しです</h1>
<p>これは段落です。</p>上記のようにHTMLをコーディングします。
h1やpはHTMLタグと呼ばれています。
では他にどんなタグがあるのか見てみましょう。
2.3. 重要なタグ
- <h1> ~ <h6>：見出し
- <p>：段落
- <img>：画像
- <a>：リンク
- <ul>、<ol>、<li>：リスト
2.4. HTMLの構造
基本的なHTMLドキュメントの構造は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<!-- ここにコンテンツを記述 -->
</body>
</html>3. CSSの基礎
3.1. CSSとは？
CSS（Cascading Style Sheets）は、HTMLで作成した構造にスタイルを適用するための言語です。色、フォント、レイアウトなどを指定します。
3.2. CSSの書き方
CSSは以下のような形式で記述します。
セレクタ {
プロパティ: 値;
}ではセレクタにはどんな種類があるか見てみましょう。
3.3. セレクタの種類
- 要素セレクタ：p、h1、div など
- クラスセレクタ：.classname
- IDセレクタ：#idname
- 属性セレクタ：[attribute=”value”]
3.4. CSSでデザインする
CSSを使用して、以下のようなスタイルを適用できます。
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 24px;
}
.container {
width: 80%;
margin: 0 auto;
}4. Webページの作成実習
4.1. シンプルなWebページの作成
HTMLとCSSを組み合わせて、基本的なWebページを作成してみましょう。
4.2. レイアウトの作成
float、flexbox、gridなどのCSSプロパティを使用して、さまざまなレイアウトを作成できます。
例えば、flexboxを使用したレイアウトは下記のようになります。
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 10px;
}4.3. 応用的なデザイン
レスポンシブデザインやアニメーションを適用することで、より高度なWebページを作成できます。
例として、メディアクエリを使用したレスポンシブデザインは下記となります。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}まとめ
この記事を通じて、簡単なHTMLとCSSの基礎を学び、シンプルなWebページを作成する方法わかったと思います。
Web開発ではHTML、CSSは必須となります。
ここで学んだ基礎をもとに、さらに高度な技術を習得し、Webサイトやアプリケーションを開発できるようになっていきましょう。
