タグの組み方により、Webブラウザのダブルクリックで選択される範囲に違いが出る現象について紹介します。
動作確認コード
下記のコードを記述します。
h2{
background-color:#c7e1f5;
font-size:18px;
}
.div-table{
width:64px;
float:left;
}
.div-table-end{
clear:left;
}
.div-table-line-caption{
width:96px;
float:left;
}
.flexbox-table {
width:200px;
display: flex;
}
.flexbox-cell {
flex: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TableSelectTest.css"/>
</head>
<body>
<h2>Tableタグの表組</h2>
<table>
<tr>
<td>表項目</td>
<td>167835</td>
<td>284523</td>
</tr>
<tr>
<td>ID</td>
<td>16785</td>
<td>83851</td>
</tr>
<tr>
<td>No</td>
<td>242950</td>
<td>189951</td>
</tr>
</table>
<hr />
<h2>CSS Floatの表組</h2>
<div>
<div class="div-table">表項目</div>
<div class="div-table">1855242</div>
<div class="div-table">3895904</div>
<div class="div-table-end"></div>
<div class="div-table">ID</div>
<div class="div-table">874412</div>
<div class="div-table">520014</div>
<div class="div-table-end"></div>
<div class="div-table">No</div>
<div class="div-table">1584</div>
<div class="div-table">9257</div>
<div class="div-table-end"></div>
</div>
<hr />
<h2>見出しを入れ子にした CSS Floatの表組</h2>
<div>
<div class="div-table-line"><div class="div-table-line-caption">表項目</div>85201</div>
<div class="div-table-line"><div class="div-table-line-caption">ID</div>18030</div>
<div class="div-table-line"><div class="div-table-line-caption">No</div>49628</div>
</div>
<hr />
<h2>CSS Flexboxの表組</h2>
<div class="flexbox-table">
<div class="flexbox-cell">表項目</div>
<div class="flexbox-cell">18030</div>
<div class="flexbox-cell">49628</div>
</div>
<div class="flexbox-table">
<div class="flexbox-cell">ID</div>
<div class="flexbox-cell">498502</div>
<div class="flexbox-cell">687710</div>
</div>
<div class="flexbox-table">
<div class="flexbox-cell">No</div>
<div class="flexbox-cell">959285</div>
<div class="flexbox-cell">163845</div>
</div>
</body>
</html>
動作確認
Internet Explorer
上記のページをIntgernet Explorer で表示します。下図の画面が表示されます。
数値の部分でマウスの左ボタンをダブルクリックすると、数値部分が選択できます。
どの表でも数値部分をダブルクリックすると選択できます。
Microsoft Edge (Google Chrome)
続いて、上記のページを Microsoft Edge または、Google Chromeで表示します。下図の画面が表示されます。
数値の部分でマウスの左ボタンをダブルクリックすると、数値部分が選択できます。
しかし、[見出しを入れ子にした CSS Floatの表組]の表で数値部分をダブルクリックすると見出しのテキストまで選択されてしまいます。
しかし、見出しのテキストが英文字でない場合は数値部分が選択されます。
他の表に関しては、ダブルクリックで数値のみが選択されます。
まとめ
Google ChromeやMicrosoft Edge では
<div><div>項目テキスト</div>値</div> のタグ組で記述した場合、Internet Explorer では値をダブルクリックすると値のみが選択されますが、Google ChromeやMicrosoft Edge では、項目テキストがASCII文字列の場合、値をダブルクリックすると項目テキストまで選択されてしまう動作になることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-01-07
作成日: 2019-08-07
