知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher
エンジニアを始めてから便利だったツールまとめ
概要 エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめました。 ※WEB用ツール多め GUIツール・アプリ デスクトップ上で動作させるやつ。 Authy https://authy.com/ 2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。 Hyper https://hyper.is/ コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。 設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。 VSCode https://code.visualstudio.com/ 言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。 豊富なプラグインや設定で、Hype
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方
CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント
ついにSafariでもaspect-ratioプロパティがサポートされると先日のWWDC21で発表がありました（参考: webkit.org）。これで主要ブラウザすべてにサポートされることになり、aspect-ratioプロパティの基礎知識、便利な使い方、そして実装に必要なプログレッシブエンハンスメントについて紹介します。 CSSのaspect-ratioプロパティを使用すると、レスポンシブ対応の画像や下記のようにサイズが異なるロゴ画像を揃えて配置するのも簡単に実装できます。 Let's Learn About Aspect Ratio In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アスペクト比とは アスペクト比の算出方法 CSSでのアスペクト比の実装 aspect-r
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
ガチ勢のケーブル保護チューブを導入したら、大嫌いなケーブル整理が快感に変わった話｜山下義弘／ドケットストアの人
「電気の配線がごちゃごちゃになってるよ」 そう。 そんなことは、言われなくてもわかっている。 気づいたらいつの間にか、ケーブルはお互いに絡みに絡んでごっちゃごちゃになっている。 別に絡ませたいわけでもなく、絡ませるよう努力したわけでもなく、誰かが触ったわけでもないのに・・・。 小売チェーン店で働いていたときには、「スパイラルチューブ」なるものを使って複数の配線をまとめなさいと上司から指示を受けては、最寄りの百均なんかに買いに走った。 でも、このスパイラルチューブというのが曲者で、グルグルとコードに対して巻けば確かに綺麗にまとまるのだけど、まあとにかく１ｍ巻くのにも時間がかかる。 おまけに、途中で配線を増やすとか、途中で枝分かれさせようとか、綺麗にしようとしだせば・・・もう思い出しただけでもうんざりするくらい手間がかかる。 でも、配線あるところそんな悩みはどこまでも付いてくる。 お店で家電の
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
「フリーランス・副業向けサービス カオスマップ2020年完全版」が公開
昨年、作成・公開した＜フリーランス向けサービス カオスマップ2019年完全版＞に対して、フリーランスや複業ワーカー、関連企業から非常に多くの反響があったという。2020年も新たなサービスが続々と誕生し、最新情報をシェアすることで、役に立ちたいと思い、2020年完全版を作成したとのことだ。 １）「仕事獲得」でさらなる職種特化・地方特化型サービスの台頭 新型コロナウイルスにより、リモートワークが拡大する中で、「多拠点生活」「ワーケーション」「関係人口」などのキーワードがよく見られた。近年注目されている「地方創生」との相性もよく、都市部と地方を行き来するような生活や働き方が増え、それらを軸にした地方案件に特化したプラットフォームが誕生した。また働き方の自由度が上がった一方、自己判断で決めていく場面が増えてきており、専門家のアドバイスやモチベーション維持を目的とした「コーチング」の仕事獲得サービス
無料で使えるモバイルアプリ制作用のプロトタイピングツール
2016年2月18日 スマートフォン, 便利ツール 以前「Webサイトのプロトタイプ制作に使える無料オンラインツール」というのを記事にしましたが、今回はモバイルアプリ制作に特化したツールを調査してみました。ただ、知らない間に便利ツールが増えまくり、あまりにも数が多いので無料で使えるものに絞り、さらに使ってみていいなと思ったものを集めました。それでも数が多いので…あとは実際にみなさんで試してみて、自分にあったものを探してみてください！ ↑私が10年以上利用している会計ソフト！ おすすめ無料プロトタイピングツール Marvel Marvel 無料プランでもプロジェクトを無制限に作成できちゃうプロトタイピングツール。ブラウザー上で編集していきます。リンク先となるページ画像がサムネイルで表示されていて、ページ推移時のアニメーションも分かりやすいです。コメント機能もあり。 完成したプロトタイプはUR
Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。 tailblocks -GitHub tailblocksの特徴 tailblocksのデモ tailblocksの特徴 tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。 参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator