テキストの揃え方について

このQ&Aのポイント
  • CSSを使用してテキストの揃え方を調整する方法について質問しています。
  • 質問者は、ホームページのテキストを中央揃えにする方法と、左揃えにする方法を知りたいと考えています。
  • 現在のCSSでは、テキストを左揃えにすることができず、ウィンドウの左端に配置されてしまいます。CSSレベル2の書き方で実現する方法を教えてください。
回答を見る
  • ベストアンサー

テキストの揃え方について

CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

noname#178832
noname#178832
  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

CSSを期待通り適用させるためにはHTMLが正しくないと。 CSSより先にHTMLをきちんと学んでください。そのほうが断然早道です楽です。 HTMLは文書構造だけをマークアップするものです。そのためHTMLは誰(機械を含めて)にでもわかるし、それに基づいてCSSが書けます。 自分で書かれた質問を読み返されても、さっぱりわからないと思います。 たとえば、下のような説明だとどうでしょう。  header内に見出しとナビゲーションがあり、5項目からなるナビゲーションは横並びに配置します。  本文(section)の見出しは画像で表示して、その下に人気記事(.popular)と新着情報(.news)からなる本文記事を左右二コマの段組にしたい。  記事のフッター(footer)はその下に  ページ全体は画面中央に表示することにし、スマホや幅広ディスプレイに対応させるため最小400px、最大640pxにまとめたい。  これだとHTMLを示されなくてもスタイルシートが書けます。 [HTML4.01]だと <body>  <div class="header">   <h1>ページタイトル</h1>   <div class="nav">    <ol>     <li><a href="link01.html">リンク01</a></li>      ・・・【中略】・・・    </ol>   </div>  </div>  <div class="section">   <h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2>   <div class="section popular">    <h3>人気記事</h3>    <p>記事</p>   </div>   <div class="section news">    <h3>新着情報</h3>    <p>記事</p>   </div>  </div>  <div class="footer">   <h2>文書情報</h2>  <//div> </body> [HTML5]だと <body>  <header>   <h1>ページタイトル</h1>   <nav>    <ol>     <li><a href="link01.html">リンク01</a></li>      ・・・【中略】・・・    </ol>   </nav>  </header>  <section>   <h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2>   <section class="popular">    <h3>人気記事</h3>    <p>記事</p>   </section>   <section class="news">    <h3>新着情報</h3>    <p>記事</p>   </section>  </section>  <footer>   <h2>文書情報</h2>  </footer> </body> その上で、スタイルシートを書きます。 ★されたいことが読み取れないのであくまでサンプルです。 ★HTMLは4.01strict、CSSは2.1です。2.1が現在のウェブ標準です。  Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )  W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済み ★タブは_に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル0</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,p,ol,ul,li{margin:0;line-height:1.6em;} div.header,div.section,div.footer{ width:100%;min-width:400px;max-width:640px; margin:0 auto; position:relative; } div.header div.nav ol,div.header div.nav ol li{ list-style:none; margin:0;padding:0; text-align:center; line-height:2em; } div.header div.nav ol{display:block;} div.header div.nav ol li{ display:inline-block;width:17%; position:relative; } div.header div.nav ol li a{ display:block;width:100%;height:100%; } div.section h2{height:300px;} div.section h2 img{display:block;width:100%;height:100%;} div.section div.section{ width:50%;margin:0; min-width:0; min-height:300px; } div.section div.news{ position:absolute;top:300px;right:0; height:auto; overflow:auto; } /* わかりやすいように色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:silver;} div.section div.news{background-color:lime;} div.footer{background-color:fuchsia;} div.header div.nav ol li a{background-color:yellow;} div.header div.nav ol li a:hover{background-color:red;} --> _</style> </head> <body> _<div class="header"> __<h1>ページタイトル</h1> __<div class="nav"> ___<ol> ____<li><a href="link01.html">リンク01</a></li> ____<li><a href="link02.html">リンク02</a></li> ____<li><a href="link03.html">リンク03</a></li> ____<li><a href="link04.html">リンク04</a></li> ____<li><a href="link05.html">リンク05</a></li> ___</ol> __</div> _</div> _<div class="section"> __<h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2> __<div class="section popular"> ___<h3>人気記事</h3> ___<p>記事</p> __</div> __<div class="section news"> ___<h3>人気記事</h3> ___<p>記事</p> __</div> _</div> _<div class="footer"> __<h2>文書情報</h2> _</div> </body> </html>

noname#178832
質問者

お礼

ご回答ありがとうございます。 丁寧にご説明いただいたことは分かるのですが、プログラムをよくご存じの方だからでしょうか。 なぜ、このように長い文章・プログラムが必要になるのか分かりませんでした。 簡潔にご説明いただくことは難しいでしょうか。 試行錯誤しても分からず、こちらで質問させていただいたら分かるかもしれないと思ったのですが、難しいようです。 解決せずにとても残念ですが、もう少し自分で考えてみたいと思います。 ありがとうございました。

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

IDの使い方、セレクタの利用方法が間違っている・・・ 質問の説明文が??なので、何をしたいのか方向性によるけど、例を挙げておきます。 <div id="nav"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> <p><img src="gazou01.jpg" alt="画像01" width="400" height="300"></p> <div>左枠</div> <div>右枠</div> <p>下枠</p> </div> body { text-align: center;} body,#nav ul,#nav li { margin: 0; padding: 0;} #nav { margin: 0 auto; width: 400px;} #nav li { float: left; width: 80px; list-style: none;} #nav li a { width: 100%; display: block; padding: 15px 0;} #nav p { clear: left;} #nav div{ float: left; width: 200px; text-align: left;}

noname#178832
質問者

お礼

ご回答ありがとうございます。 試行錯誤しても分からず、こちらで質問させていただいたら分かるかもしれないと思ったのですが、難しいようです。 解決せずにとても残念ですが、もう少し自分で考えてみたいと思います。 ありがとうございました。

関連するQ&A

  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 (html) <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSのposition:fixed;に関する質問です。

    position:fixed;で画面下部に固定表示させたdivの中にメニュー画像を入れているのですが、 表示領域・窓サイズがこのdivより小さくなった場合、 ある大きさ以下からスクロールバーを表示させることは可能でしょうか? 現状画面右端からどんどん消えていってしまいます。 下記がソースになります。 <HTML> <div id="wrapper"> <div id="main"> 割愛 </div> <div id="topmenu"> <ul> <li id="topmenu01"><a href="">link01</a></li> <li id="topmenu02"><a href="">link02</a></li> <li id="topmenu03"><a href="">link03</a></li> <li id="topmenu04"><a href="">link04</a></li> <li id="topmenu05"><a href="">link05</a></li> </ul> </div> </div> <CSS> div#wrapper{ z-index:100; background:url(images/bg.png) no-repeat left top; width:1004px; margin:0 auto; } div#topmenu{ position:fixed; bottom:0; vertical-align:bottom; margin:0 auto; overflow:hidden; width:1105px; height:332px; display:block; } div#topmenu ul{ margin:0 auto; overflow:hidden; position:relative; top:-120px; /* 略した部分の要素に関連して上にあげています*/ } div#topmenu ul li{ float:left; position:relative; } div#topmenu ul li a{ display:block; }

  • 困っています。教えてください!

    ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか? 教えてください。 お願いいたします! -----HTML----- <div id="navi"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> -----CSS----- #navi { width:950px; height:48px; } #navi ul { list-style:none; margin:0px; padding:0px; } #navi li { text-indent:-9999px; float:left; width:135px; margin:0px; padding:0px; } #navi li a { display:inline; } #navi ul li a#home { display:block; width:148px; height:48px; margin-left:100px; margin-top:30px; background:url(images/home.gif) no-repeat; } #navi ul li a#price { display:block; width:135px; height:48px; margin-left:116px; margin-top:30px; background:url(images/price.gif) no-repeat; } #navi ul li a#catalog { display:block; width:154px; height:48px; margin-left:120px; margin-top:30px; background:url(images/catalog.gif) no-repeat; } #navi ul li a#access { display:block; width:135px; height:48px; margin-left:140px; margin-top:30px; background:url(images/access.gif) no-repeat; } #navi ul li a#reserve { display:block; width:155px; height:48px; margin-left:150px; margin-top:30px; background:url(images/reserve.gif) no-repeat; }

    • ベストアンサー
    • CSS
  • フロートするとメニューが落ちる IE6で不可

    以下のようなhtmlを作成し、CSSを適用しました。 メニューを作成する為に、120×50のメニューボタンを横並びにする為、 フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。 どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }

    • ベストアンサー
    • HTML
  • XHTML+CSS フッターのcopyが2重になってしまいます

    XHTML+CSSでのホームページ作成で、 IE6のみフッター部分の下に、 Copyright 2008 ///////// All Rights Reserved.の erved.の部分が2重に表示されてしまいます。 どなたかご教授お願い致します。 *HTML <div id="footer"> <div id="footernavi"> <ul> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> <li><a href="index.html">テスト</a>|</li> </ul> </div> <p>Copyright 2008 ///////// All Rights Reserved.</p> </div> *CSS #footer { background: url(image/footer.gif) repeat; float: left; height: 70px; width: 710px; padding-top: 40px; padding-left: 40px; display: block; font-size: 12px; color: #333333; } #footernavi { height: 20px; width: 710px; float: none; line-height: 20px; } #footernavi ul { float: left; height: 20px; width: 710px; margin: 0px; padding: 0px; } #footernavi ul li { float: left; list-style-type: none; font-size: 12px; color: #333333; } #footernavi ul li a { list-style-type: none; font-size: 12px; color: #333333; text-decoration: none; }

    • ベストアンサー
    • HTML
  • ナビゲーションバーの背景画像が表示されません(CSS)

    私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例(ナビゲーションバーです)をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top;  float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="**">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。

    • ベストアンサー
    • CSS
  • 上部の余白をなくしたいのですが・・・

    Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright &copy; All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; } どうぞよろしくお願いします。

  • ul liのclass指定について

    表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか? また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします! 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }

    • ベストアンサー
    • CSS
  • IE6で見るとメニューバーが崩れてしまいます

    ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }

  • CSSの「a」と「a:link」の違いを教えてください。

    CSSでリストを横に並べて、グローバルナビゲーションを作っているのですが、aとa:linkの違いがわかりません。 例えばHTMLは以下のように <div id="gNavi"> <ul> <li><a href="../omotenashi.html">おもてなし</a></li> <li><a href="../stay.html">過ごし方</a></li> <li><a href="../rooms.html">客室</a></li> <li><a href="../facilities.html">館内施設</a></li> <li><a href="../dish.html">料理</a></li> <li class="last"><a href="../onsen.html">温泉</a></li> </ul> </div> CSSは #gNavi { height: 60px; width: 960px; margin-right: auto; margin-left: auto; } #gNavi ul { text-align: center; } #gNavi ul li { display: inline; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; width: 159px; float: left; } #gNavi ul li.last { border-right-style: none; } #gNavi ul li a { background-color: #F00; width: 159px; float: left; } #gNavi ul li a:hover { background-color: #09F; color: #FFF; width: 159px; float: left; } という風に書きますが(間違っているかもしれません。)、#gNavi ul li aを#gNavi ul li a:linkと書いてはいけないのでしょうか? aとa:linkの違いはなんですか?

    • ベストアンサー
    • HTML

専門家に質問してみよう