この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ - Qiita
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
CSS だけで、かつ不要な div を使わずに、擬似 Progressive blur - Qiita
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
おっ、 CSS でゲルフォントの定数が使えるじゃん - Qiita
この記事の概要 完全にネタです。 「CSS でそんな数が扱えるの？」と思われるような数を探していて、 1 つ見つけたので記事にしました。 ゲルフォントの定数とは Wikipedia より引用します。 ゲルフォントの定数（ゲルフォントのていすう、英語: Gelfond's constant）は数学定数の一つで、ネイピア数 e と円周率 π を用いて eπ と表される数である。 calc における数値定数 calcの中では、自然対数の底の e と円周率の π (pi) が使用できます。 ちゃんと仕様で定められています。 冪乗を表す pow() 関数 pow() 関数には、カンマ区切りで2つの<number> A と B を入力します。 A を B の冪乗にした結果が <number> として帰ってきます。
Webデザインをするにあたり、構造化された文書を意識する - Qiita
この記事の概要 Webデザインは「最終的にHTMLとCSSで表現される」ことは揺るぎません。 イケてるデザインツールを使おうが、流行りのフレームワークを使おうが、最後に存在するのはHTMLとCSSです。1 というわけで、避けては通れないHTMLとCSS。 コードを書かない人でもある程度は理解しておきたいものです。 この記事では「どんなデザインも最終的に構造化された文書（= HTML）で表されるのだから、初めからそのつもりで作る」を念頭に置いて考え方やトレーニングについて書きます。 細かなタグの使い分けやテクニックというより、文章全般を構造化して捉えるための記事です。 HTMLのテクニック自体は別の記事で書こうと思っています。 Webデザインの前に、日頃のドキュメントを考える いきなりWebデザインを対象に話を進めると、構造だけでなくあしらいにも目が行ってしまいかねません。 そのため、まずは
CSSの勉強の1つとしてPostCSS Preset Envを眺める - Qiita
この記事の概要 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
自然に見える画像の枠線を求めて - Qiita
この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物＆通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!
モデリング：表からは見えないUIデザイン - Qiita
自己紹介 こんばんは。 Qiita株式会社でデザイナーをしている綿貫佳祐と言います。 現在はCX向上グループという「売上とか利益じゃなくて、ユーザーの皆さんの体験向上だけを考えよう」と掲げる部署のマネージャーをしています。 TwitterやInstagramなど、こちらのidでやっていますので、良かったらフォローしてください。 Qiita株式会社ではQiita、Qiita Team、Qiita Jobsという3つのサービスを展開しています。 今日はQiitaとQiita Jobsをまたいで提供している機能を例に出してお話をします。 本題に入る前に 現場から学ぶモデル駆動の設計というconnpassグループにおいて、デザイナーから発表するのは結構プレッシャーもあります。 今日の私の話は、エンジニアからすれば当たり前過ぎるとか、モデリングのお作法としてはあまり正確ではないとか、そういう内容も多
デザインの役割や価値（社内研修資料） - Qiita
この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ
残して良かったドキュメント、いまいちだったドキュメント - Qiita
この記事の概要 エンジニア的な文化・行動として「ドキュメントを残そう」をよく聞きますよね。 私の在籍するQiita株式会社では、社内の情報共有もかなり強く意識しています。 普段からドキュメントを残している中で、どんなものが効果的だったかを記事にしてみました。 なお、ここでいうドキュメントとはコード内のコメントやREADMEではなく社内Wikiのようなものを指しています。 定期的に人に説明する内容 入社時にやること 今導入している技術やサービスのまとめ 制度上のフローやガイドラインなど 新しく入社した人に説明する内容や、チーム間で異動があったら共有すべき内容などのイメージ。 自分は「この内容、何度か人に説明してるなあ」と気付いたらドキュメント化するよう心がけています。 また、これらがしっかり残っていると、次の「新しく何かを始める際の記録」が取りやすくなります。 新しく何かを始める際の記録 技
デザインに興味があるエンジニア向けのTips10選 - Qiita
Qiita株式会社 Advent Calendar 2021（2）の20日目の担当は、CX向上グループの@xrxoxcxoxです！ この記事の概要 タイトルの通り、デザインに興味があるエンジニア向けのTipsをいくつかまとめてみました。 「自分はセンスがないからデザインは無理ですよ……」と仰る方が多いような気がしたので、持って生まれた感覚ではなくて理屈で良い感じにするためのあれこれを書き連ねてみました。 かつて社内向け勉強会で作った資料を記事化しているので一部記事に最適化できていない箇所もありますがご了承ください 色の選び方 UIやロゴ作る上で、テーマカラーを選ぶときは以下のあたりを確認しながら進める 商材やモチーフの印象にあっている 社会的な文脈に沿っている 明度や彩度がUI的に都合が良い アクセシビリティが高い 商材やモチーフの印象にあっている 例：水を扱うサービスのイラスト 茶色 青
CSS in JS時代のCSS設計 - Qiita
Ateam Lifestyle Advent Calendar 2019の1日目は 株式会社エイチームライフスタイル クリエイティブ戦略部 シニアデザイナーの綿貫が担当します！ 先陣切って投稿しますので、みなさんどうぞ読んでください！ はじめに CSS in JSもそこまで珍しくなくなってきたと思いますが、CSS in JSでのCSS設計の話はなかなか見かけません。 ないなら自分で書こう！と思い立ったので書きます。 そもそもCSS設計が必要な理由 CSSを書くに当たって、人間が悩むのは主に「名前空間が存在していない」からだと思います。 1つ1つのパーツを個別にスタイリングをするだけならさほど難しくもありませんよね？ ところが、サイト全体を通してスタイリングするとなると 自分が触っている箇所に 予期せぬスタイルが当たっている 当たるはずのスタイルが当たらない 自分が触っていない箇所に 予期せ
デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita
これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ
ダメなことはないけど避けた方が楽になるCSSの書き方 - Qiita
これはなに CSSでマージンをつける際、気をつけると後からちょっと楽になるかもしれないTips記事です 記事を書くために使ったコードはここに置いてあります このスタイルを組むとする ありそうなマークアップの例（若干はしょってる） 例1：各要素をフラットに書いている <h1>このページのタイトル</h1> <h2>ちょっと強調したテキスト</h2> <p>なにかしら文章が書いてある。以下はダミーテキスト。</p> <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p> <p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったか
エンジニア向け デザイン基礎（社内勉強会の資料） - Qiita
これは何 私が所属している株式会社エイチームでは社内勉強会を自由に開ける制度があります。 エンジニア向けにデザインの基礎をレクチャーする会を開いたのですがせっかくだったらオープンにしようと思い、投稿しました。 今回の勉強会では「Webサービスを作る」レベルまでは踏み込めませんでしたが、ちょっとしたUIを作る際の手助けにはなれる気がしています。 なお、勉強会用に書いた原稿なので書き言葉としてあまり適切でない箇所もあります。 ご了承ください。 また、この研修の次の年に行った研修も記事として投稿しています。 設計の話 はじめに：デザイン業務の内訳とよくある誤解 デザイン業務の内訳 まず最初に設計の考え方をレクチャーするのですが、その前に1つ。 普段デザイナーが行っている業務について簡単に説明します。 後の方で話す内容と繋がってくるので、ちょっと本筋から外れますが聞いてください。 話を分かりやすく
えっ、著作権の帰属を表すHTMLタグがあるんですか？ - Qiita
smallタグ smallタグです。 かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。 そのうちの1つが著作権の帰属を表すです。 なんでこの記事を書いたのか smallの役割って意外と知られていない気がする 最近レビューで連続でこの話をした という2つの理由から記事を書きました。 内容の補足 コピーライト表記ってありますよね？ © 2019-2021 Example Corporation All rights reserved. みたいなやつです。 色々なサイトのマークアップを見学していてspanタグで実装されていることが多いことに気がつきました。 しかしHTML Living Standardのsmallタグの章を見てみると Small print typically features disclaimers, caveats, l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで描く、少し理解しやすい吹き出しのしっぽ - Qiita
デザインの勉強をしたいエンジニアにおすすめの本10選 - Qiita