CSSでブログに影をつける（ドロップシャドウ）
ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。 ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。 最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。 このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。
Behaviour : Using CSS selectors to apply Javascript behaviours
Behaviour.js is deprecated Behaviour.js was my library for doing unobtrusive javascript using a combination of a CSS Selector library and some simple javascript. This functionality has now been adopted and improved upon by all the major javascript libraries. I personally use Jquery, which through the .live() method, let's you do all of the functionality of Behaviour.js, but including automatically
CSS JSON
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS. CSS JSON Structure { "selector-1":{ "property-
IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書
問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
「ブックマークに追加」 ボタン
サイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタンをはずしてそのままにしていたのですが、これを再度掲載することに。 その際、単にアイコンを並べただけでは味気ないので、ちょこっと小技を効かせてみました。 実物はエントリータイトル横のアイコンにマウスオンしてもらえればわかるかと思いますが、せっかくなのでソースとか公開。 2007年12月14日 追記 サイトリニューアルでボタンが変わったので、サンプルを下記に移動しました。 実際に動作しているサンプルはこちら さて、今回の材料は、 アイコン画像 JavaScript ファイル 3種 本ボタンの XHTML ソース 本ボタン用 CSS の追加 JavaScript ファイルはマウスオン、オフ時の動きを制御するために使用。これは 「PJ Hy
ページをレイアウトしてみよう その3 CSSレイアウトに挑戦
■CSSレイアウトに挑戦 では、CSSでページ全体のレイアウトを決定する簡単な手順を確認しよう。基本的な部分は画像の配置について解説した回と同じである。現場で制作を担当する人ならもちろん、作業を統括する役目であってもこれくらいは理解しておいたほうが便利なので、ぜひ通読してほしい。 最終的にはこのようなスタイルになる予定だ。 ■ワイヤーフレームを作る 配色やグラフィックなど、ページの表現系を考える前に、全体をシンプルな矩形で分割して機能を割り当てるワイヤーフレームの作成を済ませておく。この設計図がCSS制作の土台だ。確認しながらソースコードを編集すると作業も進めやすい。ワイヤーフレーム上に反映させた矩形には、HTMLの部録レベルタグ用idにあたる記述（wrapperなど）も記載するとさらに便利だ。ちなみにidの記述方法は多くのサイトで共通の言い回しを使うことが多い。そうしておけばサイト制作に
Flashなしでもここまで作れる！：ITpro
Webプログラミングは，プロはもちろんアマチュアのプログラマの間でも，もはや欠かせない開発ジャンルの一つです。しかし，書籍や雑誌の解説記事のほとんどが，データベースがどうとか，サーバーサイドがどうとか，どうしてもディープな方向に進んでしまう傾向にあります。もちろん，それはそれで大切なことなんですが，いったい何割の人が，その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば，動く，鳴る，つながると，いいこと尽くめです。でも，いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては，皆がみな使えるわけではありません。 Part1でも解説があったようにblog（ブログ）の認知度が上がり，利用率も増えて，プロバイダからの提供体制も整ってきて
【IE７も対応！】コピペでつかえる主要ブラウザをclearするコード再び::::::STOPN' LISTEN::::::to the silence:::::::
HTML,CSS,CSSハック,SEO,Web広告,Webトレンド等の話題を扱うkennsuのblogです。日常の話題はこちらへ「kennsuの行動記録」 Home｜ About｜ Archive｜ RSS feed IE７のリリースもまもなくだそうで我々コーダーにとっては恐怖のアンゴルモア大王がやってきた気分です。 と、言いましてもIE6から多くのバグを解決しRSSリーダーも標準装備（feedpathっぽいデザインでしたよ）で使えるCSSセレクタも増量！。 やっぱり生まれ変わったIE君、今まで嫌われ者だったIE君を暖かく迎える準備をしてあげたいと思いまして、本日は紙の輪っかを一杯つなげたやつ（あれなんていうの？）の代わりに以下のコードを用意してIE７君を迎える準備をしたいと思います。 詳細は以下。 div{ min-height:1%; } div:after{/*for modern
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
CSSに抽象化の手法を導入したら便利じゃね？ - [・ _ゝ・]日記を書くはやみずさん
CSSは、あまりにプリミティブすぎる、という話。 既存の問題点 (俺が知らないだけかもしれないけど)CSSは、基本的にHTMLタグの名前、クラス、擬似クラス等のセレクタ*1等で対象を指定して、その中にプリミティブなスタイルの指定を書き並べていく*2、というスタイル。 これって、ものすごく不便じゃない？少なくとも、反復作業が大嫌いなプログラマにとっては苦痛が生じる場面が多々ある。 例えば、ページを左右に2分割するようなレイアウトを考えてみる。右側が背景白、文字色黒で、左側が背景黒、文字色白にすることになった。その他のデザイン的な要素については、左右共に同じとする。このとき、スタイルシートはこんな感じになると思う。 div#page_right { width: 50%; float: right; background-color: white; color: black; (ここから共通部
![CSSに抽象化の手法を導入したら便利じゃね？ - [・ _ゝ・]日記を書くはやみずさん](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f299810a4917af63c2ef2d811552fec77300dd4/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127031278216%2F17680117127031349956%2F1555337247)
CSS3 Selectors Test - CSS3 . Info
Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests. Because it i
ウノウラボ Unoh Labs: 【Web Design】なるほどリンク集 その１
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
もうパンツはかない
このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動
CSSとJavaScriptで影付きの角丸ボックス要素を作る:phpspot開発日誌
Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。 次のような２重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v
Linksをサムネイル化した
Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。 Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、 div#contents div.story ul.thumbnail { margin: 1em 0; width: 100%; line-height: 1; list-style-type: none; } div#contents div.story ul.thumbnail li { margin: 0 1em 1em 0; float: left; wi
ヽ( ・∀・)ノくまくまー(2006-09-07) CSSでポップアップ
● CSSでポップアップ ちょっとした説明文をポップアップするには "title" 属性が便利であるが、複数行表示がブラウザに依存し、画像を含んだコンテンツには対応できない。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみで実現できるらしい。そのまとめ。(via RailsChat) CSS .popup .tips { display : none; position : absolute; } .popup a:hover { position:relative; } .popup a:hover .tips{ display : block; top : 30px; left : 20px; white-space : nowrap; text-decoration : none; border : 1px solid black; color : black; back
ウノウラボ Unoh Labs: CSSで見る、IE7。
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回は、「class」と「id」の違いと、その使い分け方法をご紹介いたします。 class属性を使ったスタイルの適用例 スタイルを適用する方
![idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flash 100%表示バグ＋Another HTML-lint
人力検索はてな - CSSレイアウトの良いお手本になるホームページを教えてください。