これからWEB制作を勉強しようと考えている方の為に、WEBサイトを作る上で必要不可欠なHTML・CSSの基本について、分かりやすく解説していきます。
＜目次＞
1. HTMLとは
2. HTMLの基本構造
3. よく使うHTMLタグ
4. CSSとは
5. CSSの基本的な書き方
6. よく使うCSSプロパティ
7. まとめ
＜1. HTMLとは＞
HTMLは「HyperText Markup Language」の略で、WEBページの構造を作るための言語です。文章、画像、リンクなどの配置を指定します。
＜2. HTMLの基本構造＞
まずは、HTMLファイルの基本的な構造を見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>見出し</h1>
</header>
<main>
<p>本文</p>
</main>
<footer>
<p>フッター</p>
</footer>
</body>
</html>
```
この構造について説明していきます：
- `<!DOCTYPE html>`: HTMLファイルであることを宣言
- `<html lang="ja">`: 日本語のページであることを指定
- `<head>`: ページの設定を書く場所
- `<body>`: 実際に表示される内容を書く場所
＜3. よく使うHTMLタグ＞
WEBページでよく使用されるHTMLタグをご紹介します。
【見出し】
<h1>最大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
【リンク】
<a href="https://XXXX.com">リンク先</a>
【画像】
<img src="画像.jpg" alt="画像の説明">
【リスト】
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
</ul>
＜4. CSSとは＞
CSSは「Cascading Style Sheets」の略で、HTMLで作った要素の見た目を装飾するための言語です。文字の大きさや色、背景、配置などを指定できます。
＜5. CSSの基本的な書き方＞
CSSの基本的な書き方を見ていきましょう。
/* 要素を指定する */
p {
color: #333333; /* 文字色 */
font-size: 16px; /* 文字の大きさ */
margin: 20px; /* 外側の余白 */
}
/* クラスを指定する */
.box {
width: 100px; /* 幅 */
height: 100px; /* 高さ */
background: #f0f0f0; /* 背景色 */
}
＜6. よく使うCSSプロパティ＞
【サイズの指定】
.box {
width: 100px; /* 横幅 */
height: 100px; /* 高さ */
}
【余白の指定】
.content {
margin: 10px; /* 外側の余白 */
padding: 20px; /* 内側の余白 */
}
【文字の装飾】
.text {
font-size: 16px; /* 文字サイズ */
color: #333333; /* 文字色 */
text-align: center; /* 中央揃え */
font-weight: bold; /* 太字 */
}
＜7. まとめ＞
- HTMLはWEBページの構造を作る
- CSSは見た目を装飾する
- タグやプロパティは覚えるのではなく、使いながら慣れていく
- コードは必ず字下げ（インデント）をつけて見やすく書く
- タグは必ず開始と終了のセットで書く
- CSSの`{}`や`;`の付け忘れに注意
- 分からないときは、MDNやドットインストールなどの学習サイトで調べる
WEB制作は最初は難しく感じるかもしれませんが、基本的な部分から少しずつ理解していけば、必ず上達していきます。
この記事で紹介した基本的な書き方を参考に、ぜひWEB制作の学習を始めてみてください！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
#WEB制作 #WEBデザイン #WEBデザイナー #HTML #CSS #独学 #WEBサイト #お勧め #学ぶ #プログラミング #無料 #無料で勉強できる #無料で学べるサイト