Wedとりとめないメモ。TueSVGでやることのまとめ。Satスクロールパラパラ。Wedふりがなを振る。Wed段組みのCSS。Sunウィンドウ幅いっぱいのヘッダー画像。Wedよこ並びのCSS。Friコンテナからの解放。Tueイラレでイラスト。Wed動くCSSのためのメモ。Thuなつかしくってあったかい、きりぎりす。Sun透明ノイズと紙テクスチャ。Sun透明にしないでテクスチャとりとめないメモ。Wed一般的にはtext-decorationプロパティで表示するリンク下線。そのままだとカチッと消えるだけで味気ないですね。リンク下線を、アニメーションしながら出たり入ったりするためのTIPS。リンク下線を動かすためにtext-decorationプロパティのunderlineのままではアニメーションできないので、別の方法で下線を描画することになります。背景画像で引く下線リンク下線を動かしたい場合は、背景画像で下線を表示させます。リンクの文字色と同じ塗り色の1pxのgif画像を底辺に引っ付くように配置して、background-sizeプロパティで横幅いっぱいに広げます。no-repeat;}カーソルを乗せた時に、background-sizeの横幅が0になるように指定しておきます。1px;}背景画像を使って下線を引くこれをtransitionプロパティでゆっくり変化するように指定すれば出来上がり。ここでは0.4秒で短くなってゆくように指定しています。.4s;}下線が出たり入ったりするようになりました:)。bottom)基準になるように指定すると、下サンプルのような動きになります。1px;}画像だとめんどくさいけど、リンクの文字色に合わせて画像も作り直さなきゃいけないのは、ちょっと面倒臭いですね:(背景画像もCSSで用意すべく、linear-gradient()関数という、CSSでグラデーション画像を生成するための書式を利用します。下の書き方だと、上から下へロイヤルブルーからスカイブルーへグラデーションする背景画像が生成されます。skyblue);}今回は、リンク色と同じベタ塗り画像を用意したいので、currentColorキーワードを使うと便利です。currentColorはその要素に指定されているcolorプロパティの色のこと。下記のように指定すれば、a要素のcolorと同じ色が、グラデーションの色として適用されます。.4s;}※CSSのカラーキーワードでは、大文字と小文字を区別しないので、currentcolorでも大丈夫。リンク下線のバリエーションbackgroundプロパティで描画しているので、リンク下線にもいろいろバリエーションが付けられます。マーカーみたいな下線background-sizeプロパティで背景画像の高さを調整すれば、リンク下線の太さも自由自在です。ここでは、.5em(0.5文字分)の太さにしてみました。線の色は文字よりもちょっと薄めにしてます。no-repeat;}下線とマーカーが入れ替わるここでは、背景画像を「,(カンマ)」区切りで複数指定して、片方を1pxの線、もう片方をマーカーみたいな線で、交互に入れ替わるようにしてます。.8em;}上下に伸縮する左右でなく上下に伸縮するようにすれば、もう下線じゃないけど、おもしろい効果になりますねー:D。ページトップへ戻るリンク範囲を広げるスマホなど小さなデバイスでもタップしやすいようにリンクエリアを広げると、下サンプルのように、リンク下線ごと広がって、なんだかみっともないです...:‹。※下サンプルではリンク範囲がわかりやすいように背景を白くしてます。no-repeat;}リンクエリアを広くしても、リンク下線を元の位置に表示したいとあらば、background-positionプロパティとbackground-sizeプロパティで、背景画像の位置と大きさを調整すれば良いです。周囲に1文字分のパディングが付いているので、画像位置の基準を1文字分右の、底辺から1文字分上にして、画像の横幅を全幅よりも2文字分狭くなるようにします。no-repeat;}リンク下線の位置と長さを調整カーソルを乗せた時は、画像位置の基準を右から1文字分左に変えて、横幅は0になるようにします。1px;}なんだかCSSが計算だらけでごちゃごちゃ嫌だーというならば、a要素の中身をspan要素で括って、span要素にリンク下線を表示すれば、位置を調整しなくてもよいし、わかりやすいです:)。no-repeat;}ページトップへ戻る一方、IEIEはbackground-sizeのtransitionに対応していないみたいです。代わりに、リンク下線を、擬似要素を使って表示させ、transformプロパティのscaleX()でもって、横幅を伸縮させることにします。absoluteで絶対配置しておきます。画像の基準位置を変えてやっていたことは、ここでは、要素が変形する基準位置を指定するtransform-originプロパティで代替します。scaleX(0);}テキストが改行してしまうと、リンク下線が消えちゃいますね...X(。インライン要素では、要素内の文章の先頭から末尾までの範囲を基準に、要素が絶対配置されるみたいなんです。span要素内の、文章の先頭よりも末尾が左側にくる場合は、擬似要素の横幅がなくなっちゃうんですね...。擬似要素の横幅がマイナスになってしまう下サンプルでは、途中改行しないように、a要素をインライン・ブロック要素にしています。無事、2段に分かれることはなくなったけど、これだと、あんまり長い文章では使えないですね...X‹。IEはもうカチッと消えるだけでいいかな、と思います:/。コメントデータの処理方法の詳細はこちらをご覧ください。