サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
参議院選挙2025
qiita.com/xrxoxcxox
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
この状態で、レイヤー数 2 のインスタンスに swap します。 すると、1 つのレイヤーは色の変更が反映されましたが、もう 1 つのレイヤーには反映されていません。 レイヤー数 3 のインスタンスに swap した際も同様に、1 つのレイヤーにだけ色の変更が反映されています。 今度はレイヤー数も揃えます。 具体的には、複数のレイヤーがあるアイコンは Union にしてしまい 1 つのレイヤーとします。 そのままでは Rectangle と Union という 2 種類の名前が生まれてしまうので統一します。 ここでは Rectangle に揃えます。 この状態で、レイヤー数 2 のインスタンスに swap します。 無事、すべての要素に色の変更が反映されました。 レイヤー数 3 のインスタンスに swap した際も同様に、すべての要素に色の変更が反映されました。 条件にあわせて実施すること
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか?について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人にとって役に立つような内容にしたつもりです。 デザインデータは Single Source of Truth ではなく現実の一部のスナップショットである それでは本題に入ります。 この後の話を分かりやすくするために、デザインデータの扱い方について話します。 重要なのは、デザインデータを Si
この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン
この記事の概要 variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。 この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。 フォーカスリング付きの UI 以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。 このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。 そこで Absolute position と Constraintsを使います。 まず通常時のボタンはこのような構成です。 至って普通の作り方です。 次に、フォーカスリング付きのボタンの構成です。 元のボタンよりもひとまわり(ここでは上下左右それぞれ 3px ずつ)大きい四角形を作り、Absolute position で配置しました。 そして Co
この記事の概要 2023 年 7 月 6 日に開催される Config2023 Recap in Goodpatch で発表する内容です。 内容 「variables を既存データにどう適用する?」という内容で発表します。 全体の説明 新機能が色々出た中で、1 番みんなが沸いているのが variables だと思っています。 これから新しくデータを作るなら、デモの内容を参考にして綺麗に作っていけそうなイメージは湧きますよね。 ただ、 90% 以上の方は「既に作ってあるデザインデータがある」と思います。 そのため、今あるアセットをできるだけ活かして、漸進的に移行するには……という話をします。 また Figma の Recap ですが今回のアップデートはエンジニアとの協業がより大事になる話だと思ったので、コードに絡めた話も一部します。 補足として、あくまで「多分こんな感じが良いんじゃないかな」
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0L0 1C2.99988 2 7 5 9.00003 7C11 5 15 2 18 1L17 0C12.9999 1.00006 9 4 9 4C9 4 4.99988 1.00005 1 0ZM1 7.00006L0 8.00006C2.99988 9.00006 7 12.0001 9.00003 14.0001C11 12.0001 15 9.00006 18 8.00006L17 7.00006C12.9999 8.00012 9 11.0001 9 11.0001C9 11.0001 4
この記事の概要 PostCSSのプラグインであるPostCSS Preset Envをご存知でしょうか。 "Use tomorrow’s CSS today!"というキャッチフレーズが示す通り、まだ正式な仕様になる前のCSSを色々と使うことができます。 CSS関連の勉強会などに登壇すると「普段どこからインプットしていますか?」と質問されることがあり、学ぶ先の1つとしてPostCSS Preset Envがあるので紹介してみます。 Features CSSでは策定段階がStage 0から4まであります。 数字が高いほど仕様として固まっていて、低いほど変更や破棄になる可能性が高いです。 Stage 2でも「一部のブラウザでは使用できるけど、まだ動かないことも多い」くらいで、実用的と言えるのはStage 3からでしょうか。 そんな中でも、PostCSS Preset Envを使えばStage 0
この記事の概要 デザインデータの中には大抵「自前で実装するのは大変だから、既存のUIライブラリを使おう」と思うパーツがありますよね。 カルーセル・カレンダー・グラフなどなど……。 そういったシーンで考えておいた方が良いことを記事にしました。 対象読者 ライブラリが必要そうなUIの提案をするデザイナー 上記UIの実装を担当するエンジニア あなたが2のエンジニアに該当する場合、あなた自身が読む記事というよりは、1のデザイナーにこの記事を共有すると役立つ気がします。 そういう意味でタイトルには見せる記事とも記載しています。 やった方が良いこと どうしてもこだわりたい場所と、そうでも無い箇所を明らかにしておく 実装するものにもライブラリにもよりますが、大抵自由にカスタムできる要素とカスタムしようと思うとかなり大変になる要素があります。 完全にデザイナーが思った通りの見た目・使い勝手のライブラリが見
この記事の概要 HTMLとCSSを書くMacユーザーのためのVisual Studio Codeの使い方の記事です。 Visual Studio Codeは非常に多機能なため、単に「便利な使い方を記事にしました」だと際限なく書けてしまいます。 そのため、今回はタイトルにあるような属性の人に絞ってまとめました。 設定 command + , で設定画面を開き、変更できます。 細かい内容ですが、設定の有無によって操作のしやすさも大きく変わります。 初期設定のまま使わずに使いやすいようにカスタムしておきましょう。 Bracket Pair Colorization 検索窓にEditor › Bracket Pair Colorization: Enabledと入力して、出てきたオプションにチェックを入れます。 対応する括弧のペアの色が揃います。 入れ子になった括弧や、遠い位置にある括弧の対応関係
自己紹介 こんばんは。 Qiita株式会社でデザイナーをしている綿貫佳祐と言います。 現在はCX向上グループという「売上とか利益じゃなくて、ユーザーの皆さんの体験向上だけを考えよう」と掲げる部署のマネージャーをしています。 TwitterやInstagramなど、こちらのidでやっていますので、良かったらフォローしてください。 Qiita株式会社ではQiita、Qiita Team、Qiita Jobsという3つのサービスを展開しています。 今日はQiitaとQiita Jobsをまたいで提供している機能を例に出してお話をします。 本題に入る前に 現場から学ぶモデル駆動の設計というconnpassグループにおいて、デザイナーから発表するのは結構プレッシャーもあります。 今日の私の話は、エンジニアからすれば当たり前過ぎるとか、モデリングのお作法としてはあまり正確ではないとか、そういう内容も多
@scroll-timeline custom-ident-name { source: auto; /* auto | selector("id-selector") | none */ orientation: auto; /* auto | block | inline | horizontal | vertical */ scroll-offsets: none; /* none | <length-percentage> | <element-offset> */ } custom-ident-nameは@keyframesで名前をつけるのと同じ感覚です。 sourceは、スクロールする要素を指定します。 何も指定しなければhtml全体を対象とします。 特定の要素を指定したい場合、classではなくidを指定してください。 orientationはスクロールの向きを指定します。
この記事の概要 ある箇所のCSSを変更したら、意図しない箇所にまで影響が及んでしまった経験はありませんか? CSSを書いたことがある人ならほぼ全員が遭遇する事象だと思います。 そんなCSSリファクタリングをするにあたって、あまり話題に出ないけど個人的に大事だと思っている観点を記事にしてみました。 この記事を読みさえすればリファクタリングが上手くいく、というものではありません。 しかし、考慮に入れておくとリファクタリングが頓挫・中止になる可能性が減る気がします。 スタンス 今より良い見た目を作ろうと思わない おそらく1番大事な点です。 CSSのリファクタリングが話題に上がる時点で、大なり小なり見た目も古めかしくなっているのでしょう。 ここはグッとこらえて「見た目は変えず、コードの作りを良くするだけ」に絞ってください。 「普通に考えて、リファクタリングの中にアップデートを入れるわけないじゃない
この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ?不要では?」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ
この記事の概要 -webkit-transitionなど、CSSのプロパティにプレフィックスがついているのを見たことがあると思います。 しかし、昨今のCSSにはほとんど必要ありません。上記のtransitionも本来は不要です。 本来はベンダープレフィックスが必要な時期=標準化がなされていない時期なので導入を待つべきだったそうですが、世の開発者達はガンガン使用していました。 そのため、プレフィックスではなくブラウザの設定でオンオフを制御するような流れになっています。 ということで、少なくとも2022年4月現在はほとんど不要なベンダープレフィックスですが、使うとしたら……というものを挙げてみました。 「この記事で紹介したものがすべて」というわけではなく、筆者が日頃CSSを書いている中で有用だと思うかつベンダープレフィックスが必要なプロパティをピックアップしているのみです。 appearanc
この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ
この記事の概要 dialog要素、ご存じですか? その名の通りダイアログ的な振る舞いや役割をする要素です。 モーダルウィンドウと言えばより広く伝わるでしょうか。 簡単なダイアログならライブラリを使わなくても事足りるのですが、スタイルを当てる際に気をつけた方が良さそうなことがあったので記事にしてみました。 注意 Chrome(とEdge)はよっぽど大丈夫ですが、FirefoxとSafariはまだ本番投入してもブラウザが対応していません。 もう少しすれば使えるようになると思うので、今のうちに素振りをしておくのが良いかもと思います。 ポリフィルもあります。 デフォルトのスタイル 2022 年 3 月 4 日現在、ChromeとFirefoxではこのような感じです。 <dialog> <p> 秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある
この記事の概要 エンジニア的な文化・行動として「ドキュメントを残そう」をよく聞きますよね。 私の在籍するQiita株式会社では、社内の情報共有もかなり強く意識しています。 普段からドキュメントを残している中で、どんなものが効果的だったかを記事にしてみました。 なお、ここでいうドキュメントとはコード内のコメントやREADMEではなく社内Wikiのようなものを指しています。 定期的に人に説明する内容 入社時にやること 今導入している技術やサービスのまとめ 制度上のフローやガイドラインなど 新しく入社した人に説明する内容や、チーム間で異動があったら共有すべき内容などのイメージ。 自分は「この内容、何度か人に説明してるなあ」と気付いたらドキュメント化するよう心がけています。 また、これらがしっかり残っていると、次の「新しく何かを始める際の記録」が取りやすくなります。 新しく何かを始める際の記録 技
Ateam Brides Inc. Advent Calendar 2021の10日目はデザイナーの綿貫(@xrxoxcxox)がお送りします! この記事の概要 ボタンっぽい見た目の要素をクリックしたら検索フォームが動くとか自分のプロフィールを更新するとか、そういうインターフェースはたくさんありますよね。 ときどきdivやspan要素にaddEventListener('click', function)をつけて動かしているのを見かけるのですが、結局改善を求められるはずでしかも工数がかかります。 というわけでシンプルにbuttonを使いましょう、と啓蒙する記事です。 伝えたいこと ボタンっぽい役割の要素であればbuttonタグを使いましょう! この1点のみです! divやspanでボタンっぽい要素を作るとどうなるの? タブキーでフォーカスを当てられない enterやspaceでボタンのアク
次のページ
このページを最初にブックマークしてみませんか?
『@xrxoxcxoxのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く