アプリ版：「スタンプのみでお礼する」機能のリリースについて

おしえて

HTMLもしくはCSSのULでリンクを張る場合に、一行に複数リンクを張るにはどうすればいいですか？

解決済

  • 質問者：hoge3600
  • 質問日時：
  • 回答数：3件

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

ULリンクで順番に

【１】
【２】
【３】
【４】
【５】
【６】
縦にリンクを張ることは出来るのですが、

例えば、

【１】
【２】【３】
【４】
【５】
【６】

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

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

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

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

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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">【１】</A>
<A href="http://www...02.html">【２】</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

つらい・・・

No.2

  • 回答者： Ensenada
  • 回答日時：

リンクの際の書式を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

No.1

  • 回答者： kon77
  • 回答日時：

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



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

■ 検証したソース

<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が見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報