[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック
ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です！ 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と
レスポンシブWebデザインとIE対応
古いブラウザ対応をどこまでするか、悩ましい問題かと思います。今回はレスポンシブWebデザインにおいて、知っておきたいブラウザ対応、特にIEに関する内容です。難しそうな話ですが、私自身htmlのソースが書けるわけではありませんので、コーディングに詳しくない方にも分かりやすく解説できればと思います。 css3でできることと、IEの現状 モバイルファーストで考えた場合、レスポンシブWebデザインはhtml5/css3でソースを書くのが望ましいとされています。その理由は、従来画像を使わなければ表現できなかった部分をcssのみで表現できるようになり、それによりページ容量を軽くできるためです。スマートフォンを含む最近のブラウザは基本的にcss3に対応しているのですが、IEに関しては対応状況が遅れていて、ここで少し悩ましい問題が発生しています。（IE8はほとんど非対応、IE9は一部対応。詳細はのちほど。
Webデザイナー・コーダー必見の神アプリ！MacでWindows IEなどのブラウザチェックが出来る「Sauce」が便利すぎてヤバイ
Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。 via: これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce | コリス Winを起動させるためのBoot CampもParallels Desktopも必要ない、と言うのがとても大きいですね:) アプリを起動したらアカウント登録画面を経てこの画面。アカウントは有料・無料があり、閲覧できるブラウザに制限などがかかります。 矢印の部分、Newボタンをクリック。 あとは見たいページのUR
IEに互換表示をさせない at softelメモ
問題 IE8とかIE9とか、WindowsVistaとかWindows7とか、新しい環境のIEで、 Javascriptや画面表示がおかしいだけみたいで、互換表示にしたら動くみたいなんだけど、勝手に互換表示にさせる方法ないの？ 答え 互換表示とは、IE8やIE9にIE7相当の表示をさせるモードのこと。 IE8やIE9で使って欲しいと思っているのに、互換モードで閲覧されて困る場合は、強制的に互換表示させないようにします。 IEで互換表示の指定は以下の箇所で可能で、反映される優先順位は、以下のとおり。 META タグ HTTP レスポンス ヘッダー DOCTYPE 宣言 METAタグもしくはヘッダで設定するときは、X-UA-Compatibleという項目を設定する。 X-UA-Compatible といえば、content=”IE=EmulateIE7″ を指定する話が有名だが、それ以外の値も
ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」:phpspot開発日誌
Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
[JS]jQueryのプラグイン33 1選 -2011年5月 | コリス
Skitter 多種多少なアニメーションで画像を変更するスライドショー。 キャプチャは「cube」、キューブ状になって変更します。
ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) - kojika17
' CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。 ブラウザのデフォルトであるユーザーエージェントスタイルシートをCSSリセットでnormalにして、さらにboldに戻すということをしています。 これだと単に、記述量と処理を増やしているだけに過ぎません。 「デフォルトCSSを理解すれば、CSSリセットはいらないのではないか？」という考えの元、デフォルトのCSSを調べてみました。 ユーザーエージェントスタイルシートの調査 ブラウザのアプリケーションファイルに潜ってCSSを探したところ、Fire FoxのCSSのみ探し出せました。 それ以外はアプリケーションの中にCSSが含まれている場合などにより、デフォルトCSS探せませんでした。 ただしIEに関しては、まとめたれたサイトがあったので、これを参考にします。 Internet E
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
IEの異なるバージョンをテストする環境のまとめとそれぞれの特徴
IE6, IE7, IE8などIEの異なるバージョンをテストするアプリケーション・環境のまとめとそれぞれの特徴を紹介します。 Internet Explorer 7のキャプチャ [ad#ad-2] 「Sandboxed IE Browsers from Spoon」から各アプリケーション・環境のまとめと特徴をピックアップし、いくつか追加しました。 IETester Virtual PC IE Super Preview IE Collection マルチPC環境 IETester IETester 対応するIEのバージョン IE5.5 IE6 IE7 IE8 IE9preview 主な特徴 異なるIEのバージョンをタブで同時に表示することが可能なアプリケーションです。 プリントプレビューのテスト、ポップアップによるインタラクション以外のテストは万事良好に動作します。FlashとCSSのフィ
[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.nijilog.info/2014/04/23/24
http://fukuyama.co/imagealpha
html5-memo.com
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
ie6countdown - Bing