この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。 開発環境がしやくなる拡張機能がたくさんあるChromeですが、たくさんあってどれを選べばいいか分からないと悩んでる方もいるかと思います。 今回紹介するものは僕が実際に使用しているものの中から、自分的に便利だと感じたポイントを絞ってお伝えしているので参考になるのでは無いかと思います！ 新しい情報が入り次第どんどん更新していってますので、定期的にチェッ

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です

2ヶ月前にMacbook Proを購入した際、以前の設定移行ではなく、一から設定し直しました。そのおかげでストレージの無駄がなくなり、スッキリとした状態でPCワークできています。 今回Chrome拡張機能も見直しをおこない、2ヶ月が経過しました。現在利用しているChrome拡張機能について紹介します。 1Password – パスワード保管庫 パスワード管理ができる1Password。Chromeのパスワードマネージャーもいいのですが、ここ2ヶ月ほど便利に使えているのでこちらをメインに。 Touch IDで解除できるのはとてもラク。レビューは酷いですが、私は満足しています。 1Password – パスワード保管庫 Save image as Type WebP画像をJPG、PNG形式でダウンロードできるChrome拡張機能 Save image as Type。 右クリックからサクッとダ

Web制作に役立つ機能、ルーラー・ガイドを表示したり、ボックスモデルを視覚化したり、カラーピッカーやカラーパレットを取得、気になった要素のHTMLとCSSをCodePenに表示させたりなど、たくさん用意されているChromeの便利な機能拡張を紹介します。 SuperDevはオープンソースで開発されており、SuperDev -GitHubでコードも公開されています。2022年現在、ChromeとEdgeとBraveの機能拡張として利用できます。 SuperDevをChromeで利用する場合は他の機能拡張と同様に、Chrome ウェブストアからインストールできます。

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca

サイトを閲覧中に「このサイトの過去のページが気になるけど、わざわざインターネットアーカイブにアクセスしてウェイバックマシンで検索するのはちょっと面倒」と思ったことがある人は少なくないはず。無料でインストール可能なChromeおよびFirefox向け拡張機能「Vandal」を使うと、ウェイバックマシンが収集したスナップショットを簡単に見ることができます。 Vandal | Navigator for Web Archive https://vegetableman.github.io/vandal/ 上記のURLにアクセスすると、以下のように表示されます。VandalはChrome版とFirefox版が用意されていますが、今回はChromeに導入するため「ADD TO CHROME」をクリックします。 続いて「Chromeに追加」をクリックします。 「拡張機能を追加」をクリックします。 導入

ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com

「これは強い」「外国語で発言し放題！」――12月24日ごろから、AI翻訳ツール「DeepL」の公式Chrome拡張が話題になっている。一度導入すれば、ブラウザ版のGmail、Twitter、SlackなどさまざまなWebアプリで、英語や中国語などを読み書きできる。

<

Tesla is reportedly getting 'absolutely hard core' about more layoffs, according to Elon Musk

前提 Google Chrome 79.0.3945.130 なお94.0.4606.71でも変わってなかった DevToolsで確認したかった ちょっとした処理を実行する際、scriptタグ内や.jsファイル内に書いて実行するより心理的ハードルが低いDevToolsのConsoleで実行することがあると思います。 今回実行したのは以下のようなコードでした。

情報管理LOGの@yoshinonです。 Chromeの隠れ機能にリーダーモードがあるのをご存じでしょうか？ これは、広告やサイドメニューなど読みづらさの元になるような要素を排除して、記事だけを表示するモードです。PocketやEvernoteのWeb Clipperなどのサードパーティーを使用すればできたのが、何も使わなくてもできるようになったのは、便利ですよ。 今回は、この隠れ機能を発現させる方法なども含めて書いていきます。 Chromeには、実は隠れ機能がたくさんあります。 「chrome://flags」とアドレスバーに打ち込みましょう。 そうすると、隠れ機能が、見えるようになります。 これは、試験運用版の機能なので、取り扱いはあくまでも自己責任でお願いします。とはいえ、かれこれ１ヶ月近く運用していますが、今のところ特段問題も発生していないので、大丈夫かなとは思います。 見たら分か

Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。 /* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003, 2004, 20

[レベル: 上級] Chrome 94 のデベロッパーツールが日本語を含む 80 以上の言語で利用できるようになります。 デベロッパーツールを日本語で使う デベロッパーツールを日本語で表示にするには、右上にある歯車アイコン⚙️から言語設定を変更します。 [Language] という項目があります。 ここから [Japanese – 日本語] を選びます。 もしくは [Browser UI Language] を選択すると Chrome 本体で設定している表示言語に合わせられます。 Chrome を日本語で使っていれば、それに合わせてデベロッパーツールの UI も日本語になります（ブラウザ全体の言語とデベロッパーツールの言語は独立している）。 Chrome 94 でデベロッパー ツールを初めて起動したときに、言語変更ができるようになったことを通知するバナーが出てくるかもしれません。 言語を変