サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Appleイベント
yuheiy.com
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
JavaScriptにおいて、ある配列をもとにして別のオブジェクトを作成する場合、Array#reduceを使用することが多い。 const input = ['foo', 'bar', 'baz']; const result = input.reduce((accumulator, currentValue) => { accumulator[currentValue] = capitalize(currentValue); return accumulator; }, {}); assert.deepStrictEqual(result, { foo: 'Foo', bar: 'Bar', baz: 'Baz' }); しかし例のように、単にキーと値の組み合わせにマッピングするだけなら、あえてArray#reduceを使うまでもない。代わりにObject.fromEntriesを使え
任意の要素に対して、ブラウザデフォルトのフォーカスリングが描画されるように明示的に設定したいことがある。たとえばスタイリングの都合により、一度取り除いたフォーカスリングをふたたび適用したいとき。 フォーカスリングのスタイルは、ブラウザの種別や状況によってまちまちであるため、CSSでそれらしいものをエミュレートするのが難しい。そのため、同じものを呼び出せるような特別なやり方を採用できると望ましい。 一つの方法として、outline: revertを適用すればデフォルトの挙動を復元できる。 * { outline: 0; } button { outline: revert; } しかし場合によっては、通常はフォーカスリングが描画されない要素に対して、ブラウザのデフォルトと同じフォーカスリングが描画されるようにしたい、ということもあるだろう。この場合、outline: revertではフォーカ
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、一般的には、Buttonコンポーネントにas propを実装して対処することが多い。 function Button({ as: Component = 'button', ...props }) { return <Component {...props} />; } render( <> <Button type="button"> I’m a <code>button</code> element </Button> <Button as="a" href="
後日追記: 寄稿した特集がgihyo.jpにて全章無料公開されました。 Tailwind CSS実践入門 ~まず作ってから、あとで共通化する 記事一覧 | gihyo.jp 2023年2月24日発売の「WEB+DB PRESS Vol.133」に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました。 WEB+DB PRESS Vol.133、どこよりも早い表紙画像です! TypeScript最新活用、速習Ruby 3.2、Tailwind CSS実践入門を大特集!2月24日発売です!#wdpress pic.twitter.com/TaHmqI7eyq — WEB+DB PRESS編集部 (@wdpress) February 6, 2023 この特集では、すでにCSSの基本的な使い方は身につけているけどTailwind CSSについては知らない人、こ
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
後日追記: このやり方の改良版をブログ「ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装」として書いた。 CSSにおいて、コンテナと呼ばれるパターンがある。たとえば次のような実装を指している。 .container { box-sizing: content-box; margin-right: auto; margin-left: auto; padding-right: 1.25rem; padding-left: 1.25rem; max-width: 60rem; } この実装の特徴は、ビューポートの幅が広いときには要素の内容物が中央揃えになり、狭いときには左右に最低限の余白を残しつつ縮むことだ。 よくある使い方としては、このコンテナでページの外側の方を囲いつつ、その中に雑多に要素を配置していくことになる。 <div class="container"> <h2><!
後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB
なにか気になったウェブページを保存したいというとき、以前ははてなブックマークを使っていた。たぶん2017年くらいまで。 しかし当時のそのインフラ的な事情か、ブックマークをしようとしてもエラーが発生してできない場面が頻発していた。いや、実際そこまでの頻度ではなかったのかもしれないが、僕がそこそこヘビーユーザーだったために出会す機会が多かった気がする。いずれにせよ、それが嫌になって徐々にはてブを使わないようになっていった。 代わりに、気になったページはTwitterでシェアするようになった。自分用ブックマークを兼ねたシェア。ツイートはすぐに流れていってしまうので記録にはならないと考えるのが普通だと思うけど、僕の場合は、自分の過去のツイートを検索して見つけるという使い方をしてきた。 たとえば、「Buttons shouldn’t have a hand cursor」みたいな記事があったなと思え
友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね?それを上マージンでやると結構頭こんがらがらない?って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
「JavaScript sprinkles in Basecamp turned Stimulus」より。Stimulusの設計意図を理解できる貴重な資料なのでまとめた。 DHHにとってプログレッシブエンハンスメントとは、コンテンツのプログレッシブ性を実現するためというよりは、アプリケーション開発のための道標のようなもの。ベースとしてのHTMLはまずサーバーに生成させて、動的部分としての少しの差分をJavaScriptに扱わせる。BasecampやGitHubのように動的部分の少ないアプリケーションにとってはそれが適切なやり方。React/ReduxやAngular、そのほかクライアントサイドのMVCフレームワーク等を試してきたが、それによってプロダクトのコードが良くなることはなかった。 BasecampにあるJavaScriptを調査して、どのような慣習があるか、それを踏まえてどのような
個人的な話、Twitterにいろいろと長文も書いたりするようになってからブログをあまり書かなくなった。タイムラインのツイートはすぐに流れていく分、今パッと思いついた話とか、まだ十分整理されてないようなテキストを出しやすい。 アイデアをTwitterに書きやすいのは取り返しがつかないからだと言ってる人がいた。まず最初のツイートをすると、それが少なくとも何人かに読まれてしまった事実は取り返しがつかなくなるので、その責任の引き受けから連鎖してほかのものも書けると。その話を読んで、ツイートはリアルタイムにしゃべることに似ている気がした。一度しゃべり始めてしまった以上は、とりあえず着地するまではしゃべりを続けないといけないというのと似ている。 そうしたとりあえずのものがツイートとして消化されてしまうとすれば、ブログを書くためには「あえて」そうする動機が必要になってくる。「あえてのもの」は即席じゃない
フロントエンドウェブ開発者。HTMLやWAI-ARIA、CSS設計、レスポンシブデザイン、Jamstack、シングルページアプリケーション、アクセシビリティ、インターフェースデザインが関心領域。 監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』がオンライン書店などで発売中。 主な投稿 gihyo.jp Tailwind CSS実践入門 ~まず作ってから、あとで共通化する Yuhei Yasuda WEB+DB PRESS Vol.133に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました #wdpress Yuhei Yasuda マークアップのわかり方 Yuhei Yasuda 宣言的デザイン(翻訳) Yuhei Yasuda CSS設計における、すべてがコンポーネントであるという誤謬 社内発
このページを最初にブックマークしてみませんか?
『Yuhei Yasuda』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く