CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 - kojika17
最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit:
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
自動車免許.club - このウェブサイトは販売用です！ - 自動車免許 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ここまで来てる! ブラウザだけでリアルタイム3D、「ACTISKU」のWebGLデモ 【増田 @maskin】 | TechWave（テックウェーブ）
HTML5の流れとあわせてウォッチしておきたい「WebGL」ーウェブブラウザに実装されるべく仕様策定が進むグラフィック描画API(アプリケーション・プログラミング・インターフェイス)だ。 先日話題になった「CSS3Dの雲」など比較的ライトなウェブグラフィック描画実験は多数出てきているが、リアルタイム3Dソリューションを手がける仏 ACTISKUによるWebGLのデモはかなり骨太だ。 これはUnigineというマルチプラットフォームのグラフィックエンジンをWebGLに移植したものを使用したデモで、プラグイン無しで、目を見はるような3Dレンダリングを実現している。 標準的なスペックのPCなら快適に動作 FirefoxやGoogle Chromeなど最新ブラウザなら動作するので(Safariではエラーが出た)、実際に立ち上げて見て欲しい (http://crypt-webgl.unigine.c
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
CSS3でフォントサイズを指定する単位は「rem」がとても便利 – bl6.jp
CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利だったので使い方をメモしときます。なにが便利なのかというと、一般的によく使われるemや%では親要素のフォントサイズが基準となって、階層が深くなったりすると何かと不都合が生じる場合があります。その点remではroot要素に指定されたフォントサイズが基準になるので、深い階層になっても複雑な計算をしなくて済みます。 [ads_center] 使い方 例えば、以下のHTMLの場合、親要素にemや%でフォントサイズを指定すると階層が深くなるにつれてフォントサイズが小さくなったり大きくなったりしていきます。 HTML <ul> <li>サンプル</li> <li> <ul> <li>サンプル</li> <li> <ul> <li>サンプル</li> </ul> </li> </ul> </li> </ul> ul { font-si
CCS3を対応するためのプロパティを自動付与し、一行にまとめるスクリプト「Prefix Free」
WEB業界ではすっかりおなじみのCSS3。ただまだ全てのブラウザに標準化され実装されているわけではなく、ブラウザ毎に接頭語を付けてあげる必要があります。 機能的にはそれぞれ接頭語をつけて、書き分けてあげれば良いのですが、管理面や手間的もあり面倒です。そこで今回紹介するのは、接頭語を欠かずにシンプルなCSSのみで様々なブラウザに対応させる事ができるというものです。 詳しくは以下 こちらのスクリプトは非常に軽量なものとなっており、配布されているjsを読み込むだけで実装可能です。 対応ブラウザはIE9+、Opera 10+、Firefox 3.5+、Safari 4+、Chromeとなっております。いずれは必要なくなってくれるのが一番好ましいですが、取りいそぎ、煩わしさを回避したいという方はお試しください。 デモ確認用のCSSファイルは「this page’s stylesheet」からどうぞ。
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transform cssSandpaperを使用した際のtransfo
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
縦書きを可能にするjavascriptライブラリ「竹取JS」
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
【HTML5】HTML5で追加されたformの新要素をいろいろなブラウザで試してみた : アシアルブログ
こんにちは、橋本です。 最近巷ではHTML5が盛り上がりを見せている気がします。 「世界的ですもんね。乗るしかない、このビックウエーブに！」 とはいえ、HTML5のすべてに触れると膨大な量になってしまうので、今日はHTML5の中でも、多くの変更が行われた、form要素について、実際に新しく追加された機能を使っていってみたいと思います。 まずは以下を参考に、どのような修正が加えられたか見てみましょう。 W3C - HTML 5 differences from HTML 4 日本語訳 formに関する変更はこのあたりでしょうか。 以下に列挙してみます。 ・inputタグに以下のtype要素が追加。 tel search url email datetime date month week time datetime-local number range color ・以下の属性が追加 inp
ke-tai.org > Blog Archive > ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました
ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました Tweet 2010/3/19 金曜日 matsui Posted in DoCoMo, ソフト紹介, タレコミ | 1 Comment » フォーラムからmemokamiさんにタレこんでいただきました。 情報提供ありがとうございます。 ドコモ純正の定番ケータイエミュレータである「iモードHTMLシミュレータII」が8.4にバージョンアップしたとのことです。 → NTTdocomo iモードHTMLシミュレータII [nttdocomo.co.jp] 前回のバージョンアップから約5ヶ月ぶりの更新ということになります。 今回の変更内容は以下の通りです。 シミュレートモード5から8までのブラウザエンジンおよびFlashエンジンのバージョンアップ メイン画面のデザインを変更 テーマ設定機能に対応 通
IEをモダンブラウザのように扱う方法10 – creamu
IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹介しますね。 HTML5をIEでも使用可能にする html5.jsを読み込んで、HTML5をIEでも使用可能にする text-shadowプロパティー IEでtext-shadowプロパティーをfilterを使って実現 IEでのbox-shadow filterを使ってシャドウに見せるテクニック 角丸 モダンブラウザはborder-radiusで、IEにはDD roundiesを適用 マルチカラム div要素にカラムを追加する。IE用にはjQueryプラグインで実装 HTML5の表現はだんだん増えてくるかと思うので、一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザの閲覧履歴を自動分類してくれる拡張機能『CottonTracks』 | 100SHIKI
JavaScriptでPoisson Image Editingによる滑らかな画像合成 – Rest Term
Githubのリポジトリをエクスプローラー的にわかりやすく表示する『Gitray』 | 100SHIKI
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法