ホーム お問合せはこちらから ページのトップへ戻る

新潟のホームページ制作会社・ワードプレスでウェブサイトを製作するドコドア
お問合せはこちらから お電話でのお問い合わせは0120-66-0209まで

SEOブログ

スタッフブログ

19 その他よく使う要素

2014.3.20

html19

em要素

テキストの一部分を強調したい時にはem要素を使用します。emはemphasis(強調)を略したもので、使い方は強調したい部分を<em>と</em>で囲むだけです。

    html19-1

ただし、あまり使いすぎると見た目がうるさくなってしまうので気をつけましょう。

strong要素

重要な意味がある箇所には、strong要素を使います。こちらも使い方は「em要素」と一緒で、強調したい部分を<strong>と</strong>で囲むだけです。こちらも使いすぎには気をつけましょう。

    html19-2

small要素

small要素は免責事項、警告文、著作権表示、ライセンス要件などの、補足的な注釈や細目を表します。

    html19-3

div要素

div要素は複数の要素を1つのグループにまとめたい時に使用します。要素をまとめる事によって、グループ単位でのデザインの指定などが出来ます。基本的にWebページは「ヘッダー」や「メニュー」「記事」といった部分で構成されています。この部分単位をグループ化するのがdiv要素です。

使い方は<divg>と</div>でグループ化したい要素を囲むだけです。

div要素で囲むと前後は自動的に改行されます。その他は特にブラウザ上での変化はありません。div要素はデザインの際に本領を発揮するので、詳しい使い方はcssの時に説明します。

span要素

span要素はdiv要素と似た要素です。主にテキストなどの特定の範囲を<spang>と</span>で囲み、cssでデザインを指定します。div要素との違いは、囲んだ箇所が前後で改行されないので、h1〜h6要素や、p要素の中のテキストに使うことができます。

meta要素のname属性 (description)

meta要素には、charset属性以外に、name属性というものがあります。name属性の属性値に「description」を指定したmeta要素には、そのWebページの概要分を記入します。概要分はcontent属性の値にとして記入します。
同じmeta要素ですが、charset属性とは別で記述します。

    html19-4

ここで記入した概要文は検索エンジンで検索された際の検索結果画面に、説明文として表示されることがあるので、できるだけ簡潔に、長くても100文字以内にまとめるようにしましょう。

meta要素のname属性 (keywords)

meta要素の属性値に「keywords」を指定したmeta要素には、そのWebページを表すキーワードを入力します。キーワードはcontent属性の値として、それぞれ半角のコンマで区切って記入します。こちらも他のmeta要素とは別にして記述します。

    html19-5

このページのまとめ

  • em要素とstrong要素は囲んだ部分を強調できるが、使いすぎると見た目がうるさくなるので気をつける。
  • div要素は複数の要素を囲んでグループ化することができる。cssでデザインをまとめて指定する時などに使う。
  • span要素は囲んだ一部分のデザインを指定できる。div要素と違って囲んだ部分の前後が改行されない。
  • meta要素のname属性「description」と「keywords」は同じmeta要素だが、charsetや他のmeta要素とは別でそれぞれ記述する。
主にコーディング作業や納品後の更新作業を担当しています。デザイン業務もちょこちょこやってます。PHPやらJQueryの勉強中。
>清野哲郎のプロフィールを見る

お問合せメールフォーム

このページがあなたにとって役に立ったと感じたら下のボタンから共有をよろしくお願いします。

WORKS

制作事例一覧を見る
  • case72i
  • case89i
  • case107i
  • case108i
  • case88i
  • case98i
  • case109i
  • case106i
  • case104i
  • case103i
  • case102i
  • case100i
  • case99i
  • case96i
  • case105i
  • case86i
  • Ciel02
  • case22_1
  • toiro
  • case80i
  • case79i
  • case78i
  • case06-2i
  • case76i
  • case74i
  • case73i
  • case97i
  • スクリーンショット 2016-04-05 18.41.36
  • case90i
  • case82i
  • case87i
  • case71アイキャッチ
  • 国際大学
  • case84i
  • dejimo0
  • case65アイキャッチ
  • kirin_hanbai
  • case67アイキャッチ
  • case75i
  • flowerhome0
  • keiwa
  • greenstyle0
  • case57_1
  • case92i
  • case56_2
  • case54_2
  • case52_1
  • case51-1
  • case49-1
  • joywood0
  • koshiji0
  • case59_1
  • 上越どんぶり巡り様
  • yu
  • 無添加住宅
  • neal
  • hukuhuku1
  • sasa-t
  • shinoda
トップへ戻るボタン

WORKS

case74i case67アイキャッチ marina
新潟のホームページ制作・Webデザイン製作のドコドア

本 社 新潟県三条市土場1-5 tel 0120-66-0209
新潟オフィス 新潟市中央区天神1-1 プラーカ3 2F
東京オフィス 渋谷区道玄坂1-12-1 渋谷マークシティW22F