みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

【CSS】HTML要素の指定

お手柔らかにお願いします。

HTMLを下記のように記述しました。
----------
<section id="login">
 <h1>ログイン</h1>
  <form>
   <label for="my_id">ID</label>
    <input id="my_id" type="text" size="10" maxlength="10"><br />
   <label for="my_pass">パスワード</label>
    <input id="my_pass" type="password" size="10" maxlength="10"><br />
  </form>
 <a><p>ログイン</p></a>
 <p><a>パスワードを忘れた方はこちら</a></p>
</section>
----------

上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。
p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。

こちらのサイト(http://web-dd.net/?p=278)を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。
----------
#login label {
   display: inline-block;
   font-size: 0.8em;
   text-align: right;
   vertical-align: middle;
   width: 70px;
   margin: 5px 0 5px 5px;
}

#login input {
   display: block;
   float: right;
   width: 80px;
   margin: 5px 10px 5px 5px;
}

#login br {
   clear: left;
}

#login > form + p {
   overflow: hidden;
   text-indent: -10em;
   background: url(img/btn_login.png) no-repeat;
   width: 90px;
   height: 30px;
}

#login a + p {
   font-size: 0.7em;
   text-align: center;
   margin: 15px auto 10px auto;
}
----------

”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。

あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。
よろしくお願いします。

投稿日時 - 2014-06-03 17:31:03

QNo.8622242

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

>この場合、ボタン要素は必ずしも画像で表示する必要はありませんので、画像の配置はCSSで行うのがいつも仰る「仕様に則った」考え方であると思うのですが、違うのでしょうか。
 確かに微妙なところです。
 このフォーム+画像は、商品説明などでも使われる手法ですから、どこで線を引くかは微妙なところです。画像を使用する場合は、必ずalt属性にテキストを入れておくので良いでしょう。

 もちろん、<input type="submit" value="ログイン">でも、A要素によるリンクのようにデザインすることも可能です。

<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
button,input[type="submit"]{border:none;background-color:transparent;font-size:1em;}
button:hover,input[type="submit"]:hover{cursor:pointer;}
input[type="submit"]{
display:inline-block;width:192px;height:43px;
overflow:hidden;text-indent:-100em;
background-image:url();/* width:192px height:43pxの画像 */
}
form p{margin:2px auto;}
form p label{display:inline-block;width:5em;text-align:right;}
form p label:after{content:" :";}
-->
</style>
</head>
<body>
_<header id="login">
__<h1>ログイン</h1>
___<form action="./">
____<p>
_____<label for="my_id">ID</label>
_____<input id="my_id" type="text" size="10" maxlength="10" name="my_id">
____</p>
____<p>
_____<label for="my_pass">パスワード</label>
_____<input id="my_pass" type="password" size="10" maxlength="10" name="my_pass">
____</p>
____<p><button><img src="./image/b-3.gif" width="62" height="50" alt="ログイン"></button></p>
____<p><a>パスワードを忘れた方はこちら</a></p>
____<p><input type="submit" value="新規会員登録(無料)"></p>
___</form>
_</header>
_<section>
__<h2>本文</h2>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>

投稿日時 - 2014-06-04 18:42:40

補足

不必要な画像はHTML上では書かないようにCSSでレイアウトしましたので大丈夫です。
ちなみに、No2で仰っていたa要素で囲む範囲ですが、場合によっては二つのp要素やh1、h2要素をまとめて一つのリンクとして扱いたいことがあるので、やはりp要素を囲むという方法にしました。
「原則やらない」のかもしれませんが、HTML5で仕様となっているようですし、問題ないかと思います。

あと…載せてくださっているソースですが、削除した質問のものを流用するのはやめていただけますか。
微々たる違いですが、それなりに意図があって修正したソースをこちらの質問で載せていますので。

また、前回の質問の回答はいただけないのでしょうか。

投稿日時 - 2014-06-05 10:12:18

ANo.2

>その状態でa要素をp要素の中に入れると、クリックができない状態になるので、p要素をa要素で囲んでいるのです。
 a要素の中でtext-indentすれば良いです。
 p要素でtext-indent:-10em + overflow:hiddenすれば消えるのは当然です。
 a要素ですから、href属性が異なりますので属性セレクタを使えます。
 また、a+a+a{}と隣接セレクタも使える。(hrefに関係なく順番はこちら)
   a:nth-child(2n){} CSS3のnth-child


★HTMLが不正だと、ブラウザが匿名ブロックを作ってDOMが変わってしまうなど、スタイルシートが期待通りに適用されなかったり、ブラウザごとの差が出てきます。

[例]
<ol>
 <li><a href="/">Top</a></a>
 <li><a href="/Product">製品</a></a>
 <li><a href="/Manual">マニュアル</a></a>
 <li><a href="/Profile">プロフィール</a></a>
</ol>
ol{list-style:none;width:80%;margin:0 auto;text-align:center;line-height:40px;padding:0;}
ol li{display:inline-block;position:relative;width:10%;margin:0;padding:0;}
ol li a{display:block;width:100%;height:100%;text-indent:-10em;overflow:hidden;background-image:url();}

ol li a[href="/Manual"{background-image:url();}

なおフォームの中の場合で画像を使いたいなら

フォーム内に
1) <button><img src="./image/b-3.gif" width="62" height="50" alt="ログイン"></button>
としておいて、
button{border:none;background-color:transparent;}
button:hover{cursor:pointer;}

2) <input type="image" src="[URL]" alt="ログイン">
 のほうが楽かも・・

 スタイルシートを書く前に、LintなどでHTMLにエラーがないかをまず確認して、その上でスタイルシートを書きます。

【解説】
#login input{}
 一意セレクタの子孫( )のinput要素・・子々孫々まで
 CSS2.1以降は *#login input{}、またはsection#login input{}
#login br {}
 一意セレクタの子孫( )のinput要素・・子々孫々まで
 CSS2.1以降は *#login br{}、またはsection#login br{}
  そのためにbrではなく、擬似要素でlavel:before{content:"";display:block;clear:left;}
#login > form + p {}
 一意セレクタ*#login の直接の子供のformに続くp要素(</form>直後のp)
 示されたHTMLではa要素が間にあるため効かない! そのようなpは存在しない

投稿日時 - 2014-06-04 09:08:50

補足

>フォーム内に
>1) <button><img src="./image/b-3.gif" width="62" height="50" alt="ログイン"></button>
>としておいて、

以前の質問でご回答いただいたことですが、HTML内に直接画像を配置するのは、案内マップ商品ページの商品写真などの、そのページで主要なコンテンツとなる場合のみ、なのですよね?
この場合、ボタン要素は必ずしも画像で表示する必要はありませんので、画像の配置はCSSで行うのがいつも仰る「仕様に則った」考え方であると思うのですが、違うのでしょうか。

また、前回の質問での疑問が残ったままですので、お手数ですがご回答いただけますか。

投稿日時 - 2014-06-04 10:09:29

ANo.1

擬似クラスでないのは気付かれたようで・・

『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』

 <form action="./hoge.cgi">
  <p>
   <label for="my_id">ID</label>
   <input id="my_id" type="text" size="10" maxlength="10" name="my_id">
  </p>
  <p>
・・・【中略】・・・
  <p><button type="submit">ログイン</button></p>
  <p><a href="./hoge.cgi?mode==forget">パスワードを忘れた方はこちら</a></p>
  <p><a href="./foge.cgi?mode="regist">新規会員登録(無料)</a></p>
 </form>
になるのじゃないですか??

 a要素の内部にpは原則は入らない。
ログインで、フォームに入力した値を送信するならformの内部でbuttonについてデザインする。同じCGIで処理するなら、「パスワードを忘れた方はこちら」も「新規会員登録(無料)」もbuttonでよい。

 また、必ずしも擬似クラス使わなくてもよい。そもそも、>は子供セレクタで擬似クラスではないです。+は隣接セレクタ
 擬似クラスとは、:hoverと:active、:first-childなど。

>できればidやclassで名前をつけずに、CSSで要素を指定してスタイルを適用させたいです。
 a要素の属性が異なるので属性セレクタでもよい。
 隣接セレクタでもよい。

例えば、
<nav>
 <ol>
  <li><a href="/">トップ</a></li>
  <li><a href="/products">製品</a></li>
  <li><a href="/manual">マニュアル</a></li>
  <li><a href="/contact">問合せ</a></li>
 </ol>
</nav>
 で、
nav ol{ /* 子孫セレクタ 詳細度は[0,0,0,2] */
 list-style:none;/* 継承されるプロパティ */
 margin:0;padding:0;/* 継承されない */
}
nav ol li{ /*子孫セレクタ 詳細度は[0,0,0,3]*/
 display:inline-block;
 margin:0;padding:0;
 width:6em;
 position:relative;
}
nav ol li+li a{ /* 隣接セレクタ 詳細度[0,0,0,4] */
 background-color:yellow;
}
nav ol li a{ /* 子孫セレクタのみ詳細度[0,0,0,4] */
 display:block;
 width:100%;
 height:100%;
 background-color:aqua;
}
nav ol li+li a{ /* 隣接セレクタ 詳細度[0,0,0,4] */
 background-color:yellow;
}
nav ol li a[href="/contact"]{ /* 属性セレクタ 詳細度[0,0,1,4] */
 background-color:lime;
}
nav ol li a[href="/contact"]:hover{/* 擬似クラス 詳細度[0,0,2,4] */
 background-color:red;
}

5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
はスタイルシートを書く時に何よりも先にマスターしなければならないところ。

 スタイルを適用させたい要素の特定には、絶対に必要な知識です。
 基本的に、まったくid,class名がなくても、特定の要素だけにスタイルを適用させる事は可能です。

投稿日時 - 2014-06-03 18:17:06

補足

あの短時間の間に削除したものをご覧になっていたんですね。
驚きました。

正確にいうと、最初は:first-childの疑似クラスで要素を特定しようとしていました。
が、それだと最初の要素のみしかとってこれなかったので、URLを参考に上記のような方法に修正しました。
質問を書きながらソースを修正・実行しているので書きミスはありますが、疑似クラスについては理解しています。

>a要素の内部にpは原則は入らない。
私が書いたソースをご覧になればおわかりだと思いますが、”ログイン”の文字自体はtext-indentで画面上に表示させていません。
その状態でa要素をp要素の中に入れると、クリックができない状態になるので、p要素をa要素で囲んでいるのです。

button要素にすればいい、と解決方法よりも子・隣接セレクタでの要素の特定方法について知りたかったのですが、自分で調べてみることにします。

投稿日時 - 2014-06-03 22:47:39

あなたにオススメの質問