2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。 Some little ways I’m using CSS :has() in the real world by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使い方とシンプルだけどクールな使い方を紹介します。 ↔️ Sideway selection in CSS with :has() by Francesco Vetere 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :has()疑似クラスのシンプルでクールな使い方 実装の解説 :has()疑似クラスのシンプルでクールな使い方 みなさん、こんにちわ！👋 この記事では、最近すべてのブラウザに
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
JJUG CCC 2023 Spring 発表資料（ステップアップセッション）。 私がクラス設計をするときに重視している考え方とやり方を紹介。 主な内容 ・クラス設計のスキル 3段階 ・クラス設計の技能を習得するシナリオ ・７つの基礎知識 ① 入出力と計算判断 ② プログラムの中核と周辺 ③ モジュラー性 ④ データ抽象 ⑤ カプセル化 ⑥ 契約プログラミング ⑦ 不変（イミュータブル）
[！] この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。 はじめに そもそも私がSOLID原則を知った経緯は、オブジェクト指向に関数型言語の要素を取り入れた新しい言語を勉強していたことがきっかけになります。 最初は、なぜその言語が関数型言語の要素を取り入れたのかを知るために、オブジェクト指向を改めて調べる必要があると思い調査していました。 その際にSOLID原則という用語を発見しました。そして、SOLID原則について詳しく調べていくうちに、以下の利点があることに気づきました。 無駄な処理をオブジェクトの利用者に書かせることがないようにクラスを構成できるようになります。 バグの発生箇所の特定が容易になります。 機能提供後の機能追加やバグ修正をしやすくできます。 このことを知らないと大きな損になると思い、筆を執りました。 SOLID原則とは ロバ
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
プログラミングをしているとき、変数名や関数名の命名に迷ったことはないでしょうか？ 時間をかけて考えた変数名や関数名を後で見返したときに何の処理なのかわからないと思ったり、他の人が書いたコードを理解するのに時間がかかった経験は誰でもあると思います。 一般に、プログラマーはコードを書いている時間より読んでいる時間の方が長いと言われています。 わかりにくい命名はコードを読んでいる時間を長くしたり、バグを生む原因になってしまいます。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 初級編では、実際に仕事をする中でよく目にしたり自分でも使うことの多いものなど、すぐに使えるテク
CSSの疑似クラスと疑似要素、:と::の違い
CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。 What's the difference between : and :: in CSS? by Salma Alam-Naylor(@whitep4nth3r) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの「疑似」とはどういう意味か 疑似クラスとは 疑似要素とは はじめに 「CSS :と::の違い」をGoogl
CSSで最後の要素にだけスタイルを適用させない、疑似クラス「:not()」と「:last-of-type」の組み合わせは便利
疑似クラスを使いなせるようになると、CSSはより楽しくなります。 リストなど複数の兄弟要素を配置した時に、最後の要素にだけスタイルを適用しないようにするには、:not()と:last-of-typeを組み合わせると便利です。 下記のように最後だけラインをつけないとか、marginやpaddingを変えるという時によく使用されるCSSのテクニックです。
先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。
CSSの:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追加したり変更することなく指定できます。また、コンテンツやフォームなどにも便利な使い方がたくさんあります。 :has(): the family selector by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 先日リリースされたChrome 105, Edge 105で:has()疑似クラスはサポートされ、コンテナクエリ（@containe
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
「いじめた人は一瞬で忘れるが僕は一生恨んでいる」“ジャンポケ”斉藤慎二さんが壮絶な体験を語り続ける理由（静岡放送（SBS）） - Yahoo!ニュース
「小学校3年生から中学まで、ひどいいじめを受けていました」 6月10日、常葉大附属橘中学校・高校(静岡県静岡市)で開かれた講演会でこう語ったのは、人気お笑いトリオ「ジャングルポケット」の斉藤慎二さん(39)だ。 ＜ジャングルポケット・斉藤慎二さん＞ 「自分がクラスの中で一番背が小さいというだけで、『チビだ』とか、『死ね』だとか、『生きている価値がない』と言われるようになりました」 「ひどいときには、後ろの生徒から背中を彫刻刀で刺された。血が止まらなかったんですけど、いじめられていることは、親には内緒にしておこうという変な正義感があった」 斉藤さんの母親は教師。家でもテストの採点などで忙しくしている姿を見て、「負担をかけるのは申し訳ない」と、いじめのことを話せなかったという。 ある児童の誕生日会では、クラスの中で自分1人だけ呼ばれなかった。涙が止まらなかった。 先生に相談すると、「それは斉藤
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
この記事で伝えたいこと ここでは、私が設計を勉強しながらコーディングした経験から、初心者でも簡単に実践できる簡単なルールを3つピックアップしました。 一つのクラスは150行以内に収める 循環参照はしない 継承はしない この3つを守れば、破滅的なクソコードであれば割と簡単に防げるかと思います。 この記事における「破滅的なクソコード」は「一切のリファクタリングの余地も残されていないほどのコード」を意味し、この記事の目的は、「破滅的なクソコード」から、「最低限リファクタリングすればなんとかなるコード」になる程度の手法を紹介することです。 マサカリは大歓迎ですがお手柔らかにお願いします。 読む上で留意して欲しいこと この記事はあくまで 「初心者のための破滅的なクソコードを書かないための簡単な方法論」 であって、「効率的で分かりやすい設計の方法論」ではありません。 この3つは「銀の弾丸」ではないです
![[初心者向け]破滅的なクソコードを書かないために意識したい3つのこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfc9cb7a7ae60a3ca220948d1de61937409038fa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVEJUU3JUEwJUI0JUU2JUJCJTg1JUU3JTlBJTg0JUUzJTgxJUFBJUUzJTgyJUFGJUUzJTgyJUJEJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFCJUU2JTg0JThGJUU4JUFEJTk4JUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTg0MyVFMyU4MSVBNCVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGRjNmFiYjBmYzRhNDk5NzU4NmNmNWIwMzY2NDY5OTY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWthc3R1ZGlvXyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzBjZmYwYjU1YTkwMDc5MDY3MWI4OTA3NjM0OWY3NGI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D04db432a4edc064f3d26fb16f5b4291f)
トレノキャンプ
1．Pythonとは？ 2．オブジェクト指向プログラミングとは 3．Pythonにおける「class（クラス）」の使い方 4．Pythonでclassを扱う際の注意点やコツ 1．Pythonとは？ Python（「パイソン」と読みます）はオブジェクト指向のプログラミング言語の一種です。オブジェクト指向は後ほど詳しく解説しますが、プログラミングのパターンの一つです。オブジェクト指向でコードを書くと、拡張性や保守性に優れたコードが書きやすくなります。このオブジェクト指向を実現するための機構が今回の記事で取り上げるclassです。 Pythonはオブジェクト指向である利点を生かし、多数のライブラリが提供されています。ライブラリを使って容易に言語を拡張できるのもオブジェクト指向のメリットの一つです。そのため、AI開発、Web開発、統計処理、数学的研究、RPAと応用の幅が広くなっています。 部品を組
「“開発者体験”で世界をエンパワメントする1日。」と題し、チームや組織の課題に日々取り組む方々に向けて開催された「Developer eXperience Day CTO/VPoE Conference 2021」。ここで、READYFOR株式会社の仙塲氏が「『Userクラス』で考える技術的負債解消の観点」をテーマに登壇。まずは情報システム開発とモデリングの定義について紹介します。 クソコード動画『Userクラス』 仙塲 大也（以下、仙塲氏）：こんにちは。ミノ駆動と言います。不運な時間がやってまいりました。まじめなセッションだらけなのに、はたしてこういう動画を流していいものかと。完全にネタ枠です。 このセッションの説明です。多くのサービスで技術的負債になりやすい筆頭格として、Userクラスがあります。本セッションでは、Userクラスの負債により引き起こされる弊害を描いた、風刺動画を上映しま
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
単一責任の原則（Single responsibility principle）について、もう一度考える | オブジェクトの広場
単一責任の原則（Single responsibility principle）について、もう一度考える はじめに オブジェクトの広場をご覧の皆様ならば、「SOLID原則」という言葉を聞いたことがあるかもしれません。 SOLIDとは、以下の5つのソフトウェア設計原則を並べたバクロニムです。 Single Responsibility Principle：単一責任の原則 Open/closed principle：オープン/クロースドの原則 Liskov substitution principle：リスコフの置換原則 Interface segregation principle：インターフェース分離の原則 Dependency inversion principle：依存性逆転の原則 ソフトウェアエンジニアが知っておくべき設計原則のセットとして、Clean Architecture や
[詳解] Pythonのdataclasses
dataclassesとは pythonのdataclassesモジュールは、データを格納するためのクラスを定義し、データ格納クラスのための様々な機能を含んだモジュールです。 データ格納のための、と言うとふんわりした印象になりますが、クラス変数を初期化するための__init__()関数を自動生成してくれるため、クラスの定義がシンプルになります。またデータ格納を目的とするクラスの場合__init__()に大量の引数を記載する必要がありますが、自動生成されることによりその必要も無くなります。 データ格納といった目的以外にも様々な用途に用いることが考えられると思います。 dataclassesはPython3.7から追加になりました。本記事はPython3.9のドキュメント、ソースコードを参照して執筆しています。 基本的な使い方 dataclassesモジュールを用いたデータ格納クラスを作成する
![[詳解] Pythonのdataclasses](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d56aea76443615b42f785c9262d9e092a537c48/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--E6mCCp6B--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E8%2525A9%2525B3%2525E8%2525A7%2525A3%25255D%252520Python%2525E3%252581%2525AEdataclasses%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%252588%2525E3%252582%252593%2525E3%252581%2525B6%2525E3%252582%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2g1LW5HV3VTeEFVM1VzVHV4bWljUVVCUDhSMXUtZ19IU0VpQTdUPXMyNTAtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
2021/04/10開催 Developer eXperience Day 2021 「クソコード動画『Userクラス』で考える技術的負債解消の観点」の解説資料です。 https://dxd2021.cto-a.org/program/time-table/b-3 クソコード動画はこちら https://twitter.com/MinoDriven/status/1380773721032433674 YouTubeライブのリンクはこちら https://www.youtube.com/watch?v=ajPaGPdj6tU
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
AnimXYZはclassを組み合わせて任意のアニメーションエフェクトを作れるCSSアニメーション用スタイルシートです。 従来のアニメーション用CSSフレームワーク等のようにclassを付与する事でエフェクトを与えるのではなく、組み合わせてエフェクトを自身で作れる、というもの。 エフェクトはCSS変数で管理されているので、組み合わせだけでなく再定義する事でより幅広いエフェクトに対応できるようになっています。 Vue、Reactもサポート。エフェクトを多用するコンテンツにあると設計が捗りそうですね。ライセンスはMITです。ドキュメントも充実しているのでチェックしてみてくださいね。 AnimXYZ ※本年の更新は本日までになります。来年度は4日か5日あたりから再開します。 今年はコロナで大変でしたね。東京は特に絶賛継続中ですが・・ｗ 皆様もご自愛ください。来年も元気でいられます様に。良いお年を
少人数学級の実現に向けて、政府は令和7年度までに小学校の1クラスの定員を40人以下から35人以下に引き下げる方向で最終調整に入り、17日の閣僚折衝での合意を目指すことにしています。 小学校と中学校の1クラス当たりの定員は、義務標準法で小学1年生が35人以下、また、小学2年生から中学3年生までは40人以下と定められています。 これについて文部科学省は、きめ細かな教育の実施や新型コロナウイルスの感染防止のためには少人数学級の実現が必要だとして、小・中学校ともに1クラスの定員を30人以下に引き下げるよう求めています。 これに対して財務省は、少人数学級の実現が学力の向上に与える効果は限定的であり、財源も示されていないとして否定的な対応を示し、協議が続いていました。 その結果、小学校について2年生から段階的に来年度から令和7年度の5年間をかけて、1クラスの定員を40人以下から35人以下に引き下げる方
霞が関の官庁街に建つ財務省（手前右）と文部科学省（左奥）。少人数学級の必要性を巡り、何度も応酬を繰り広げてきた＝大久保昂撮影 小中学校の教員数を増やす必要があるか否か――。近年、予算編成を巡り文部科学省と財務省がさや当てを繰り返しているが、今年は激しさを増している。文科省が、学級規模の上限を定めた義務標準法を改正し、現行の40人（小1は35人）から30人へ引き下げる一律の少人数学級化を目指す強気の姿勢を見せているからだ。なぜ今なのか背景を探った。【大久保昂】 萩生田文科相「財布を持っている方に負けない」 「財布を持っている方が強いっていうのは世の中的にはそうかもしれませんけど、それに負けないために文科大臣になったつもりでおりますんで、しっかり戦ってまいりたい」。10月27日の閣議後記者会見。少人数学級の実現の可能性を聞かれた萩生田光一文科相は語気を強め、財務省への対抗意識をむき出しにした。
Python - クラス理解への道（罠にはまらないために） | BLOG - DeNA Engineering
システム本部CTO室のeveresです。 今年は、とあるインタビュー記事でディスクリプターについて触れてから、remote.py、PyConJP 2020 Onlineと、続けてPythonの属性について話してきました。 締めくくり…と気合を入れたいところですがAdvent Calendarですので、本エントリーではあまり踏み込まずさわりだけを紹介します。 読んでみて動作を理解していなかった人やクラス生成のカスタマイズなど踏み込んで知りたい方は、PyConJP 2020 Onlineの資料をたどってみてください。末尾にリンクを記載しておきます。 このエントリーは DeNA Advent Calendar 2020 の5日目のエントリーです。 では、始めましょう。 動作環境など 本エントリに登場するサンプルのコードは次の環境で動作を確認しています。 macOS: 11.0.1 Python:
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方
これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
Tailwind CSS を使う時に一緒に入れたいライブラリ
これだけは知っておきたいクラス設計の基礎知識
何となくクラス設計をしていませんか？ ～目からウロコのSOLID原則～
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（初級編） - ICS MEDIA
VS Codeの新機能「スティッキー スクロール」がさらに便利に！ 追従行数の変更、関数やクラスをリスト化できます
モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
[初心者向け]破滅的なクソコードを書かないために意識したい3つのこと - Qiita
なぜUserクラスは負債化しやすいのか “風刺動画”から理解する情報システム開発とモデリング
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
クソコード動画「Userクラス」で考える技術的負債解消の観点
classを組み合わせて任意のアニメーションエフェクトを作れるCSSアニメーション用スタイルシート・「AnimXYZ」
小学校の1クラスの定員 35人以下で最終調整 令和7年度までに | 教育 | NHKニュース
「1クラス30人」コロナ追い風、文科省攻勢 新年度予算巡り財務省と「冬の陣」 | 毎日新聞
CSSの疑似クラス「:focus-within」が素晴らしい理由
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css