[CSS]シンプルなHTMLで画像ギャラリーを実装するスタイルシート
クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="t
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
[CSS]画像にビデオや砂の嵐のノイズをのせるスタイルシート
画像にビデオや砂の嵐のノイズをのせるスタイルシートをMatthew James Taylorから紹介します。
CSSで年表が作れるコード「Pure CSS Timeline」:phpspot開発日誌
Pure CSS Timeline ? Notebook | MattBango.com CSSで年表が作れるコード「Pure CSS Timeline」。 次のような、角丸でAppleっぽい(?)年表が作れるみたいです。 HTMLマークアップは以下のように, div と ul で組むみたいです。 <div class="timeline"> <ul class="events"> <li style="width: 42.48%; left: 57.2%;">Design & Typography <em>(2007 - 2009)</em></li> <li style="width: 56.68%; left: 43%;">Photography <em>(2006 - 2009)</em></li> <li style="width: 71.3%; left: 28.4%;
[CSS]リスト要素で実装したサイトマップを美しくスタイルする -SlickMap CSS
スタイルシートのオフ時 SlickMap CSSの使い方 添付の「README.txt」より、SlickMap CSSの簡単な使い方です。 ul要素で実装し、各ラベルには必ずa要素を含めます。 フォーマットはデモまたはダウンロードのファイルを確認してください。 スタイルシートのmediaには「screen, print」を指定しています。 サイトマップの一番上に配置されるサイトのトップページへのリンクは、リストの一番上に記述し、idを「#home」にします。 カラムの幅を変えるには、「slickmap.css」内の「#primaryNav li」のwidth指定を変更します。 ファイルの設置場所に合わせて、画像のパスなどは変更してください。
フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
[CSS]複数のスタイルシートのフレームワークのいいとこ取りをした -BlueTrip
ベースにBlueprint, Tripoli、グリッドに960.gs、印刷用にhartija、エレメントにelementsと複数のスタイルシートのフレームワークのいいとこ取りをし結合させたフレームワーク「BlueTrip」を紹介します。 BlueTrip CSS Framework demo BlueTripの主な特長は下記の通りです。 24カラムのグリッドに対応 実用的なタイポグラフィのスタイル クリーンなフォームのスタイル 印刷用のスタイルシート 空のスターターキット セクシーなデザインのボタン ステータスメッセージのスタイル デモでは、各要素のサンプルとグリッドを確認することができます。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="../css/screen.c
[CSS]スタイルシートで実装するドロップダウン型のナビゲーション
スタイルシートで実装するドロップダウン型のナビゲーションをJanko At Warp Speedから紹介します。
[CSS]幅指定をしないで中央配置するナビゲーションを実装するスタイルシート
各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Anywidth dropdown with centered top and sub levels demo ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。 IE用に条件付コメントでテーブル要素を使用しています。 ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。 また、同じくドロップライン型のものも公開されています。
スタイルシート［CSS］/フォーム/フォーカス時の背景色を指定する - TAG index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> input.example, select { width: 250px; } textarea { width: 250px; height: 7em; } input:focus, select:focus, textarea:focus { background-color: #bde9ba; } </style> </head> <body> <form method="post" action="example.cgi"> <p><input type="t
[CSS]フォームのlegendのテキストを複数行にするスタイルシート
フォームのlegendのテキストを複数行にして表示するスタイルシートを456 Berea Streetから紹介します。 Line wrapping text in legend elements demo デモではテキストが3行で頭でっかちになっていますが、適度なバランスとマージンがあると見た目も更によくなると思います。 複数行にするスタイルシートは、下記のようになっています。 <textarea name="code" class="css" cols="60" rows="5"> /* For all browsers */ legend{white-space:normal;} /* For Internet Explorer only - put in a separate file and load it with conditional comments or find a C
[CSS]特定の範囲からはみ出さないドロップダウン型ナビゲーションを実装するスタイルシート | コリス
ドロップダウンするパネルが特定の範囲から左右にはみ出さないナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Any width dropdown/flyout menu with left and right dropdown/flyouts v2 demo デモではドロップダウンするパネルが、通常（2, 3番目）は左端を基準に展開しますが、一番右の（6番目）ははみ出してしまうので右端を基準に展開します。 また、配下もキャプチャのように特定の範囲内に表示されます。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeで、IE8はIE7エミュレーションモードの必要はないとのことです。
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ドロップラインとドロップダウンを併用したナビゲーション
[CSS]タイムラインをリスト要素で美しく実装するスタイルシート
[JS]アクティブなタブとパネルの境界線を無くすチュートリアル
[CSS]テキストだけを使ってぱっと見、画像のようにみえるスタイルシート
[CSS]変数などを使用してスタイルシートの記述ルールを拡張できる -LESS
[CSS]複数のカラムのパネルを表示するドロップダウン型ナビーションのスタイルシート
[CSS]画像を使用しないで、Apple風のナビゲーションを実装するスタイルシート