1クリックで、IE, Edgeをはじめ、さまざまなブラウザ・スマホなどの表示確認ができるChromeの便利な機能拡張 | コリス

2018/05/17 106 users コリス iOS MacOS Edge Safari

指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2... 続きを読む

iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) - Qiita

2017/09/20 72 users ウェブデザイン Qiita MacOS 必須 ウェブページ

今年10月に発売が予定されている iPhone X は、その独特なディスプレイの為にセーフエリアを意識したウェブデザインが必須です。iPhone Xで意図せぬ表示にならないように実機の購入が必要だと考えるかもしれませんが、 実はmacOSユーザーであれば、iPhone Xを購入せず無料でウェブページの表示確認を行えます 。このエントリーでは、iPhone Xでの表示確認方法について紹介します。 ▲... 続きを読む

レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy | コリス

2017/05/08 154 users iPhone コリス レスポンシブ 後発 Nexus

iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応して... 続きを読む

レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス | コリス

2015/05/12 227 users デバイス タブレット スクリーンサイズ 操作 コリス

ブラウザやOSを問わずに、デスクトップ・スマホ・タブレット・テレビなどさまざまなデバイスのスクリーンサイズをシミュレートしてWebページの表示確認ができる無料オンラインサービスを紹介します。 操作は非常に快適で、ノースト...記事の続きを読む 続きを読む

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル | NxWorld

2015/05/10 108 users ベンダープレフィックス NxWorld CSS 追記 ブラウザ

ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。そのヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 ※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスやサイズ指定などは必要に応じて追記・変更してください。... 続きを読む

CSSで実装するタグクラウドのサンプル | NxWorld

2015/03/18 93 users 実装 HTML NxWorld ブラウザ 以下

画像は一切使用せず、CSSのみで実装・デザインしたタグクラウドのサンプルです。対応ブラウザによっては使えませんが、CSSのみで実装しているのでサイズやカラー変更も容易にできます。 ※以下で紹介する方法はブラウザによっては表示確認ができない場合や綺麗に表示されない場合があります。 当ブログでも使用しているタイプのタグクラウドで、実装にはHTMLとCSSをそれぞれ以下のように記述します。 HTML <... 続きを読む

CSSで括弧を表現したサンプル | NxWorld

2015/03/08 345 users NxWorld 括弧 備忘録 CSS テキスト

正直微妙なので恐らく使うことないだろうっていうのもあるんですが、ちょっと使う機会があって実装できるのか試してみたので備忘録として残しておこうと思います。「」（鉤括弧）や［］（角括弧）など、括弧をCSSで表現してみたサンプルで、普通に使うのであればただのテキストを使えば良いですが、複数行をひとつの括弧で括るようなデザインにしたい時に使えます。 ※以下で紹介する方法はブラウザによっては表示確認ができな... 続きを読む

Microsoft Expression Web 4とExpression Design 4の無料版が公開されてた | ウェブアラカルト

2013/12/27 76 users webオーサリングツール web ブラウザ 無料版 入力

いつの間にか、Webサイト作成ソフト「Microsoft Expression Web 4」と、ベクターグラフィック作成ソフト「Microsoft Expression Design 4」の無料版が公開されていました。 ・Microsoft Expression Web 4 Webサイト作成ソフト(Webオーサリングツール)。 入力の自動補完機能もある。 ただし、色んなブラウザで表示確認が出来る「... 続きを読む

ブラウザ上でPCにインストール済みのフォントを表示テストできるツール・typezebra - かちびと.net

2013/01/13 53 users フォント net インストール済み ブラウザ上 表示

ブラウザでインストール済み フォントのテストを行える、 というツール・typezebraの ご紹介。タイピングして表示 をチェックする事が出来ます。 動作も軽いのでなかなか良い 感じ。 フォントの表示テストを行えるツールです。他にもありますが、typezebraは動作も軽いので割とオススメ。 typezebra その場でタイプした文字をインストール済みのフォントで表示確認可能なツールです。左にイン... 続きを読む

Twitter Bootstrapのテーマ作成も出来て、スマフォやタブレットでの表示状態も確認出来るジェネレーター・BootTheme - かちびと.net

2012/08/27 136 users Twitter Bootstrap スマフォ タブレット

Twitter Bootstrap用のテーマを 作成出来る、というジェネレーター 的なもの。それだけでなく、作成 しながらスマフォやタブレットで の表示状態も確認出来ます。 Twitter Bootstrapのデザイン作成ツールです。Twitter BootstrapはレスポンシブWebデザインに対応していますので、このジェネレーターでもスマフォやタブレットデバイスのサイズで表示確認が出来る様にな... 続きを読む

スマートフォンサイトの表示確認に使いたい便利なツール×2 | 海外SEO情報ブログ

2012/08/02 225 users 海外SEO情報ブログ スマートフォンサイト

[対象: 中級]今日は、スマートフォン向けのサイトを検証するときに便利なツールを2つ紹介します。レスポンシブ・ウェブデザインでの表示を簡単に確かめられるブックマークレットとスマホでのページ閲覧をシミュレーションするアプリケーションソフトです。1. レスポンシブ・ウェブデザイン ブックマークレット1つ目はレスポンシブ・ウェブデザインがどのように機能しているかをチェックするブックマークレットです。こち... 続きを読む

完全無料！MacでWindows 7を利用する方法 - Macの手書き説明書

2012/06/17 978 users Mac 手書き説明書 インストールディスク 方法 無料

なぜ無料でWindows 7を使えるのかMacでWindowsを動かすにはBoot CampやVirtualBoxがありますが、いずれも無料でWindowsが使える訳ではありません。なぜならばWindowsを動かすためのアプリが無料でも、Windowsのインストールディスクとプロダクトキーは無料ではないからです。本格的に使うのならばまだしも、IEでのサイトの表示確認やちょっとしたゲームのためにWi... 続きを読む

Safari⇔Google Chrome間で開いているサイトを受け渡す『Switch』 | Macの手書き説明書

2012/03/27 51 users Switch Firefox Mac アイコン 手書き説明書

メニューバーのアイコンをクリックするたびにSafari⇔Google Chrome間で開いているサイトを受け渡すアプリです。サイト製作の表示確認や、どちらかのWebブラウザでは利用できないWebサービスを利用する時に便利そう。Safari・Google Chrome→Firefoxへ引き渡すこともできますが、Firefox→Safari・Google Chromeは不可能です。ダウンロードする 続きを読む