[B! CSS] [3ページ] d4-1977のブックマーク

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した﹁The State of CSS 2020﹂を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。ちなみに、代表

d4-1977 2020/12/11

最近、reset.cssはどこまでするのがよくあるんだろう🤔ということも知りたい今日この頃です

CSS

リンク

短いクラス名で運用できる CSS設計 rscss を CSS Modules 向けにアレンジしてみた

はじめにこの記事は #EveOneZenn (Everyday One Zenn) vol.09 です。 CSS設計のひとつであるrscss を CSS Modules (React向け)にアレンジしてみたので紹介します。紹介する規約を使った場合、下記のようなクラス名で CSS Modules を運用できます。 import React from 'react'; import cn from 'classnames'; import styles from 'styles.module.scss'; const Component = (props) => ( <button className={cn( styles.searchButton, { [styles.Disabled]: props.disabled } )} > <span className={styles.i

d4-1977 2020/12/05

CSSの設計、悩むよね…というのと、キチンとlintを用意したり、フォーマッター用意するのフロントエンドの人がいない場合、とても大切だと思うのです

リンク

Next.jsにおけるCSSの取り扱い方法 2020年9月版

はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.js'

d4-1977 2020/11/27

やってみてて、何がいいのかなあ、と思っていたところのでありがたいまとめ。

CSS
Next.js

リンク

細かすぎて伝わらないかもしれないCSSのテクニック

d4-1977 2020/11/23

伝わりにくいってことはなさそうだと思いました

CSS

リンク

Responsive Height Design -レスポンシブを高さの観点から、Webサイトやスマホアプリの実装で役立つテクニック

レスポンシブ対応と言うと、通常は幅、水平方向のサイズのバリエーションですが、最近では高さ、垂直方向のサイズに対するニーズも高まっています。スマホではさまざまな高さのサイズがあるだけでなく、横向きのランドスケープもあります。またデスクトップでもブラウザをスクリーンいっぱいの高さにしているとは限りません。レスポンシブを高さの観点から考慮した、Webサイトやスマホアプリの実装で役立つCSSのテクニックを紹介します。 Responsive Height Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめになぜ高さに対してテストするのかデベロッパーツール CSSで垂直方向を考慮する垂直のメディアクエリの使用例終わりにはじめに Responsive Height Design！

d4-1977 2020/11/19

リンク

Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA

どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の

d4-1977 2020/11/19

復習。

リンク

より良いタイポグラフィのための知られざるCSS

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

d4-1977 2020/10/25

色々できる事が増えているんですが、なかなか使いこなせない…

リンク

その案件、本当にBootstrapが必要ですか？

TAK(@tak_dcxi)です。今回はTwitterでちょくちょく話題になるBootstrapについて。 Bootstrapは非常に便利なフレームワークで、使いようによっては極めて高いコストパフォーマンスを発揮できるツールなのですが、適材適所という言葉があるように明らかにBootstrap向きではない案件でBootstrapを使ってコストパフォーマンスを高めるどころか運用コストを高めているような現場を何度か見てきました。今回はBootstrapが適する案件と適さない案件について、またBootstrapを利用する上で気をつけたいことなど、個人的に思うことを纏めていこうかと。 Bootstrapが向いている案件と向いていない案件いきなり結論ですが、僕が思うBootstrapが向いている案件・向いていない案件は以下のとおりです。 Bootstrapが向いている案件開発にかけられる時間が極

d4-1977 2020/10/23

とても良くわかります。こうしたツールを使うならそのレールに従うこと。もしくは、分割すること。実感中… ●Bootstrap ●CSS ●デザイン

リンク

CSS設計において特に大切にしている思想をまとめてみた

Zennの投稿は初です。TAK(@tak_dcxi)です。今回投稿するのは自分なりのCSS設計のメモ。ある程度の規模感のサイトでのCSS設計において、僕がいくつか大切にしている思想の中から特に重要だと思っているものをピックアップしてまとめてみた。﹁ある程度の規模感﹂とは以下のようなイメージ。テンプレートの数︵※サイトのページ総数ではない︶が10枚以上ローンチ後もPDCAが定期的に行われ、その都度サイトの更新や改修が行われるようなWebサイトサイトの更新や改修は自分以外のスキルを定義しないコーダーやエンジニアによって行われる最後の﹁スキルを定義しないコーダーやエンジニアによって更新や改修が行われる﹂というのがポイントで、つまりスキルに大きな幅がある、とりわけ未経験入社の方のようなマークアップの知識が乏しい方が更新する可能性があることを前提としている。場合によっては急遽量産で知識の

d4-1977 2020/10/11

設計スキルがない人だけのチームだったらどうしたらいいんだろう？設計スキルがある人に頼るのはあるけれど、頼りっぱなしなのも困ってくる？って考えてそこで止まってしまうのが最近です

CSS

リンク

【脱!important】保守性を意識したスタイルを確実に上書きするためのテクニック

TAK(@tak_dcxi)です。今回もCSS設計に関する投稿です。皆様はWebサイトの運用でCSSを更新・改修する際に、既存のスタイルが上書きできなくて苦しんだことはありませんか？ class名のタイポミスだったり、そもそも指定したセレクタに対応する要素が無い…といった凡ミスも原因だったりはしますが、大抵の場合他のスタイル指定が強くて上書きできない、つまり﹁詳細度﹂が影響していることが多いです。 CSSを破綻させる原因の一つの﹁詳細度﹂とは？ MDNの説明を引用すると以下の通り。詳細度は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。 CSSのスタイル指定が競合した時に優先される、セレクタが生まれながらに持つ﹁強さ﹂みたいなものです。全称セレク

d4-1977 2020/10/11

「idにスタイルを指定する必要がある時は、idセレクタを使うのではなく属性セレクタに変換して指定」ナルホド！設計をしておくことで、!important👮🏻‍♂️が誕生することにならないようにしたい

CSS

リンク

iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。以前このようなツイートをしました。メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。そんな中、先程のツイートから

d4-1977 2020/10/04

100vhというか、vhの上手い使い方がまだまだわからない…

css
Safari

リンク

RailsアプリケーションのカオスなCSSに規約をゆるく導入する〜要素セレクタ警察〜 - READYFOR Tech Blog

はじめにこんにちは！READYFORでフロントエンドエンジニアをしております、江面︵ @neripark︶と申します。最近は主に Next.js ︵TypeScript︶を用いたSPA開発に従事しております。CSS設計、コンポーネント設計、Netlify などが好きです！本日はタイトルにもある通り、既存のRailsアプリケーションにCSSコーディング規約を導入したお話をしようと思います！既存のプロダクトのCSSで苦労している方の参考になれば幸いです。これまでのREADYFORのCSS READYFOR は2011年にスタートした、日本初のクラウドファンディングサービスです。その中身は RubyonRails で組まれた標準的なモノリシックWebアプリケーションで、サービスの成長とともに、機能開発も重ねられていきました。その流れの中で、いろいろなエンジニアがいろいろな文脈

d4-1977 2020/09/26

ワカル早めのlintか、formaterの導入が大切デスネ…というのを感じています

CSS

リンク

本当に求めてるのはピクセルパーフェクトという「要件」ですか？｜榊原昌彦

個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は・マサカリ・ jQuery ・ピクセルパーフェクトなのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。そもそもピクセルパーフェクトとは何かをみてみたいと思います。ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。では、どうしてピクセルパーフェクトはこれだけ議論にな

d4-1977 2020/09/22

見かける話なんだけれど、どっちにしても、実装者とデザイナーと、プロダクトマネージャーとかと落としどころを見つけていくのが必要かも、と思ってます

CSS

リンク

実践的レイアウトプリミティブ - yuhei blog

「CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ」の続き。同じようなレイアウトを実現するためのCSSを僕は実のところ何度も繰り返し書いていた。そのたびに新しいコンポーネントを作り、意図を表明するための名前を捻り出し、やってることはたいして変わらないのに別々になった実装を増やしていた。その総量に埋もれて全体が見えなくなっていった。個別のコンポーネントを汎用的なように変換するのは難しい。本当にまったく同じレイアウトならそれほど難しくないが、多くの場合には微妙な差分がある。余白の大きさが違う、グリッドのカラム数が違う、コンテナの幅が違う。いかにしてそれらに規則性を見い出してうまくいく設計ができるかは、腕の見せどころとも言える一方で再現性がなく見通しのつかない仕事だと思っていた。 Every Layoutのレイアウトプリミティブはそのようなレイアウトの構成

d4-1977 2020/07/24

リンク

現代開発者のためのCSS基礎技術 - Qiita

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。ちまたには﹁CSSとは何か﹂を学ぶ教材はたくさんあっても、﹁CSSをどうやってうまく使うか﹂についてはあまり詳しく触れられません。仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。本記事は﹁CSSをうまく使う技術﹂に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。特にプログラミング経験はあるもののウェブフロントエンドの経験が浅い方初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方にお勧めです。プロローグ CSSの書き方は一通りではありません。好きな書き方を自由に選ぶことができます。これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。この場において

d4-1977 2020/07/11

リンク

CSSのbox-sizingをデフォルトでborder-boxにするのはどのくらい一般的なのか - Rista Tech Blog

最近、個人的に鉄拳7のファンサイトを作り始めた@mikedaです。 ↑を作り始めて迷っていることの1つに「CSSのbox-sizingをデフォルトでborder-boxにするかどうか」というのがあります。 ※box-sizingについてはこのあたりを参照【CSS】box-sizing:border-boxの使い方｜効かない時は？ CSS box-sizing — 幅と高さの適用方法を制御 - CSS: カスケーディングスタイルシート | MDN 個人的にはborderやpaddingつけた時にそれを考慮してサイズを計算したり、なんかデカくなった・ハミだしたみたいな事が起こりづらいので、デフォルトでborder-boxのほうが楽かなぁと思っているのですが、リスタで運用しているサービスでもサービスによって違っていたりします。そこで、他のサービスではどうなっているんだろうということが気になっ

d4-1977 2020/07/04

時々、気になっています。

CSS

リンク

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。下記のデモはJavaScriptは無し、CSSのみで実装されています。

d4-1977 2020/06/28

:placeholder-shown疑似クラスって知らなかった。そんなのもあるのか。

CSS

リンク

styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは。フロントエンドエキスパートチームの@nakajmgです。私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中でScss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。今回は styled-components の採用を決定するまでの過程や、既存のScss ファイルの扱いについて検討した内容などを紹介します。スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき

d4-1977 2020/06/27

解決したかっことって、CSSファイルやクラスの命名がカオスで辛いから、運用ルールを作っていきましょう、という話なのかな🤔　CSSって、技術的なことよりも、運用ルールが辛くなる印象があります

CSS

リンク

君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas︵WebGL︶の3つについて、それぞれのできること・できないこと︵得意・不得意︶を作例とともに紹介します。クイズ‥どうやって実現する？　webでできるさまざまな表現下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas︵WebGL︶のいずれかを中心に実装されています

d4-1977 2020/06/02

使い分けできるぐらいにアニメーションを作ったことがないけれど、なんか楽しくなっちゃうんですよね。

リンク

サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる - Qiita

追記︵2021/10/14︶この記事のやり方は古いやり方です。IEや過去バージョンのブラウザに対応したい場合に参考にしてください。今は aspect-ratio プロパティを使ってくださいね。参考‥CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリスやりたいことサイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。レスポンシブで縦と横の比率も揃えたい。画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。 CSS で画像をトリミングする方法 CSS で画像をトリミングするには…で思いつくのは2パターン。ただしどちらも今回のやりたいことが達成できない object-fit を使う方法 object-fit - CSS: カスケーディングスタイルシート | MD

d4-1977 2020/05/20

リンク

はてなブックマーク

タグ

関連タグで絞り込む (172)

CSSに関するd4-1977のブックマーク (615)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス