z-index―スタイルシートリファレンス
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 ■値 整数値で指定 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 auto 親要素と同じ階層になります。これが初期値です。 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample { color: #000000; background-color: #99cc00; position: relative; top: 50px; z-index: 2; } img.sample { position: relative; top: -50px; z-index: 1; } HTMLソース <html> <head> <link rel="
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
JavaScript - CSS HappyLife
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
[使えるCSSテクニックVol.2] CSSを使ったわかりやすいテキストリンク | バシャログ。
第 8 回目は「CSS を使ったわかりやすいテキストリンク」です。 CSS を使って、リンク先の内容がユーザにわかりやすいようにしてみましょう。 サンプルの XHTML はこちら <p>詳しくは<a href="http://c-brains.jp/about">会社概要</a>をご覧ください。</p> <p>詳しくは<a href="http://c-brains.jp/about" target="_blank">会社概要</a>をご覧ください。</p> <p>詳しくは<a href="hoge.pdf">会社概要</a>をご覧ください。</p> <p>詳しくは<a href="hoge.xls">会社概要</a>をご覧ください。</p> 1 行目は外部リンク、2 行目は別の WINDOW で開く外部リンク、3 行目はドキュメントルート内に置かれた PDF ファイルへのリンク、4 行目
![[使えるCSSテクニックVol.2] CSSを使ったわかりやすいテキストリンク | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
バシャログ。[B!]新着記事・評価 - はてなブックマーク
キーボードショートカット一覧 j次のブックマーク k前のブックマーク lあとで読む eコメント一覧を開く oページを開く ✕
JavaScriptによるアコーディオン メニュー - 高密度商業地域
ウェブサイト（ホームページ）、ブログの左側・右側にメニューを表示するのは、よく見かけるウェブデザインの１つです。 しかし、そのメニュー部分が非常に長くなってしまうと、ページが縦に長くなってしまい、結果、自分のサイトを訪れてくれる方にとって見づらいものとなることがあります。 その縦長のメニューを解決する方法として、JavaScriptによる「アコーディオン メニュー」を紹介します。 １つは非常にシンプルで軽いアコーディオンメニュー、もう一つはAjaxライブラリの prototype.js と Rico を利用したリッチなアコーディオンメニューです。 まずは、シンプルで軽いアコーディオンメニューです。 ⇒Simple Javascript Accordions ⇒サンプル（Simple Accordions） 本家サイトに圧縮ファイルがあるので、それをダウンロードし、ローカルマシンで動かしてみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RedLine Magazine : Reviewカテゴリエントリ一覧