CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
選択したテキストにスタイルに適用する「::selection」
選択したテキストにスタイルを適用しているサイトを最近ちょくちょく見かけるので、このブログでもやってみました。ということでその方法を簡単に説明してみます。 「::selection」というセレクタを使うことで選択したテキストにスタイルを適用することができます。 以前は現在策定中のCSS3セレクタの1つとして載せられていましたが、いつの間にか仕様から外れました。ですがIE以外でしたらちゃんと使えます。 基本的な使い方は以下のとおりです。 ::selection { background:#ff0000; color:#ffffff; } ::-moz-selection { background:#ff0000; color:#ffffff; } Firefox用に「-moz」のベンダープレフィックスをつけたものも必要となります。セレクタにベンダープレフィックスというのも珍しいですね。 あとフ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Google AJAX Feed APIでRSSフィードをタブで表示
まずはJavaScirpt部分です。フィードの数は自由に変更できますが、たくさん表示すると2段になるので注意してください。表示する記事数も変更できます。API keyはこちらのページで取得してください。 <script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI key"></script> <script language="Javascript" type="text/javascript">//<
Dynamic Feed Control(Google AJAX Feed API)のCSSカスタマイズ
設置方法やJavaScript部分については「Google AJAX Feed API - Dynamic Feed ControlでRSSを表示」をご覧ください。で、今回は以下のようにカスタマイズしてみました。 とりあえずコードを載せてみます。APIキーを取得すればコピペで動くはずです。 <script src="http://www.google.com/jsapi/?key=取得したAPIキー" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <style type="text/css"> @import url("gfdynami
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark