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行にリンクを並べることはできるのですが、
これだと、マウスオーバーした時にリンクの背景色を替えるなどの
設定をすると、
二つのリンクを一つにまとめて扱われてしまうので、
なんとか一つ一つに設定するにはどうしたらいいのでしょうか?
もし、分かりましたらよろしくお願いします。
No.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>
No.2
- 回答日時:
リンクの際の書式を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へのリンクの色を別々にできましたが、いかがでしょう?
No.1
- 回答日時:
こちらで検証してみましたが、きちんと個別に背景色が変わり、その状況が再現出来ません。
そのソースを簡略化して補足に書き込めば、有効な回答が付くかも知れません。
■ 検証したソース
<html>
<head>
<style>
a:hover{
background: #cccccc;
}
</style>
</head>
<body>
<ul>
<li>
<A href="#">aaa</A>
<A href="#">bbb</A>
</li>
</ul>
</body>
</html>
回答ありがとうございます。
自分の作ったものだと、■○
と並んでいる■と○のリンクで同じ色になっているので
一行に見えていたので、
行間を空けるか、spanタグで割り振るか検討して
spanタグを使うことで解決できました。
また、何かありました理よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- PHP PHP一覧表示した項目にリンクをはりたい 1 2023/07/12 17:08
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul><li></li></ul>にするメリ...
-
リストを2つに分割して、それぞ...
-
divタグ内のコンテンツが重なっ...
-
円形の配置にするコーディング...
-
ホームページビルダーで同じ行...
-
リストの並べ替え
-
文字の先頭につけるアイコン
-
ulタグやliタグの中でbrタグ...
-
htmlの<ol>タグで、数字などを...
-
jQuery-もっと見るボタンをスマ...
-
テーブル内のプルダウンの下に...
-
html <ul></ul>の並びで一行空...
-
タイトルの横にサブタイトルが並ぶ
-
html/cssの、navを2段にする...
-
CSS フォントサイズの違うリス...
-
番号付きリスト(<Ol><Li>・・...
-
<li>で並べたメニューのリンク...
-
ボタンを横に並べて表示させる方法
-
レスポンシブなサイトがうまく...
-
display:table;を多段表示させたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報