- 締切済み
CSS: divタグ内のリンク表示について
こんにちは。現在cssを学習中の者です。 下記の表示トラブルにつまずいており、色々と試していますがまだ解決できておりません。 初歩的なことで申し訳ありませんが、アドバイスを頂けると幸いです。 あるページのトップのdivタグの中に、ENとFRを選択すると別のページに遷移する簡単なメニューを『EN | FR』と表示したいのですが、 下記通りコーディングすると | EN FR のように上下が揃わず表示されてしまいます。  | を削除しhrefタグ２つのみ残すと問題なく表示されます。 CSSのlang下のvertical-alignやwidthを調整し、display: blockとfloat:leftを追加してみましたが、 問題は解決されません。 他に良い方法はありますでしょうか。 説明不足で申し訳ありませんが、アドバイスをお願いいたします。 * HTML <div> <span> <div class="lang"> <a href="/abc.com/en">EN</a> |  <a href="/abc.com/fr">FR</a> </div> Please choose English or French. </span> </div> * CSS .lang { display: block; position:relative; left: -470px; top:-7px; margin-right:24px; width:60px; height:28px; float:left; vertical-align: middle; } .lang a { display: block; height:14px; float:left; color:#ffffff; width:16px; padding:7px; text-align:center; }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
４．０１での解説は、詳しく書かれているので、HTML5で説明 listで記述した方が、楽では？・・・floatを使っても可能！ 記述方法はいろいろあります。 構造の分離は、もちろんですが・・・・・ いかに少ないステップ数で読みやすい記述をするか？？？ その辺が、製作者の技量を問われる部分です。 <section id="lang"> <ul> <li>EN</li> <li>FR</li> </ul> </section> ***************************************** CSS #lang ul{ text-align:center; } #lang ul li{ list-style:none; display:inline; padding-right:10px; } この程度でいいのでは？・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞こんにちは。現在cssを学習中の者です。 その前にHTMLを徹底的に復習しましょう。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』 スタイルを指定する前に ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) などでHTMLをチェックする。 ＞<div><span><div class="lang"><a href="/abc.com/en">EN</a> |  <a href="/abc.com/fr">FR</a></div>Please choose English or French.</span></div> spanはインライン要素ですから、内部にブロック要素をもてません。 ・<!ELEMENT SPAN - - (%inline;)* (注)inline要素を0個以上(*) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-SPAN ) ※スタイルシートを導入する最大の目的は ・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) です。リンク先を必ず読んでください。HTMLはデザイン目的で書いてはならない!! ＞あるページのトップのdivタグの中に、 DIVは「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ための物であって、デザインするための要素ではありません。 ＞vertical-align: middle; table-cell以外には無効です。line-heightで指定します。 [HTML] <p class="SelectsInLanguage"> <a href="/abc.com/en" lang="en-us">EN</a>|<a href="/abc.com/fr" lang="fr">FR</a>Please choose English or French.</p> で良いでしょう。 【絶対に守ること】 「構造とプレゼンテーションの分離」 HTMLはデザイン目的で書かないこと。そのためにスタイルシートでデザインするのですから・・ 【サンプル】 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) でチェック済みのHTML4.01strict+CSS2.1 ウェブ標準です。 ★タブは＿に置換してあるので戻す。 ※HTMLには文書構造しか書かれていませんので自由にデザインできます。 逆に言うときちんとHTMLがマークアップされていれば、プレゼンテーションは同じに出来ます。 ※スタイルシートを除いたHTMLと比較してみましょう。 <!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>サンプル</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,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* 共通指定 */ *.SelectsInLanguage{text-align:center;} *.SelectsInLanguage a{ display:inline-block; width:3em;height:2em;line-height:2em; text-decoration:none; background-color:gray; color:white; margin:0 0.5em; } *.SelectsInLanguage a:hover,p.SelectsInLanguage a:focus{ background-color:silver;color:red; } /* SelectsInLanguageクラスの段落 */ p.SelectsInLanguage{text-indent:0;} /* SelectsInLanguageクラスのDIV */ div.SelectsInLanguage ul,div.SelectsInLanguage ul li{list-style:none;margin:0;padding:0;display:inline-block;} div.SelectsInLanguage ul{font-size:0;} div.SelectsInLanguage ul li{font-size:16px;} div.SelectsInLanguage ul li+li:before{content:"|";} div.SelectsInLanguage p{display:inline-block;text-indent:0;} /* 色分け */ body{background-color:gray;} div.header,div.section,div.footer{background-color:white;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p class="SelectsInLanguage"><a href="/abc.com/en" lang="en-us">EN</a>|<a href="/abc.com/fr" lang="fr">FR</a>Please choose English or French.</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="SelectsInLanguage"> ＿＿＿<ul> ＿＿＿＿<li><a href="/abc.com/en" lang="en-us">EN</a></li> ＿＿＿＿<li><a href="/abc.com/fr" lang="fr">FR</a></li> ＿＿＿</ul> ＿＿＿<p>Please choose English or French.</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
