teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記です

2017/05/08 15:00

投稿

LibertyBell3
LibertyBell3

スコア1084

answer CHANGED
@@ -1,1 +1,33 @@
1
- `colspan`の足し算が合っていないからっていうオチ?
1
+ `colspan`の足し算が合っていないからっていうオチ?
2
+
3
+ 追記:
4
+ とはいえ、テーブルなので、テキスト量によって、どうしてもサイズを守ってくれないので、
5
+ 最悪、テーブルを使わないってことも考えた方が良いかもしれません。
6
+ ```HTML
7
+ <div class="box">
8
+ <h3><strong>てすと</strong><em>テスト</em></h3>
9
+ <div>
10
+ <dl>
11
+ <dt>画像</dt>
12
+ <dd>
13
+ <ul><li><span>区間</span> テスト</li><li>ガイド テスト</li></ul>
14
+ </dd>
15
+ </dl>
16
+ <div>
17
+ <dl>
18
+ <dt><span>区間</span></dt>
19
+ <dd>テスト~テスト</dd>
20
+ <dd>テスト~テスト</dd>
21
+ </dl>
22
+ <dl>
23
+ <dt><span>料金</span></dt>
24
+ <dd>¥00,000~</dd>
25
+ <dd>¥0,000~</dd>
26
+ </dl>
27
+ </div>
28
+ ```
29
+ こんな感じの構成でしょうか。
30
+ これなら、テキスト量に左右されないものが作成可能です。
31
+
32
+ あと、区間ですが、ソース上で「区 間」としちゃうと、読み上げブラウザでは、
33
+ 「く・あいだ」とか読み上げそうなので、`letter-spacing`の利用を考えた方が良いと思いますよ。