スタイルシート: 2007年1月アーカイブ

クライアント様から
「Firefoxでクリックするとバグが出て点線がでるので消して下さい」
というような指摘を受けパニックに陥った担当者が僕にヘルプを送ってきたのでちょちょいと消して対処しました。

要するにこんな点線が左の画面外までのびてしまう現象です

この点線ですが、皆さんこれはこういうものとして目にフィルターかけて黙殺していませんか？
ちなみに僕は普段黙殺してます。
実はこれは簡単に消すことができるのです、
もし知らない方がいらっしゃったら、上のような現象が起きる箇所のアンカータグ、もしくはサイト全体のアンカータグに以下のような指定をして下さい。

a(outline : 0 ;)

これだけでOKです。
outlineはそもそも見易さの向上のためのプロパティなので普通の使い方もできます。
使う機会があれば使ってみてください。
書き方はborderとほぼ同じでショートハンドでも書くことができます。
こんな感じ↓

a(outline: solid 1px #000;)

outlineは対応ブラウザの関係であまり普段利用されていませんが、発想次第では何か面白いことができるかもしれませんね。

2.うまくいかない部分のCSSがちゃんと機能しているか確認しましょう。
marginがmarinとかになっているなどのスペルミスは僕でもよくあります。
この場合はこちらの「CLEAN CSS」を使うと効率よく発見することができます。
CLEAN CSSはもともと、CSSのファイルサイズを軽減するためのツールなのですが、もしプロパティ名などが誤っている場合下のように明示してくます。

その他:first-letterなどは半角スペースが入っていないだけで機能しなくなるケースもありますし、
｝（ブラケット）を閉じ忘れていたという事もよくあります。
こちらもDreamweaverで見ればミスしている箇所以降、文字が真っ青になるのでわかります。

4.不具合のある箇所の要素にborderをつけ領域を明確にしましょう。

floatを使用している場合によくトラブルが起きます。
自分では正しい思っている（むしろブラウザが間違っている場合が多いので）だけに意外と発見できない人が多いのが曲者です。
そういった場合には崩れている箇所にborderをつけてみましょう。

こんな風な場合（極端ですが）↓

あきらかに横幅の設定ミスだとわかりましたね↓

ここまでのフローで原因を特定できない場合はこれ以下のチェックを行ってみて下さい。

引用ページはコチラ

スタイルシートで装飾対象を指定する方法に「属性セレクタ」という書式があります。今までは、FirefoxやOperaしか対応していませんでしたが、Internet Explorer 7でも使えるようになりました。この「属性セレクタ」を使うと、スタイルシートでの装飾対象の指定が楽になります。例えば、次のような指定が可能です。

・a要素のうち、name属性があるものだけを装飾
・a要素のうち、target属性の値が _blank のものだけを装飾
・input要素のうち、type属性の値が button のものだけを装飾

上図ではボタンばかりを例にしましたが、本領を発揮するのは、「チェックボックス」や「テキスト入力欄」などが混在しているフォームを装飾する場合です。
入力フォームでは、「ボタン」も「テキスト入力欄」も「チェックボックス」もすべて「input要素」で作ります。ボタンにするかテキスト入力欄にするかは、type属性の値だけで決定されます。

ボタンも入力欄も全部「input要素」で作られます。

ですから、input要素に対してスタイルを適用させると、ボタンもチェックボックスもテキスト入力欄も含めて、あらゆるフォームの装飾を変更してしまうことになります。そうすると、例えば「ボタンだけを装飾したい」とか、「チェックボックスだけの色を変えたい」ということが実現できません。
※いちいち装飾対象にしたいタグにclass属性を付加して、そのclassに対して装飾することで実現するしかありませんでした。
しかし、「属性セレクタ」という記述方法を使えば、「ボタンだけを対象にした装飾」などを簡単に（HTMLを編集することなく）作ることができるようになります。
今回は、この「属性セレクタ」の記述方法と、その活用例として「属性セレクタ」を使って入力フォームを楽に装飾する方法をご紹介したいと思います。

全文を見る
続きを見る