お世話になります。
今回も本当に初歩な内容で申し訳ありません。
HTML5で、下記のような計算式の部分や注意書きの部分は、
どのタグで記述すれば適切でしょうか。
----------------
aを求める計算式は、下記の通りとする。
a = b * c + d
注1) b及びcは~とする。
注2) dは~~~~でなければならない。
-----------------
以上になります。
一見、式は<q>かとも思いましたが、引用ではないし、
<details>でも違うようです。
注)に関しては、<small>かとも考えてみましたが、
やはり違うようです。
ふさわしいタグを教えていただけますでしょうか。
よろしくお願いいたします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
No.2です。
すみません、訂正です。数式が改行されると良くないので、<pre>の方が良いも知れません。
<p>aを求める計算式は、下記の通りとする。</p>
<pre>a = b * c + d</pre>
<div>
aを求める計算式は、下記の通りとする。
<pre>a = b * c + d</pre>
</div>
ブラウザをMathML対応ブラウザに限定できるならMathMLがいいと思いますが、
<img>がよく使われると思います。
(imgの代替コンテンツは、数式をプレーンテキストで表現したもの)
<p>aを求める計算式は、下記の通りとする。<br>
<img src="expression.png" alt="a = b * c + d"></p>
No.3
- 回答日時:
No.1です。
<mathML>以外の要素の説明<figure>
【引用】____________ここから
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document,以下省略
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )]より
挿絵、画像、写真、コードリストのように、本文に注釈を付けるために使われます。
<figcaption>
は文字通り、そのキャプション(説明)です。
<q>は引用です。
<details>は、非表示にする等が前提の要素です。ブラウザには表示させず、ユーザーのアクションで表示させたりします。
【引用】____________ここから
The details element is not appropriate for footnotes. Please see the section on footnotes for details on how to mark up footnotes.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.11 Interactive elements — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/inte … )]より
<aside>
これは本文とは直接関係ない記事をマークアップします。
<article>
これは、内部に<header><section><footer>を持つか、持つと期待されている完結した記事をマークアップします。
HTML5では、原則として<div><span>は使わず、まず最適な要素がないかを確認して、それがある場合は、それを使います。数式は、HTML5には、<header><section><aside>などと同列に使えることになっています。
⇒4.8 Embedded content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/embe … )
figureとmath,varの組み合わせは、仕様書に実際に書かれています。
【引用】____________ここから
<figure>
<math>
<mi>a</mi>
<mo>=</mo>
<msqrt>
<msup>
<mi>b</mi><mn>2</mn>
</msup>
<mi>+</mi>
<msup>
<mi>c</mi><mn>2</mn>
</msup>
</msqrt>
</math>
<figcaption>
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of a triangle with sides <var>b</var> and <var>c</var>
</figcaption>
</figure>
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/text … )]より
早速のご返答、ありがとうございます。
mathというタグがあるということは知りませんでした。
しかし、やはり対応していないブラウザが多いようです。
表示目的ではなく、意味合いを持たせるだけならば、
使っていけそうです。
またよろしくお願いいたします。
ありがとうございました。
No.2
- 回答日時:
私の書き方です。
MathMLは表示できる環境も多くはない(ブラウザシェア的に)ので、基本的には使いません。
<article>
<p>aを求める計算式は、下記の通りとする。</p>
<p>a = b * c + d</p>
<aside>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは~とする。</li>
<li><strong>注2)</strong> dは~~~~でなければならない。</li>
</ul>
</aside>
<article>
または、<div>を使用して仮想的な段落を作成できます。
<article>
<div>
aを求める計算式は、下記の通りとする。
<p>a = b * c + d</p>
</div>
<aside>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは~とする。</li>
<li><strong>注2)</strong> dは~~~~でなければならない。</li>
</ul>
</aside>
<article>
ただし「aを求める~」が何か別の部分に対する注意事項なら、全体が<aside>になります。
<article>
本文
<aside>
<p>aを求める計算式は、下記の通りとする。</p>
<p>a = b * c + d</p>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは~とする。</li>
<li><strong>注2)</strong> dは~~~~でなければならない。</li>
</ul>
</aside>
</article>
HTMLではまず<p>以外のすべてのタグを調べて、対応するタグがない場合に<p>を使ってください。
http://www.w3.org/TR/html5/grouping-content.html …
> The p element should not be used when a more specific element is more appropriate.
http://www.html5.jp/tag/elements/p.html
>より意味が限定され、より適切な要素が他にあるのであれば、p 要素を使うべきではありません。
http://www.w3.org/TR/html5/sections.html#the-art …
http://www.w3.org/TR/html5/sections.html#the-asi …
http://www.html5.jp/tag/index.html
早速のご返答、ありがとうございました。
mathを使用しない、現在の形式で教えていただいたのですが、
そうなると、数式は特に決められているタグはないという
ことになるのでしょうか?
数式にしても、注意事項にしても、特に決められては
いないのなら、自分なりの書き方で構わないのでしょうか。
もしそうであれば、もう少し検討してみたいと思います。
またお願いいたします。
ありがとうございました。
No.1
- 回答日時:
HTML5は数式にMathMLが使えますから、それを使います。
Firefoxは、何年も前から使えますから、firefxで試すと良いでしょう。
MathML-fonts( https://addons.mozilla.jp/firefox/details/367848 )
を入れておくときれいに表示されます。
<figure>
<figcaption><var>a</var>を求める計算式は、下記の通りとする。</figcaption>
<p class="mathML">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi> a </mi>
<mo> = </mo>
<mi> b </mi>
<mo> ×</mo>
<mi> c </mi>
<mo> + </mo>
<mi> d </mi>
</math>
</p>
<figcaption class="note">注1) b及びcは~とする</figcaption>
<figcaption class="note">注2) dは~~~~でなければならない。</figcaption>
</figure>
とかですかね。
これにスタイルシートを組み合わせると下記になります。
firefoxでの表示を添付しておきます。
★タブは_に置換してあります。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style>
<!--
figure{width:90%;margin:0.8em auto;}
figure p.mathML{font-size:1.6em;}
figure var{font-size:1.2em;margin-left:0.5em;margin-right:0.5em;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<aside>
___<h3>Something aside</h3>
__</aside>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<figure>
___<figcaption><var>a</var>を求める計算式は、下記の通りとする。</figcaption>
___<p class="mathML">
____<math xmlns="http://www.w3.org/1998/Math/MathML">
_____<mi> a </mi>
_____<mo> = </mo>
_____<mi> b </mi>
_____<mo> ×</mo>
_____<mi> c </mi>
_____<mo> + </mo>
_____<mi> d </mi>
____</math>
___</p>
___<figcaption>注1) b及びcは~とする</figcaption>
___<figcaption>注2) dは~~~~でなければならない。</figcaption>
__</figure>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 財務・会計・経理 業者間での注文書・請書の取り扱いについて 2 2022/06/27 15:53
- 数学 画素数の計算 中高レベルの計算で申し訳ないのですが、下記の問題が分かりません 比率が4:3のA4の横 3 2022/12/17 22:41
- 統計学 t分布導出時のヤコビ行列式について教えて下さい。 1 2022/07/04 21:36
- 消費税 消費税還付を受けるための輸出免税の会計処理(仕訳)を教えてください 4 2022/07/14 12:48
- 確定申告 個人の確定申告。「医療費のお知らせ」記載内容と医療費控除の明細書【内訳書】に記入する内容の関係 4 2023/03/04 18:41
- 法学 株式会社が設立の登記をする場合において、その定款に設立費用にかかる定めがある場合、 5 2022/12/17 05:41
- その他(お金・保険・資産運用) 超初心者です。レートについて教えて下さい。 5 2023/04/20 10:49
- 公認会計士・税理士 申告書等の税理士欄について 5 2022/09/14 17:23
- 相続税・贈与税 相続税の、土地の計算法に関して、の質問です。 4 2022/07/05 23:12
- その他(Microsoft Office) 従業員増減対応で当番種類の増減対応な当番表 21 2022/07/19 07:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
HTML5のfooterに見出しを付けて...
-
liタグの中に<p>タグやら<dl>を...
-
記事の最後の次のページ、前の...
-
Dreamweaverで、ul要素の下に写...
-
javascriptのアコーディオンメ...
-
divタグ内のコンテンツが重なっ...
-
html,cssでサムネイルにマウス...
-
画像にリンクを張ると画像がず...
-
ulとliで囲った文字の一部を変...
-
jQuery等で背景をフル表示+ス...
-
navの横並びにsnsアイコンを付...
-
ul li を使ったリストを作りた...
-
cssのリストで、番号1と2の間の...
-
HPのグローバルナビゲーション...
-
リンクの格納展開のHTMLタグを...
-
Webサイトにスライディングサイ...
-
Webのコーディングについての質...
-
CSS li float 2列組み
-
カルーセルスライダー「slick.j...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報