Webページの閲覧者に検索やコメントを入力、送信してもらうには、Webページ上にテキストボックス(=テキスト入力枠)や submit ボタン(=[送信]ボタンや[検索]ボタン)などの<input>要素(以降、まとめて「コントロール要素」と呼びます)を配置します。しかし、これらのコントロール要素はサイトのデザインと必ずしもマッチしていないことがあり、よりサイトに合ったデザインに変更したい場合があります。このようなときには(基本的に)CSSを使います(この記事ではCSSの使い方の説明は割愛します)。
コントロール要素にCSSを適用するには、まずは目的のコントロール要素を特定する必要があります。これを行うためには、通常、そのコントロール要素にid属性もしくはclass属性を付け、それを利用します。
例えば、次のようなHTMLコードで、submit ボタンが配置されているとします。
<div id="search-box">
<input type="submit" name="sa" value=" 検索" id="search_submit"></input>
</id>
この場合、次のようなCSSコードにより、submit ボタンのデザイン内容をカスタマイズできます。
#search-box input#search_submit {
<デザイン内容の変更するコード>
}
このCSSでは、
id属性(#)が「search-box」の内部(=半角スペース)にある「input」要素で、しかもid属性(#)が「search_submit」の要素
というふうに、コントロール要素を特定しているわけです(ちなみにclass属性の場合は「#」の代わりに、「.」を使います)。
通常はこれで問題ないわけですが、事情によりid属性やclass属性が使えない場合があります。例えば、Google AdSenseの検索コードを使っている場合には、コード内容の改変が禁止されているため、id属性やclass属性が使えないことがあります。
そのような場合に、目的のコントロール要素を特定して、CSSを適用する方法を紹介します。
その方法とは
続きを読む