サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 追記：modern.IEの日本語版ページが開設されました。 ホーム | Internet Explorer の検証がより簡単に | modern.IE はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OSはWindows、Mac、Linux、仮想化ソフトウェアはVirtualBox、VMWare Fusion、Parallels、Virtual PCなどに対応しています。 ここではMacでVirtualBoxを使用してIEを起動させる方法を紹介しま
日本の携帯は、なんだかんだで、これまでのオサイフケータイなどの素敵な機能とスマートフォンのいいとこ取りをしつつ進化しそうな気がする今日この頃。 今日は携帯サイトやスマートフォン向けサイトの制作時に役立つ携帯シミュレーターを何点かをピックアップ。 ドコモ端末のみの対応であるならば、iモードHTMLシミュレータIIを使えば、端末で確認する前に大体のイメージを掴める。 しかし、3キャリアとなると「FirefoxのアドオンFireMobileSimulator」を使うか、有料の「P1」を使う感じになる。 Firefoxのアドオン「FireMobileSimulator」は無料で使え、3キャリアの絵文字も表示できるので重宝してる人も多いはず。 しかし、最近もっぱらGoogleのChromeを使用していて、ChromeのExtensionにも携帯向けサイトをシミュレートしてくれるExtensionがな
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
LIGでディレクターを担当しているsekoです。 ホームページの制作を行う上で、各ブラウザでデザインの崩れがないか、バグがないか等をチェックするのもディレクターの仕事です。 私はMacを使っていますが、Internet Explorer(以下IE)の各バージョンでもチェックをしなくてはならないし、携帯やスマホサイトのチェックなども重要です。このチェックをwindowsのPCで行ったり、携帯端末を用意して行う事は非常に時間と労力がかかるし、用意出来ない環境のテストもしなければならないこともある為、悩みの種となっています。 そんな悩みを解決してくれるのがブラウザチェックツールです。 Webブラウザは個別のユーザーエージェント文字列を持っていて、このユーザーエージェント文字列を変更する事で、他のブラウザやスマートフォンでアクセスした場合と同じ表示にすることができる超便利なツールがあるので、紹介し
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
free online image editing suiteAviary Tools Aviary is a suite of powerful creative applications that you can use right in your web browser. We're on a mission to make creation accessible to artists of all genres, from graphic design to audio editing. Let Aviary and Worth1000 artists perform design services for you. Sign up for an account today to start creating, sharing, and collaborating with our
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
GoogleChromeは実はオープンソースのコード「Chromium」から作られており、そこへいくつかの機能をGoogleが独自に実装することで完成させたブラウザとなっています。ということは、その余計な追加機能を外せばもっとプライバシーに配慮され、そして軽量化＆高速化ができるはずだ、ということで作られたブラウザが「Iron」となります。GoogleChromeと互換性があるため、GoogleChromeで動くスクリプトはIronでも問題なく動きます。 SRWare Iron - The Browser of the Future http://www.srware.net/en/software_srware_iron.php GoogleChromeとIronの差については下記ページに一覧表形式でまとめられています。 Chrome vs Iron http://www.srware.n
Firefox 3.0 の正式版が本日リリースされたので、Windows XP で Firefox 3 と Firefox 2 を共存させる方法をメモしておきます。 ## Firefox 3 をインストールする環境とか前提条件とか – Firefox 2 は既にインストールしている。 – デフォルトのウェブブラウザは Firefox 3 を使う予定。 – パソコンは Windows XP です。 – Firefox 3 と Firefox 2 の多重起動を可能にする。 ## Firefox 3 をインストールする Firefox のページ から Windows 版の Firefox 3.0 をダウンロードして、インストールを開始します。 ソフトウェア使用許諾書に同意する。 カスタムインストールを選択。 インストール先フォルダを `C:\Program Files\Mozilla Firef
DSブラウザシミュレーター DSブラウザでの動作をシュミレートできる「DSブラウザシミュレーター」。 サイトの利用者層によってはシェアが意外に高かったりするDSブラウザですが、ブラウザ上でその動作についてシュミレートできるツールを発見したのでご紹介。 いちいちＤＳを用意する必要がなくなって便利そうです。 ズーム機能なんかも使えます。 ちなみに3DSのブラウザ機能は3Dになるんですかね。 関連エントリ スマートフォン用のサイト作成に役立つテスティングツール７
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
「resizeMyBrowser」はブラウザのウィンドウサイズを変更できるサイトです。最近はiPhoneやらiPadなどが登場していろんなサイズのウェブサイトを作る必要があります。ブラウザサイズをワンクリックで変更してデザインのチェックをするときに利用しましょう。初期設定で用意されているもの以外にも、自分でサイズを指定することも可能です。 以下に使ってみた様子を載せておきます。 まず「resizeMyBrowser」にアクセスしましょう。 このように変更サイズ一覧が表示されます。 よく見ると下にどのブラウザのサイズなのか書かれています。参考になりますね。 変更したいサイズをクリックすると、ポップアップウィンドウでリサイズされたウィンドウが表示されます。 「create a new preset」より、自分でサイズを指定することもできます。 右下にどこまでのサイズかを指定できます。ウィンドウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く