![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
No.2ベストアンサー
- 回答日時:
これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>
<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>
これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}
ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}
★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
となります。
No.1
- 回答日時:
こんな感じですか?
<style>
div.hoge{
clear:both;
float:left;
width:200px;
}
</style>
<div class="hoge">1.あ</div><div>:ABC</div>
<div class="hoge">2.abc</div><div>:ABC</div>
<div class="hoge">3.あいう</div><div>:ABC</div>
<div class="hoge">4.えお</div><div>:ABC</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) capeofdragonと申します Excel2016を使っておりまして 半角又は全角の任意文字列が 2 2022/10/31 13:51
- Excel(エクセル) エクセル関数の変わった使い方 3 2022/05/13 17:12
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/08 09:05
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 10:07
- Visual Basic(VBA) Excel VBAでAA(BBB) → BBB.AA に置換したい 2 2022/10/30 13:59
- Excel(エクセル) Excel 複数列のある文字を優先して1列に表示したいです 2 2022/12/03 12:07
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 08:37
- Excel(エクセル) MID関数について 2 2022/04/22 09:13
- 数学 数B ベクトルについて質問です。 平面上に△ABCと点P、Qがあるとする。次の等式が成り立つ時、点P 2 2022/06/28 19:51
- Visual Basic(VBA) 特定の文字を簡単な操作で半角スペースに変換するか削除したい 2 2022/11/01 10:35
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
min-heightとheightの違いについて
-
<div>テキスト</div>
-
<!-- #BeginLibraryItemとは
-
html の divとtable の役割
-
スペースを使わず文字位置を揃...
-
<div id="container">の使いか...
-
DL,DT,DDタグについて
-
align="middle"が無視される T...
-
HTML5とブラウザ・SEO、videoに...
-
Webサイトの作り方
-
h1に自分自身へのリンクを張...
-
CSSのBOX内だけフォントサイズ...
-
<BR> が多数連続しています。
-
CSSで画像を下に配置
-
ホームページ作成会社を探して...
-
セクションをdivで囲むと見出し...
-
マウスをのせると画像が動くcss...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報