menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/25
  • html5

マイナーだけど便利なHTML5タグ

HTML5のマイナーだけど便利なタグを書いていきます。頭の隅に入れておけば以外と便利だと思います。
便利なhtml5マイナータグ

HTML5の便利なマイナータグ

強調タグ <em> <strong> <b>

<em>

ニュアンス(アクセントを付ける)テキストを表します。

<b>

文書内のキーワードや製品名など、他と区別したいテキストを表します。

<strong>

強い重要性のあるテキストを表します。

使用例

ブラウザ上での表示例

1. emで囲んだテキスト
2. bで囲んだテキスト
3. strongで囲んだテキスト

ルビを振るタグ <ruby> <rt> <rp>

<ruby>

ルビを振りたいテキスト、を囲むタグ

<rt> <rp>

ルビのテキストを囲むタグ

使用例

ブラウザ上での表示例

HTML5の便利ベンリなタグのテクニックTECHNIQUE

打消し線タグ <s> <del>

見た目は同じですが、“修正”なのか“削除”なのかで使い分けます。

<s>

修正されたテキストを囲むタグ

<del>

削除されたテキストを囲むタグ

使用例

ブラウザ上での表示例

定価150,000円 → 特別価格10,000円!


定価150,000円 → 特別価格10,000円!
※現在は販売終了しました。

上下付き文字タグ <sup> <sub>

数式などを書きたいときに付けるタグです。

<sup>

上付き文字を囲むタグ。

<sub>

下付き文字を囲むタグ。

使用例

ブラウザ上での表示例

乗数 = 82/面積 = 8m2
分子式 = CO2 H2O C2H6O

マイナーでほとんど使用しない人も多いと思いますが、使用してみると以外と便利なテクニックです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11