サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
qiita.com/xrxoxcxox
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' + import '@master/css' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode>, ) import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const
この記事の概要 デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。 しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。 Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。 Figma での定義 タイポグラフィスケール(グローバル) あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。 そのため 12px を下限とし、スケールをつくってみたいと思います。 今回はこの式を用いて、n = 3 からスタートします。 すると、次のような結果が得られます。 12 13 15 17 19 21 24 27 30 34
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
この状態で、レイヤー数 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 は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか?について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人
この記事の概要 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 で書き出しをしたら次のようなコードになりました。 <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.00006L
この記事の概要 2023 年 5 月 28 日に開催される名古屋 Figma 勉強会 #01で発表する内容です。 内容 今日は「10 分でできるだけ詰め込む 地味なテクニック集」というタイトルで発表します。 具体的には、今日はこんなことをお話します。 「もう知ってるよ」「当たり前でしょ?」と言う人も多いかもしれない、今更かもしれないけど、何度でも伝えたいテクニック。 多少操作が難しいとか、詳細な Figma の知識が必要になるけど、時短になるようなテクニック。 あんまり実務で使えないかもしれないけど、 Figma に関する飲み会で披露するとウケるかもしれないテクニック。 1 つ、注意点があります。 UI のキャプチャやショートカットは Mac がベースです。 Windows でも Mac でも関係なく使えるのが Figma の良いところですが、時間の都合上ご了承ください。 ウインドウの操作
この記事の概要 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
この記事の概要 Webデザインは「最終的にHTMLとCSSで表現される」ことは揺るぎません。 イケてるデザインツールを使おうが、流行りのフレームワークを使おうが、最後に存在するのはHTMLとCSSです。1 というわけで、避けては通れないHTMLとCSS。 コードを書かない人でもある程度は理解しておきたいものです。 この記事では「どんなデザインも最終的に構造化された文書(= HTML)で表されるのだから、初めからそのつもりで作る」を念頭に置いて考え方やトレーニングについて書きます。 細かなタグの使い分けやテクニックというより、文章全般を構造化して捉えるための記事です。 HTMLのテクニック自体は別の記事で書こうと思っています。 Webデザインの前に、日頃のドキュメントを考える いきなりWebデザインを対象に話を進めると、構造だけでなくあしらいにも目が行ってしまいかねません。 そのため、まずは
この記事の概要 デザインデータの中には大抵「自前で実装するのは大変だから、既存のUIライブラリを使おう」と思うパーツがありますよね。 カルーセル・カレンダー・グラフなどなど……。 そういったシーンで考えておいた方が良いことを記事にしました。 対象読者 ライブラリが必要そうなUIの提案をするデザイナー 上記UIの実装を担当するエンジニア あなたが2のエンジニアに該当する場合、あなた自身が読む記事というよりは、1のデザイナーにこの記事を共有すると役立つ気がします。 そういう意味でタイトルには見せる記事とも記載しています。 筆者はデザイナーなのですが、そのせいで却ってデザイナーに厳しくなり過ぎている可能性もあります。 あくまで「筆者がデザインを作って実装者に渡した際上手くいった経験」を抽出していることを理解してもらえると幸いです。 やった方が良いこと どうしてもこだわりたい場所と、そうでも無い箇
この記事の概要 Webサイトにおいて、文字の画面占有率は大きい割に、タイポグラフィの甘さったらないですよね。 組版のための仕組みが整っていないなど、仕方ない部分が大きいとは言えもう少し改善したくなります。 というわけで、和欧混植時に少しでも見た目が良くなる方法を考えてみました。 @font-faceでフォントを定義してsize-adjustで調整 Webフォント、ローカルフォント、どちらでも使えるテクニックです。 ローカルフォントを再定義する方法の方が面白い使い方な気がするので、例はそちらをお見せします。 仮に、ヒラギノ角ゴシックとAvenirを混植するとします。 通常の指定方法だとコードはこのようになります。
この記事の概要 HTMLとCSSを書くMacユーザーのためのVisual Studio Codeの使い方の記事です。 Visual Studio Codeは非常に多機能なため、単に「便利な使い方を記事にしました」だと際限なく書けてしまいます。 そのため、今回はタイトルにあるような属性の人に絞ってまとめました。 設定 command + , で設定画面を開き、変更できます。 細かい内容ですが、設定の有無によって操作のしやすさも大きく変わります。 初期設定のまま使わずに使いやすいようにカスタムしておきましょう。 Bracket Pair Colorization 検索窓にEditor › Bracket Pair Colorization: Enabledと入力して、出てきたオプションにチェックを入れます。 対応する括弧のペアの色が揃います。 入れ子になった括弧や、遠い位置にある括弧の対応関係
Reactにて、CSSファイルもCSS in JSライブラリも無しにスタイリングできないか実験し、失敗した記録CSSJavaScriptReactcss-in-js この記事の概要 私が日頃Reactを触っている際、CSS in JSをよく使います。 一口にCSS in JSと言っても、書き味やバンドルサイズなどそれぞれ違いがあって、選定に悩むこともしばしば。 要はJavaScriptの中でCSSが書ければ良いのだから、別な方法もあるのではないか?と思って実験した内容をまとめました。 この記事自体は役に立つものではないと思いますが、同じ轍を踏む人が減れば良いなと思って投稿します。 結論 動くっちゃ動くけど明らかに実用的でない。 (測定すらしていませんが、するまでもなくこれは駄目だと思いました。) 試したこと コンポーネント内に<style>を埋め込む コンポーネント内にreact-helm
この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物&通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース(?)、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!
自己紹介 こんばんは。 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のリファクタリングが話題に上がる時点で、大なり小なり見た目も古めかしくなっているのでしょう。 ここはグッとこらえて「見た目は変えず、コードの作りを良くするだけ」に絞ってください。 「普通に考えて、リファクタリングの中にアップデートを入れるわけないじゃない
この記事の概要 React 18で新しくuseIdというhooksが使えるようになりました。 コンポーネントにWAI-ARIAを導入するにあたって、便利になると思ったのでいくつかのパターンを紹介します。 また、Qiita Engineer Festa 2022の「React 18、あなたならどう使いこなす?」への投稿記事でもあります。 記事を書こうと思った理由——useId登場以前の迷い 実例を紹介する前に、なぜこの記事を書こうと思ったかについて説明します。 例えばaria-labelledbyを使う場合、以下のようになります。 (コードはMDN Docsのaria-labelledbyのページより拝借) <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span> <span i
この記事の概要 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のようなものを指しています。 定期的に人に説明する内容 入社時にやること 今導入している技術やサービスのまとめ 制度上のフローやガイドラインなど 新しく入社した人に説明する内容や、チーム間で異動があったら共有すべき内容などのイメージ。 自分は「この内容、何度か人に説明してるなあ」と気付いたらドキュメント化するよう心がけています。 また、これらがしっかり残っていると、次の「新しく何かを始める際の記録」が取りやすくなります。 新しく何かを始める際の記録 技
Qiita株式会社 Advent Calendar 2021(2)の20日目の担当は、CX向上グループの@xrxoxcxoxです! この記事の概要 タイトルの通り、デザインに興味があるエンジニア向けのTipsをいくつかまとめてみました。 「自分はセンスがないからデザインは無理ですよ……」と仰る方が多いような気がしたので、持って生まれた感覚ではなくて理屈で良い感じにするためのあれこれを書き連ねてみました。 かつて社内向け勉強会で作った資料を記事化しているので一部記事に最適化できていない箇所もありますがご了承ください 色の選び方 UIやロゴ作る上で、テーマカラーを選ぶときは以下のあたりを確認しながら進める 商材やモチーフの印象にあっている 社会的な文脈に沿っている 明度や彩度がUI的に都合が良い アクセシビリティが高い 商材やモチーフの印象にあっている 例:水を扱うサービスのイラスト 茶色 青
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫(@xrxoxcxox)が担当します! この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。 同じ内容の文章でも組版次第で読みやすさは変わります。 実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください! ちなみに今回載せているコードは全てこちらのリポジトリにあります。 解決したいこと(≒よくあるWebの組版) 余白がガタガタ 見出しや本文のジャンプ率が適切でなく目が滑る 禁則処理がほぼ何も無い あまり意識したことは無いかもしれませんが、こ
次のページ
このページを最初にブックマークしてみませんか?
『@xrxoxcxoxのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く