こんにちは、けーぷろです！
関西の私立の大学に通っている大学生です！
今回は「HTML/CSSのコツ」をテーマでやっていきます！
HTML/CSSの勉強につまずいている人向けに書いているので、この記事は初心者向けになっています。
Contents
HTML/CSSのコツは何か。
HTML/CSSで重要なことはたくさんありますが、
個人的にHTML/CSSで重要なことはdiv要素です！
div要素の使い方を初めに覚えておくとHTML/CSSを自由にレイアウトすることができます！
逆にdiv要素の使い方を知らずに進めていくと、、
あれ、文字が中央揃えできない！
ん？この文字だけ右にずらしたいけど分からない！
全ての文字の色が変化する😭
このようなおかしいミスがたくさん出てきます！
このミスは全てdiv要素で解決することができるので、覚えて帰りましょう！！
HTML/CSSのコツはdiv要素を使いこなすこと。
まずはdiv要素について説明していきます！
div要素とは簡単に言うといくつかのコードを一つのブロックにすることができます。
例を紹介します！
【HTML】「変化前」
<h1>こんにちは</h1>
<h2>こんにちは</h2>
<h3>こんにちは</h3>
<h4>こんにちは</h4>
このように<h1>から<h4>の文字コードを書きました！
これを全てCSSで描こうとすると、こんな感じにめんどくさい表記になります。
【CSS】「変化前」
h1{
color: red;
fontsize: 16px;
}
h2{
color: red;
fontsize: 16px;
}
h3{
color: red;
fontsize: 16px;
}
h4{
color: red;
fontsize: 16px;
}
それぞれのhタグにcssを書いているのが分かると思います。
一つ一つCSS書くのはめんどくさいですよね。
しかし、div要素を使って簡単にCSSで反映することができます！
【HTML】「変化後」
<div class=“container”>
<h1>こんにちは</h1>
<h2>こんにちは</h2>
<h3>こんにちは</h3>
<h4>こんにちは</h4>
</div>
【CSS】「変化後」
.container{
color:red;
Font-size: 16ox;
Text-align:center;
}
どうですか！
先ほどのコードに比べると短くなっていると思います！
そして、divのブロックになるというのが伝わったのではないでしょうか。
div要素は<div></div>で作ることができます！
これだけでもいいのですが、他のdiv要素と区別をつけるためにclass属性をつけます
<div class=”main”>
</div>
divの初めにclassで名前をつけてあげます。
そうすることで、他のclassと区別することができます！
classの名前は好きな名前でいいです！
div要素は分かったけどこれがそんなに重要なん？
div要素使えたらホームページのレイアウト作れるの？
ほんとうにdiv大事？
div要素を知っていて、このような疑問が出ると思います！
私もHTML/CSS始めたての頃はdiv要素を見下していました。
しかし、ある程度コードが描けるようになったのはdiv要素のおかげです！
次に、div要素がどれだけ重要になるのかレイアウト作成をしながら説明していきます！
HTML/CSSのdiv要素でレイアウトを作ろう！[サンプルコードあり]
HTML/CSSのコードを描けるようになってきたけど、どのようにしてホームページのようなレイアウトが作れるか分からない人に向けて説明していきます！
ホームページのレイアウトもdiv要素の組み合わせで作ることができます！
まずはホームページがどのようにして部分ごとに分かれているか説明ます！
- header・・ホームページの上の部分、メニューバーが来る
- main・・ホームページの見出しのような部分です。メインになります
- footer・・ホームページの最後の部分になります。
基本はこの３つのセクションになります！
また、mainの中にサイドメニューがある場合が多いです！
先ほど説明したレイアウトがホームページになっているのを見せます！
ホームページ
これは以前私が運営していたブログサイトです！
これを見ると分かる通り、タイトル（header）がきてコンテンツ（main）で最後の締め括り(footer)がきているのが分かるとおもいます！
ほとんどのホームページサイトやブログサイトはheader,main,footerの三部構成でレイアウトしています！
レイアウト構成がどのようになっているのか分かったと思うので、実際にdiv要素を使ってレイアウト練習をしましょう！
divを用いてレイアウトに挑戦
今回作成するレイアウトはこちらです！
先ほど紹介したheader(赤色)、main(黄色)、footer(黒)の三部構成になっています！
それではこちらのコードを載せておきます！
【HTML】
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>html/cssレイアウト</title>
</head>
<body>
<div class=”header”>
</div>
<div class=”main”>
</div>
<div class=”footer”>
</div>
</body>
</html>
【CSS】
*{
margin: 0px;
padding: 0px;
}
body{
height: 1000px;
width: 1000px;
}
.header{
background-color: red;
height: 100px;
width: 1000px;
}
.main{
background-color: yellow;
height: 700px;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.footer{
background-color: black;
height: 100px;
width: 1000px;
}
以下がコードとなります！
今は色がついていて、ただのレイアウト構成だけになっています！
それぞれ作成したdivの中に文字や写真を入れることで綺麗なホームページが作成できるのです！
文字を画像を入れる際に、様々な知識が必要になります！
div要素だけでなく、positionやflexbox機能が必要になります！
その知識はこのブログサイトで後に公開しますのでお待ちください！
HTML/CSSで実際にdiv要素を使う場面
次に実際にdiv要素を使う場面を説明していきます！
今回はこちらのヘッダーをつくっていきます！
このようなホームページのヘッダーを作る場合にdiv要素は必要不可欠になります！
【HTML】
<div id=”header”>
<img src=”img/fish.png” alt=””>
<nav>
<ul>
<li>概要</li>
<li>準備</li>
<li>安全</li>
<li>マネープラント</li>
</ul>
</nav>
<div class=”btn1″>
はじめる
</div>
</div>
見ての通り、初めにdiv要素(header)を定義してます！
これをすることによってヘッダーの大きなブロックをdivで作成することができます！
headerの中にリストやボタンを作成しています！
div要素を作っていないとリストやボタン要素をまとめることができないです！
このようにして、div要素はブロック要素として使っていきます！
最後に：HTML/CSSのコツはdiv要素
以上がHTML/CSSで必要不可欠なdiv要素の説明でした！
div要素を使いこなせるとHTML/CSSのコードがだいぶ楽になります！
まだまだ、HTML/CSSの大事なことがたくさんあるのでブログサイトでまとめていきます！
以上で終わります！ありがとうございました！
プロパティ覚えること？
新しい知識を覚えること？