待望のCSSコンテナクエリがやってきた（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 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サイトを作成する形で対応していま
CSS: フィーチャークエリを理解する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Understanding CSS Feature Queries | Saeloun Blog 原文公開日: 2022/08/25 原著者: Ankita Kaushik サイト: Saeloun Blog 本記事ではFeature Queriesの仮訳として「フィーチャークエリ」を採用しています。 参考: 機能クエリーの使用 - CSS: カスケーディングスタイルシート | MDN フィーチャークエリとは何か フィーチャークエリ（Feature Queries）がCSSに追加されたのは比較的最近のことです。開発者はフィーチャークエリを用いることで、ブラウザのバージョンを指定する代わりに、特定のブラウザ機能を指定してスタイルを追加できるようになります。この機能は、一部のブラウザでまだサポートされていないCSS機能を使いたい場合
【Webデザイン】マージンと情報構造の関係を知るだけで良い感じのUIになる｜TechRacho by BPS株式会社
こんにちはニシです。久しぶりにリングフィットやったら筋肉痛が痛い。 今日はマージンの話です。 たまーにデザインなしでフロントの実装をしているエンジニアの方から、UIが上手くキマらないという相談が入ります。 大抵の場合、デザイナーが見るとどうして上手くいかないのか、どうやったら上手くいくのか、というのはすぐわかります。 今回は、デザイナーがどういう考え方でデザイン・設計しているのか、を言語化していこうと思います。 あんまり深い話をすると長くなるので、まず私が大事だと思ったマージン（余白）と情報構造の話に絞って書きます。 マージンは情報構造と深い関係があります。これを理解すると、「適当にいい感じで実装」が上手くいくようになるのではないかと思います。 今回はこんな人向けの記事です 初級デザイナー フロントエンドエンジニア UI/UXに興味ある人 ※本記事では余白のことをマージンと表記しております
新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳）｜TechRacho by BPS株式会社
新しい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部構成のチュ
WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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ブラウザ（他のモバイル用ブラウザについてはわか
CSS GridがBootstrapよりレイアウト作成に向いている理由（翻訳）
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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月中に立ち上げを予定しています。 今のうちに講
いまさら聞けないBootstrap3の便利クラス｜TechRacho by BPS株式会社
morimorihogeです。最近アズールレーンをはじめました。Flashでないというだけでこれだけプレイする機会が楽に作れるんだなーと思う日々です。 今回はBootstrap3の便利なのにあまり使われているのを見ないクラスたちについて、もっと使われればいいのにということで啓蒙したいと思います。Railsの話は出てこないので、バックエンド依存のない内容になります。 Bootstrap3系を使っているのにBootstrapにある機能を独自CSSクラスを実装してしまっている人は、CSSをより他のエンジニアにもわかりやすく記述できるように利用を検討してみると良いのではないかと思います。 ちなみに、僕はCSSフレームワークを採用する最大のメリットはクラス名・機能に関する共通概念をプロジェクトを横断して共有することで個別ルール学習のコストを減らすことだと思っているので、フレームワークを使うなら極力フ
CSSを迷いなく書く極意: 単一ファイルコンポーネント（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The zen of Just Writing CSS 公開日: 2017/09/06 著者: Rich Harris サイト: https://svelte.technology/ SFCについてはVue.js: 単一ファイルコンポーネントもどうぞ。 これは未来の話だが、私たちは既にそれを実践しているのだ。 CSSを嫌うのが流行っています。CSSを嫌う理由はいくらでもありえますが、突き詰めれば「CSSが予測不可能である」ということです。スタイルのルールをこねくり回しているうちに、まったく関係ない別のレイアウトが不意に壊れてしまう（しかもたいてい納品間近に起きる）という経験をしたことがない人がいるとすれば、新人か、さもなければよほどプログラミングが上手いかのどちらかでしょう。 JavaScriptコミュニティはこの問題に取り組み続
CSS/JS: 画像を不規則な形に切り取ってテープで貼り付けるテクニック（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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」のことがふと頭をよぎりました。とても面白く風変わりなこのサイトに惹かれて調べてみたところ、ここはまさに学ぶ価値のあるサイトであると確信できました。このサイトには数年におよび
CSSでの句読点ぶら下げ: hanging-punctuationプロパティ｜TechRacho by BPS株式会社
句読点のぶら下げを指定する hanging-punctuation プロパティと、超縦書ビューアでの表示例についてご紹介します。 句読点のぶら下げとは 行末に句読点が来た場合、通常の行長よりはみ出して配置する方法です。日本語の均等割り組版でよく使われます。 小学校の時の作文では、この書き方をした記憶があります。 ぶら下げのメリット もともとは、手動組版で微調整の手間を省くため、ある種の手抜きから生まれたという話もありますが、 行末がより揃って見える 文字間隔の調整に無理がなくなる などのメリットもあります。紙の書籍では、それなりに多く利用されています。
新版: やばい臭いのするCSSコード（翻訳）｜TechRacho by BPS株式会社
今をさかのぼること2012年に、Code Smells in CSSというタイトルでCSSに潜むアンチパターンについての記事を公開しました。その後4年が経過し、記事の内容についての考えは今も変わっていませんが、さらに追加すべきリストが増えました。繰り返しますが、これらはあくまでコードから立ち上るやばい臭いという兆候であり、これがあるからといって必ずしも絶対的な悪手ではないことにご注意ください。ユースケースによっては全面的に容認できることもあるかもしれません。それでもやばい臭いが残ることに変わりはありませんが。 本題に入る前に、「コードの臭い（訳注: リンク先は日本語版です）」とは何かをおさらいしておきましょう。以下はWikipediaからの引用です（訳注: 強調は原著者）。 コードの臭い（または悪臭）とは、コンピュータプログラミングにおいてソースコードにより深刻な問題が潜んでいる可能性をう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
