え…まだそんなことしてるの？！WEB制作者必須な厳選便利技＆時短技！

掲載日: 2016年05月19日
(最終更新日：2016年05月18日）

みなさん、WEBブラウザは何を使ってますか？

最近ではChromeやSafariのシェアが伸びてきている一方で、Internet Explorerのシェアが減ってきているというニュースを目にしたという方も多いと思います。

この状態が続けば、ChromeとInternet Explorerのシェアが逆転するかもしれないですね。
（というか、もう逆転している可能性も…）

今回は、そんな人気の「Chrome」の便利技や時短技、さらにはWEB制作者必須な便利すぎて涙が出るブックマークレットをご紹介していきたいと思います。

特にWEB担当者の方方はこれを知ってるだけでこれまでの作業が一体何だったの？

と、号泣してしまう可能性がありますので、ぜひチェックしてくださいね！

contenteditable属性で開いたWEBページを思いのままに編集する便利技

Photo via Visualhunt

これはChromeに限ったことではないのですが･･･

HTML5のcontenteditable属性を書き換えるコードをブックマークレットに置いておけば、いつでもそのページの文章を書き足したり、レイアウトを変えたりして思いのままに編集することができるようになります。

”HTML5のcontenteditable属性？”

と「？」がたくさん出てしまうかもなのですが、ようは今ご覧いただいているページも、実はcontenteditable属性というHTMLの技術を活用することによってWordやメモ帳、Macのシンプルテキストのように自由自在にメモや編集を行える。

ということなんです。

論より証拠。やってみましょう。

ContetEdit

上のボタンをブックマークツールバーにドラッグして登録してください。

その後、登録したブックマークをクリックし、このページの好きな箇所になにか入力したり、文字を消してみたりしてください。

具体的な仕組みはやや技術的なことになるのですが、HTMLの<body>タグにcontenteditable属性を下記のように付け足しているだけです。

<body contentEditable="true">
もしくは、編集可能にしたい領域（たとえば<div>や<p>要素）に「contentEditable=”true”」を付け足せば、その箇所のみ編集が可能になります。
<body>につければそのページ全体を自由に編集できる。ということですね。

ちなみにこの箇所は「contentEditable=”true”」をつけた<div>要素です。
編集してみてください。

もちろん、本当にWEB上のそのページの内容を書き換えてしまえるということではなく、一時的にブラウザ内に表示されているその内容を編集しているだけなので、ブラウザを閉じたりリロードすれば元に戻ります。

この機能の便利な使い方としては、実際に自分でホームページの文章などを編集する前に編集後の雰囲気を手軽に確認できる。という点です。

これは、WEB編集者の方にはとても便利な技ですよね。

いったんChromeのデベロッパーツールで<body>要素に、

contentEditable="true"
をつけて、全体をChromeに表示されているページそのものから編集できるようにしておけば、デベロッパーツールのエレメントウィンドウのややこしいHTMLをじっと目を凝らして編集するよりもホームページの見た目そのままにワープロ感覚で直感的に編集することが可能になります。

文字数を増やしたりしたらどうなるか？　とかの確認にもってこいです。

また、行った編集を保存したい場合があったとしても、その編集をした状態でCtrl+S（Cmd+S）で保存すれば、その編集したページ全体をデスクトップなどに保存できます。

あとから見たいページに自分なりのメモなどを付け加え、読みたい部分以外の文章や余分な広告画像を削除して保存しておく。ということもできますね。

こちらのサイトでより詳しい解説がされていますので、気になる方はご参照ください。

参考リンク：君はHTML5の contentEditable 属性を知っているか｜ Tips Note

Chromeのアドレスバーで使える便利技！

Photo credit: teezeh via VisualHunt.com / CC BY-SA

普段URLが表示されているアドレスバーですが、あまり知られていない便利機能が実はたくさんあります。

Chromeの便利技：アドレスバーで計算できる！

Chromeを立ち上げている最中、計算したいと思った時にわざわざ計算アプリを開くのはめんどくさいですよね。

そんな時、アドレスバーで計算できます。

「5×8」を計算したい時には、アドレスバーに「5*8」と入力してEnterキーを押すと計算の答えが表示され電卓も出てきます。

地味なようでいて、とても便利な技です。

単位の変換や複雑な計算もできます。普通の計算アプリよりもずっと多機能です。

Chromeの便利技：さくっとサイトのセキュリティーチェック

また、このサイト何だか怪しいな、大丈夫かな、と思った時には、Chromeのアドレスバーの一番左の「右端に折り目がある紙のようなマーク」、もしくは「南京錠マーク」をクリックしてみると、そのサイトの自分の現在地の取得状況など、そのサイトがどういった情報を取得しているかある程度分かります。

インターネットの買い物などで、より慎重になることができそうです。

Chromeの便利技：タイトルをさくっと確認

あとはアドレスバーとは関係ないのですが、タブにマウスのポインターをあわせると、そのタブで表示されているページのタイトルをすべて確認することができます。

Chromeの意外と知らないショートカットキー：さくっとアドレスバーに移動する

ちなみにさくっとアドレスバーに入力したい場合はCtrl+L（Cmd+L）キーを押すと、カーソルがさくっと移動してくれて便利です。

Chromeの意外なショートカットキー：文字だけ貼り付ける

また、便利なショートカットとしては、どこかのホームページ上の情報をコピーすると文字の装飾や画像なども丸ごとコピーされ、貼り付けるときに編集しなおし･･･なんてことがあると思います。そんなときは貼り付ける際にCtrl+Shift+V（Cmd+Shift+V）としてみてください。

文字情報だけが貼り付けできます。
※コピー元のアプリケーションと貼り付け元のアプリケーション間によっては機能しない場合もあります。

Chromeの意外と知らないショートカットキー：閉じたタブを復活

また、Ctfl+Shift+Tで以前に閉じてしまったタブをどんどん復活できます。
※設定によって遡れる数は制限されています。だいたい10個？

「ブックマークレット」を使ってChromeをより便利に！

先ほどもご紹介した「ブックマークレット」はインストールやダウンロードするのではなく「ブックマークするだけ」で使える！というところがよりGood！な点です。

Chromeの拡張機能よりもメモリを使わず軽快にその時だけ動作するのがいいですよね。

たとえばどんなものがあるのかと言うと…

表示しているページのワイヤーフレームを一気に作ってくれる「Wirify」

Wirify – The web as wireframes

Wirify

ブックマークレット起動後、しばらく待つとそのページを参考にワイヤーフレームを自動的に作ってくれます。

表示しているページ内のCSSセレクタを一気に視覚的に確認できる「MRI」

MRI :: for web developers

MRI

ブックマークレット起動後、セクレタ名を入力すると該当のセクレタを浮き立たせて見せてくれます。

表示しているページのフォントの名前を教えてくれる「WhatFont Tool」

WhatFont Tool – The easiest way to inspect fonts in webpages « Chengyin Liu

WhatFont Tool

ブックマークレット起動後、知りたい箇所をクリックするとその箇所のフォントの名前を教えてくれます。

表示しているページのスマホ表示やタブレット表示を簡単に確認できる「VIEWPORT RESIZER」

Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar

上記URLの「CLICK OR BOOKMARK」ボタンをブックマークツールバーに登録してください。

ブックマークレット起動後、画面左上に各デバイスごとの表示を切り替えることができるツールが出現します。

表示しているページのCSSの情報をさくっと教えてくれる「XRAY」

XRAY :: for web developers

XRAY

ブックマークレット起動後、確認したい箇所をクリックするだけで詳細な内容を確認できます。

どうですか？
WEB制作者には涙が出るブックマークレット達ではないでしょうか？

参考リンク：
ウェブデザイナー＆コーダーが押さえるべきブックマークレット10選 | 株式会社LIG
頻繁に使用している便利なお役立ち系ブックマークレット・19個 – かちびと.net

ご自身のライフスタイルやお仕事、趣味に合ったブックマークレットや便利技を探してみると、より時短が可能になるのではないでしょうか？

ぜひ参考にしてください。

STRA株式会社では随時SES事業のニュースを
FacebookとTwitterでお届けしています。
いいね！とフォローをして、
最新の情報をチェックしてください。

Follow @stra_co_ltd

＜著者情報＞

STRA株式会社
- http://stra.co.jp/
コンテンツ企画・制作編集部（監修：石岡章司）
stra_co_ltd
STRA.official
STRA株式会社のコンテンツ企画・制作編集部ではフリーエンジニアの皆様に向けたお役立ち情報や業務委託案件のご紹介、人材情報のご提供のほか、ホームページ制作を検討中の方に向けたお役立ち情報を日々お届けしています。

STRAが提案するホームページはすべて”本当の価値”を目指したものです。ホームページの"本当の価値"とは何か――STRAは"売れる＋叶う＋喜び"と考えています。

無限の力を秘めたクラウドソーシングを最大限活用し、サイトの大小、規模を問わずさまざまな角度からご要望やお悩みを徹底的にヒアリングしてあらゆるリソースを使って最も"本当の価値"のあるホームページに向けてあくまでお客様本位の側に立って考え提案しています。ホームページのコンセプトはどうするか？　デザインはどうするか？　こういったすべての意思決定をSTRAではすべてオンライン上で完結します。スピーディーなSTRAのご対応にお任せください！

WEBで成功したい方は・・・
こちらよりお問い合わせ！

法人様・個人様を問わずSTRAが全力でお応えします。
どんなことでもお気軽にご相談ください。

お問い合わせ種別必須	WEB制作についてSEO・アクセスアップについてパートナーシップについてご意見・ご提案採用情報についてその他のお問い合わせ
ご担当者名必須
御社名任意
メールアドレス必須
お電話任意
ご住所任意
お問い合わせ内容必須
以下のご利用規約・プライバシーポリシーをご一読、ご同意の上送信してください。
ご利用規約第1条　規約本規約は、STRA株式会社（以下「当社」という。）が運営する公式サイト『http://stra.co.jp』（以下、｢本ウェブサイト｣という。提供される全てのサービスに適用されます。第2条　サービス本サービスとは、本ウェブサイトを通じた求職・求人、及び、それに関連するサービスを利用目的とするサービスとします。ユーザとは、本サービスを利用する個人とします。本サービスを利用する者は、本規約の内容をすべて承認したものとします。当社および当社のサービス利用企業は、本サービスを提供する際に、ユーザに対し、Eメールやダイレクトメール、及び郵便、電話、ファックスによって連絡させていただくことがあります。第3条　禁止行為ユーザは、次の行為をすることはできません。登録に際し、虚偽の情報を提供すること。当社、他のユーザ又は第三者の著作権等知的財産権の侵害に当たる行為。当社、他のユーザ、又第三者の財産権やプライバシーに関する権利、その他の権利又は利益を侵害する行為。本サービスで得た情報を、本サービスの利用目的の範囲を超え第三者に譲渡し、又は営利を目的とした情報提供活動に活用すること。コンピューター・ウィルスや有害なコンピューター・プログラムを含む情報を送信する行為。本サービスの運営の妨げの可能性がある行為。本サービスを利用する他のユーザ又第三者を誹謗中傷していると見られる行為。公序良俗に反すると思われる行為。法令に反する全ての行為。その他、当社が不適切と判断できる全ての行為。第4条　責任ユーザは自らの意思によって本サービスを利用します。ユーザーは、自ら登録した情報に関しては、一切の責任を負うものとします。登録情報は、本サービスを利用するために必要な範囲内で、常にユーザが責任をもって利用目的に沿い、正確、最新に保つものとします。第5条　登録情報の削除ユーザによる情報の送信、提供等の行為が本規約第2条に規定された行為に該当する可能性があると当社が判断した場合には、ユーザ通知することなく、当該情報の全部又は一部について、削除、送信停止その他必要と認める措置を講じることとします。ユーザが本規約の規定に違反した場合には、ユーザに通知することなく、ユーザの登録を抹消できるものとします。第6条　登録情報の利用ユーザは、本サービスにおいて提供した情報のうち、個人を特定する情報を以外の情報を、当社が日本の国内外で無償にて使用する権利を許諾したものとみなします。また、ユーザは著作者人格権を行使しないものとします。第7条（個人情報の取り扱い）本サービスにおける個人情報の取り扱いについては、「個人情報保護方針」をご確認ください。ユーザは、本サービスを利用する場合には、当該個人情報保護方針を承認したものとさせていただきます。第8条　サービスの変更当社は、本サービスの運営を良好に保つため、ユーザに対して事前の通知なく、本サービスの内容を変更することがあり、ユーザはそれに対して異議を申し立てないものとします。第9条　サービスの停止当社は、以下のいずれかに該当する事由が発生した場合、ユーザへの事前の通知及び承諾を要することなく、本サービスの停止または終了を行うことができます。本サービス運営のためのシステム（以下「システム」という。）の保守、更新等を定期的、若しくは緊急に行う必要性がある場合。通常講ずるべきウィルス対策では防止できない不可抗力により、本サービスの提供が困難な場合。突発的なシステムの故障等が発生して、サービスの運営が困難な場合。その他、不測の事態により、本サービスの提供が困難であると当社が判断した場合。第10条　ユーザによる登録の削除ユーザは、自らの意思により本サービスへの登録情報を削除できます。第11条　免責当社は、企業情報等の第三者の情報、広告その他第三者により提供される情報、ユーザ等が本サービスに登録し掲載する情報等に関し、内容の正確性について保証しません。ユーザの本サービスへの登録及び本サービスの利用から生じる一切の損害に関して、当社は責任を負わないものとさせていただきます。当社による本サービスの提供の中断、停止、利用不能又は変更、ユーザ情報の削除又は消失､ユーザの登録の抹消、本サービスの利用によるデータの消失又は機器の故障若しくは損傷、その他本サービスに関連してユーザが被った損害につき、一切の責任を負わないものとします。本ウェブサイトから他のウェブサイトへのリンク又は他のウェブサイトから本ウェブサイトへのリンクが提供されている場合でも、本ウェブサイト以外のウェブサイト及びそこから得られる情報について、当社は一切の責任を負わないものとします。本サービスは、就職・転職活動の成功を保証するものではありません。当社の責任を免責する本規約の条項が消費者契約法等の法令に反することによって無効となる場合や、その他の理由によって当社がユーザに対して損害賠償責任を負うべき場合、当社の賠償責任は、ユーザに生じた直接かつ通常の損害の範囲に限るものとさせていただきます。第12条　規約変更当社は、ユーザの承諾を得ることなく、本規約を随時変更することができます。第13条　規約譲渡ユーザは、当社の書面による事前の承諾なく、本規約に基づく権利又は義務につき、第三者に対し、譲渡、移転、担保設定、その他の処分ができません。当社は本サービスにかかる事業を他社に譲渡した場合、当該事業譲渡に伴い本規約に基づく権利及び義務並びにユーザの登録情報、その他の顧客情報を当該事業譲渡の譲受人に譲渡することができ、ユーザはその譲渡につき予め同意したものとします。また、会社分割やその他事業が移転する状況を含むものとします。第14条　損害賠償義務ユーザが本規約に違反し、当社に対し損害を与えた場合、ユーザは当社に対し、損害賠償義務を負担するものとします。第15条　準拠法及び管轄裁判所本規約の準拠法は日本法とし、本規約に関する紛争については、当社の本社所在地を管轄する地方裁判所または簡易裁判所を第１審の専属的合意管轄裁判所とします。第16条　実施本規約は2013年12月24日から実施するものとします。プライバシーポリシー STRA株式会社は、個人のプライバシーを扱うサービス業の特性を踏まえ、個人情報の取扱いに細心の注意を払っております。自主規制基準を遵守の上、個人情報の取扱いに関する基本方針を以下のように定め、個人情報の漏洩などを防止し、取扱う個人情報の保護に努めます。 STRA株式会社は、個人情報の取扱いに関する自社の規範を遵守します。 STRA株式会社は、事業の内容及び規模を考慮した適切な個人情報の取得、利用及び提供を行います。本サービスをご利用するお客様の個人情報は、STRA株式会社が本サービスを提供するために適切な場合に限り使用されます。それには必要な範囲を超えた個人情報の取扱いを行わないこと及びそのための措置を講じることを含みます。 STRA株式会社は、本人の同意がある場合又は法令に基づく場合を除き、個人情報を第三者に提供することはありません。 STRA株式会社は、個人情報の漏洩、滅失又は紛失の防止及び是正のための措置を講じます。 STRA株式会社では、個人情報保護に関する管理の体制と仕組みについて継続的改善を実施します。 STRA株式会社では、お預かりした個人情報は目的以外には利用しません。