概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: UI Design Tips Using Tailwind CSS for Developers | Rails Designer 原文公開日: 2024/07/04 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 そこそこのUIデザインと良い優れたUIデザインの違いは、細部に隠れていて見えにくいものです。こうしたささやかな微調整は注意していないと気づきにくいのですが、削除してみると即座に違いがわかります。 本記事では、（Rails）アプリのUIで今すぐ使える、さまざまな小技について解説します。これは、私が25年以上養ってきたUIデザインの経験

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Fix Any CSS Z-index Issue With This One Trick | Rails Designer 原文公開日: 2024/09/16 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 参考: 重ね合わせコンテキスト（stacking context） - CSS: カスケーディングスタイルシート | MDN 参考: z-index - CSS: カスケーディングスタイルシート | MDN （大仰なタイトルについてはあらかじめお詫び申し上げます...😉） z-indexプロパティは、要素の（z軸、つまりユーザーから見て

以下のページを見てみましょう。 JS Bin - Collaborative JavaScript Debugging Chrome, Edgeでは上下左右ともに余白（パディング）が表示されますが、Firefox, Safariでは上下左のみ余白があり、右は余白なしになります。 確認時点のバージョン Chrome: 121.0.6167.86, 129.0.6656.0 Firefox: 122.0, 131.0a1 Safari: 17.1.2 IEが元気だった15年くらい前はこんなレベルの非互換は日常茶飯事でしたが、最近ではかなり互換性が改善しているため、未だにこんな基本的な非互換が残っているんだなと少し意外でした。（なおSafari以下略） これはどちらの挙動が正しいのか調べた記録です。結論としてはChromeの挙動が正しいです。 歴史の調査 太古のチケット 372498 - [re

グリッドレイアウトを使って子要素を任意の個数ごとに折り返す方法を紹介します。 通常、以下のようなCSSを適用すると、子要素はコンテナに収まるように列方向（上から下、左から右）に流れて配置されますが、場合によっては特定の個数ごとに折り返したいことがあるかと思います。 .container { display: grid; grid-template-columns: repeat(2, 1fr); /* 最大2列 */ grid-template-rows: repeat(6, 1fr); /* 最大6行 */ grid-auto-flow: column; /* 列方向に要素を流す */ } 元のCSSを適用すると、子要素の並び順は次のようになります。 1 7 2 8 3 9 4 10 5 11 6 12 See the Pen Grid-normal-order by hachi8833

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Meet the most awaited CSS container queries | Saeloun Blog 原文公開日: 2022/09/28 原著者: Chetan Gawai サイト: Saeloun Blog 日本語タイトルは内容に即したものにしました。章立ては原文のものから変えています。 参考: CSS Container Queries - CSS: Cascading Style Sheets | MDN Webサイトをさまざまなデバイスで表示することは常に課題となっていました。レスポンシブデザインが導入される前は、多くの企業が画面サイズ（特にモバイル）に応じてレイアウトを変更する問題に対処するために、サブドメインmの下（すなわちm.mywebsite.com）に新たなWebサイトを作成する形で対応していま

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Understanding CSS Feature Queries | Saeloun Blog 原文公開日: 2022/08/25 原著者: Ankita Kaushik サイト: Saeloun Blog 本記事ではFeature Queriesの仮訳として「フィーチャークエリ」を採用しています。 参考: 機能クエリーの使用 - CSS: カスケーディングスタイルシート | MDN フィーチャークエリとは何か フィーチャークエリ（Feature Queries）がCSSに追加されたのは比較的最近のことです。開発者はフィーチャークエリを用いることで、ブラウザのバージョンを指定する代わりに、特定のブラウザ機能を指定してスタイルを追加できるようになります。この機能は、一部のブラウザでまだサポートされていないCSS機能を使いたい場合

こんにちはニシです。久しぶりにリングフィットやったら筋肉痛が痛い。 今日はマージンの話です。 たまーにデザインなしでフロントの実装をしているエンジニアの方から、UIが上手くキマらないという相談が入ります。 大抵の場合、デザイナーが見るとどうして上手くいかないのか、どうやったら上手くいくのか、というのはすぐわかります。 今回は、デザイナーがどういう考え方でデザイン・設計しているのか、を言語化していこうと思います。 あんまり深い話をすると長くなるので、まず私が大事だと思ったマージン（余白）と情報構造の話に絞って書きます。 マージンは情報構造と深い関係があります。これを理解すると、「適当にいい感じで実装」が上手くいくようになるのではないかと思います。 今回はこんな人向けの記事です 初級デザイナー フロントエンドエンジニア UI/UXに興味ある人 ※本記事では余白のことをマージンと表記しております

新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳） 新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳） 新しいRailsフロントエンド開発（3）Webpackの詳細、ActionCableの実装とHerokuへのデプロイ（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Evil Front Part 2: Modern Front-end in Rails 原文公開日: 2017/12/12 著者: Andy Barnov、Alexey Plutalov サイト: Evil Martians 前書き 本記事は、フロントエンドのフレームワークに依存しないRailsプレゼンテーションロジックを現代的かつモジュール単位かつコンポーネントベースで扱う方法を独断に基いて解説するガイドです。3部構成のチュ

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The easy way to turn a website into a Progressive Web App 原文公開日: 2017/11/21 著者: Alexandre Plennevaux Webサイトを簡単にPWA（Progressive Web App）に変える方法（翻訳） Progressive Web Appって何？ PWAは基本的にWebサイトの一種で、モバイルでアクセスするときにユーザーのデバイスに保存可能で、ネイティブアプリと同じように振る舞います。読み込み画面を備えていて、ChromeのUIを非表示にでき、接続が切れてもコンテンツが表示されます。最大のメリットはユーザーのエンゲージメント（engagement）を促進することです。AndroidのChromeブラウザ（他のモバイル用ブラウザについてはわか

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講

morimorihogeです。最近アズールレーンをはじめました。Flashでないというだけでこれだけプレイする機会が楽に作れるんだなーと思う日々です。 今回はBootstrap3の便利なのにあまり使われているのを見ないクラスたちについて、もっと使われればいいのにということで啓蒙したいと思います。Railsの話は出てこないので、バックエンド依存のない内容になります。 Bootstrap3系を使っているのにBootstrapにある機能を独自CSSクラスを実装してしまっている人は、CSSをより他のエンジニアにもわかりやすく記述できるように利用を検討してみると良いのではないかと思います。 ちなみに、僕はCSSフレームワークを採用する最大のメリットはクラス名・機能に関する共通概念をプロジェクトを横断して共有することで個別ルール学習のコストを減らすことだと思っているので、フレームワークを使うなら極力フ

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The zen of Just Writing CSS 公開日: 2017/09/06 著者: Rich Harris サイト: https://svelte.technology/ SFCについてはVue.js: 単一ファイルコンポーネントもどうぞ。 これは未来の話だが、私たちは既にそれを実践しているのだ。 CSSを嫌うのが流行っています。CSSを嫌う理由はいくらでもありえますが、突き詰めれば「CSSが予測不可能である」ということです。スタイルのルールをこねくり回しているうちに、まったく関係ない別のレイアウトが不意に壊れてしまう（しかもたいてい納品間近に起きる）という経験をしたことがない人がいるとすれば、新人か、さもなければよほどプログラミングが上手いかのどちらかでしょう。 JavaScriptコミュニティはこの問題に取り組み続

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Glue Cross-Browser Responsive Irregular Images with Sticky Tape 公開日: 2017/07/10 著者: Ana Tudor ブログサイト: css-tricks.com 注: 英語記事執筆の時点からブラウザのバージョンが進んでいるため、本記事内の細かなCodePen埋め込み表示は元記事のCodePen表示と若干異なっている可能性があります。また、ブラウザによってもCodePen表示が若干異なる可能性があります。 この間、Vasilis van Gemert氏のサイト「Atlas of Makers」のことがふと頭をよぎりました。とても面白く風変わりなこのサイトに惹かれて調べてみたところ、ここはまさに学ぶ価値のあるサイトであると確信できました。このサイトには数年におよび

句読点のぶら下げを指定する hanging-punctuation プロパティと、超縦書ビューアでの表示例についてご紹介します。 句読点のぶら下げとは 行末に句読点が来た場合、通常の行長よりはみ出して配置する方法です。日本語の均等割り組版でよく使われます。 小学校の時の作文では、この書き方をした記憶があります。 ぶら下げのメリット もともとは、手動組版で微調整の手間を省くため、ある種の手抜きから生まれたという話もありますが、 行末がより揃って見える 文字間隔の調整に無理がなくなる などのメリットもあります。紙の書籍では、それなりに多く利用されています。

今をさかのぼること2012年に、Code Smells in CSSというタイトルでCSSに潜むアンチパターンについての記事を公開しました。その後4年が経過し、記事の内容についての考えは今も変わっていませんが、さらに追加すべきリストが増えました。繰り返しますが、これらはあくまでコードから立ち上るやばい臭いという兆候であり、これがあるからといって必ずしも絶対的な悪手ではないことにご注意ください。ユースケースによっては全面的に容認できることもあるかもしれません。それでもやばい臭いが残ることに変わりはありませんが。 本題に入る前に、「コードの臭い（訳注: リンク先は日本語版です）」とは何かをおさらいしておきましょう。以下はWikipediaからの引用です（訳注: 強調は原著者）。 コードの臭い（または悪臭）とは、コンピュータプログラミングにおいてソースコードにより深刻な問題が潜んでいる可能性をう

2017 年 6 月 28 日より、BPS 製品である超縦書 Windows 版の無料公開を行なわせて頂きます！以下の画像をクリックする形でも、公開サイトに飛べます。 まだまだ短いながら、電子書籍業界の方々とお話をさせて頂く中で、EPUB を作成する際の文字もの EPUB の表示を確認する手段がない・フリーで表示するソフトウェアがほとんどない、といった声を多く聞きました。 これらの意見を踏まえ、弊社で開発をしている EPUB3 ビューアである超縦書 Windows 版の無料公開を行なうことで、一般ユーザの方々のみならず、電子書籍を支えている業界の方々を助けることができるのではないかと考えました。 超縦書は Blink をベースにしつつ、EPUB ビューアとして必要な要素を詰め込んだ製品になっております。組版表示の正確さも超縦書の売りの一つだと考えております。 電子書店にて購入された EPU