IDEA * IDEAドットインストール代表のライフハックブログ
IE7でpage-break-beforeが効かない : 開発メモ
2009年09月02日 Permalink Comments(1) TrackBack(0) Windows IE7でpage-break-beforeが効かない IE6では改ページされるのに、IE7でpage-break-beforを指定しているのに改ページされないときがある。 いろいろ試した結果、page-break-beforeを指定しているブロックがページをまたいでいるときに改ページされないようである。 改ページできるパターン（ブロックＢにpage-break-before） 改ページ処理前 改ページ結果 ┏━━━━━┓┏━━━━━┓ ┃┌Ａ─┐ ┃┃┌Ａ─┐ ┃ ┃└──┘ ┃┃└──┘ ┃ ┃┌Ｂ─┐ ┃┃ ┃ ┃└──┘ ┃┃ ┃ ┗━━━━━┛┗━━━━━┛ ┏━━━━━┓ ┃┌Ｂ─┐ ┃ ┃└──┘ ┃ ┃ ┃ ┃ ┃ ┗━━━━━┛ 改ペ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
dom3d: rendering 3d with CSS3
dom3d: rendering 3d with CSS3 Fork me on github! James Long works for Mozilla and can be reached at jlongster@jlongster.com Here is a 3d object. It is rendered with pure HTML and CSS using 2d transforms. These let you specify a transform property on a DOM element composed of translate, rotate, skew, and scale functions. To achieve the 3d effect, I project the 3d triangles into 2d screen space usin
MdN Design｜総合情報サイト
PHPスクリプトによって動的に生成した画像をブラウザに表示させる場合、imgタグのsrc属性に画像生成用のPHPファイルを指定するが、もしこの時処理に問題があっても、エラーメッセージが確認できない。画像生成スクリプトにブラウザで直接アクセスし、エラーが出ていないか確認しよう。 imgタグのsrc属性にPHPファイルを指定した場合、エラーメッセージが出力されていてもブラウザには表示されないため、原因の特定に苦労する ブラウザのアドレスバーにPHPファイルへのURLを入力して直接アクセスし、エラーメッセージが表示されていないか確認しよう。ただし、エラーメッセージを表示させるにはdisplay_errorsが「on」に設定されている必要があるので注意する [INDEX] >>> [TROUBLE 50] MP3の外部サウンドをなぜかループできない >>> [TROUBLE 51] jQueryを
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
CSSスプライトでカッコイイボタンを作るチュートリアル:phpspot開発日誌
CSS Basics: How to Design & Code a Stylish Button CSSスプライトでカッコイイボタンを作るチュートリアル。 CSS3は使っていませんが、３つの画像を１枚にして、hover時、active時に変化するボタン作成の例です。 CSS3でいきたいところですが、CSS3非対応ブラウザにして、かつ、デザインもオーサリングツールで凝ったものにしたいというケースにおいて参考に出来ます。 デモページ マークアップ自体は次のように非常にシンプルに出来ます。 <a href="#" class="btn">Push the button</a> どうしてもクロスブラウザで動いてJSなしにCSSで行きたいって場合のシンプルでベストな方法ではないでしょうか。 関連エントリ ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS
ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」:phpspot開発日誌
ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」 2011年04月05日- prefixMyCSS - Prefix your CSS3 code. Instantly! ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」 先日、類似の 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 というツールを紹介しましたが、こちらはちょっとパワーアップ版です。 radiusやbox-shadowの先頭に-webkitや-mozを自動で付けてくれるツールに代わりはないのですが、出力を１行にしたり、プロパティの頭を揃えることができたり、全部１行で出力してくれるオプション付きです。 次のように、border-radiusの位置は揃えて見やすくしてくれるなんていう機能
HTML5の波
Internet Explorer（IE）9、Firefox（FF）4と最もメジャーなWebブラウザーがこの3月、相次ぎバージョンアップした（注1）。いずれもウリは、軽量化・高速化および「HTML5」をはじめとする次世代Web技術への対応である。米マイクロソフトはそのすごさをアピールするために、Internet Explorer Test DriveというWebサイト上でIE9に最適化した次世代のWebサイトをデモしている。それらを眺め、操作してみると、なるほど、これからのWebサイトとはこういうふうになるのかというのがよく分かる。 注1 IE9のリリースは3月15日。ただし日本語版については、東日本大震災の影響により延期されており、3月末時点で正式にはリリースされていない。日本語版以外については予定通り提供されている。 現在のWebサイトの大半は、業界標準として使われている「HTML4.
CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌
CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。 関連エントリ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル CSS3で実装され
これは面白い！CSSのボーダーを使った図形描画テクニック色々:phpspot開発日誌
Creating Triangles in CSS Jon Rohan’s Web Developer Field Guide CSSのボーダーを使った図形描画テクニック色々。 「超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル」でも紹介されていたテクニックですが、borderを使って図形を描画するテクニックです。 border-width を太めにしてそれぞれの線に色をつけることで面白いことが色々と出来るみたい まず、最初は次のような図形。 border-color でそれぞれの辺に色をつけて、border-width:20px 、 width:0; height:0 で指定するとこんな面白い図形に。 左だけに色をつければ、矢印っぽくも出来ますし、左と上の線だけに色をつけたりすることでいろんな形・角度の３角形が表現出来ます。 更に、border-width
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」:phpspot開発日誌
インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」 2011年03月11日- CSS3 Generator - By Eric Hoffman & Peter Funk インタフェースが良くてプレビューも見やすいCSS3コード生成が可能な「CSS3 Generator」。 CSS3ジェネレーターは多くありますが、中でも優れたUIとわかりやすさを持っているように思えるジェネレーターの紹介。 角丸、シャドウ、透明度、グラデーション、枠線、背景色の設定ができ、リアルタイムに反映されます。 あっという間にCSS3コードを生成出来ました。 UIだけでも一見の価値ありです。 関連エントリ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル ステップで学べるCSS3ボタンのデザインチュートリアル CSS
立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル:phpspot開発日誌
I will show you how to add that 3D look to your web designs, how to creg web layout with 3D-looking elements in Photoshop 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル。 次のように、立体感を出した面白いデザインを作成する一連の流れが見れます。 CSS3でリボンにしたりするテクニックですが、こういうデザインも可能なのだなと、面白かったのでご紹介です。 たったこれだけなのに、奥行きが出てインパクトをうまく出せている気がします。 真似してみるのも楽しいかも。 関連エントリ 記事タイトルをリボン風にシンプルに実装するCSSサンプル ブロック要素に巻いて立体感を出せるリボンをWEB上でジェネレート「3D Ribbon Generator」 CSS3で
HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」:phpspot開発日誌
HSL Color Picker - by Brandon Mathis HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」 color: rgb(50,50,50) みたいにして色指定できますが、CSS3ではHSLによる色指定も可能だそう。 HSL は Hue(色相) Saturation(彩度) Lightness(輝度) の略で、それぞれ、0〜360、0〜100、0〜100 で指定して色を表現できます。 Photoshopでいう、色相、彩度の調整に似ていて、彩度や輝度を下げたりして類似色を作るのも簡単なので便利そう。 通常の１６進、rgb、hsl 形式が一気に作れるので便利です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
奥行きをうまく使ったサイトデザイン集３０:phpspot開発日誌
http://www.designwalker.com/2010/05/grid-design.html