IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 : Web Design KOJIKA17

2011/06/04 1224 users Twitter Opera コーディング Webkit系 解釈

Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことです... 続きを読む

クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント （1/2）- ＠IT

2011/05/24 953 users Inter 種明かし プログレッシブ・エンハンスメント 日本

一撃デザインの種明かし（15） クロスブラウザはもう古い！ HTML5＋CSS3時代の プログレッシブ・エンハンスメント 面白法人カヤック 橋本雄也・本多大和 2011/5/24 クロスブラウザはもう古い！ これからのHTML5＋CSS3時代を担う制作コンセプト、「プログレッシブ・エンハンスメント」とは？ IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInter... 続きを読む

IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll | コリス

2012/06/10 723 users iPhone コリス クロスブラウザチェック iPad IE7

デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に... 続きを読む

クロスブラウザのためのHTML/CSSのテクニック集 | コリス

2008/06/29 680 users strict コリス スタイルシー 意訳 CSS

anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシー... 続きを読む

CSSでマルチカラムレイアウト（1/6）：CodeZine

2010/03/17 655 users CodeZine CSS floatプロパティ 前回 互換性

はじめに　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。　今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」... 続きを読む

これでできる！ クロスブラウザJavaScript入門：第1回　ウェブブラウザとJavaScriptの未来｜gihyo.jp … 技術評論社

2010/03/15 629 users ウェブブラウザ gihyo.jp 技術評論社 太田昌吾 未来

これでできる！ クロスブラウザJavaScript入門 第1回　ウェブブラウザとJavaScriptの未来 2010年3月15日 太田昌吾 JavaScript, クロスブラウザ, ブラウザ, フォーム サポート, Safari, バージョン, JavaScript 1 2 3 4 5 こんにちは，id:os0xこと太田昌吾です。今回から，クロスブラウザ対策を中心としたJavaScriptの初級か... 続きを読む

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU

2008/03/25 563 users CREAMU min-height CSS ブラウザ あなた

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are ... 続きを読む

テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳

2011/05/17 525 users テーブル Web活メモ帳 ページング jQuery エクセル

料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザな... 続きを読む

徹底比較。クロスブラウザのテストツール15個｜designaholic -Creative Column-

2011/08/29 508 users designaholic Creative Column

HTML5や新しいデバイスの登場で今後も頭を悩まされそうなクロスブラウザのテストですが、テストツールがまとめられていたので紹介します。 Adobe BrowserLab Browsershots SuperPreview Lunascape 6 IETester IE NetRenderer Spoon Sauce Labs Browsera Browserling Mogotest Cloud ... 続きを読む

この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ

2010/11/20 486 users プロパティ CSS プロパティー IE7 セレクタ

そろそろIE6はいいかなーという今日この頃。これからクロスブラウザを目指すならIE7に標準をあわせてもいいかも。今までは使えなかったIE7からのセレクタやプロパティーをまとめてみました。IE7からならいろいろ効率的にCSSを書けそうですね！そろそろIE6のことは忘れて、IE7からのクロスブラウザを目指せばいいのかなーという気がしています。 CSSには今まではIE6のことを考えて使わなかったセレクタ... 続きを読む

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス

2012/05/15 485 users コリス Normalize.css CSS CSSリセット

下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるもので... 続きを読む

ブラウザチェックに使える無料ツールいろいろ | DesignWalker

2009/03/11 476 users DesignWalker ブラウザチェック ツール ブラウザ

各ブラウザやバージョンでデザインをチェックするのは、なかなか大変な作業ですね…。 クロスブラウザのチェックはなるべく時間をかけずに済ませたいものです。今回はブラウザチェックに使えそうなツールをいくつかまとめてみました。 Xenocode Browser Sandbox インストールしなくてもブラウザからクリックするだけで各ブラウザが立ち上がるツール。これは便利ですね。ブラウザだけでなく、他のソフト... 続きを読む

WebのUIテスト自動化 - Seleniumを使ってみる - Qiita

2014/04/20 446 users Selenium Qiita Appium UIテスト自動化

Appiumを色々触っているんですが、仕組みが同じSeleniumもちょっと触ってみました。 だいぶ色々なことができそうなのでこちらも触りつつメモを取っていこうと思います。 実際の動画デモ 実際にどんなことができるのか、参考動画を撮ってみました。 内容的にはネタな感じにしていますが、どんなことができるか分かってもらえるかと思いますｗ Seleniumとは Seleniumはクロスブラウザ、クロスプ... 続きを読む

これでできる！ クロスブラウザJavaScript入門：第2回　完全版：ブラウザとデバッグ環境｜gihyo.jp … 技術評論社

2010/03/29 386 users gihyo.jp 技術評論社 ブラウザ デバッグ 太田昌吾

これでできる！ クロスブラウザJavaScript入門 第2回　完全版：ブラウザとデバッグ環境 2010年3月29日 太田昌吾 JavaScript, クロスブラウザ, ブラウザ, デバッグ バージョン, Chrome, インストール, Opera 1 2 3 4 5 こんにちは，太田です。前回はクロスブラウザの入口として，各ブラウザの特徴をまとめつつ，実際にクロスブラウザなコードを紹介しました。... 続きを読む

リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | Rakuten-Tips 楽天店舗の制作運営の裏技＆豆知識

2015/03/14 370 users リニューアル エフェクト 変わり目 デモ HTML＆CSS

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider デモ | ダウンロード 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に... 続きを読む

IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス | コリス

2013/05/21 308 users コリス デベロッパサイト CSS アドバイス モダンブラウザ用

Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、... 続きを読む

長い文字列が続いて文字がはみ出してしまうのを防止するCSS:phpspot開発日誌

2010/06/04 307 users CSS phpspot開発日誌 長い文字列 文字 CSS例

Wrapping Long URLs and Text Content with CSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。 通常だと文字がはみ出してしまうのを、はみ出さないようにし... 続きを読む

ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net

2011/07/12 301 users ベーシック net 汎用性 備忘録 スライダー

クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロ... 続きを読む

エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net

2011/08/11 285 users エフェクト イメージスライダー net Flash 印象

実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させている... 続きを読む

CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net

2010/07/14 278 users transform gradient box-shadow

これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応... 続きを読む

[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート | コリス

2009/01/23 249 users ブッダ コリス HTML CSS Fx2

New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、FX6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよ... 続きを読む

マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行

2023/10/17 246 users playwright Webアプリケーション 並列実行 開発

マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発... 続きを読む

画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net

2011/11/05 195 users 見出し 水平線 net Demo 画像

ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 CSS h1 { bo... 続きを読む

CSS3でIEにも角丸を適用させるhtcファイル | CREAMU

2010/02/05 181 users CREAMU border-radius CSS 角丸 以下

CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-b... 続きを読む

クロスブラウザでのJavaScriptキーボードイベントの扱い方:phpspot開発日誌

2006/12/06 164 users phpspot開発日誌 Shiftキー ctrlキー コード

JavaScriptでのキーボードイベントの処理はブラウザによって違っていて、クロスブラウザで動作させるためには、それぞれのブラウザに合ったコードを実行し分ける必要があります。 JavaScriptでキーボードイベントを取得し、どのキーコードが押されたかを判別するサンプルを以下に示します。CtrlキーやShiftキーが押されたかどうかなどのチェック方法も併せて示しています。 このサンプルを活用する... 続きを読む