CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
CSS Grid Layout Generator でレイアウト用CSSを生成する - Qiita
最近作ってたものの紹介です。だいたいできたんで公開します。 これは何 ワークフローによりますが、CSS書く際に最初に決めるのは大まかなレイアウト構成だと思います。 で、最近はコンポーネント志向でReactComponentとか書いていくと、各領域が何を占めるかみたいな設計に便利なのが、CSS Grid Layout ですね。たぶんそう。 これからのグリッドレイアウト 第1回 Grid Layout Moduleの概要 CSS Grid だと何がいいかというと、やたらプラガブルなんで、機械的に吐き出しても汚くならない点です。というわけで作りました。 レイアウト設計、毎度結構だるくて、僕みたいなあんまCSS書きたがらないエンジニアだと、GUIでポチポチやって、それっぽいCSSを吐き出してくれるといいな、なんて思ったりしていました。 ただ、自分はこれを作る過程で Grid Layout に対して
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
Sassなどにあるルールセットを入れ子できる機能がいらないと感じる理由 - I'm kubosho_
Sassなどにはルールセットを入れ子できる機能がありますが、個人的にはいらない機能だと感じています。 理由は、詳細度の総計が分かりにくくなるので .foo .bar .baz .foobar みたいに上書きしにくいセレクタ宣言ができてしまうことが多いように感じるためです。 先ほどのセレクタ内で宣言されたスタイルを上書きするためには、次のことをやらないといけないでしょう。 同じくらい入れ子する !important を使う そもそも入れ子の数を制限する しかし、同じくらい入れ子する、もしくは !impotant を使った時点で管理できないCSSへ一歩踏み出していると思います。 またそもそも入れ子の数を制限するのはありだと思いますが、それだと入れ子がある意味が分からなくなると思います。 なので、ルールセットの入れ子はいらないと思います。 と思いましたが、BEMの考え方でセレクタを書く場合は必要
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
「【座談会】Web Components時代のCSSデザイン」の参加メモ - Web Developer's Struggle Memories
かなり面白くかつ刺激的な座談会だった！以下のメモはだいぶ雑記。間違い + 誤認もあるとは思う。（componentとコンポーネントが混在している、なども） アジェンダ ベストプラクティスを探りたい Web Componentsはこの先避けては通れない CSSデザインの過去・現在 Web Components時代のCSSデザイン CSSデザインの未来 登壇者 高津戸さん（ピクセルグリッド） 小原さん（ピクセルグリッド） 榊原さん（一般社団法人リレーションデザイン研究所） ◯CSSデザインの過去・現在 ▼3年前のCSSデザインはどんな感じでしたか？ iOS7 がフラットデザインを2013年採用 Bootstrapもそれに追随 元々のBootstrapはデザインができないエンジニアのため 昔は背景に画像をベースに置いていた その上にピクセル単位で1ミリのズレも許さずコンテンツを置いていた いわゆ
local(‘😀’) の持つ意味 - ONO TAKEHIKO - Medium
かつて Web フォントを使用する上でブラウザのレンダリング エンジンがまだ成熟しきっていなかった頃。それはバグとの戦いの歴史でもありました。 Web フォントが登場し世の中の Web デザイナー・デベロッパー陣営は、画像化テキスト（<img>）や背景画像置換テキスト（negative text-indent & background-image）という実装・運用コストを増大させる人類共通の敵から、我々の時間と金を取り戻すであろうそれに、まさに究極兵器になり得ると期待を寄せたものです。 しかし。まだ早すぎた。 ……!! 腐ってやがる期待が高いあまり実装を急いだ各種ブラウザーがレンダリング エンジンの成熟を待たずにリリースしたため、Web フォントは方々でバグを引き起こす結果となり別の戦いを強いられることにもなりました。 それらは Safari と IE 6〜8 で Web フォントの fo
CSSを破綻させない / 学ぶ、考える、書き出す。
12/3（土）にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。 そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14 日目の記事として公開します。 CSS は破綻しやすい OOCSS の提唱者 Nicole Sulliban 氏も"CSS is too fragile"と 2008 年のイベントで言いました。 なぜ破綻しやすいのか。それは CSS の特性が絡んでいます。 CSS の特性 CSS の特性としておもに 3 つあります。 はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。 次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。 ちなみにルールセットは CSS のセレ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
CSS Architecture for Design Systems
We just created a design system for a huge organization and established a CSS architecture we’re quite pleased with. It’s one of the first times I’ve ever gotten to a project’s finish line without wishing I’d done at least a few things differently. So I thought it would be great to share how we went about creating our system’s CSS architecture. To give a bit of a context for the project, we were t
CSSになり損ねた言語たち | POSTD
TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る（文字どおり）無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。
CSS Dig
Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Properties Take a look at all your CSS properties, their frequency and variations. Have too many shades of blue? Inconsistencies often means confusion for your developers and irregularities for your end users. Selectors & Specificity Are your selectors long? Using lots of IDs? S
CSS Specificity Graph Generator - by Jonas Ohlsson
020406080100120140160180 020406080100120140160180200 Location in stylesheet Specificity * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { height: 100% } @font-face { font-family: 'Lato web'; font-style: normal; font-weight: 400; src: url('fonts/Lato-Regular.eot'); src: url('fonts/Lato-Regular.eot?#iefix') format('embedded
CSS Architecture | en.ja Article
CreditThis article is translated with permission of Philip Walton. You can find original article at CSS Architecture.本記事はPhilip Walton氏の了承を得て翻訳された記事です。 原文はCSS Architectureにて掲載されています。CSSアーキテクチャ 多くのWebデベロッパとって、良いCSSとはビジュアルモックアップをコードで完全に再現できることを意味する。tableタグを使わず、また出来る限り画像を少なくすることに誇りを持つ。もしあなたが本当に優れたデベロッパであれば、メディアクエリ、Transitions、Transformといった最新で偉大な技術をも使うことだろう。 これらすべてが良いCSSデベロッパに必要なすべてであることは確かではあるものの、ス
morishitterのCSSの書き方（2016年夏） - morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Reference
CSS設計を破綻させない
