2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法 | コリス

2021/05/25 34 users コリス Safa Flexbox デベロッパー Safari

2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、Safa... 続きを読む

Web制作者が苦痛だと感じているselect要素の不満点と美しくスタイルするテクニック | コリス

2019/11/12 30 users コリス 進化 ブラウザ select要素 フォーム

フォームをスタイルするのが苦手、中でもselect要素が最も苦手という人は少なくないと思います。Web制作者が苦痛だと感じているselect要素の不満点、select要素をクロスブラウザ対応で美しくスタイルするテクニック、select要素に対するブラウザの進化の紹介します。 The Current State of Styling Selects in 2019 下記... 続きを読む

ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon // Speaker Deck

2017/08/04 76 users Builderscon Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

Firefoxにおいて「WebExtensionsが利用可能に」と開発者向けアナウンス、クロスブラウザ対応に向けた拡張機能 － Publickey

2017/06/12 42 users Publickey WebExtensions 拡張機能

MozillaのデベロッパーアドボケイトPotch氏は、Firefoxにおいて WebExtensions 対応の拡張機能が利用可能になったことをMozilla Hacksに投稿した記事「 Cross-browser extensions, available now in Firefox 」で明らかにしました。 We’re modernizing the way developers build... 続きを読む

コピペ自由！美しいグラデーションを180種類揃えた WebGradients - PhotoshopVIP

2017/02/21 67 users PhotoshopVIP グラデーションカラー 配色 ボタン

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフロー... 続きを読む

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス

2016/12/15 388 users jQuery コリス モーフィング SVG ライブラリ

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの... 続きを読む

最新のIT・Web技術を動画で学べるマイクロソフトの「Channel９」が、やたら勉強になる件！ : うえぶはっく

2016/03/09 757 users マイクロソフト ウェブ 有料セミナー 構成 勉強

右側の「言語フィルター」で、日本語を選択すれば海外の動画は非表示にできるので便利です。 以下の動画では、最近のWeb事情やクロスブラウザ対応などを、実際のコードを交えて具体的に教えてくれる構成になっています。 動画を見ると分かりますが、普通に有料セミナーとかでやっていそうな濃い内容になっており、このような動画コンテンツが3000近くも集められているのは魅力的でしょう。 他にもあるこんな動画たち！ ... 続きを読む

サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋

2012/11/30 677 users レスポンシブ バンクーバー うぇぶ屋 パフォーマンス 確認作業

僕だけじゃないと思いますが、年末と言えばWEB屋にとって忙しい時期じゃないでしょうか。僕は年末に向けて新しいサイトやブログ、試してみたい技術や表現、仲間内との新プロジェクトに、年末駆け込みの受注案件となんとも忙しい限りといった印象です。 しかし、いくら忙しくても忘れては成らないのが制作するウェブサイトの動作、表示チェックの数々ですよね。最近はデバイスの多様化も手伝って、デバイスチェックだけでも大変... 続きを読む

Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syze - かちびと. net

2012/01/16 56 users ブレークポイント Media Queries 備忘録 net

シンプルで良さそうだったので一応備忘録。 Media Queriesライクにブレークポイントに 応じてスタイルを変更できるライブラリです。 非依存型で1KBと、超軽量スクリプトなので 簡単なキャンペーンサイトとかならこれでも いいかもしれないですね。 Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴... 続きを読む

[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider | コリス

2011/12/20 312 users コリス jQuery スライダー スクリプト コピペ

IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブ... 続きを読む

スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと. net

2011/11/12 157 users スクロールバー クロスブラウザ CSS 軽量 題名

題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 Tiny Scrollbar こんな感じでデザインを変えられます。せっ... 続きを読む

[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス

2011/10/16 460 users コリス class CSS stylesheet フェードイン

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet... 続きを読む

Webサイトツアーを手軽に実装出来るクロスブラウザ対応のjQueryプラグイン・Joyride - かちびと. net

2011/10/14 35 users net webサイトツアー

何度か似たようなの見かけてますが、 サイト内ツアーを実装出来るjQuery プラグイン・Joyrideです。高機能で はありませんが、シンプルでなかなか 使い勝手も悪く無さそうでしたので 少し触ってみました。 何度か似たようなの見かけてますので珍しくはないともいますけど・・・個人的にどこかで使いたいのでメモ的に。ライセンスはMITです。 Joyride ツールチップでナビゲーションが出ます。NEX... 続きを読む

長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps - かちびと.net

2011/09/29 47 users net 省スペース クロスブラウザ 備忘録 沢山

使いやすそうだったので備忘録。 フォームをステップ式にして、 コンパクトに収められる、という jQueryプラグイン。シンプルなの でカスタマイズも割りとしやすく、 クロスブラウザでも動作してく れます。 高機能なプラグインは沢山ありますけど、既存サイトに組み込む必要がある場合はシンプルでカスタマイズしやすい方が落とし込みやすいのですが、探してみるとなかなか無いので個人的にはこういうプラグインが結... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra expression CSS Element

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless | コリス

2011/06/26 253 users コリス フレームワーク チュートリアル CSS Reset

当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSS... 続きを読む

パブリックドメインで配布されている、クロスブラウザ対応を意識したHTML5+css3製のフレームワーク・Gridless - かちびと.net

2011/06/14 46 users パブリックドメイン クロスブラウザ 雛形 フレームワーク 装飾

いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっています。 Gridlessは、美しいタイポグラフィをクロスブラウザで実現するためのフレームワークです。MediaQueryによって、スマフォにも対応しやすい雛形になっています... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン - かちびと.net

2010/12/19 259 users ナビゲーション スライド net jQuery 全画面

全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いて... 続きを読む

たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌

2010/11/26 150 users jQueryプラグイン phpspot開発日誌 ブロック

Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 p... 続きを読む

[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス

2010/09/14 118 users コリス アコーディオン アクセシブル スクリプト jQuery

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス アクセシブル Ajax スクリプト スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む

CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net

2010/06/15 821 users CSS net ソース HTMLタグ ドロップダウンメニュー

cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなド... 続きを読む

jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog

2009/10/09 328 users KAYAC engineers 知恵 Blog

Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'va... 続きを読む

[CSS]検索フォームを素敵なデザインするスタイルシート集 | コリス

2009/03/04 331 users コリス background images CSS URL

検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 HTML CSS /* style1*/ #searchform1 {background:url(images/search1.gif) left top no-repeat; display: block;width: 240px; height: 32px;} #sear... 続きを読む