12万作品が月額500円(税別)で見放題なのはdTVだけ!! >>dTV(外部リンク)

HTMLタグとCSSを使ってリンクを表現したいのですが、

ULリンクで順番に

【1】
【2】
【3】
【4】
【5】
【6】
縦にリンクを張ることは出来るのですが、

例えば、

【1】
【2】【3】
【4】
【5】
【6】

例)
【ゴオグル】【ゴオグルログイン画面入り口】

のように
サイトへのリンクとその横に、ログイン画面へのリンクをつけたいのですが、

ULやCSSを用いて、
順番にリンクを張るうち、
何個かだけ、【2】【3】のように
変則的に並べるにはどうすればよいのでしょうか?

単純に
<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>

とすると、1行にリンクを並べることはできるのですが、
これだと、マウスオーバーした時にリンクの背景色を替えるなどの
設定をすると、

二つのリンクを一つにまとめて扱われてしまうので、

なんとか一つ一つに設定するにはどうしたらいいのでしょうか?

もし、分かりましたらよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

class,idなどを利用するのは本来の目的から言うと誤りです。


DIVに限らず、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」が基本で、プレゼンテーションのためにidやclassをつけるのは避けましょう。
 先でプレゼンテーション変えるとき、class名も書き換えなければならない!!

 divやspanやidやclassがやたらと増えて煩雑なHTMLになるし、将来プレゼンテーションを変更しようとしたときにHTMLも書き換えなければならなくなります。
 HTML5では
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )]より
【注意】著者は、他により手義綱な要素ないときの最後の手段としてdiv要素を使用することが強く奨励されます。div要素ではなく、より適切な要素を使用する事は、読者のためには「より良いアクセシビリティ」を作者のためには「メンテナンス性の向上」につながります。

<li><A href="http://www...01.html">【1】</A>
<A href="http://www...02.html">【2】</A></li>
HTML5やXHTMLでは大文字のタグは使いません。
※【】はHTMLには書きません。検索エンジンも読み上げソフトも、いちいち読んでしまいます。

HTMLだと
<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</nav>

HTML4.01だと、文書構造を示す要素が用意されていませんので
  ⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

<div id="nav"><!-- classでナビゲーションだと知らせる -->
 <ul><!-- 順不同リスト -->
  <li><a href="/01.html">最初のページ</a></li>
  <li><a href="/02.html">次のページ</a></li>
  <li><a href="/03.html">ゴオグル</a></li>
  <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
  <li><a href="/05.html">テストだよ</a></li>
 </ul>
</div>
  ★あなたの場合、その内容でしたら
   <nav>
    <ul>
     <li><a href="/01.html">最初のページ</a></li>
     <li><a href="/02.html">次のページ</a></li>
     <li><a href="/03.html">ゴオグル</a></li>
     <li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
     <li><a href="/05.html">テストだよ</a></li>
    </ul>
   </nav>
  のほうが適切で、はるかに簡単なのですが、それは今回は説明しません。


先のHTML5のHTMLに対して、
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
だけでよいですね。これだと煩雑なclassつける必要もないし、リスト項目が増減してもよいし、後で好きにデザイン返られる。だってHTMLには文書構造しか書かれてないから。
HTML/CSSで最も重要なこと!!
 →構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

【サンプル】
※タブは_に置換してあるので戻す。
※Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力(右上)で検証済み

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA1951">
<style media="screen">
<!--
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
display:inline;
}
nav ul li a{
display:block;
margin:5px 10px;
}
nav ul li a[href="/03.html"],
nav ul li a[href="/04.html"]{
display:inline-block;
}
nav ul li a:before{
content:"【";
}
nav ul li a:after{
content:"】";
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav><!-- HTML側ではナビゲーションリンクとしてマークアップ -->
___<ul><!-- 順不同リスト -->
____<li><a href="/01.html">最初のページ</a></li>
____<li><a href="/02.html">次のページ</a></li>
____<li><a href="/03.html">ゴオグル</a></li>
____<li><a href="/04.html">ゴオグルログイン画面入り口</a></li>
____<li><a href="/05.html">テストだよ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<aside>
___<h3>Something aside</h3>
__</aside>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h2>A nice footer</h2>
_</footer>
</body>
</html>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
参考にさせていただきます。

お礼日時:2015/06/21 22:35

リンクの際の書式をCSSで行ってClassを利用すれば、おっしゃることはできると思います。


下記のCSSではページ001、002、004へのリンクが白文字で表示され、ページ003へのリンクが緑色の文字で表示されます。
そして2行目に折り返しなく、ページ002とページ003へのリンクが並んでいます。
背景色を変えることもできるかと思います。

CSS本文
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<style type="text/css">

/*白い文字でリンク用の書式設定*/
#white-menu { }
li.l-menu { font-size: 12px; margin-top: 2px; margin-bottom: 2px; }
a.l-menu {/*リンクされた文字*/ color:white; padding: 10px; text-decoration:bold;}
a:link.l-menu {/*未訪問のリンク*/ color:white; padding: 10px; text-decoration:none;}
a:visited.l-menu {/*訪問後のリンク*/ color:white; padding: 10px; text-decoration:none;}
a:hover.l-menu {/*マウスをのせたとき*/ color:#pink; padding: 10px; text-decoration:underline;}
a:active.l-menu {/*クリック中*/ color:red; padding: 10px;text-decoration:bold;}

/*緑色の文字でリンク用の書式設定*/
#kuro-link { }
a.kuro-link {/*リンクされた文字*/ color:green; text-decoration:underline;}
a:link.kuro-link {/*未訪問のリンク*/ color:green; text-decoration:underline;}
a:visited.kuro-link {/*訪問後のリンク*/ color:green; text-decoration:underline;}
a:hover.kuro-link {/*マウスをのせたとき*/ color:red; text-decoration:bold;}
a:active.kuro-link {/*クリック中*/ color:red; text-decoration:bold;}


</style>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HTML本文
(前略)
<head>
(中略)
<link rel="stylesheet" type="text/css" href="3.css" / >
(中略)
</head>
<ul>
<li><a class= "l-menu" href="001.html">ページ001</a></li>
<li><nobr><a class= "l-menu" href="002.html">ページ002<a class= "kuro-link" href="003.html">ページ003</a></nobr></li>
<li><a class= "l-menu" href="004.html">ページ004</a></li>
</ul>
(後略)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
でページ002とページ003へのリンクの色を別々にできましたが、いかがでしょう?
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
参考にさせていただきます。

お礼日時:2015/06/21 22:25

こちらで検証してみましたが、きちんと個別に背景色が変わり、その状況が再現出来ません。



そのソースを簡略化して補足に書き込めば、有効な回答が付くかも知れません。

■ 検証したソース

<html>
<head>
<style>

a:hover{
background: #cccccc;
}

</style>
</head>
<body>
<ul>

<li>
<A href="#">aaa</A>
<A href="#">bbb</A>
</li>

</ul>
</body>
</html>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
自分の作ったものだと、■○
と並んでいる■と○のリンクで同じ色になっているので
一行に見えていたので、

行間を空けるか、spanタグで割り振るか検討して
spanタグを使うことで解決できました。

また、何かありました理よろしくお願いします。

お礼日時:2015/06/21 22:21

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング