先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
思いついた勢いのままに Chrome extension『Kotoha』を作って公開しました。 chrome.google.com コードもGitHubに公開してます。 勢いのままに作ったと言いましたが、Javascript触るの久しぶりな上に初めてのChrome extension開発ということで、 実質15〜6時間くらいかかりました。 完全に俺得Extensionなんですが、せっかく作ったので何を考えてたのかまとめておこうと思います。 知らぬ間にGIGAZINEにも紹介されていました。圧倒的感謝。 gigazine.net どんなExtensionか イケてるアニメの名言を簡単に引用できるようになるExtensionです。 名言をキーワードで探せます。 作品タイトルやキャラクター名でも探せます。 名言はアドレスバーの隣のアイコンから登録できます。 詳細はREADMEに全部書いてあるので
うーん、スマホ表示確認できるUA偽装系Chrome拡張機能では、もしかしたら一番いいかもしれません。 「Mobile Layouter」という拡張機能なんですが、ブログのスマホ側の調整時に大変便利に使うことができました。 以前使っていたUA偽装系の拡張から乗り換えちゃいましたよ。 Photo:iPhone By GONZALO BAEZA 以前までは「User-Agent Switcher」という、そのものズバリな名前の拡張機能を利用していたんですが、UA変更後にリロードしなきゃいけなくて、単純な手間で言えば、実機で検証するのとあんまり変わらなかったんですよね。 また、単純にUAを偽装してるだけなので、スマホの画面そのものを再現しているとは言えないものでした。 で、そんなときに見つけたのが今回紹介するChrome拡張「Mobile Layouter」です。 インストールすると、他の拡張機能
vimiumとは vimキーバインドでGoogle Chromeを使えるようにできるプラグイン 具体的には，以下のような処理をvimキーバインドでできちゃう！ ページ操作 ページのスクロール（上下） リンクのクリック ページを戻る/進む 文字列検索 タブ操作 新規タブ追加 タブの削除 タブの移動 その他の操作 ブックマーク検索 vimiumのインストール chrome web storeのvimiumのページへ行きインストールを選択する． vimiumの設定 プラグインをインストールすると，早速vimiumが使用可能になるが，デフォルトのキーマッピングをかえて使いやすくする． インストール後，検索窓の右隣に以下のようなボタンが追加されている． ボタンを押すと以下のようなメニューが表示されるので，Optionsをクリックする． すると，vimium optionsを編集できるページに移動する
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
ここはHometypeを使い始めたばかりのユーザーのためのチュートリアルページです。ここではHometypeによる簡単なキーボード操作と簡単なカスタマイズ方法を説明していますので、ここを読んで感覚をつかんでいきましょう。 スクローリング Hometypeでは以下のキーボード操作で画面を移動できます。まずはこのチュートリアルの画面を上下に自由に移動してみましょう。 j / C-e 画面を少しだけ下方向にスクロールします。 k / C-y 画面を少しだけ上方向にスクロールします。 C-d 画面を半ページ分下方向にスクロールします。 C-u 画面を半ページ分上方向にスクロールします。 C-f 画面を1ページ分下方向にスクロールします。 C-b 画面を1ページ分上方向にスクロールします。 G 画面の一番下までスクロールします。 gg 画面の一番上までスクロールします。 ブラウジング 画面を上下にス
モード Hometypeはvimのようなモードを持っています。全てのモードはキーボード操作で切り替えることができます。 ノーマルモード Hometypeのデフォルトモードです。画面スクロールや履歴を戻ったり進んだりできます。 インサートモード テキストエリアにフォーカスがある場合、自動的にインサートモードになります。文字入力をする必要があるので、インサートモードにはコマンドは割り当てられていません。 ヒントモード 画面に表示されている要素に対してヒントチップが表示されます。ヒントチップに記載されているキーを押下することで、リンクを辿ったり要素にフォーカスしたりできます。 ビジュアルモード ビジュアルモードでは、要素内のテキストを選択するためのキャレットが現れます。Firefoxのキャレットブラウズモードのようなものです。 コマンドモード ページ下部にコマンドバーが表示され、そこにコマンドを
2018-02-22 起動オプション2017-07-29 テーマ/作り方2016-12-15 雑記2016-10-24 キーボード ショートカット2016-09-18 FrontPage/コメントログ2015-06-29 起動オプション/コメントログ2015-04-20 テーマ2014-11-11 コメントページ2014-10-19 FAQ2014-10-05 エクステンション
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 1．テキストのみコピペする方法。 リッチテキストエディタなどを使っていると、ブラウザからテキストをコピペした場合、画像なども付いてくる場合があります。 そんな時は「Control+Shift+V（Macだとcommand + shift + V）」を使ってペーストすると、テキストのみ貼り付けることが出来ます。 2．最後に閉じたタブを復活させる方法。 誤ってタブを閉じてしまった時は、「Control+Shift+T（Macだとcommand+shift+T）」とショートカットキーを叩くと復活させることが出来ます。 3. タブにマウスを置くと、ウェブページのタイトルの全てが読める。 Google Chromeはタブを開きすぎるとタブがとても小さくなってタイ
こんばんは、傍島です。 私は25年くらいパソコンと付き合っているのですが、恥ずかしながら、いまだ正しいタッチタイピングができない人です。 パソコンに興味を持ち始めた頃、周りに詳しい人がおらず、「習うより慣れろ」で始めてしまい、誰もが通るであろう、いくつかのステップを飛ばして来ました。まったくダメと言うワケではありませんが、変則的なタッチタイピングで左手の一部の指を上手く使うことができません。長い間これでやってきて特別不便な思いをしたことはありませんが、タッチタイピングできる方が効率が良くなりますし、ミスタイプもなくなるはずです。まぁ、世間的にも様になります（笑）。 私と似たように、変則的なタイプで改めて勉強したいという人以外でも、もう一度タッチタイプのトレーニングをしてみたいと考える方も多いはず。そんな方には『Type Fu』がオススメです。 続きは、以下で。 Type Fuは、Googl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
