rebase後の強制プッシュ 以下のようにfeatureブランチをmasterブランチにrebaseして最新のmasterを取り込むことはよくあると思います。

Posted by OOHASHI on Mar 2nd, 2017 こんにちは、ひさっしーです！ 今回は、久しぶりにGitネタです。 Gitを使っている方のあるあるかと思いますが、急いで作業している時にコミットメッセージを書き間違えたままcommitしてしまった！なんてことありますよね。 また、グランフェアズではBitbucketで課題を発行してタスクをこなすことがあるので、コミットメッセージに「refs #25」などをつけてコミットを該当の課題と関連付けたりするのですが…これを書き忘れたり、間違えて違う番号にして関連付けをミスったり…ということもあったりします。 コミットメッセージを書き間違えた！ 課題との関連付けをし忘れた！ そういった迷えるうっかりさんを救う、「コミットメッセージを後から変更する方法」を今回はご紹介します！ 【初級編】直前にコミットしたメッセージを変更する 例えばこ

Photoshopでガイドを引くなら「Griddify」一択! 超絶便利Photoshopエクステンション（プラグイン）「Griddify」の紹介♪ #Photoshop #エクステンション #プラグイン #ガイド #Griddify 1．まずPhotoshopエクステンション（プラグイン）「Griddify」とは？Photoshopのワークスペースにガイドを引くための便利機能を備えたエクステンション（プラグイン）です。 2．Photoshopエクステンション「Griddify」のインストール方法。Griddifyホームページへ行く。 ZXPInstallerをダウンロード、インストール。（Adobeアプリケーションのエクステンションを簡単にインストールできるようにするためのもの） Griddifyをダウンロード、解凍。 そしてGriddify-CC.zxpをインストール。 Photosh

最近じわじわと使われ始めているグリッドレイアウト。 frという新しいサイズ単位も加わり、autoとの違いがあやふや・・・という方もいるかと思います。 そこで今回はfrの基本的な使い方と、迷いやすいautoとの違いをわかりやすくまとめてみました。 frとは frとは「fraction(分数の意味)」の略で、gridレイアウトを使うに当たって誕生した新しいサイズの単位です。 grid-template-columnsやgrid-template-rowsを使うとき、100px 200pxなどのピクセル単位などを使ったりしますが、わざわざスペースを何ピクセルか図ったりするのはわずらわしいですよね。 そんなときに便利なのが「fr」という単位です。 frを使うと、枠に合わせたグリッドの大きさを自動的に調整してくれます。例えば、

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

tabindexを使おうとした時にハマってしまったので、 備忘録として残しておく。 参考資料にも書いてあるように、aタグにはtabindexを使用しなくてもtabキーを押したらフォーカスされるはずなのだが、sampleのようなaタグにはフォーカスされずsample2のようなaタグにはフォーカスされていた。 tabキーを押した時にフォーカスされなかったaタグ

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最

最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高めカラフルなカラースキームの代表といえばGo

最近になってYahoo本社のロゴがまたアップデートされた。Yahoo! Japanのロゴはかなり長い間変更されていないのに。これはいかにも、変化スピードの速いシリコンバレーを象徴するようだ。 なるべくゆっくり進むことが多い日本文化と比べてみても企業の平均生存率が15%であるアメリカでは、”変化しない=死”を意味することもあり、ロゴのアップデートもかなり頻繁に行われる。 時代の変化に合わせてロゴもアップデートではなぜロゴを変える必要があるのだろうか？主に下記の理由が挙げられるだろう。 デジタルデバイス普及などの時代の変化ブランドやサービス価値の変化ターゲットユーザーの変化世の中のトレンドの変化会社のフェーズの変化予算が余ったからデジタルがメインになり、多くのロゴがモダンな雰囲気にそのような状況の中で、多くのロゴがどんどんモダンなデザインを採用している。具体的には、フォントに丸みを帯びたサンセ

by yooperann 2016年3月現在、国際連合には193の国が加盟していて、国ごとに異なる国旗を持っています。国旗に関するあらゆるデータを集めたサイトが「Flag Stories」で、国旗の色やデザインなどを視覚的に学ぶことができます。 Flag Stories http://flagstories.co/ ◆01：国旗に使われている色の数 全世界の国旗の3分の1以上は、3色または4色のシンプルな色使いですが、6色以上の色を使っているカラフルな国旗もあります。 ◆02：国旗の色の組み合わせ 最も多い組み合わせは赤・青・白のトリコロールです。アフリカでは赤・緑・黄色の組み合わせの国旗が多く、アラブ諸国では赤・白・緑・黒の組み合わせがよく使われています。 ◆03：国旗のメインカラー 最も多いのは赤で、原色の青と緑が続き、白と黄色はやや少数派。 ◆04：国旗に使われるシンボルマーク 全世

このたび、立教学院創立150周年事業の一環である「旧江戸川乱歩邸施設整備事業」にともない、現在の旧江戸川乱歩邸は「2023年12月20日（水）」を最終開館日として、一時休館期間に入ります（2024年10月リニューアルオープン予定）。 なお、事務室の仮移転にともない、下記のとおり、①資料の閲覧・特別利用等の制限、②取材・撮影の制限期間を設けますので、ご確認くださいますよう、お願い申し上げます。 ①資料の閲覧・特別利用等の制限 「2024年2月下旬まで」といたします（ただし、画像提供等については適宜個別に対応しますので、お問い合わせください） ②取材・撮影の制限 （1）旧江戸川乱歩邸の「応接間および母屋内」を使った取材・撮影は、原則的に「2023年12月18日（月）」までといたします。 （2）旧江戸川乱歩邸の「外観および土蔵内」の取材・撮影のみ、「2024年2月2日（金）」まで可能です。全面再

旧江戸川乱歩邸 FACILITY 推理小説家江戸川乱歩が1934年から移り住んだ邸宅と、書庫として使われていた土蔵が、2002年に立教大学へ譲渡されました。土蔵は豊島区指定有形文化財に指定されています。＊豊島区指定有形文化財 【旧江戸川乱歩邸は、立教学院創立150周年事業の一環により、 2024年1月以降改修整備工事を予定しています。工事期間および工事期間中の対応や、改修後の開館時期（2024年10月予定）等の詳細は決まり次第お知らせします。】 歴史 1934年、乱歩は立教大学に隣接するこの住宅に移り住み、70歳で死去する1965年まで住み続けました。２階建ての土蔵は書庫として利用され、一階には和書や洋書が、二階には江戸文学などの和本を配架していました。2002年、この土蔵・住宅と約２万点の蔵書等が立教大学に譲渡され、2006年に江戸川乱歩記念大衆文化研究センターが設立されました。センター

Goodpatchでクライアントワークを行う組織であるDesignDivisionには、2021/12現在100名以上のソフトウェア、ブランディング、組織など多方面なデザインに関わるメンバーが所属しています。 今後も事業・組織ともに拡大していく中で、組織課題の解決やクライアントワークにおける提供価値の拡大を支えるチームとして、DesignOpsチームが2021年の春から正式に活動開始しました。 今回は海外のDesignOpsの機能を整理しながら、Goodpatch内のDesignOpsチームについてご紹介します。 なぜDesignOpsが必要なのか DesignOpsとは、Design Operationsの略称で組織内でデザイン業務を行うにあたり各種機能を整備し、デザイン業務やデザイナーを最大化する役割を担う機能または機能を持ったチームと言えます。 Definition: DesignO

「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。

CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、覚えておくと便利なCSSのテクニックを紹介します。 これらのCSSの新機能はすべてのブラウザにすでにサポートされています。 6 CSS snippets every front-end developer should know in 2023 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに コンテナクエリの使用方法 scroll-snapによるエクスペリエンスの作り方 CSS Gridによるposition: absolute;の回避方法 簡単に円を実装する方法 カスケードレイヤーの使い方

こんにちは、WEAR Webフロントエンドチームの吉田と大脇です。 現在WEARではNext.jsでのリプレイスが進行中です。今回はリプレイスのデザイン面における課題と解決に向けて行った取り組みを紹介します。 リプレイスの経緯や技術選定については、弊社の藤井の記事をご覧ください。 techblog.zozo.com 10年の歴史のあるアプリケーションと向き合う リプレイスにおける課題 他部署との連携 デザイナーとエンジニアの歩み寄り ミーティングで話し合ったこと ミーティングを行って得た気づき デザインツールの変遷 未来のこと、これからやっていきたいこと デザイントークンの定義 デザイン周りの負荷軽減 技術面でやりたいこと Tailwind CSS Storybook 終わりに 10年の歴史のあるアプリケーションと向き合う WEARは今年で10年目となります。Webサービスとしては長期間に

転職・求人サイトBRIK JOB デザイナー・ディレクター・エンジニア・プロデューサーなどクリエイターのお仕事・転職お役立ちガイドエンジニア向けお仕事・転職コラム[2024年度決定版] フロントエンドエンジニアやバックエンドエンジニアになるための学習ロードマップを解説！

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

赤いボタンは、通常のコールトゥアクション（CTA）に使用すべきではありません。ユーザーはそれを警告と捉えてしまうからです。赤いボタンは破壊的アクションのためだけに使用しましょう。警告をあまり感じさせない寒色系のボタンは、通常のCTAに適しています。 赤いボタンは、ほとんどのユーザーに警告を伝えますが、中には深刻に捉えないユーザーもいます。視覚的な合図を追加することにより、すべてのユーザーに対して、その警告をさらに強いものにすることができます。これは特に、色の違いが見えにくい色覚異常や視覚障害のあるユーザーに有効です。 警告信号をより強力にするために、確認画面に破壊的アクションを表すアイコンを表示しましょう。 たとえば、ユーザーが見慣れている削除のアイコンはごみ箱のアイコンです。このアイコンを目にしたとき、ユーザーは現在行っているアクションを削除と関連付けるのです。 画面上部に赤いストライプ