はてなブックマーク

Gitってなんだか難しそう、と思っている人もいるかもしれません。 Gitはすべてのコマンドを暗記する必要はありません。必要になったら調べるのは、ごく普通のことです。重要なのは、そのコマンドがどのような影響を与えるかを理解することです。 Gitの出発点として、日常的によく使用するコマンドとそれらのコマンドがどのような影響を与えるのか、そしてやってはいけない間違いを紹介します。 The 15 Git Commands Every Software Engineer Uses by Hadil Ben Abdallah 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに git status -リポジトリの現在の状態を確認する git init —新しいGitリポジトリを初期化する git clone —リモートリポジトリをロー

CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。 CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。 ReliCSS ReliCSSは、古いブラウザ固有のCSSハックを識別し、デベロッパーが現在の仕様に準拠したCSSに置き換えることができるように設計されたCSSハックの検出ツールです。 このツールの目的は、クリーンでメンテナンス性の高いCSSを記述できるよう支援したいと考えたもので、古いCSSとモダンCSSとの間のギャップを埋めることを目指しています。

Web制作者の長年の悩みがようやく解決されます！ CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。 Chromeの次のバージョンである145では、vwのサイズに垂直スクロールバーの幅が認識されるようになり、100vwにした場合スクロールバーの幅のサイズを含まずに幅いっぱいとして機能するようになります。 まずはChromeのみですが、CSSワーキンググループで議決されたので、他のブラウザも随時サポートすると思います。 Using 100vw is now scrollbar-aware by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CursorやVS Codeのエディタで、インデントのガイドラインをアクティブなガイドラインだけハイライト表示させる方法を紹介します。 通常（左）はその箇所を含むすべてのインデントのガイドラインが表示されますが、右のようにアクティブなガイドラインだけを表示できるようになります。 参考: VS Code – highlight just the active indent guide インデントのガイドラインを表示させる方法 アクティブなガイドラインだけ表示させる方法 インデントのガイドラインを表示させる方法 まずは、インデントのガイドラインを表示させる方法から。 CursorもVS Codeもデフォルトではガイドラインをホバーで表示するになっていますが、一応。 設定を変更する方法はCursorとVS Codeは同じ。歯車アイコンをクリックして「設定」を開く、または右上のアイコンをクリックし

※本ページは、アフィリエイト広告を利用しています。 『HTML＆CSSポケットリファレンス』の改訂第4版が、発売されました！ 先週発売されたばかりの最新刊で、HTML Living StandardとモダンCSSに対応したリファレンス本です。もちろん、最新のブラウザにも対応しており、HTMLとCSSの基礎知識からこれから使うであろう最新機能まで、収録されています。 2026年になり、よし今年もがんばるぞ！ という人にぴったりの一冊です。 本書は2014年に刊行されて以来、だいたい4年ごとに改訂版となり、2026年ついに改訂第4版が発売されました。リファレンス本として本書の大きな特徴は、逆引きの目的別で掲載されており、サンプルコードもシンプルで、分かりやすいことです。

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。 直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。 14 logic-driven UI design tips to improve any interface by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペース要素は関連性に基づいて分類される 2. UI要素のコントラスト比が3:1であることを確認する 3. もっとも重要なアクションには単一のプライマリボタンを使用する 4. ボタンは十分なサイズを確保する 5. 重要なコンテンツが視認可能であることを確

Chromeは先日のアップデートで、1つのタブ内を分割して2つのWebページを表示できるようになりましたが、さらに便利に進化して、タブを垂直で管理できるようになります！ 水平だとタブを10個くらい開くと、タイトルが小さくなってしまいますが、垂直だとタブを20個くらいにしても問題ないので、使い勝手がよさそうです。 Chromeで垂直タブを有効にする方法 Chromeで垂直タブを使ってみた Chromeで垂直タブを有効にする方法 垂直タブはChrome 145で機能フラグを設定することで利用できます。 アドレスバーに「chrome://flags/#vertical-tabs」を入力。 「Vertical Tabs」のフラグを「Enabled（有効）」にしてChromeを再起動。

昨年末にリリースされたばかり、Chromeの便利な拡張機能を紹介します。 MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。 デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。 MiroMiro -Chromeウェブストア この拡張機能は年末にリリースされたばかりで、まだユーザー数は多くありませんが、これから伸びてくると思います。 MiroMiroの主な機能は、下記の通り。 使用されているカラー・フルパレットを抽出 使用されているフォントを抽出 画像ファイル、アイコン、SVGを抽出 Lottieアニメーションを抽出 CSSスタイルを抽出 これらを1クリックするだけで、すべてを見ることができ、必要なものだけダウンロードすることもできます。 ということで、MiroMiroを

1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロールの方向を探知する@scroll-stateなど、Web制作者は要チェックです！ また、ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるようになりました！ New in Chrome 144 Chrome 144 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 1つのタブ内を分割して2つのWebページを表示 CSSのアンカーポジショニングとトランスフォーム ページ内検索でハイライトする疑似要素 アンカーポジショニングにaria

年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。CursorやVS Codeで使用できる最近人気のテーマや機能拡張を紹介します。 下記のリンク先は、すべてVisual Studio Marketplaceです。 VS Codeにインストールするには「Install」ボタン、Cursorにインストールするには拡張機能から検索してインストールできます。 Cosmic Nebula Themes 宇宙・星雲の名の通り、宇宙の神秘的な美しさにインスパイアされてデザインされたテーマ。星雲の深みのあるパープルの背景と地球外生物を思わせるグリーンのアクセントカラーが読みやすさを向上させるコントラスト比を確保し、長時間のコーディングでも目の

2025年、当サイトで公開した記事の中から注目された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 AI関連 デザインのテクニック・インスピレーション Adobe, Figma, Affinity, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2025年はこれまで以上に大きく変化した年でした。2024年まではAIは活躍の場が限定されていましたが、2025年はさまざまなシーンに取り入れられ、仕事や生活の場で欠かせないも

※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリの制作、UIデザインにFigmaを使用している人も多いと思います。確かに初期のFigmaはデザイナーがUIデザインに使うツールとしてがメインでしたが、現在のFigmaはアップデートが重ねられ、上流工程から下流工程まで幅広く活用できるツールに進化しています。 Figmaをデザイナーだけでなく、エンジニアやPMなどを含むチーム全体で活用し、デザインのコラボレーションツールとして生産性を向上させるための手順やテクニックを詳しく解説した解説書を紹介します。 本書は株式会社ニジボックスの2冊目となるFigmaの解説書です。前書『つくって、みなおす、デザインシステム』（紹介記事）では、実際のワークフローに基づいたデザインシステムの解説書でFigmaは部分的にしか触れられていませんでした。 本書は完全にFigmaの解説書、デザ

2025年11月にAffinityが無料化という大きなニュースがありましたが、同時に既存のv1, v2ユーザーに有料フォントを無料でプレゼントするという予告も実はありました。 気がつかなかった人や忘れていた人もいるかと思いますが、ようやく既存ユーザーに有料フォントをプレゼントする企画が実施されたので、紹介します。 Affinity 1/V2 ユーザーへの特別な感謝 対象はAffinity v1, v2のユーザーで、2025年11月1日以前に Affinityを購入した人限定。かつ、Affinityに登録済みである必要があります。 ※無料化になったv3からのユーザーは、対象外です。 購入したけど、Affinityに未登録の場合は、Affinity 1/V2 ユーザーへの特別な感謝の下部のFAQに登録する方法が記載されています。 無料でダウンロードできる有料フォントは、41書体453スタイル。

2025年のCSSの新機能のまとめは、いよいよ最終回。 今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！ attr()関数の進化 テキストの配置をより細かく制御できるtext-boxプロパティ ついにCSSで使えるようになったif()関数 関数を自分で定義できる@function スタイルクエリとif()における範囲構文 width: 100%;より便利なstretchキーワード など、2026年はこれらの機能を使用していきたいですね。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに エルゴノミクス: CSSのattr()関数がパワーアップ エル

ぱっと見、なんてことはないエフェクトのように見えるかもしれませんが、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクトを紹介します。 シンプルなHTMLに、CSSをコピペするだけで簡単に実装できます。 実際の動作は、デモページでご覧ください。 「config」でそれぞれの数値を大きくすると、挙動がより分かりやすくなります。 See the Pen CSSで実装する繊細なパルスエフェクト by coliss (@coliss) on CodePen. HTMLはシンプル、ボタンはbutton要素で実装し、data-border-pulseを付与します。

先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、2025年、CSSの新機能のまとめ: 進化しているインタラクション編を紹介します。 今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに インタラクション: scroll-stateクエリ インタラクション: ツリーカウント関数 インタラクション: scrollIntoView()コンテナ インタラクション: ネストされたビュー

Perl, Haskell, bash, Rust APLなど、記号文字を多用するプログラミング向けに、記号文字を英数字と同等の第一級グリフとして扱い、エディタに調和をもたらすことを目指してデザインされた等幅フォントを紹介します。 Myna -GitHub Mynaは、作者のタイポグラフィの渇望を解消したいという長年の思いから生まれたフォントです。作者はこれまで多くの等幅フォントを使用し、このフォントは微調整をしたい、この文字の形状をすこし変えたいと感じていました。 多くのフォントでは記号文字を二級グリフとして扱っており、たとえば->が矢印に見えなかったり、$, @, %が揃っていないように見えます。そんな不満を解消するべく、記号文字を第一級グリフとしてデザインされたのが、Mynaです。 ライセンスはSIL Open Font License 1.1で、個人でも商用でも無料で利用できます。

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2025年、Web制作者がチェックしておきたいCSSの新機能: カスタマイズ可能な新しいコンポーネント編を紹介します。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに コンポーネント: JavaScriptなしで<dialog>のモーダルで表示する方法 コンポーネント: dialog要素のclosedby属性 コンポーネント: popover=hint コンポーネント: select

※本ページは、アフィリエイト広告を利用しています。 クライアントとのやり取り、チームでのヒアリングが思うようにいかないと悩んでいる人にお勧めの良書を紹介します。 私はクライアントとのやり取りやヒアリングは好きな方ですが、本書を読んで「なるほど」と思うことが多々ありました。クライアントとのやり取りがある人は一度目を通しておくことをお勧めします。 著者の佐野 五月氏による初の書籍となる本書は、デザインワークの解説書でも一部として取りあげられる「ヒアリングの重要性」についてフォーカスしたこれまでになかった実践的な一冊です。 クライアントをはじめ、上司、部下、チーム、フリーランスなど、立場の違いによるヒアリング術も詳しく解説、「こういうことってあるよね」と頷きながら学べます。

2025年もいよいよ年の瀬です、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 漢字も揃った手書きフォントをはじめ、バリアブル、ゴシック、丸ゴシック、明朝、筆文字、ドットフォントなど、今年も盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気になったフォントから。 バリアブルの日本語フリーフォント「アングル」をリリースしているtoktaro fontsの新作フォント。

ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。 依存関係はなしで、スマホでもタブレットでもデスクトップでも機能します。 spoilerjs spoilerjs -GitHub spoilerjsの特徴 spoilerjsのデモ spoilerjsの使い方 spoilerjsの特徴 spoilerjsは、依存関係のないWebコンポーネントで、ネタバレ警告付きのテキストを一時的に非表示にすることができます。 ビジターがネタバレのテキストをクリックすると、Telegramアプリにインスパイアされた美しいパーティクルアニメーションとともにテキストが表示されます。パフォーマンスが高く、実装も簡単で、あらゆるモダンブラウザで動作します。 sp

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。 Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーン（連鎖）とは overscroll-behaviorの問題点 スクロールチェーン（連鎖）を回避する方法 はじめに 2026年1月にリリース予定

Pantoneから2026年のトレンドカラーが発表されました。 2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイトの「クラウド ダンサー（Cloud Dancer）」、新たな始まりを示唆した色合いです。 ホワイトという色は純粋、無垢、完全を象徴しており、あらゆるデザインやプロダクトに調和し、コントラストを生み出す色調で、単独でも他の色相との組み合わせでも、軽やかな印象を与えるカラーです。 Pantone Color of the Year 2026 PANTONE 11-4201-TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラー「クラウド ダンサー」を使用した配色 クラウド ダンサーのカラーデータ PANTONE 11-4201 TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラーとして、Pantoneはホワイト

※本ページは、アフィリエイト広告を利用しています。 さまざまな色が紡ぐ物語、おとぎ話に登場する色、花や草木、宝石などの色、神話や歴史に登場する色、色には色の数だけ物語があります。 心が惹かれる150色の物語が収録された、かわいくて小さな本を紹介します。自分へのご褒美として、大切な人へのプレゼントとしてもぴったりな一冊です。 著者の桜井 輝子氏は配色アイデア手帖（紹介記事）をはじめ、色に関する本を数多く出しており、最近では色彩検定の本（紹介記事）も当ブログで紹介したばかりです。 本書はこれまでの本とは異なり、色に関する物語、色の美しい世界にときめいて知識が深まる本です。判型はA6判で、私のちょうど手のひらサイズ、小さくてかわいい書籍で、装丁も非常に凝っており、手にした瞬間、嬉しさを感じられると思います。 誰も知らない色の物語 色の美しい世界にときめき、知識が深まる本 ISBN 978-4-2

12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいクエリ、background-position-x/yの相対構文、font-language-overrideプロパティなど、Web制作者は要チェックです！ New in Chrome 143 Chrome 143 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのアンカーコンテナクエリでフォールバック位置を検出 background-position-x/yの相対構文 CSSのfont-language-overrideプロパティ TextForm

デスクトップ用のモニターをはじめ、ノートパソコンのスクリーン、タブレット、スマホ、テレビ、プロジェクターなど、さまざまなデバイスのあらゆるスクリーンのドット抜け、単色テスト、グラデーションテスト、グリッドパターン、モーションテストができる無料ツールを紹介します。 今使っているデバイスの定期チェック、新しいデバイスを購入したとき、中古のデバイスを購入したときに、このツールを使って検証することができます。 Free Screen Test Tool Free Screen Test Toolはデスクトップのモニターからノートパソコン・タブレット・スマホまで、全デバイスのスクリーンのドット抜け・表示ムラをテストできる無料ツールです。 登録など面倒なことは一切不要、簡単に利用できます。 Free Screen Test Tool Free Screen Test Toolでテストできる機能は4つ。

日本人のクリエイターが描いた、海外風のポップでおしゃれなイラスト素材がダウンロードできるサイトを紹介します。 イラスト素材は透過PNGとSVGが揃っており、個人でも商用プロジェクトでも無料で利用できます。