HTML始め方 超基礎 これだけは覚えておきたいタグや設定
HTMLとは？
Hyper Text Markup Language
Hyper Text : 高機能な文章を
Markup : 意味付けする
Language : 言語
⇒ コンピューターが認識できる文章構造を作るための言語
⇒ 文章構造 : 見出し、本文、画像、表
※プログラミング言語ではない。
HTMLでできること
- HTMLタグを使って文章を組み立て（マークアップ）、Webサイトやアプリをつくる。
- CSSやJavascriptなどをいっしょに使って、デザインや動きのあるWebサイトをつくる。
- ほとんどのWebサイトにはHTMLが使われている。
HTMLを表示させてみよう‼
HTML <!DOCTYPE htmlCode>
<p>こんにちは！</p>HTMLの基本構造
HTML<!DOCTYPE htmlCode>
<html>
<head>
<!-- 基本情報 -->
<!-- ページには表示されない -->
</head>
<body>
<!-- タグを書いていく -->
<!-- ページに表示される -->
</body>
</html>覚えるべきタグ
| 見出し | 装飾 | リスト | 表 | フォーム | レイアウト | 意味なし |
|---|---|---|---|---|---|---|
| h1 | p | ul | table | form | header | div |
| h2 | a | ol | tr | input | nav | span |
| h3 | strong | li | th | select | footer | |
| h4 | br | dl | td | option | article | |
| h5 | img | dt | textarea | section | ||
| dd | aside |
idとclass(クラス)
idとは、英語【identification】のid。学籍番号がその学校内で1つしかないように、 idも1ページ上で、1つしか設定できない。
classとは、学級内に複数の生徒が存在するように、 classは1ページ上で、複数設定できる。
HTML<!-- これはダメ‼ -->
<div id="test">こんにちは！</div>
<div id="test">こんにちは！</div><!-- これはOK‼ -->
<div class="test">こんにちは！</div>
<div class="test">こんにちは！</div>classは同じ名前を１ページ中で何度でも使えるが、idは１ページ中に１度しか使えない。
CSSの書き方
CSS /* id */
#test {
color: red;
}
/* class */
.test {
color: red;
}例1
HTML<style>
div{
color: blue;
}
.test{
color: red;
}
</style>
<div>こんにちは！</div>
<div>こんにちは！</div>
<div class="test">こんにちは！</div>結果
例2
HTML <style>
.test2{
color: red;
}
</style>
<h2 class="test2">こんにちは！</h2>
<p class="test2">こんにちは！</p>
<div class="test2">こんにちは！</div>結果
こんにちは！
こんにちは！
親 要素 、子 要素 、孫 要素
HTML
<div>親要素
</div>子要素
<div>孫要素</div>
</div>
</div>ブロックレベル要素 と インライン要素
ブロックレベル要素 : Block-Level Elements
インライン要素 : Inline Elements
| 幅と高さの指定 | 横幅の初期値 | 他の要素との並び方 | |
|---|---|---|---|
| ブロックレベル要素 | 可能 | 親要素の幅と同じになる | 縦並び |
| インライン要素 | 不可能 | 内容により決まる | 横並び |
やってみよう！
HTML<head>
<style>
div {
background: blue;
border: 1px solid black
}
span {
background: red;
border: 1px solid black
}
</style>
</head>
<body> <!-- 親要素 -->
<div>div1</div> <!-- 子要素 -->
<div>div2</div> <!-- 子要素 -->
<span>span1</span><span>span2</span> <!-- 子要素 -->
<span>span3</span> <!-- 子要素 -->
</body>結果
a タグ
アンカー【anchor】：
指定したリンクへジャンプする。
書き方
HTML <a href="https://baidu.com">バイドゥ‼</a>imgタグ
画像(image)を表示する。
書き方
HTML <img src="./img/cat.jpg" alt="ネコ">
画像が表示されなかった時
絶対パスと相対パス
絶対パス
そのファイルが保存されている場所
これが絶対パス
https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00616-1538.jpg
相対パス
そのファイルを基準として、ファイルが置かれている場所
同じ階層 : ./
一つ上の階層 : ../
一つ下の階層 : /
<img src="./img/img_02.jpg">
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには？ brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで３Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
【CSS】animation のアニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた（ホバーした）時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。
