12 年続くサービスにダークテーマ UI を導入した - Qiita
この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン
Markdownが数ファイルだけの構成でAstroを使う - Qiita
この記事の概要 Astroはコンテンツが豊富なウェブサイトを構築するために設計されています。 しかし、自分が今回使ったのは以下の構成です。 indexページすらMarkdown（から出力されたHTML） 2, 3ページで足りそう 本来想定されている使い方とは違う気もしますが、それでも構築が簡単だったので備忘録も兼ねて記事にします。 プロジェクト構成 公式ドキュメントのProject Structureの内容を拝借します。 root/ ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └── social-image.png ├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └── Button.jsx │ ├── layouts/ │ │ └── PostLayout.astro │ ├─
rollup.jsでpreserveModulesを有効にしつつファイル名や拡張子を変える - Qiita
この記事の概要 rollup.jsを使っていて、アウトプット先を複数ファイルに分ける際にファイル名や拡張子を変更するのに手こずったので記事にしました。 背景 今回の悩みにぶつかった経緯は以下の流れです。 preserveModulesをtrueにしたい CJSとESMを両方含むパッケージを作りたい→拡張子をcjsとmjsの2つ用意したい {具体的なモジュール名}.jsになっているファイル名をindex.jsに統一したい ただし、最終的にこの内容は無くなった やること rollup.config.jsのoutput.entryFileNamesを追加する デフォルトのentryFileNamesは[name].jsが定義されているので、オーバーライドする export default { input: 'src/main.js', output: { dir: 'dist', entryFi
モデリング：表からは見えないUIデザイン - Qiita
自己紹介 こんばんは。 Qiita株式会社でデザイナーをしている綿貫佳祐と言います。 現在はCX向上グループという「売上とか利益じゃなくて、ユーザーの皆さんの体験向上だけを考えよう」と掲げる部署のマネージャーをしています。 TwitterやInstagramなど、こちらのidでやっていますので、良かったらフォローしてください。 Qiita株式会社ではQiita、Qiita Team、Qiita Jobsという3つのサービスを展開しています。 今日はQiitaとQiita Jobsをまたいで提供している機能を例に出してお話をします。 本題に入る前に 現場から学ぶモデル駆動の設計というconnpassグループにおいて、デザイナーから発表するのは結構プレッシャーもあります。 今日の私の話は、エンジニアからすれば当たり前過ぎるとか、モデリングのお作法としてはあまり正確ではないとか、そういう内容も多
CSSのリファクタリングにあたって、意外と大事な考え方 - Qiita
この記事の概要 ある箇所のCSSを変更したら、意図しない箇所にまで影響が及んでしまった経験はありませんか？ CSSを書いたことがある人ならほぼ全員が遭遇する事象だと思います。 そんなCSSリファクタリングをするにあたって、あまり話題に出ないけど個人的に大事だと思っている観点を記事にしてみました。 この記事を読みさえすればリファクタリングが上手くいく、というものではありません。 しかし、考慮に入れておくとリファクタリングが頓挫・中止になる可能性が減る気がします。 スタンス 今より良い見た目を作ろうと思わない おそらく1番大事な点です。 CSSのリファクタリングが話題に上がる時点で、大なり小なり見た目も古めかしくなっているのでしょう。 ここはグッとこらえて「見た目は変えず、コードの作りを良くするだけ」に絞ってください。 「普通に考えて、リファクタリングの中にアップデートを入れるわけないじゃない
パララックスならscrollイベントを間引かずとも@scroll-timelineで良いじゃない - Qiita
@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はスクロールの向きを指定します。
レスポンシブロゴをsvgファイル1つで実現する - Qiita
この記事の概要 レスポンシブロゴをご存じでしょうか。 デスクトップからスマートフォンまで、どんなサイズのディスプレイにロゴが表示されるかは予想がつきません。 同じ見た目のロゴを拡大縮小しても、あまり見目良くならない場合もあるでしょう。 そのためレスポンシブロゴと呼ばれる手法でロゴのバリエーションを定義する企業・サービスもあります。 ただ、これを実現するために毎回srcsetに複数のパスを指定するのも面倒です。1 クライアントにたくさんの種類のロゴを渡して「〇px以下のときはこちらを使ってください」などとお願いするのも申し訳がありません。 というわけで、1つのsvgファイルだけでレスポンシブロゴを実現する方法を記事にしました。 作り方 各パターンのロゴの用意 まずは、すべてのサイズごとのロゴを作ります。 今回は分かりやすいようにLarge Medium Smallの3種類のテキストを並べてい
2022年5月現在 Figmaで実施しない方が良いハック - Qiita
この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ？不要では？」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
