WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
Microsoftの新ブラウザ「Edge」はChrome・Firefoxの拡張機能をそっくりそのまま奪い取る驚愕の仕様であると判明
Microsoftが新OS「Windows 10」で採用する新ブラウザ「Microsoft Edge」が正式に発表されました。あらゆる垣根を乗り越えるという意味合いが込められているEdgeからはMicrosoftの本気度が伝わってきます。 Microsoft Edge http://www.browserfordoing.com/en-us/ Microsoft makes it easy for developers to port Chrome and Firefox extensions to Edge http://www.neowin.net/news/microsoft-makes-it-easy-for-developers-to-port-chrome-and-firefox-extensions-to-edge Microsoft's Edge browser can s
主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com
ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik
2014年にお世話になったGoogle Chrome拡張機能まとめ
2014年もあとわずかで終わりですね。皆さんはどんな一年でしたか？ 私はというと、4月に開業届けを提出してフリーランスとして活動を開始したのもあり、節目となる一年だったように感じます。非常に慌しくあっという間に過ぎ去りました。2015年はもう少し余裕を持って生活したいです。 さて、毎年恒例となっていますが、年の瀬ということで今年もお世話になったGoogle Chrome拡張機能を紹介したいと思います。順番はABC順です。 AdMatrix Analytics 表示しているサイトのSEOをチェックすることができる拡張機能です。被リンクやらキーワード対策について確認することができます。 Always Clear Downloads ファイルをダウンロードした時に、ブラウザ下部に出てくるダウンロード履歴を自動で閉じてくれる拡張機能です。ダウンロードが完了したら、勝手にクリアするので手動で閉じる必
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
ウェブ開発やデザインが超絶捗る開発者のためのウェブブラウザ「Firefox Developer Edition」が登場
無料で使えるオープンなウェブブラウザ「Firefox」が登場してから今年でちょうど10年になるそうですが、そんな節目の年に、Firefoxを開発しているMozillaがウェブ開発者目線で作成し、開発者やデザイナーにこそ使ってほしいというウェブブラウザ「Firefox Developer Edition」をリリースしました。 Firefox Developer Edition — Mozilla https://www.mozilla.org/ja/firefox/developer/ Firefox Developer Editionはウェブ開発者のために作られたブラウザで、作成・テスト・サイズの変更といった開発のワークフローで必要とされる機能をすべて持っているものです。さらに、専用のアドオンをインストールすれば、Firefox Developer Editionを操作するだけで他のブラウ
Youtubeの動画を背景に
jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
ブラウザからちょー簡単にサイトの更新ができるようになる『SiteCake』 | 100SHIKI
まだ正式リリース前だが、なかなか興味深いサービスなのでご紹介。 SiteCakeはブラウザから簡単にウェブサイトを作成・編集できるツールだ。 詳しい導入方法はまだ明らかにされていないが、編集したいサイトにSiteCakeフォルダを追加するだけで、Firefoxから直感的に編集ができるようだ。 現在、サイトの方でデモを試すことができるが、ドラッグ＆ドロップで文章を追加したり、マウスで位置を変えたりといったことが実に簡単にできてしまう。感動ものなのでぜひ試してみてもらいたい。 こうしたツールがあれば、まるで紙の上で落書きするようにサイトが出来てしまうのではなかろうか。 年末には無料プランがリリースされるようなので楽しみにしていたい。
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
レスポンシブ対応用に複数のブレイクポイントで手軽に確認できるツール -Wood Cuttr
スマフォの横と縦のサイズっていくつだっけ？ タブレットは？ ネットブックは？ とウェブページの制作で、レスポンシブ対応用に複数のブレイクポイントで簡単に確認できるツールを紹介します。 Wood Cuttr Wood Cuttrの対応ブラウザ・デバイス Wood Cuttrの使い方 Wood Cuttrのセットアップ Wood Cuttrの対応ブラウザ・デバイス 対応ブラウザ・デバイスは、下記の通りです。 動作するブラウザ IE9+ Firefox 3.6+ Chrome 10+ Safari 5.1+ Opera 11.6+ ※Wood Cuttrが動作するブラウザです。 サポートしているデバイス iPad & iPhone Models Android スタンダードなTVスクリーン デスクトップ ※ビューポートのサイズをサポートしているデバイスです。 Wood Cuttrの使い方 使い方
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Checker
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Browser Testing On The Most Reliable Platform | BrowserStack
http://www.css-lecture.com/log/css3/css3-gradient.html
IDEA * IDEA
