プログラミング CSSのみでプルダウンメニュー作る
プルダウンメニューを作るjQueryプラグインとかあるけど、それCSSでできるよ！
ポイントは子どもセレクタ。
以下のようなHTMLを用意する。
<div class="parent">
マウスオーバー！！
<...
CSS
プログラミング プログラミング CSS pointer-eventsでマウスイベントを無効化する
HTMLでdisableクラスを持った要素のclickとかmouseoverのイベント発生をキャンセルしたい場合がある。
そういうときは、javascriptでイベント拾ってコールバックでfalse返すとか、イベントオブジェクトのpreve...
プログラミング SCSSでself, thisっぽいこと
たとえばcssで、messageクラスの要素のうち、alertクラスが付いているものを赤文字、warnクラスが付いているものを黄色文字にしたいとする。
それは以下のように書ける。
.message.alert { color: red;...
プログラミング css hrefの無いaタグでもマウスカーソルを変える
notというCSS3の擬似クラスを利用する。
a:not(){
pointer: cursor;
}
単純な話で、aタグのhref属性が存在しない時に適応するスタイルを指定しております。
プログラミング html5 formのplaceholderにスタイルをあてる
html5のフォームにはplaceholder属性が設定できるのは有名で、先進的なサイトで比較的見るようになってきた。
このplaceholderにスタイルを当てるのCSSセレクタは、例のごとくブラウザ毎に違う。
以下のようになっている。
...
プログラミング webkit border-radiusとposition absoluteを組み合わせると不具合
例えば、border-radiusを設定したdivの中で、overflow:hiddenを使用するdivを入れたりすると、radiusしたはずなのに角丸にならない。
.outer{
position: relative;
bord...
プログラミング CSS3 cursorのクリック座標
CSSのcursorでオリジナルのマウスカーソルを使うこともあると思うんだが、これって、CSS3だとホットスポットを設定できるようになったんだね・・。
ホットスポットとは、クリックしたときの基準点になる部分なんだけど、
普通のマウスカーソ...