css : 森のコーディング

10月14

colorboxで立ち上がったモーダルウィンドウを閉じるとリンク部分に青い線が残ってるのを解決する

colorboxに限らないと思うのですが、
モーダルウィンドウを立ち上げて、×をクリックしてモーダルを消した後に、クリックしたリンク要素に青い線が残ってしまうという現象があります。

↑colorboxの本家サイトのデモ。
grouped photo1という文字に青い線が残ってしまっている。

これはリンクが選択状態になってる、ってやつですね。

別に気にならないっちゃ気にならないけれど、
デザインによってはこういう青い線がでるとかっこわるくなってしまう場合がある。

たとえば、aタグにdisplay:blockしてpaddingとっている場合とかね。
あるいはサムネイル画像にモーダルウィンドウを設定している場合とかね。

それを解決するのはcssで1行追加するだけ。

モーダルが指定されているaタグに対して、outline:noneを指定する

a.modal{outline:none;}

これだけでＯＫ。

6月10

最初の1文字だけ適用させるcss　first-letter疑似要素

普通のテキストで、最初の１文字だけ色を変えたりでかくしたり、することってあんまりないと思う。
（むかしは雑誌風に1文字目をでかくするとかあったよね）

でも、listなどで頭につく●が色付きだったりすることはちょいちょいある。

●調査
●お見積もり作成
●ご訪問

みたいな感じで。

こういうとき、

<li><span>●</span>調査</li>

というようなやりかたをやっていたのだけれども、cssで1文字目だけやっちゃうほうが楽なんだな。

html

<ul class="flow_list">
<li>●調査</li>
<li>●お見積り作成</li>
<li>●ご訪問</li>
</ul>

css

.flow_list li:first-letter{
color:#0000ff;
}

ってやるだけでシンプルに実現できる。

しかもIE6から使えるから、安心。
対応ブラウザ

急な腹痛にも安心なの。

6月3

フォームでselect要素の三角マーク（→▼これ）を非表示にする

cssやjsなどでフォームを装飾するときに、selectプルダウンの三角マークを消したいときは、cssで以下。

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

5月21

cssのfilterプロパティでbrightnessの挙動がiOS6でおかしい

css3のfilterプロパティというものがある。
W3Cでは現在wokingdraft状態のもの。

詳しい使い方は、まとまっているブログがいくつもあるので
このあたりとかを見てもらえればいいとして、

filterの中のbrightnessという明度をコントロールする関数の挙動が
iOS6のsafariとiOS7のsafariでまったく違うという現象があった。

filterは、いまのところ、webkitのプレフィクスを付ける必要があり、
書き方としては以下のようになる。

img.picture{
-webkit-filter:brightness(100%);
}

pictureというclassのついた画像の明度をコントロールしたい場合

-webkit-filter:brightness(100%);

がもと（オリジナル）の状態。

-webkit-filter:brightness(0%);

にすると真っ黒になる。
明度が0ってこと。

100%を超えた数値をいれていけば明るくなっていって最後は真っ白になる。
（実験したところ2000%くらいで真っ白になった）

これはW3Cでも規定されている正しい挙動。

これがiOS6のsafariなどでみると以下のようになってしまう。

brightness(0%) → オリジナルの状態（明度の加工なし）
brightness(100%)→明度MAXで真っ白
brightness(-100%)→真っ黒

そのため、無加工のオリジナルを表示するつもりで
brightness(100%)を設定すると、iOS6のsafariでは、真っ白になってしまうっぽい。

今のところ解決策は見つかってない。

誰か知ってたら教えて。

（ちなみに今回は、brightnessを使わないで画像そのものを差し替える、という方法で解決させました）

3月14

IE7でdisplay:inline-block　を使いたいとき

display:inline-block
使ったけど、「IE7も対応だよ」って言われちゃったとき

ul li{display:inline-block;}

*:first-child+html ul li{

display:inline;

zoom:1;

}

でOK

最近よく使う。

森のコーディング

css

colorboxで立ち上がったモーダルウィンドウを閉じるとリンク部分に青い線が残ってるのを解決する

最初の1文字だけ適用させるcss first-letter疑似要素

フォームでselect要素の三角マーク（→▼これ）を非表示にする

cssのfilterプロパティでbrightnessの挙動がiOS6でおかしい

IE7でdisplay:inline-block を使いたいとき

お仕事のご依頼・お問い合わせはこちら

最初の1文字だけ適用させるcss　first-letter疑似要素

IE7でdisplay:inline-block　を使いたいとき