HTMLのタグは、開始タグと終了タグの二種類があります。「< >」を開始タグといい、「</>」を終了タグといいます。
CodePen
https://codepen.io/your-work
よく使うタグ
| h1～h5タグ | 見出しタグ |
| divタグ | 要素をグループ化するためのタグ |
| pタグ | 段落として使うタグ |
| spanタグ | 段落の一部の書式を変えるタグ |
| imgタグ | 画像を表示させるタグ |
| aタグ | リンクタグ |
| fontタグ | 文字の装飾 |
| backgroundタグ | 背景の設定 |
| width/heigthタグ | 幅や高さの設定 |
| borderタグ | 枠線の設定 |
| linkタグ | リンク挿入時 |
| tableタグ | 表を作る際のタグ |
| brタグ | 段落内で改行をしたい場合に使用するタグ |
テキスト
See the Pen Untitled by 坂下将道 (@xgbxqfxl-the-vuer) on CodePen.
■<p></p>
段落を指定するためのタグ。<p>～</p>で囲まれたテキストは1つの段落であることを示す。
・text-align…文字の配置
■<strong></strong>
・文字を太字に
■<span style></span>
・文中の重要なキーワードなどを強調(色変更・サイズ変更)する際に使用
■<p> </p>
空白のタグ。半角と同じ大きさの空白スペース。改行ではない。Enterで改行したとき出現。
■<br>
改行を行うためのタグ。文章の後ろにつく。Shift + Enterで改行したとき出現。連続で入力しても表面では改行されない。
テーブル(表)
See the Pen Untitled by 坂下将道 (@xgbxqfxl-the-vuer) on CodePen.
■<table></table>
tableタグは表を作成する基本となるタグで“表のエリア全体”を意味する。
tableタグで囲まれている部分が表ということになる。
■<tbody></tbody>
・表の本体部分を表す
■<tr></tr>
・表内の行の情報
■<td></td>
「table data」…表のセル内のデータ
・width:70％…セルの幅
・border:1px solid…枠線の太さ
・border-color: #000000…枠線の色 ※#000000は黒のカラーコード
・background-color: #ff9999…セルの背景色
背景
See the Pen Untitled by 坂下将道 (@xgbxqfxl-the-vuer) on CodePen.
■<div></div>
・align=”center”…配置指定 ※left、center、right
・border:…背景の外枠の設定
・border-radius：…背景の外枠の四隅の角を丸めるための設定
・box-shadow:…背景の外枠の影の設定
・background-color…背景の色
・padding…枠とコンテンツの間の広さ
・max-width…枠の最大幅 ※「auto」にするとスマホなども自動で合わせてくれる
・text-align…文字の配置
■<br />
・改行
見出し
See the Pen Untitled by 坂下将道 (@xgbxqfxl-the-vuer) on CodePen.
■div style
・1つ目のdiv styleは「タイトル」を囲っているオレンジの背景設定
margin…4辺（上下左右）の間隔を調整
display…block⇒要素が横までいっぱいに広がり、縦に並んでいく
inline⇒要素が平ぺったく横に並んでいく
inline-block⇒blockとinlineの中間
none⇒非表示になる
position…relative
padding
height
line-height
color
background
font-weight
text-align
border-radius
・2つ目のdiv styleは「本文」を囲っているオレンジの枠設定
