We Blog Weblog

属性

Web

2021年6月25日

属性

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「属性」について書きます。

属性とは

属性とは、タグに補足情報を与えるためのものです。
開始タグのタグ名の後ろに半角スペースを空けて

<タグ名 属性名="属性値">タグの中身</タグ名>

と記載します。属性値とは属性の具体的な値のことです。

属性の例

① class

classは、CSSやヘッダーでクラス名とそれに対応するルールを決めておき、クラス名を呼び出すことでそのタグで囲われた要素にルールを適用するものです。

ちょっと何言ってるかわからないですね。
以下に例を挙げます。

<p class="text-primary">文字を青くする</p>
<p class="font-weight-bold">文字を太くする</p>
<p class="small">文字を小さくする</p>
<p class="ml-4">文章の左側に隙間を空ける</p>

文字を青くする

文字を太くする

文字を小さくする

文章の左側に隙間を空ける

この"text-primary"とか"font-weight-bold"がクラス名で、好きな名前をつけることができます。

CSSの書き方については、別記事で詳しく説明します。


② id
<div id="menu">メニュー</div>
<div id="main">コンテンツ</div>
<div id="get-in-touch">お問い合わせ</div>

idもclassと同じ働きをしますが、idの方がclassより優先されます。
同一のidは1ページにつき1つしか配置できないという決まりがあります。

クラス的な使い方をするよりは、ページ内リンクの目印や、アコーディオン(折りたたみ)に使うことの方が多いかもです。
これについても別記事で考察します。


③ href
<a href="index.html">トップページに戻る</a>

hrefはhypertext referenceの略で直訳すると「ハイパーテキストの参照」です。
主に<a>タグや<link>タグにおいて、リンク先を指定するのに使います。

ちなみにtarget="_blank"と記載すると、リンク先を別タブ(または別ウインドウ)で開くようにできます。

<a href="index.html" target="_blank">トップページに戻る</a>

④ style
<p style="color:red;">文字を赤くする</p>
<p style="text-decoration:underline;">下線を引く</p>
<p style="text-decoration:line-through;">打ち消し線を引く</p>

文字を赤くする

下線を引く

打ち消し線を引く

style属性は、タグに適用したいスタイル情報を直接記載することができます。

スタイルを適用する方法は3つあり、

・CSS
・ヘッダー内に<style>タグ
・タグに直接style属性

これらのうち、タグに直接記載されたstyle属性が最優先されます。


⑤ src
<img src="sample.jpg">

srcはsourceの略で、画像やスクリプトの参照先を指定するものです。
<img>タグや<script>タグで使用します。

hrefが外部リソースへのハイパーリンクを指定するのに対し、srcはHTMLに埋め込むファイルのパス情報を指定します。

<img>タグにはalt属性を併記することが推奨されます。
altとはaltanative text、つまり代替テキストのことで、画像が読み込まれない場合にその画像の説明文を表示させます。
これはSEOの観点からも有用です。

<img src="sanple.jpg" alt="画像の説明文">
画像の説明文

※あえて画像を表示できなくしています。


⑥ rel
<link rel="stylesheet" href="style.css">

relはrelationの略で、リンク先とリンク元の関係性を指定するものです。
<link>タグで使用します。

まとめ

<a>タグにはhreftarget

<img>タグにはsrcalt

簡単ですね!

次回はCSSについて書こうと思います。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP