-html-はじめに覚えるタグ7個

webデザイン

h1 〜 h6タグ【見出し】

見出しを表すタグです。h1〜h6まで指定することができます。

単純に大きさが変わるとともに、SEOの判断基準になるとも言われています。

See the Pen by seison waten (@capplus1-design) on CodePen.

pタグ【段落】

段落を指定するために利用されるブロック要素です。

<p></p>で1行分改行されます。

See the Pen by seison waten (@capplus1-design) on CodePen.

brタグ【改行】

See the Pen by seison waten (@capplus1-design) on CodePen.

ブレイク(Break)を意味しており、改行を行うための要素です。終了タグを必要とせず、単独で使用します。

imgタグ【画像】

Webサイト上に画像を表示させるためのタグです。

URLやファイルの階層(パス)を指定することで画像が表示されます。<img>タグには閉じタグが必要ありません。

See the Pen by seison waten (@capplus1-design) on CodePen.

今回はこちらのサイトでダミー画像を生成しています→https://placehold.jp/

ファイル階層(パス)の指定

絶対パス

http://〜から始まるURLは絶対パスと呼ばれます。

<img src="http://〜">

こちらは馴染みがありますね!

相対パス

相対パスとは、アクセス中のページを基準とした相対的な記述方法です。

<img src="画像"> <!--同じ階層-->
<img src="フォルダ/画像"> <!--下の階層-->
<img src="../画像"> <!--上の階層-->

ulタグとliタグ【箇条書き】

箇条書きを行うタグです。

<ul></ul>で<li></li>を囲みます。

See the Pen by seison waten (@capplus1-design) on CodePen.

<ul>を<ol>に変えると番号付きのリストになります。

aタグ【アンカー(リンク)】

アンカー(Anchor)を意味するタグで、<a></a>で囲んだところがリンクになります。

href=”ここにパスを指定” することでそのページにリンクします。

See the Pen by seison waten (@capplus1-design) on CodePen.

divタグ【範囲指定】

特に意味を持たないタグで、範囲を指定するためのブロック要素です。

グループ化を行うことで指定した範囲の背景や文字色の変更など、グループ単位でスタイル(CSS)を指定することが可能となります。

See the Pen by seison waten (@capplus1-design) on CodePen.

この記事を書いた人
nobu

株式会社キャップ所属 デザイナー/アートディレクター。デザイン歴10年 大手小売業のインハウスデザイナーを経てフリーランスとして独立。世界初炭酸氷のロゴデザインなどを行う。様々な出会いと別れを経て、現在は株式会社キャップ メディアソリューション室にてデザイナー/アートディレクターとして奮闘中。同社webマーケティング責任者です。 公式サイトHPリニューアルにてPV数500%UPを達成。illustACにてイラストを提供中です!DLランキング上位1%に入ることができました!

nobuをフォローする
webデザイン
シェアする
nobu no blog
タイトルとURLをコピーしました