[B! Web制作][CSS] Nagataniのブックマーク

Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD

9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。完全な透明性のために断っておくと、私は react-css-mo

Nagatani 2017/06/16

リンク

ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com

受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ

Nagatani 2017/06/15

リンク

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができるサポートブラウザ minmax()の基本的な使い方

Nagatani 2017/06/15

リンク

Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。デバイスのdpiによる見え方このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

Nagatani 2017/05/18

リンク

srcsetとsizes

パート1：メディア・クエリのどこがまずいのか？そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！それはこんなふうに単純だった。幅の固定されたレイアウトをにらみつける画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける画像をさっき測ったとおりのサイズで「ウェブ用に保存」するそれを<img>タグでマークアップするグラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝うときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。しかし、時代は

Nagatani 2017/04/17

リンク

よこ並びのCSS。

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。よこ並び？そう、よこ並び。例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。導入この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート）要素を左右へ寄せるためのプロパティ。後続する文章（テキスト）などのインラ

Nagatani 2017/02/16

リンク

文字まわりのCSSを色々と試してみた | Swings

Nagatani 2017/02/09

リンク

クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利

こんにちは、お久しぶりです。ウェブデベロップメント黒帯を務めております、HTMLやCSSやJavaScriptが大好きな岡部和昌（@kzms2）と申します。最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。最近の活動東大の坂本大介先生と弊社の坂本竜基、鈴木健司（@kensuzuk）と一緒にFix & Slideというタッチデバイスにおける選択のUIについての論文を投稿し、UIST 2015やmobileHCI 2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。上記の論文に関しましては、また別の機会でご紹介できたらと考えております。それでは本題に入ります。 pointer-eventsについて皆様はpointer-eventsというCSSプロパティーやその使い道を

Nagatani 2016/12/13

リンク

morishitterのCSSの書き方（2016年夏） - morishitter blog

今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。僕が1番時間を使うのがこの工程だ。今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善

Nagatani 2016/07/30

リンク

CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | POSTD

(2016/7/15、記事を修正いたしました。) 最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいのではないかと考えている人もいます。もともと、CSSのプロセッサもこうした考え方から生まれました。書くべきコードを少なくできることを期待して（以前の記事でご紹介しているとおり、普通はそうではありません）CSSのフレームワークを使う人もいれば、CSSを完全に見限り、スタイルの指定にJavaScriptを使うという人もいます。しかし、あなたが取り組んでいるパイプラインにCSSプロセッサをいつも取り入れる必要があるとは限りません。どんなプロジェクトであれ、開始の時点から、膨れ上がったフレームワークをデフォルトに取り込む必要はありません。また、CSSを使うところで、代わりにJavaScri

Nagatani 2016/06/14

リンク

どのCSSプロパティが世の中のWebサイトでよく使われているのか？マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開

どのCSSプロパティが世の中のWebサイトでよく使われているのか？マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開 Webサイトをデザインする際、HTMLでテキストを構造化した上で外観を整えるためにCSSを利用します。いまのCSSには多彩な表現力を備えたさまざまなプロパティがある一方、最新のCSSに未対応のブラウザに気を使いつつも新しいプロパティを用いるべきかどうか、歴史的経緯からブラウザ固有のベンダプレフィクスを用いるべきかどうかなど、どのプロパティを実装に用いるのがよいか判断に迷いがちです。その判断材料になりそうな情報が、マイクロソフトから公開されました。「Global CSS Property Usage」です。このデータは、マイクロソフト自身がWebブラウザの開発を進めていく上でどのプロパティを優先して実装していくか、そ

Nagatani 2016/04/12

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Nagatani 2016/03/16

リンク

CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css

外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。アニメーションは40種類以上、他のCSSやJSは不要でわずか19KBの超軽量CSSです。

Nagatani 2016/03/10

リンク

CSSが破綻する4つの理由 - Qiita

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。

Nagatani 2016/02/05

リンク

破綻しにくいCSS設計の法則 15 - Qiita

ブラウザスタイルは平坦化しておくリセットCSSはオプトアウト可能にしておく登場頻度の高い組合せはplaceholderとして登録してから利用する可能な限り画像はスプライト生成してから利用するそれ以上分解不可能なコンポーネントは要素のように扱うコンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる可能な限り@extendは利用しないレスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく詳細度または特異性の高いものほど後方に記述する可能な限り!importantしない可能な限りハックしない変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく例えば、こういうScrap & Buildは単に通信量のムダ。 * { f

Nagatani 2016/02/05

リンク

プログラム組んだら負け！実はHTML/CSSだけでできること2015夏

2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介平尾優典（ひらおゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会「井の中の蛙」にはならないようにと集まったフロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちがその場で話題を決めて、アンカンファレンス形式で

Nagatani 2015/07/26

リンク

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。ビューポートの単位(Viewport Units)とは要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

Nagatani 2015/07/22

リンク

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

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

Nagatani 2015/06/10

リンク

How to Center in CSS

WatCentering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation. Select the type of content you want to center in a parent <div> and the size of the parent.