![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
こんにちは。現在cssを学習中の者です。
下記の表示トラブルにつまずいており、色々と試していますがまだ解決できておりません。
初歩的なことで申し訳ありませんが、アドバイスを頂けると幸いです。
あるページのトップのdivタグの中に、ENとFRを選択すると別のページに遷移する簡単なメニューを『EN | FR』と表示したいのですが、
下記通りコーディングすると
|
EN
FR
のように上下が揃わず表示されてしまいます。
 | を削除しhrefタグ2つのみ残すと問題なく表示されます。
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;
}
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
4.01での解説は、詳しく書かれているので、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;
}
この程度でいいのでは?・・・
No.1
- 回答日時:
>こんにちは。
現在cssを学習中の者です。その前にHTMLを徹底的に復習しましょう。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
スタイルを指定する前に
⇒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-html4 … )
※スタイルシートを導入する最大の目的は
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
です。リンク先を必ず読んでください。HTMLはデザイン目的で書いてはならない!!
>あるページのトップのdivタグの中に、
DIVは「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ための物であって、デザインするための要素ではありません。
>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_ … )
でチェック済みの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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
ヘッダーを左右に二分割する方...
-
min-heightとheightの違いについて
-
<!-- #BeginLibraryItemとは
-
画面を縮小するとカラムが落ち...
-
ホームページのヘッダー部分の...
-
html の divとtable の役割
-
[CSS]ヘッダー固定+コンテン...
-
body>div{}の意味を知りたい
-
動画を掲載すると最下部のフッ...
-
レスポンシブかつ、スマホ、携...
-
RMS レフトナビ問題
-
画面を拡大すると横幅が切れる
-
スペースを使わず文字位置を揃...
-
WEBサイト制作の図面作成ソフト...
-
<div id="container">の使いか...
-
オシャレな区切り線はありませ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報