[B! knowledge][css] iwazerのブックマーク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

iwazer 2016/12/02

リンク

第1回「詳細度」

さて、唐突にはじまりましたが「100年後も崩れない CSS 勉強会」、きょうは詳細度についてお話しします！あっ崩れてる！ …っていうのは CSS あるあるだと思うんですけど、スタイルシートを書いているときはきちんと表示できてても、あとから見るとあれ？おかしくない？みたいなこと、よくありませんか？なんでスタイルが崩れてしまうんでしょうか。そのことを考えるために、逆になんでスタイルって「当たる」のか、というところを改めて見てみようと思います。 CSS には書かれたスタイルを適用する優先順位があって、まず1番目に上から順番に「当てる」というのと、その次に詳細度という順番によって「当てる」という、ふたつのルールがあります。まずは、上から順番に「当たる」ことについて見てみます。 GMO Pepabo, Inc. とだけ書かれた div 要素があって、class という名前の class が指

iwazer 2015/10/06

リンク

なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して

CSSを「なんとなく」知っていて，「なんとなく」使っている，というケースがある。そういう場合，思わぬところでレイアウトが崩れ，要素の正確なポジショニングができず，「なんとなく」ずっと悩み続けることになる。その原因は，CSSの中級のノウハウが足りない，という点にある。一発で正確なレイアウトができるようになろう。そうなれば，CSS中級者だ。以下は，CSS中級者になるためのノウハウ。（１）要素の分類（１−１）インライン要素とブロック要素（１−２）置換インライン要素と非置換インライン要素（２）正確なポジショニング（２−１） positionのrelative/absoluteの使い方（２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い（２−３）要素内の高さ位置と，要素の高さ（２−４） floatの崩れない使い方（３）正確なテーブルレイ

iwazer 2015/07/15

リンク

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい代表的な CSS 設計手法既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSS Lint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ