レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
やっぱりXPやMACで見ると、こんなにも字体が違うのね。。。 使って最初に思ったことがこれですｗ クロスブラウザテストを行えるサービスはキャプチャを取ったり、IETesterのように実際に表示できたりするものもありますが、無料で「BrowserLab」ほど信憑性と手軽さを感じるものは他にないのでは？ 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! アドビの「BrowserLab」が便利なこと この上ない「BrowserLab」は、複数のOS上でのFirefox、Internet Explorer、Safariのサイトキャプチャ画像をオンラインで比較できるクロスブラウザテストサービス。 複数ブラウザの比較をカンタンに行えるのも非常に便利です。 ↑複数ブラウザの表示を比較するのもカンタン。 ↑メニュー
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
Webサイト製作時や、製作依頼時、イメージを伝えるのは基本的なことです。 このような表現は、手書きでもいいのですが、より実物に近いイメージで表現するためには雛形となるサンプルHTMLを書いたり、その他のローカルツールなどを使うほうがいいですね。 いわゆるモックアップや、プロトタイプというようなものですが、この作業をFirefoxで行うことができるおもしろいアドオンがあります。 「Pencil Project」は、通常、ローカルの各種ドローツールなどで製作することが多いモックアップ作成作業を、Firefoxから起動して製作・イメージ保存をすることができるアドオンです。 インストール後、ツール→[Pencil Sketching]を選択すると、別ウィンドウにてツールが起動します。 画面は、左側にパーツ群、右側にキャンバスが表示され、左の各GUIパーツをキャンバスにドラッグすることで配置し、それ
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある
20 FireFox Extensions That Every Web Designer Should Know About - CyberKnowledge Blog WebデザイナーのためのFirefoxエクステンション20個。 どれも便利なエクステンションばかりでまさに、Webデザイナー必須のエクステンションですね。 Web Developer Toolbar - 定番のエクステンション。CSSオフ、ブロック要素を枠で囲むなどデザインには必須のツール。 AspellFox - スペルチェッカー RankQuest SEO Toolbar - googleでのサイト順位を得る OperaView - Firefox上でOperaプレビュー IEView - Firefox上でIEプレビュー Total Validator - HTML Validator SEO for
今月入社のsashaです。 フォト蔵のデザイン周りのことを主に担当しています。 今日は、私が今まで愛用してきたWebデザイン、フロントエンド・コーディングに役立つツールをご紹介します。 （1）フロントエンド・コーダーの必需品 FireFox 拡張機能のWeb Developer 今調べたら日本語版も出ているんですね。最初、ためしにインストールしたときはブラウザの上部が幅とってしまって、なんとなく気に入らなかったんですが、フロントエンドのデザインやコーディングにはこれが本当に便利。 クッキー、Java、JavaScript、CSSなどを無効にする CSSをその場で編集する フォームの各属性値を表示する 画像を非表示にする alt属性のない、あるいはalt属性値が空の画像を枠で囲む リンクのパスを表示する ブラウザの画面内を拡大あるいは縮小する テーブルのセルを表示する ブラウザのウィンド
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
JavaScript ※2006/5/23 22:50 外部スクリプトの設置先に問題があり動作が不安定だったため、変更いたしました。 koyachiの日記 - del.icio.usで色カタログを作るcaramel*vanilla » del.icio.usをカラースキーム･ギャラリーにする’hceT’.sub(/￥Z/,’bus’).reverse - del.icio.us - tag/ColorScheme ページ内で利用している色を抽出し、Del.icio.usにポストできるウィンドウを表示します。いらない色をクリックすると、その色は取り除かれます。Firefox専用です。 javascript:(function(){window.postColorSchemeWindow=window.open('','','width=800,height=400,resizable=ye
CNET Japan - 「Firefox 1.5」の正式版がついに登場--セキュリティ機能などが向上 http://japan.cnet.com/news/media/story/0,2000047715,20091847,00.htm ITmedia - Firefox 1.5、正式リリース。日本語版も http://www.itmedia.co.jp/news/articles/0511/30/news017.html Firefox 1.5 リリース！ついに、SVGネイティブサポート！！ Mozilla Corporation http://www.mozilla.com/ Firefox http://www.mozilla.com/firefox/ さっそくFirefox 1.5をダウンロード・インストールして、SVGを見てみよう！ SVGサンプル集 http://www.cr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く