リンクについて

リンクに付いて質問させて頂きます。

HTMLに下記のように記述し CSSでリンク設定したいのですがdisplay: block;を書いてもリンクになりません。
CSSの階層タグに間違いがあるのでしょうか？

ご教授頂けますと幸いです。
宜しくお願い致します。

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

回答4件

解決いたしました。

tableを使用したBoxのように見えていましたが widhtの設定などで目に見えない
BOX領域ができ background-colorで色が付いたことにより table配置のように見えてしまったようです
正解の画像がスクリーン投影で見せられたものだったのでボケて紛らわしくなり上記のように
認識してしまいました。

お手を煩わせてしまい申し訳ありません。

投稿2015/03/03 14:29

退会済みユーザー

総合スコア0

blackonyx

2015/03/03 16:37

解決おめでとうございます。

退会済みユーザー

2015/03/04 05:07

有難うございます,,＾＾,, blackonyxさんの解き方が　HTMLの正解に含まれていましたのでベストアンサーとさせて頂きました。ご教授頂きまして　有難うございました,,＾＾,,

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

課題に出された ul一つ使い liの中身が全部リンク（下線なしの）という問題

と

正解は始めtableで作り

が既に矛盾して見えるんですが…
最初に書かれたHTMLから、ulとtable混在しないように修正したんですよね？
修正したHTMLも提示しないと、本当にやりたいのがどういったものなのかわかりません。

投稿2015/03/02 08:40

yunn

総合スコア144

退会済みユーザー

2015/03/02 09:48

自分も課題を出された際　ulはリストで　tableにするには　まず点を消してと　考えていたんですが…　あくまでも　リストを表（table）に　HTMLでして　点を消したり　背景色やリンクを　CSSで装飾する　というのが大まかな出題です。まだHTMLの修正も済んでいません。間違った記述ですが　上記記述でIEに出てくる結果は　見た目は　課題の途中工程に合っているので　セルの文字AやBが下線なしのリンクで　画面中央にtableで作った表の外枠がないモノが　もう少し大きな個々のBOXとして結果に出るという感じなのですがすみません　上手く説明出来ていませんね＾＾；　　　

退会済みユーザー

2015/03/02 09:51

すみません　説明を先に書き込んでしまいお礼をしておりませんでした ><；改めまして　ご回答　有難うございます,,＾＾,,

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

正解は既に出ているようなので補足します。

HTMLに下記のように記述し CSSでリンク設定したいのですが

CSSとはカスケーディング・スタイル・シートと言う名前の通り、
見た目を設定する記述方法です。

つまり、リンクを貼れるか貼れないかはCSSは関係しません。

※ 興味本位ですがCSSも見たいところ・・・

投稿2015/02/28 07:34

bigfatrat

総合スコア187

退会済みユーザー

2015/03/03 14:18

コメント有難うございます＾＾ HTMLでリンク設定し　他の装飾をCSSで行う課題でしたのでそのように　説明を書き加えさせて頂きました。

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

ベストアンサー

純粋にHTMLのタグの使用法に誤りがあります。
tableタグは、

lang
1<table border="1">
2	<tr>
3		<td><a href="#">ＡＢＣ</a></td>
4		<td><a href="#">ＤＥＦ</a></td>
5		<td><a href="#">ＧＨ</a></td>
6	</tr>
7	<tr>
8		<td><a href="#">ＪＫＬ</a></td>
9		<td><a href="#">ＭＮＯ</a></td>
10		<td><a href="#">ＰＱＲ</a></td>
11	</tr>
12	<tr>
13		<td><a href="#">ＳＴＵ</a></td>
14		<td><a href="#">ＶＷＹ</a></td>
15		<td><a href="#">ＺＺＺ</a></td>
16	</tr>
17</table>

ですが、ulタグでは

lang
1<ul>
2	<li><a href="#">ＡＢＣ</a></li>
3	<li><a href="#">ＤＥＦ</a></li>
4	<li><a href="#">ＧＨＩ</a></li>
5
6	<li><a href="#">ＪＫＬ</a></li>
7	<li><a href="#">ＭＮＯ</a></li>
8	<li><a href="#">ＰＱＲ</a></li>
9
10	<li><a href="#">ＳＴＵ</a></li>
11	<li><a href="#">ＶＷＹ</a></li>
12	<li><a href="#">ＺＺＺ</a></li>
13</ul>

上記タグの使用法の誤りによりリンクとして解釈されていません。

最後に、もう一つ

順序なしリスト（ulタグブロック）のみを用いcssを駆使して表を作れ
表の中のセルにはリンクを設置せよ
リンクの書式は下線なしである

上記条件のとき

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>もしかしてだけど・・・</title>
6<style type="text/css">
7/*bodyに関するCSS
8--------------------------------------------*/
9body {
10	margin: 0px;
11	padding: 0px;
12}
13/*ページ構造に関するCSS
14--------------------------------------------*/
15.table {
16	display: table;
17	float: left;
18	line-height: 2em;
19	border-style: 1px dotted #000;
20}
21
22.tr {
23	display: table-row;
24}
25
26.td {
27	display: table-cell;
28	width: 120px;
29	text-align: center;
30	background-color: #cfc;
31}
32
33/* リンクに関するCSS 
34----------------------------------------------*/
35.td a {
36	display: block;
37	width: 118px;
38	height: 30px;
39	text-decoration: none;
40	background-color: #936;
41	color: #fff;
42	margin: 2px 0 2px 0;
43}
44</style>
45</head>
46<body>
47	<ul class="table">
48		<li class="tr"><ul>
49				<li class="td"><a href="#">ABC</a></li>
50				<li class="td"><a href="#">DEF</a></li>
51				<li class="td"><a href="#">GHI</a></li>
52			</ul></li>
53		<li class="tr"><ul>
54				<li class="td"><a href="#">JKL</a></li>
55				<li class="td"><a href="#">MNO</a></li>
56				<li class="td"><a href="#">PQR</a></li>
57			</ul></li>
58		<li class="tr"><ul>
59				<li class="td"><a href="#">STU</a></li>
60				<li class="td"><a href="#">VWY</a></li>
61				<li class="td"><a href="#">ZZZ</a></li>
62			</ul></li>
63	</ul>
64</body>
65</html>

というのはどうでしょうか。
（珍解答ですが）

投稿2015/02/27 21:43

編集2015/03/03 16:36

blackonyx

総合スコア354

退会済みユーザー

2015/02/28 07:30

迅速なご回答　有難うございます,,＾＾,, 初めに　trを外して書いていたのですが　IEで見た際ボックスが横に全て連らなってしまい　横３列縦３列の計９個セルを作るため trを書きました trを使わずに　spanを書いても　上記の並びの表が出来ませんでしたなにか　記載の仕方が他にあるのでしょうか？

blackonyx

2015/02/28 07:54

・３×３の表を書く「テーブル」（１）表 <table></table>（テーブルの本体）（２）横列（テーブル要素の中） <tr></tr> （３）セル（tr要素の中） <td></td> 横3列にするには<td></td>の組を３つ（４）縦 2から３を必要数繰り返す。 <span></span>はインライン要素で、それ自身に意味はなくスタイルシートを適用するときに使用します。参考までに以下のページを http://www.tohoho-web.com/www.htm

退会済みユーザー

2015/02/28 14:58

丁寧なご回答　有難うございます,,^^,, つまり　ulタグではCSSにリンクの記載を施してもリンクにはならないということでしょうか？

blackonyx

2015/02/28 15:14

ulタグはのちに続くliタグとともにリスト表記を形成する要素です。リンクは通常aタグを使用します。基本「～タグ」は、HTML文書の構造を記述するもので、CSSは見た目、つまりスタイルを記述します。

退会済みユーザー

2015/02/28 15:35

と　言うことは　HTMLの構造に問題が…　何度も質問してしまい申し訳ありません＞＜；一度　tableタグの構造をしっかり調べたいと思いますｔｒを外すと　なぜ　横並びに全て連なってしまうのか　そこのところも把握できていないので　あと　ul・liタグではなぜリンクにならないのかも…。課題に出された　ul一つ使い　liの中身が全部リンク（下線なしの）という問題にすでに誤りがあるのかもしれません。

blackonyx

2015/02/28 15:46

課題だったのですね。では、一つヒントをタグには大別すると、ブロック要素とインライン要素があります。 ul/ilタグはブロック要素。対して、aタグはインライン要素です。下線のあるなしは、見た目ですので・・・。

blackonyx

2015/02/28 15:54

↑のヒント中に誤字が、 ×　ul/ilタグは・・・ ○　ul/liタグは・・・

退会済みユーザー

2015/03/02 07:10

ヒント　有難うございます,,＾＾,, ほんの少しですが　ブロック要素とインライン要素が解ってきましたですが　今度はCSSに問題が…＾＾；

blackonyx

2015/03/02 18:53

もしかして・・・。 .table { display: table; } --- <ul class="table"> --- .tr { display: table-row; } --- <li class="tr"> --- .td { display: table-cell; } --- <ul><li class="td"> --- 大ヒント

blackonyx

2015/03/03 05:03

問題（課題）を整理しますと、１　順序なしリスト（ulタグブロック）のみを用いcssを駆使して表を作れ２　表の中のセルにはリンクを設置せよ３　リンクの書式は下線なしであるｰｰｰｰということでよいでしょうか。

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

あなたの回答