IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
jQueryによってカスタマイズされたCSSボタン２０:phpspot開発日誌
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン２０としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
45 Powerful CSS/JavaScript–Techniques — Smashing Magazine
Almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers. CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the on
HTML5入門：アニメーションの実装方法３種
HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。 詳しくはソース（参照）を見ていただければ
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style
2009年09月13日 （日） Web雑談 風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記 HTMLは道具 3ping.org マークアップエンジニア云々に関して書いてみる | Blog hamashun.com プログラミング知らないHTMLコーダーがダメな理由 はてな匿名ダイアリー HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kwatchの日記 (X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。 マークアップエンジ
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
CSS3とHTML5のマストハブなチュートリアル＆リソース集７０:phpspot開発日誌
CSS3とHTML5のマストハブなチュートリアル＆リソース集７０ということで、大量のコンテンツがまとまっています。 例えば、どんなものがあるというと、CSS3の基本ガイドや、CSS3のリファレンス、CSS3による角丸、CSS3のボーダー、ドロップシャドウ、Opacity、マルチ背景画像といった感じでかなり網羅されているみたいです。 CSS3とHTML5によるコンビネーションを使ったテクニックの他、HTML5関連のチートシートなど便利なものが満載の内容になっています。 先取りで覚えておきたい方は知っておいたほうがよさそうですね。 リンク先は以下の元エントリより参照してください。 70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers 関連エントリ CSS3等を使ったサンプルや各種CSSリソ
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」
TOP > WebDesign > クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」 IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。 CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
サイトをリニューアルした時のメモ | Blog.37to.net
最終更新日 Sun, 28 Jun 2009 11:09:25 +0900 ブックマーク 半年ぐらい掛けて、少しずつ、ひっそりと、サイトをリニューアルしたので、その時のメモです。 当初は簡単なメモだったのですが、いつの間にかメモと言うには量が多くなってしまいました。 眠らせておくのも勿体ないのでまとめて公開します。 少し長いので（最近はむやみに記事が長い気がしますが）、最初に主な内容を書いておきます。 リニューアルの概要 HTMLのコーディング CSSとデザイン Movable Type4.2でのサイト構築 主に上記4つの内容となります。 HTMLとCSSは本職ではないのですが、ちょっと頑張りました。 リニューアルの概要 目的 古いデザインの一新 ブラウズ環境の変化に対する対応 (最新のブラウザに合わせた機能のサポート) (IEは7以上を基準にする。6はごめんなさい) 文字サイズの影響を受
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
[CSS]Helveticaをこよなく愛する人のためのスタイルシートのチートシート -HELVETICSS
Helveticaをこよなく愛する人のためのスタイルシートのチートシートをtheWPresserから紹介します。 CSS Cheat Sheet Wallpaper in Helvetica ダウンロードできるスタイルシートのチートシートのサイズは3150x2000で、フォーマットはJPEGと色やレイアウトなどを変更できるようにPSDも用意されています。
タブで切り替わるインターフェースの決定版 – creamu
In The WoodsのCoda Slider and More With jQuery Toolsという記事で、jQuery Toolsで実装したCodaのスライダーのようなインターフェースが紹介されています。 デモは以下から。 » View the Example 超クールなので、タブメニューのインターフェースとしてかなり参考になるかと。 シンプルにフェードイン&アウト、ツールチップつき、Codaのように左右にスライドといったパターンがあります。 ぜひ見てみてください。 » Coda Slider and More With jQuery Tools iPhoneのイヤホンが壊れたのでApple Storeで交換の予約をしてきたぞ。早く新しいのほしいなーーー。
セクシーなドロップダウンメニュー実装サンプル:phpspot開発日誌
Sexy Drop Down Menu w/ jQuery & CSS | Noupe セクシーなドロップダウンメニュー実装サンプル。 次のような、セクシーかどうかはさておき、クールなメニューのサンプルが公開されています。 CSSで綺麗にレイアウトして、jQueryで実装したものです。 マウスオーバーで光る高級感がナイス 矢印↓ボタンを押した時にちゃんと凹むのもいい感じ。 タグ構造も結構綺麗に定義できてレガシーなブラウザ（ＩＥ６）にも対応しているっぽいのでなかなかオススメです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS2.1とCSS3のプロパティが見やすくまとまったチートシート
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
[CSS]ナビゲーションの区切り線をホバー時にすっきりさせるスタイルシート
CSSを軽くするステップ5 – creamu