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

回答編集履歴

1

別解と補足を追加

2018/05/15 19:02

投稿

Bonito_Bonito
Bonito_Bonito

スコア67

answer CHANGED
@@ -1,7 +1,10 @@
1
- 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>` は、質問者様が検証のために入れているものである、という前提で進めます。
2
- 質問の意図がっていましたらすみません。
2
+ 質問の解釈に相がございましたら申し訳ありません。
3
3
 
4
+ ###手段1
5
+
4
- ソース内の下記のブロック
6
+ ソース内の下記のブロックを、
7
+
5
8
  ```html
6
9
  <div class = "mdl-grid ">
7
10
  <div class = "mdl-cell Tile"><a href="login.html"></a></div>
@@ -19,4 +22,100 @@
19
22
  <a href="#"><div class="mdl-cell Tile">3</div></a>
20
23
  <a href="#"><div class="mdl-cell Tile">4</div></a>
21
24
  </div>
25
+ ```
26
+
27
+ ###手段2
28
+ また、シンプルに下記の方法でもリンクになります。
29
+ wrap を繰り返すとソースが冗長になるので、無駄な要素を極力排除します。
30
+
31
+ **1.CSSの記述を修正します。**
32
+
33
+ - 要素セレクタの `div` を削除しクラス名のみのセレクタへ変更します。
34
+ - display の扱いをブロックへ変更します。
35
+
36
+ 下記の様になるかと思います。
37
+ ```css
38
+ .Tile {
39
+ display: block;
40
+ position: relative;
41
+ width: 125px;
42
+ height: 125px;
43
+ background-color: #991111;
44
+ }
45
+ ```
46
+
47
+ **2.要素を <a> タグへ変更**
48
+
49
+ タイルのブロックの要素を `<div>` タグから `<a>` タグへ変更します。
50
+
51
+ ```html
52
+ <div class="mdl-grid">
53
+ <a href="login.html" class="mdl-cell Tile">1</a>
54
+ <a href="#" class="mdl-cell Tile">2</a>
55
+ <a href="#" class="mdl-cell Tile">3</a>
56
+ <a href="#" class="mdl-cell Tile">4</a>
57
+ </div>
58
+ ```
59
+
60
+ ###補足
61
+
62
+ 本件とは関係ないのですが、マークアップの不備が非常に気になりましたのでお伝えしておきます。
63
+ `<html>` タグの開始タグがないのと、`<main>` タグや `<form>` 、 `<div>` タグが閉じられていません。
64
+ モダンブラウザは閉じタグ等のミスをある程度補完してくれますが、意図しないレイアウト崩れや、JSでオブジェクトの認識に不具合が生じることもあります。
65
+
66
+ (参考までに)下記の様にすると良いかと思います。
67
+
68
+ ```html
69
+ <!DOCTYPE html>
70
+ <html lang="ja">
71
+ <head>
72
+ <meta charset="UTF-8">
73
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
74
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
75
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
76
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
77
+ <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
78
+ <link rel="stylesheet" href="styles.css">
79
+ <style>
80
+ .Tile {
81
+ display: block;
82
+ position: relative;
83
+ width: 125px;
84
+ height: 125px;
85
+ background-color: #991111;
86
+ }
87
+ </style>
88
+ </head>
89
+
90
+ <body>
91
+ <div class="mdl-layout__container">
92
+ <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header has-drawer is-upgraded is-small-screen">
93
+ <header class="demo-header mdl-layout__header mdl-color--purple-500 mdl-color-text--white is-casting-shadow">
94
+ </header>
95
+ <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
96
+ <div class="content">
97
+ <div class="mdl-tabs mdl-js-tabs is-upgraded">
98
+ <div class="mdl-color--white mdl-grid grid-side">
99
+ <form action="#">
100
+ <div class="mdl-list__item tab-list-item-pdg">
101
+ <span class="mdl-list__item-primary-content">
102
+ <i class="material-icons">assignment</i>
103
+ </span>
104
+ </div>
105
+ <div class="mdl-grid">
106
+ <a href="login.html" class="mdl-cell Tile">1</a>
107
+ <a href="#" class="mdl-cell Tile">2</a>
108
+ <a href="#" class="mdl-cell Tile">3</a>
109
+ <a href="#" class="mdl-cell Tile">4</a>
110
+ </div>
111
+ </form>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </main>
116
+ </div>
117
+ </div>
118
+ <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
119
+ </body>
120
+ </html>
22
121
  ```