最近調べたことメモ
- その１.要素を掴むアイコンてどうやって表示するのかしら?
- CSSメモ: Mozilla拡張
まぁ、これはすべてのブラウザでできなくても問題なかったので、この辺読んでさくっと解決しました。 - その２.jQuery-Uiのソータブル使って要素をソートするよ！
- Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
ぶっちゃけjQuery UIのリファレンス初めてちゃんと読みました。すごいね。便利ね。 - その３.ソートするのに掴めるのは要素の一部文だった！
- ドラッグ＆ドロップで並べ替えるときのドラッグできる部分を指定
- [jQuery] jQuery UI の Sortable を使ったドラッグアンドドロップでの並べ替え | unlinked log
- その４.ページ内の複数要素（同一クラス）に対して、隣の要素の高さに揃える
- [jQuery]要素の高さを取得する « Codaholic
- next([expr]) - jQuery 日本語リファレンス
ずっとclosestを一番近い要素だと思ってて（ゆるい定義だなぁ、と思ってた）、しばらくハマってた。 - each(callback) - jQuery 日本語リファレンス
- jQuery の $().each() で個別処理(ループ) | バシャログ。
しばらくいきなり$.each()て書いてて、着火点ないことに気づくまで「どうして動かないの……」てなってた。そら動かんわ。
気が向いたら、ソースコードも載せます。後日。
背景に?マークをエンボス加工風に配置するサンプル
背景に?マークをエンボス加工風に配置するtips（IE未対応）。
質問のテキストボックスの右下に大きめに?マークを配置します。
HTMLはこんな感じ。
<ul class="faq">
<li><a href="link">question1</a></li>
</ul>んで、CSS。
.faq li:before {
content: "?";
margin-bottom: -110px;
height: 110px;
font-size: 110px;
display: block;
position: relative;
right: 0;
bottom: 35px;
color: transparent;
text-align: right;
text-shadow:
0 0 4px rgba(255, 255, 255, 0.4),
0 0 0 rgba(0, 0, 0, 0.1);
}ポイントは、color:transparentとmargin,height,font-sizeを使っての配置でしょうか。
transitionとlinear-gradientの組み合わせで引っかかったこと
transitionでhoverイベント仕込む時に引っかかったメモ
- background:linear-gradientを使う時は、(center top,transparent,$end:rgba($endColor,$opacity) $startColor みたいな感じで、ベースに背景色べた塗りして、:hover時にbackground-colorだけ上書くようにしないとtransition効かないぽい。根拠はないけど、プリフィックスが怪しい気がする。
- box-shadowは:hover時だけほわっとするようなときも、:hover前にbox-shadow自体は設定しておく。値は(0,0,0,0,rgba($hoverColor,0))とでもしておけばおk。とりあえず、hover時だけ急に出てくると、アニメーション効かず、ただのhover切り替えになっちゃう。
- というより、backgroundをショートハンドで指定していたのが悪かったようだ。
- background-color:$startColor; background-image:-webkit-gradient(linear, left top, left bottom,from(transparent),to($end)); ※$end = rgba($endColor,0.5)みたいに透過を与えておくとかしたら白くならない。ちっ。
しかし、やってるうちにhoverアニメーションする意味ないような気もしてきた……よ……？
