Code

【超入門】HTMLの勉強で混乱しやすい3つのことをわかりやすく解説!

Pocket

こんにちは、うらけんです。

今回は「HTML」についてです。

僕もHTMLを勉強しましたが、やはり「どうしても覚えられない!」というところがありました。

僕がどうしても覚えられなかったことは以下の2つです。

  1. classとidの違い
  2. ブロック要素とインライン要素

これらに加えて、以前まで「図形はイラレで作るしかない」と思い込んでいたのですが、実はHTMLで図形も書くことができるみたいです。

そのため今回は、上記の2つに加えて、「HTMLで図形を描く方法」も追加し、実際に取り上げていきたいと思います。

もし、同じ悩みで困っている方がいるのであれば、ぜひ参考にしてみてください。

早速、見ていきましょう!

classとidの違い

まずは、classとidの違いについてです。

主な違いは以下のとおり。

  • Class→重複OK
  • id→重複NG
  • 優先度→id > class

例えば、複数の<H2>の装飾を一括管理したい!」となったらClassを使えばOKですし、「この要素だけはちょっと違う装飾にしたい!」と思ったらidに設定すればOKです。

ちょっとややこしんで、図にまとめましょう!

classとidの違い

ブロック要素とインライン要素の違い

ブロック要素とインライン要素はほぼ真反対なので、どちらかを覚えて、「片方はその反対」と覚えると効率が良いです。

ブロック要素

まず、ブロック要素について。ブロック要素の詳しい特徴は以下のとおり。

  • 要素の前後に改行が入る
  • 要素が縦に並ぶ
  • 横幅や高さ、余白(margin,padding)が指定できる

実際に作ってみると以下のような感じです。

ブロック要素の例

上記のブロックを作ったコードは以下のとおり。

【HTML】

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>apple_corporate</title>
<link rel=”stylesheet” href=”css/styles.css”/>
</head>
<body>
<div id=”sample1″>sample1</div>
<div id=”sample2″>sample2</div>
<div id=”sample3″>sample3</div>
</body>

</html>

【CSS】

*{
margin-bottom: 10px;
}

#sample1{
background-color: antiquewhite;
}

#sample2{
background-color: rgb(255, 245, 233);

}

#sample3{
background-color: rgb(253, 216, 171);

}

インライン要素

対して、インライン要素の特徴は以下のとおり。

  • 要素の前後に改行が入らない
  • 要素が横に並ぶ
  • 横幅や高さ、余白(margin,padding)が指定できない

実際に作ってみると以下のような感じです。

インライン要素の例

上記のインラインを作ったコードは以下のとおり。

【HTML】

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>apple_corporate</title>
<link rel=”stylesheet” href=”css/styles.css”/>
</head>
<body>
<span id=”sample1″>sample1</span>
<span id=”sample2″>sample2</span>
<span id=”sample3″>sample3</span>
</body>
</html>

 

【CSS】

#sample1{
background-color: antiquewhite;
}

#sample2{
background-color: rgb(255, 245, 233);

}

#sample3{
background-color: rgb(253, 216, 171);

}

 

そして、1つ注意点としては、ブロックの中にインラインを入れることは可能ですが、インラインの中にブロックを入れるのはNGです。

ブロックは箱ようなモノで、インラインは箱にいれるおもちゃのようなモノをイメージしてください。

つまり、箱(=ブロック)におもちゃ(=インライン)を入れることはできますが、その逆は入れることができないということです。

わからなくなる「position」

そして、この流れでもう一つ混乱してしまうことがあります。

それが「position」について。ただし、positionもめちゃくちゃシンプルなんです。

「position」で重要なことは、「relativeで起点を宣言して、abusoluteなどで位置を決める」という1つだけです。

厳密にいうと、relativeで起点を宣言すれば、abusoluteを使う必要はないんですが、abusoluteを使うことで、要素を柔軟に配置することができます。

実際に作ってみると以下のような感じです。

positionの制作例

上記を作ったコードは以下のとおり。

【HTML】

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>apple_corporate</title>
<link rel=”stylesheet” href=”css/styles.css”/>
</head>
<body>
<div id=”sample1″>sample1</div>
<span id=”sample2″>sample2</span>
<span id=”sample3″>sample3</span>
</body>
</html>

【CSS】

#sample1{
background-color: antiquewhite;
position: relative;
width: 100%;
height: auto;

}

#sample2{
background-color: rgb(132, 245, 147);
position: absolute;
top: 8px;
left: 50px;

}

#sample3{
background-color: rgb(253, 216, 171);
position: absolute;
top: 8px;
left: 90px;
}

<canva>による図形の作成方法

HTMLの関門として、を用いて、図形を作っていくことも挙げられます。

作り方に関しては、下記のサンプルコードもしくはドットインストールを利用するのが良いかと思います。

これまで図形の作成は、イラレとかでやることが多かったんです。ただ、HTML5になってからは、タグ(<canva>)を使って作成することができます。

ただ、実際に描くにはJavaScriptを使うのですが、思っている以上にカンタンです。

例えば、丸枠の中に文字を書くなら以下のようなHTMLとJavaScriptを用意すれば良いです。

もし、「いやいや、色は?」ってなりましたら、CSSを使えば、設定できます。

canvaの制作例

上記を作ったコードは以下のとおり。

【HTML】

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>apple_corporate</title>
<link rel=”stylesheet” href=”css/styles.css” />
<header>
    <divid=”name”>
        <canvas width=”150″ height=”100″>
Canvas not supported.
      </canvas>
    </div>
    <div id=”list”>
        <ul class=”list2″>
            <li class=”list2″>Service</li>
            <li class=”list2″>About</li>
            <li class=”list2″>Media</li>
            <li class=”list2″>Q&A</li>
        </ul>
    </div>
</header>
</head>
<body>
<script src=”js/main.js”></script>
</body>
</html>

【Javascript】

‘use strict’;

{

function endrow() {
const canva = document.querySelector(‘canvas’);
if( typeof canva.getContext === ‘undefined’){
return;
}
const pic = canva.getContext(‘2d’);
pic.arc(50,50,49,0,2 * Math.PI);
pic.stroke();

pic.font = ‘bold 38px Verdana’;
pic.fillText(‘SP’, 26,63);
}

endrow();

}

以上となります!

参考になれば幸いです。

関連記事:【Webデザイナー】スクールを選ぶ際に必ず確認するべき3つのポイント
関連記事:【サンプル有】理想のホームページデザインを作るための方法をご紹介!

ABOUT ME
ウラケン
ウラケン
サラリーマンとWebデザイナーの二足のわらじを履いてます。「独学でWebデザイナーになれた方法」・「Webデザイナーの方に便利な情報」に発信しています。
Webデザインの詳細ページ
Pocket

Webデザイン_フロー Webデザイン