HTMLでタイルをリンク用のボタンとしたい

現在、ハイブリッドアプリの開発を行っております。
その際、div要素で作成したタイルをリンク用のボタンとしたいのですが
リンクが機能しません。

中にアイコンや文言を配置した場合も、そちらがリンクとなってしまい
タイル自体はリンクとならないようです。
初歩的な質問で恐縮ですが、タイルをボタンとして使用する方法をご存知の方がいれば
ご教授くださいませ。

現在の画面（赤い部分をボタンにしたい）

<!doctype html>

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
          div.Tile
        {
        position: relative;
        width: 125px;
        height: 125px;
        background-color: #991111;
        }
    </style>
</head>
<body>
    <div class="mdl-layout__container">
        <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header has-drawer is-upgraded is-small-screen">
            <header class="demo-header mdl-layout__header mdl-color--purple-500 mdl-color-text--white is-casting-shadow">
            </header>
            <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
                <div class="content">
                    <div class="mdl-tabs mdl-js-tabs is-upgraded">
                            <div class="mdl-color--white mdl-grid grid-side">
                                <form action="#">
                                    <div class="mdl-list__item tab-list-item-pdg">
                                        <span class="mdl-list__item-primary-content">
                                            <i class="material-icons">assignment</i>
                                        </span>
                                    </div>


                                    <div class = "mdl-grid ">
                                            <div class = "mdl-cell Tile"><a href="login.html"></a></div>
                                            <div class = "mdl-cell Tile">2</div>
                                            <div class = "mdl-cell Tile">3</div>
                                            <div class = "mdl-cell Tile">4</div>
                                    </div>  
                            </div>
                        </div>

    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>

Bonito_Bonito

2018/05/15 10:05

<div class = "mdl-cell Tile">〇〇</div> の部分をリンクにしたいということでしょうか？

Bonito_Bonito

2018/05/15 10:07

1つめのタイルの <div class = "mdl-cell Tile"><a href="login.html"></a></div> は、質問者様が試しに入れているものと思ってよいですか？

行動規範の内容に同意します

回答1件

ベストアンサー

1つめのタイルの <div class = "mdl-cell Tile"><a href="login.html"></a></div> は、質問者様が検証のために入れているものである、という前提で進めます。
質問の解釈に相違がございましたら申し訳ありません。

###手段1

ソース内の下記のブロックを、

html
1<div class = "mdl-grid ">
2	<div class = "mdl-cell Tile"><a href="login.html"></a></div>
3	<div class = "mdl-cell Tile">2</div>
4	<div class = "mdl-cell Tile">3</div>
5	<div class = "mdl-cell Tile">4</div>
6</div>

こちらを下記の様に <a href="__リンク先URL__"> 〜 </a> タグで wrap するとリンクになります。

html
1<div class="mdl-grid">
2	<a href="login.html"><div class="mdl-cell Tile">1</div></a>
3	<a href="#"><div class="mdl-cell Tile">2</div></a>
4	<a href="#"><div class="mdl-cell Tile">3</div></a>
5	<a href="#"><div class="mdl-cell Tile">4</div></a>
6</div>

###手段2
また、シンプルに下記の方法でもリンクになります。
wrap を繰り返すとソースが冗長になるので、無駄な要素を極力排除します。

1.CSSの記述を修正します。

要素セレクタの div を削除しクラス名のみのセレクタへ変更します。
display の扱いをブロックへ変更します。

下記の様になるかと思います。

css
1.Tile {
2    display: block;
3    position: relative;
4    width: 125px;
5    height: 125px;
6    background-color: #991111;
7}

2.要素を <a> タグへ変更

タイルのブロックの要素を <div> タグから <a> タグへ変更します。

html
1<div class="mdl-grid">
2    <a href="login.html" class="mdl-cell Tile">1</a>
3    <a href="#" class="mdl-cell Tile">2</a>
4    <a href="#" class="mdl-cell Tile">3</a>
5    <a href="#" class="mdl-cell Tile">4</a>
6</div>

###補足

本件とは関係ないのですが、マークアップの不備が非常に気になりましたのでお伝えしておきます。
<html> タグの開始タグがないのと、<main> タグや <form> 、 <div> タグが閉じられていません。
モダンブラウザは閉じタグ等のミスをある程度補完してくれますが、意図しないレイアウト崩れや、JSでオブジェクトの認識に不具合が生じることもあります。

（参考までに）下記の様にすると良いかと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
8	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
9	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
10	<link rel="stylesheet" href="styles.css">
11	<style>
12		.Tile {
13			display: block;
14			position: relative;
15			width: 125px;
16			height: 125px;
17			background-color: #991111;
18		}
19	</style>
20</head>
21
22<body>
23	<div class="mdl-layout__container">
24		<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header has-drawer is-upgraded is-small-screen">
25			<header class="demo-header mdl-layout__header mdl-color--purple-500 mdl-color-text--white is-casting-shadow">
26			</header>
27			<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
28				<div class="content">
29					<div class="mdl-tabs mdl-js-tabs is-upgraded">
30						<div class="mdl-color--white mdl-grid grid-side">
31							<form action="#">
32								<div class="mdl-list__item tab-list-item-pdg">
33									<span class="mdl-list__item-primary-content">
34										<i class="material-icons">assignment</i>
35									</span>
36								</div>
37								<div class="mdl-grid">
38									<a href="login.html" class="mdl-cell Tile">1</a>
39									<a href="#" class="mdl-cell Tile">2</a>
40									<a href="#" class="mdl-cell Tile">3</a>
41									<a href="#" class="mdl-cell Tile">4</a>
42								</div>
43							</form>
44						</div>
45					</div>
46				</div>
47			</main>
48		</div>
49	</div>
50	<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
51</body>
52</html>