Thinking Salad | いろいろ考えたことをそれなりに整理してそれっぽくするブログ。そう、サラダのようにね！
CSSの新しい設計思想を作りました 2016/05/08 CSSの新しい設計思想を作りました。PRECSS（プレックス）といいます。 OOCSS、SMACSS、BEMがベースのモジュール設計になっており、CMSやフレームワークが出力する... 続きを読む タグ: HTML/CSS, JavaScript カテゴリ: Technology Bracketsの解説書を出版しました 2015/12/24 今まで主にQiitaや勉強会にてBracketsの情報を発信してきましたが、点在していたそれらをまとめ、1冊の本として出版しました。 基本は今まで発信してきたものがベースになって... 続きを読む タグ: Brackets カテゴリ: Technology 人生最強のコアスキル a.k.a 開発業務から日常にまで使える最強のスキルについて 2020/01/18 2020/1/18 札幌にて行われ
これはオススメしたい！『Google Chrome』拡張機能12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのともぞうです！ あっというまに夏が終わり、気づけば今年も残り少なくなってきて焦ります……。 今回は、業務効率化でかかせない Google Chrome の拡張機能をご紹介します！ 気が早いですが、年末の忙しい時期に向けて効率化を図りましょう！ 業務効率編 開いているページを一気に共有！ – Copy All Urls https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk 開いているタブのURLをクリップボードにコピーしてくれます。複数の URL を共有したいときに便利です。 デザイン確認後に修正してほしい URL のみをコピーしたりするときに利用します。 1クリックでページ全体のスクショができる – Full Page Screen Cap
知らないと絶対損する！WebデザイナーのためのChrome拡張機能7選
CSSの調整、フォントの調査、画像の作成など、Webデザイナーの作業効率をアップさせるChromeの拡張機能を紹介します。 Webデザイナーなら自分なりの仕事のやり方があると思います。コードを書きながらブラウザー上で直接デザインしている人、ブラウザーは実装テストの時にだけ使う人、どんな人でもWebデザイナー向けのChrome拡張機能を使えば普段の作業が見違えるほど簡単になります。私は一番煩わしいと思っている「ちょっとした作業のために大掛かりなソフトを起動すること」をはじめ、Webデザインでありがちな問題を解決するために、Chrome拡張機能を探しています。 これなしではやっていけないほど便利なChrome拡張機能を7つ紹介します。普段Firefoxで作業をしているなら（Web開発者ならすべてのブラウザーでクロステストするはずですが）、Webデザイナー向けのFirefoxの6つの拡張機能が参
ウェブ制作の面倒をズバリ解決！オススメChrome拡張機能23個まとめ
ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれるChrome拡張機能をまとめてご紹介します。ウェブ制作に携わる、すべての人にオススメです。 便利なオンラインツールを一緒に活用して、自分だけの爆速Web制作スタイルを目指しませんか。 What Font ウェブサイトで使われている、フォントの種類を知りたいと思ったことはないでしょうか。これまではFirebug や Webkitなどを利用していましたが、What Font を使えば、気になる書体をマウスクリックするだけで確認できる、シンプルさが便利なツール。 Fontface Ninja Fontface Ninja は、ウェブサイトで使われているフォントをカーソルを合わせるだけで確認できるだけでなく、その場で購入までできます。ウェブデザイナーは持っておきたい拡張機能のひとつ。 Window Resizer Window
Brackets で使う拡張機能まとめ（自分用） - ゆとくん.com
大変気に入っている Web エディタの Brackets。これで使っている拡張機能の自分用メモ。 絶対必要なもの Autoprefixer CSS のベンダープレフィックスを自動で書いてくれる定番拡張。flex も普通に使えるようになってきて最近は出番が少ない。 Beautify インデントや <br> の位置とかを綺麗にしてくれる。 Bigger Extensions Panel 拡張機能パネルを大きくしてくれる（デフォルトだと固定サイズで使いづらい。） Brackets CSS Class Code hint その HTML が読んでいる CSS の class や id をサジェストしてくれる。 ただ、ルートパスに対応してなかったり動いたり動かなかったりするのでちょっと微妙。 Brackets Icons サイドバーでファイルの種類に応じてアイコンを付けてくれる。視認性重要。 Bra
Web制作が爆捗するBracketsプラグイン13選＆便利なプラグインを探すコツ
OSSのテキストエディター「Brackets」で使える、Web制作に便利なプラグインを紹介し、拡張機能マネージャーの使い方や便利なプラグインを探すコツ、プラグインのインストール方法について解説する。 OSSのテキストエディターの豊富なプラグインをいろいろと使ってみよう OSSのテキストエディター「Brackets」は、拡張が容易に行えて好みの環境にカスタマイズしやすいのが特徴の一つだ。 筆者は、以前の記事でもBracketsの使い方について紹介したが、今回はBracketsのお勧めプラグイン（拡張機能）を紹介していこう。 その前に、Bracketsでプラグインをインストールする「拡張機能マネージャー」を紹介しておく。 Bracketsの「拡張機能マネージャー」とは Bracketsでは「拡張機能マネージャー」を利用してプラグインのインストールやアンインストールができる。「拡張機能マネージャ
消えた AppSpector のかわりは wappalyzer が良さそう – ミルログ
AppSpector という今アクセスしてるサイトがどんな CMS やアプリを使っているか分かる便利な Chrome 拡張機能があったのですが、今日見たら何故か消えてしまっていました。 ということで何か他に代用できそうなのがないか探していると、wappalyzer というものを見つけました。Chrome と Firefox 両対応です。 Chrome版 Firefox版 AppSpector がいつの間にか復旧してました。でも個人的には wappalyzer の方が使いやすかったです。 復旧してたと思ったらまた消えてました。どうやら AppSpector にはスパイウェア疑惑があるようですが、真偽は知りません。 使ってみる 右上の拡張機能アイコンをクリックするとこんな風に出ます。 アイコンだけしか出なかった AppSpector と違いアイコン+名前+大雑把な説明を出してくれるのでわかりや
Chrome拡張機能Appspectorで、WordPressを使っている他社サイトを探してみよう！
WordPressのサイトを見分けるChrome拡張機能Appspector 普段からWordPressを使っていると、よそのサイトを見たときに「これWordPressっぽい作りだな」って思ったりしますよね。 それを一目で見分けられる優秀なChrome拡張機能があります。「Appspector」と言いまして、今見ているサイトがどんなCMSやWebアプリケーションを使っているのかをアドレスバー上にアイコン表示してくれるにくいやつです。 icon-arrow-circle-up アドレスバーにWのマークが表示され、それをクリックすると使われているPHPやJQueryのバージョンなども確認できます。 使い方は簡単。お使いのChromeから「設定」 icon-angle-right 「拡張機能」 icon-angle-right 「他の拡張機能を見る」 icon-angle-right 「Chro
BracketsでSASSを快適に利用できるようにする 拡張機能+コンパイラ | 9ineBB
WEB制作向けに特化したテキストエディタのBracketsでSASSを快適に使うための拡張機能とコンパイラの紹介。Bracketsの場合はSCSSでは、入力補完機能がデフォルトで使えたりしますがSASSでは少し不便だったりしますので、それを拡張機能でカバー出来ます。 BracketsでSASSで入力補完が使えるようにする Bracketsはこちらで入手してください http://brackets.io/ BracketsでSASSの入力補完をサポートする拡張機能 https://github.com/sprintr/brackets-sass-code-hints Bracketsに拡張機能をインストールする ファイル > 拡張機能マネージャー > 入手 > 検索 > インストール という流れで拡張機能をインストールする事が出来ます 拡張機能マネージャーの起動 拡張機能のインストール 拡張
最近Chromeが重いと感じたら…軽さを取り戻すための6つの爆速化設定 | 教えて君.net
Google Chromeが「軽さ」を売りにしていたのは過去の話。最近は先進的な機能を盛り込んだ分、重くなっており、ちょっと古いマシンで重いページを開くと、固まってしまうこともしばしば。軽量化のためのチューンアップが欠かせないのだ。基本である初級編から、ちょっとリスクのある上級編まで、Chrome軽量化のテクニックをおさらいしよう。 Chromeが重いときの対処法としては、まず、履歴やキャッシュが溜まっていないかを確認しよう。これらのデータを全て削除し、ネットワークの自動検出の設定を無効化する。ここまでが基本の設定。パソコンのスペックが充分な場合は、これでChromeは快適に動くようになるはず。 それでもまだ重い場合は、ブラウザ動作の体感速度をアップさせる工夫が必要だ。Chrome標準の「先読み」機能を有効にして、ウェブの読み込み時間を短縮。さらに、タブを複数開いているときに、使っていない
Webデザイナー必見！仕事がはかどるChromeの拡張機能3選｜経営者の集客術
ChromeはWebデザイナーにとってすごく便利なブラウザです。 今回はWebデザインの仕事がはかどる、とても強力な拡張機能を3つご紹介します。 拡張機能を最大限に活用し、用途にあわせてカスタマイズしてみてください。 1. WhatFontWhatFontは、ウェブページで使用されている全てのフォントを認識し、 フォントの種類・サイズ・色、大きさといった詳細情報を表示してくれる便利なツールです。 右クリックで「ソースを表示」してフォントを調べる、という時代はもう終わりました。 この拡張機能を導入すれば、文字の上にカーソルを置いたりクリックしたりするだけでOKです。 『WhatFont』 2. ColorZillaColorZillaは、ブラウザ上の利用可能な色情報を取得できるソフト（カラーピッカー）です。 もともとFirefox用としてリリースされましたが、Chrome用では、カラーピッカ
Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ！
WEBを制作している方が使用しているブラウザは、ほとんどがGoogle ChromeかFirefoxだと思います。 製作中に「あれ？なんか横幅がおかしい・・・？スマホで右端に空白が出てるぞ・・・？」なんて事たくさんありますよね。 そこでブラウザに搭載されている要素の検証でどこがおかしいか調べますが、いかんせんパッと見ではわかり辛く、エラー部分を探すのに時間がかかってしまいます。 過去にはFirefoxに3Dビューというものがあり、各コンテンツをビジュアル化してくれる優れた機能がありました。 しかしこの機能はFirefox Ver 47.0から廃止されました。便利な機能だったので残念です。 その代わりとなる機能を探した結果、Google Chromeの拡張機能を発見しました。 Google Chrome拡張機能「Pesticide for Chrome」Chromeウェブストアから「Pest
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
oremaru.com
【2019年版】これは便利！おすすめのChrome拡張機能32選