読者です 読者をやめる 読者になる 読者になる

HTML 網掛け&hover テーブルの作り方

HTML 網掛け&hover テーブル

先日のシンプルなテーブルの装飾版です。
マウスを上に乗せるをセルの色が変わります。(hoverと言います)
また、一行毎にセルの色が変更されています。(網掛けですね。)


table header 1table header 2table header 3
table data 1Atable data 1Btable data 1C
table data 2Atable data 2Btable data 2C
table data 3Atable data 3Btable data 3C
table data 4Atable data 4Btable data 4C
table data 5Atable data 5Btable data 5C



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table.shade_table {
	font-size:11px;/* ここでテーブルサイズが決定する */
	border-collapse: collapse;
	background-color: white;
}

table.shade_table th {
	border: 1px solid black;
	padding: 8px;
	background-color: #DDDDDD;
}

table.shade_table td {
	border: 1px solid black;
	padding: 8px;
/* ここで指定するとhover,evenが効かなくなる */
/*	background-color: white; */
}

#table_body tr:nth-child(even) {
	background: #EEEEEE;
}

#table_body tr:hover {
  background-color: #FFCC99;
}

</style>
</head>
<body>
  <table class="shade_table">
    <thead>
      <tr><th>table header 1</th><th>table header 2</th><th>table header 3</th></tr>
    </thead>
    <tbody id="table_body">
      <tr><td>table data 1A</td><td>table data 1B</td><td>table data 1C</td></tr>
      <tr><td>table data 2A</td><td>table data 2B</td><td>table data 2C</td></tr>
      <tr><td>table data 3A</td><td>table data 3B</td><td>table data 3C</td></tr>
      <tr><td>table data 4A</td><td>table data 4B</td><td>table data 4C</td></tr>
      <tr><td>table data 5A</td><td>table data 5B</td><td>table data 5C</td></tr>
    </tbody>
  </table>
</body>
</html>

HTML リンクを押せる範囲を拡大する方法

リンクを押せる範囲を拡大する方法

divで範囲を決めて、aはいっぱいに広げる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.link_wrapper{
    border:solid 1px black;
    height:50px;
    position:relative;
    width:200px;
}

.link_wrapper a{
    height:100%;
    position:absolute;
    width:100%;
}

.link_wrapper a:hover {
    background-color:black;
}
</style>
</head>
<body>
  <div class="link_wrapper">
    <a href="#">リンク</a>
  </div>
</body>
</html>

要素aのdisplayをblockにしてしまう方法もある。