mania-ku

何か作りたいプログラマ未満。

【Chrome】スマホサイトの1ページまるごとキャプチャする

スマホサイトのチェックなんかのときにページまるごとキャプチャしたいときがありますが、そんなときに使えます。

Chromeの準備

  1. 1.Chromeを開きます
  2. 2. Awesome Screenshotをダウンロードして有効化します
  3. 3.ChromeでDeveloperツール(MacだとAlt + Command + I)を開いて、EmulationからiPhone5あたりを選びます

キャプチャを撮る

  1. 1.キャプチャを撮りたいページを開きます
  2. 2.表示領域の下にスペースが空いていたらぴったりの画像が撮れないので、Developerツールを移動させるかなんかして下を詰めます
  3. 3.Chromeでaマークをクリックします。一度目は説明ページに飛ばされるが、二度目を押すと詳細が表示されます
  4. 4.ページ全体を撮りたいときは「Capture entire page」をクリックします
  5. 5.撮れたら保存画面に移動するので、「完了」をクリックして保存します

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Chrome】フォントサイズ大きい+太字だと、text-decoration: underline;が残る

Chromeでフォントサイズ大きい+太字だと、hover時text-decoration: none;にしてもunderlineっぽいものが残ってしまいます。
18pxから起きるようです。

【ブラウザ】jsを一時的に無効にする

検証で一時jsを無効にしたいときがあるので、その方法をメモ。

Firefox

検索窓にabout:configと入力してEnter。
検索にjavascript.enabledを入力して、
javascript.enabledを右クリックして、切り替えを押す。

※値がfalseならjsが無効、trueなら有効

参考サイト:Mozilla Re-Mix: Firefox 23でJavaScriptを無効にする方法。

Safari

開発>JavaScriptを無効を選択

Chrome

Chrome>環境設定(検索窓にchrome://settings)>プライバシー>コンテンツの設定>すべてのサイトに対して Javascript の実行を許可しないにチェック