目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
UIUXデザイングループのグループ長を担当させていただいている小田と申します。 一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。 今回はモノタロウのデザインシステムのお話をしたいと思います。 デザインシステムの始まり これは数年前の話です。 何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。 サービスの品質を上げるPDCAを早く回す為に土台（図1）を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。 分散していたスタイル： 作成したボタ
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
デジタル庁のサイト、その後… - Qiita
はじめに 第1弾で多くの評価と批判をいただきました。 そして、第2弾もそこそこの評価をいただきました。 第3弾は全くの不発でした。 そして2023年11月1日、正式にリニューアルがされました。 今回第４弾はリニューアルされたデジタル庁のサイトについて書いていきます。 Next.jsからDrupalへ まず、試作版のデジタル庁のサイトがこちらです。 今現在は試作版のサイトが閉鎖されていて、手元にスクショがなかったので、webarchiveから取得しました。 こちらがデジタル庁のサイトです。 最初見た時、「そのまま試作版のサイトを本番サイトにしたのねん」と思いました。 しかし、よくよく調査すると、大きく変わっていることに気づきました。 なんと、Next.jsからDrupalに変わっているではないですか！！！ これはびっくりしました。第一弾の記事で、デジタル庁のサイトにNext.jsが使われてい
心理学を遊撃する 作者:山田祐樹ちとせプレスAmazon 本書は認知心理学者山田佑樹による，「心理学の再現性問題」についてそれをリサーチ対象として捉えて突っ込んでいった結果を報告してくれる書物である． 「心理学の再現性問題」は，心理学者にとって自分のリサーチの基礎ががらがらと崩れていくかもしれないような重苦しいテーマであるに違いない．しかし著者はそれを軽やかに取り上げ，様々な角度からつつき，本質を見極めようとする．物語としてはその突貫振りが楽しいし，再現性問題が非常に複雑な側面を持ち，かつとても興味深い現象であり，到達点がなお見えない奥深いものであることを教えてくれる．それはまさに最前線からの「遊撃」レポートであり，迫力満点の一冊だ． 第1章 心理学の楽屋話をしよう 第1章では心理学の「楽屋話」が書かれている．まず著者の駆け出しのころの研究（ランダムネスの知覚），面白い効果を実験で示せたと
CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco
エンジニアが開発しやすい環境作り - Qiita
はじめに 自分は現在、システム開発会社にて執行役員としてプロジェクトマネジメントやコンサルをしています。 今までのプロジェクトから得た経験を元に、エンジニアが開発しやすい環境作りについて、自分なりにまとめていきます。 対象者 エンジニアチームのモチベーションを上げたい人 エンジニアチームにとって開発しやすい環境作りを知りたい人 お断り 今回紹介するのは自分が実践してきた一例であり、必ずしも正解というわけではありません 「こうしなさい」ではなく「こうするとより良くなるかも」といったモチベで書いています GitHubで開発を進める前提 目次 ドキュメント整備 issueの作成 開発環境の整備 コードレビュー プロジェクトの開発進捗の管理について ドキュメント整備 まずはじめに、エンジニアが開発に入る際に必ず見る「README」の書き方を説明していきます。 自分がREADMEを書く時は「プロジェ
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
2024年1月26日紙版発売 2024年1月26日電子版発売 工藤智祥 著 B5変形判／384ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13943-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア，マークアップエンジニア，そしてデザインシステムの構築に興味があるデザイナーを対象に，Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
この資料は Meguro.css#9 のLT資料です。 メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります 自己紹介 yamanoku.icon @ yamanoku 大山奥人, おおやまみちのく a.k.a やまのく X（旧Twitter） GitHub 株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています 得意領域 マークアップ・フロントエンド・UIデザイン・アクセシビリティ 既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主 Meguro.css復活！！！！！ 株式会社オロ様、Nakayaさんありがとうございます（感謝） Meguro.css#4がエンジニアとしての初登壇イベントでした 今回のテーマ「2020年から2023年までに登場したCSSの変遷を振り返る」 前回のMeguro.cssが2020年1月開
「観光客が少ない国」第3位のサントメ・プリンシペがどんなところなのか実際に見に行ってみた【インターリンク ドメイン島巡り 第42回「.st」】
国家元首の地位を個人に持たせない共和制国家であるサントメ・プリンシペ民主共和国の経済は、カカオ豆の生産とその輸出に大きく依存しています。観光業も重要な産業の一つですが、サントメ・プリンシペは観光客が少ない国第3位。これまで犯罪多発都市や沈みかけの絶海の孤島、人よりホッキョクグマが多い世界最北の町などに弾丸現地取材してきた「ドメイン島巡り」の第42回目となる今回は、実際に首都のあるサントメ島に行き、現地の魅力を探ってきました。 ドメイン島巡り - 世界のドメイン1,000種類以上を取り扱うインターリンクが、「.cc」「.tv」「.sx」等、南太平洋やカリブ海などの「島のドメイン」約50種類に焦点をあて、実際にその島々に行き、島の魅力をレポートします。 https://islanddomains.earth/ ◆サントメ・プリンシペはどこにあるのか？ サントメ・プリンシペはアフリカ大陸のギニア
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
№1,679 ブラジル紀行 ❝ 食べるは楽し シュハスコ（churrasco ポルトガル語：ʃuˈʁasku）❞ - 糸屯 ち ゃ ん の エ ン タ メ 通 信
🙇🏻まずは２ポチっと、「にほんブログ村」と 「拍手」を押してもらえたら、やる気 ✖１００倍 ポパイのホウレン草です！ _ _)) ⏱この記事は、約４分で読破できると思います ❢ ℹ️ご来場の皆さまへ わたしが主催させてもらってますサークルを下の方にご案内をしていますので、 宜しければ参加してみませんか❓ _ _))ﾍﾟｺﾘﾝ は じ め に ご 挨 拶 本 編 食べるは楽し シュハスコ（churrasco ポルトガル語：ʃuˈʁasku） 概 要 お わ り に ご 挨 拶 糸屯ちゃんの掲示板 主催サークルのご案内です（2023年10月11日 10:45現在） ブログサークルコメント ＃ハッシュタグ（IN POINT） ﾗﾝｷﾝｸﾞﾊﾞﾅｰ、拍手、はてなｽﾀｰ、B!ﾌﾞｯｸﾏｰｸ は じ め に ご 挨 拶 おはようございます ☕ _ _))ﾍﾟｺﾘﾝ 白石です
スイッチの後継機「Nintendo Switch 2」(仮称)について任天堂がゲームパブリッシャーに発売時期の延期を伝えたと報じられる
任天堂がNintendo Switchの後継機となる「Nintendo Switch 2」(仮称)を開発しているとウワサされています。海外ゲームメディアのVGCによると、任天堂はNintendo Switch 2の発売時期を当初の予定よりも遅れると大手ゲームパブリッシャーに通達したそうです。 Sources: Nintendo Switch 2 will now launch in 2025 | VGC https://www.videogameschronicle.com/news/nintendo-switch-2-could-now-launch-in-2025-its-claimed/ Nintendo Switch 2 release date now Q1 2025 - reports | Eurogamer.net https://www.eurogamer.net/nint
5 月末頃に、Twitter で 「Tailwind CSS はプロジェクトにとって将来的に技術的負債になるかもしれない」という趣旨の意見を発端として Tailwind CSS について多くの議論が起きました。[1] Tailwind CSS は世界的に人気な CSS フレームワークとして、今までも何回もその良さや課題について議論が起きてきましたが、「Tailwind CSS で得られる価値」について主張する意見において、CSS(や、CSS の関連技術)がなぜ技術的負債になるか、Tailwind CSS を使ったらなぜ CSS が技術的負債になることを回避できるかという視点から Tailwind CSS の特性を整理している意見や記事はインターネット上に多くないと思いました。この記事ではその点に注目しつつ、Tailwind CSS が CSS 設計にもたらす利点について整理したいと思います
Netflix Japan - Watch TV Shows Online, Watch Movies Online
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
Thinking in StyleX | StyleX
Core PrinciplesTo understand why StyleX exists and the reasoning behind its decisions, it may be beneficial to familiarize oneself with the fundamental principles that guide it. This may help you decide if StyleX is the right solution for you. These principles should also be helpful when designing new APIs for StyleX. Co-locationThere are benefits of DRY code, but we don't think that's usually t
フロントエンドの複雑さに立ち向かう 〜DDDとClean Architectureを携えて〜 | さくらのナレッジ
自己紹介 さくらインターネットではシニアフロントエンドエンジニアをやっています。代表作は「NES.css」というファミコン風CSSフレームワークで、エイプリルフールには「さくらのINFRA WARS」というゲームの企画開発をしていました。 話さないこと 本記事ではソフトウェア設計ということで、以下の設計・アーキテクチャに関しては話す予定はありません。コンポーネント設計や CSS 設計に関しては過去に記事やスライドを公開していますので、気になる方はそちらを参考にしていただければと思います。 コンポーネント設計 加速するコンポーネント設計入門 / Component Design as an Accelerator コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins CSS設計 OO
「日本の開発者は素晴らしい」ソーシャルメディアの明るい未来を感じたBlueskyミートアップ東京 #BskyMeetup | LoveTechMedia - ラブテックメディア
2024年4月13日、いわゆる“分散型SNS”として利用者が増えている「Bluesky」のミートアップイベント（Bluesky Meetup in Tokyo）が、東京・紀尾井町にあるLINEヤフー本社で開催された（翌日には大阪・中央区にあるNTTデータSBCオフィスでもBluesky Meetup in Osaka も開催された）。 昨春に引き続き今回で2度目の開催となった当日は、Bluesky開発チームのテクニカルアドバイザーであるWhy［Jeromy Johnson］氏が来日登壇されたほか、リモートで同社CEOのJay［Jay Graber］氏も登場し、会場およびオンライン経由の参加者約200人に向けて、これまでの開発秘話や今後の展開等がざっくばらんに共有された。 東京会場の様子。技術者やデザイナー、クリエイターの他、純粋なBlueskyユーザーなど、様々な属性の方が参加していた ま
Limit the reach of your selectors with the CSS @scope at-rule | CSS and UI | Chrome for Developers
The delicate art of writing CSS selectors When writing selectors you may find yourself torn between two worlds. On the one hand you want to be pretty specific about which elements you select. On the other hand, you want your selectors to remain easy to override and not be tightly coupled to the DOM structure. For example, when you want to select “the hero image in the content area of the card comp
Amazon CloudFront はじめに 本ページは、AWS に関する個人の勉強および勉強会で使用することを目的に、AWS ドキュメントなどを参照し作成しておりますが、記載の誤り等が含まれる場合がございます。 最新の情報については、AWS 公式ドキュメントをご参照ください。 Contents Amazon CloudFront はじめに Contents Amazon CloudFront とは CloudFront の基本 ディストリビューション オリジン エッジロケーション リージョン別エッジキャッシュ ビヘイビア（Behavior） キャッシュ無効化（Invalidation） 圧縮機能 料金クラス 署名付き URL と署名付き Cookie S3 オリジンへのアクセス制限 ALB オリジンへのアクセス制限 コンテンツを地理的に制限 AWS Shield AWS WAFによるアク
『心理学を遊撃する』内容紹介
研究が再現されない，だと!? 心理学の屋台骨を揺るがす再現性問題が勃発。どのような課題があるのか？ 攻略する糸口とは？ 心理学はこれからどうなるのか？ チャンスをうかがい試行錯誤しながら，さまざまな課題にアプローチしていく1人の研究者の冒険活劇（ドキュメンタリー）。 目次 第1章 心理学の楽屋話をしよう 第2章 再現性問題を攻略する 第3章 研究のチートとパッチ――QRPsと事前登録 第4章 研究リアルシャドー――追試研究 第5章 多人数で研究対象を制圧する――マルチラボ研究 第6章 論文をアップデートせよ 第7章 評価という名の病魔 第8章 心理学の再建可能性 著者 山田祐樹（やまだ ゆうき） 2008年，九州大学大学院人間環境学府博士後期課程修了，博士（心理学） 現在，九州大学基幹教育院准教授 主要著作：『認知心理学者が教える最適の学習法―ビジュアルガイドブック』（日本語版監修，東京書
【インタビュー】Kis-My-Ft2宮田俊哉が作家デビュー！ キッカケは「アニメの原作を作りたかった」 Kis-My-Ft2の一員であり、アニメ好きとしても知られる宮田俊哉さんが遂にライトノベル作家デビューを果たす。デビュー作『境界のメロディ』は、メジャーデビュー直前にして亡くなったバンドマンと、その遺された相方の関係性を描く青春グラフィティ。感動譚として構成された本作をどのように新人作家・宮田俊哉は描いていったのか？ 創作風景やライトノベルの想いについてもお話を伺った。 宮田俊哉とライトノベルの原風景 ——宮田さんといえばKis-My-Ft2のメンバーとして知られています。様々な番組や媒体でもいろんなアニメについて語られていましたが、ライトノベルについての思い出はありますか？ 僕にとってライトノベルって、小説を簡単に読めることに気付かせてくれたジャンルなんですよ。ライトノベル以外だと、事
Vueで試すCSS modules | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
開発チームの下田です。 新年あけましておめでとうございます！ 入れ替わりが激しいフロントエンドの技術をキャッチアップするモダンフロントエンド勉強会を社内で月2回開催しています。今回はVueの単一ファイルコンポーネントからCSS Modulesを使う方法を取り上げました。 今回のテーマはCSS Modulesです。VueのCSSモジュールではありません。紛らわしいですね・・この先VueのCSSモジュールの話は一切出てきませんので、CSS Modulesと言ったらCSS Modulesの話です。 CSS Modulesはreactとセットで解説している場合が多いですが、HTMLのテンプレートエンジンには依存しない、独立した仕様です。Vueで使ってもいいですし、他のフレームワークで使用しても問題ありません。 目的と環境 今回はわかりやすさを重視して、headerが青、mainが赤地に白の非常にダ
![Vueで試すCSS modules | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/86c57255ef0ee3b29f65ca182e3808f9994f44de/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2023%2F12%2Feye-1.png)
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
5000万件のDynamoDBテーブルをダウンタイム無しで移行した話 - Uzabase for Engineers
こんにちは、ソーシャル経済メディア「NewsPicks」の高山周太郎です。 この記事は NewsPicks アドベントカレンダー 2023 の13日目の記事です。 昨日はakaneyoshiさんによる『BEMの記述メソッドを参考にデザインファイルのクラス名を定義する』でした！ NewsPicksではデータストアの一部にDynamoDBを使用しています。先日、DynamoDBの約5000万件データが入ったテーブルAを、新規のテーブルBとCに分割する移行作業を実施したので、その事例紹介をします。 移行の要件 設計 Phase1: JSONでの一括import スクリプトの用意 DynamoDBのJSONについて 実験と時間計測 importの高速化 Phase2: import時点での差分処理 Phase3: 残差分の定点観測 まとめ 告知 移行の要件 今回の移行では以下のような要件を満たす必
蓮舫「コミュニティノートをつける奴の実名を出せ！」 1 名前：ノルウェージャンフォレストキャット (神奈川県) [JP]：2023/07/22(土) 05:49:08.19 ID:RWUUShiv0●.net 実名表示にしたところでお前らは「訳の分からん無名のネトウヨがネトウヨ意見をつけやがって」としか思わんだろ。でもし有名人にコミュニティノートをつけられたら「あいつはネトウヨだった！失望した」とか騒ぐだけだろ。意味不明な提案をする前にお前らは実名でのデマ発信をやめろ— 星宮小町 (@sarome100man) July 21, 2023 4: アフリカゴールデンキャット(東京都) [US] 2023/07/22(土) 05:50:20.72 ID:/7v9NH0x0 こうかはばつぐんだ！ 7: オシキャット(埼玉県) [ﾆﾀﾞ] 2023/07/22(土) 05:50:53.06 ID:
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
梅雨時期に最適！通気性とおしゃれさ抜群の雨具
２男児育児中のミノリです^^/ 突然ですが みのり もうすぐ梅雨に入るね〜 子どもたちの雨具はどうされてます？？ 友人 レインコートじゃあ蒸し暑いし 傘は風に煽られて怪我しやすいし… 何か良い雨具ないの？ みのり ホントよね〜 暑いと子どもの機嫌も悪くなるし… 水着でもいいくらいよね。 友人 いや。。。 水着は。。。。絶対にない！ 独断と偏見で ジメジメ蒸し暑い梅雨の時期に 使いやすい可愛い雨具があったのでご紹介します^^/ ポンチョ 普通のレインコートよりも通気性の良いポンチョ型。 無難でいろんな模様があって可愛い❤︎ リンク リンク リンク リンク レインハット ポンチョよりも もっともっと通気性が良いのがレインハット。 リンク 1,000円以下で購入できる安価で可愛く目立つ幼児用レインハット。 脇の下に通すベルト付きなので風で飛ばされる心配もなし。 みのり なんだろね。 見慣れないか
宮田俊哉（Kis-My-Ft2）が5月24日作家デビュー！
株式会社KADOKAWA（本社：東京都千代田区、 取締役 代表執行役社長 CEO：夏野剛）は、 宮田俊哉さん（Kis-My-Ft2）による初のライトノベル『境界のメロディ』をメディアワークス文庫より2024年5月24日（金）に発売することを決定しました。同時にドラマCD付き特装版の発売も決定し、本日1月15日（月）より予約開始いたしました。 宮田俊哉（Kis-My-Ft2）が贈る、２人の少年の青春と命の輝きを描いたライトノベル 『境界のメロディ』は「音楽」をテーマに２人の少年の青春と命の輝きを描いた、宮田さんによる初のライトノベルです。 【あらすじ】 メジャーデビュー目前にして相方のカイを事故で亡くしたキョウスケは、音楽から距離を置き無気力に生きていた。しかし事故から２年。突然カイがキョウスケの前に現れる。 「生きていても、何もやらずに止まったままだったら、死んでるのと一緒じゃん」 生前と
'); doc.close(); } if (!doc) throw Error('base not supported'); var baseTag = doc.createElement('base'); baseTag.href = base; doc.getElementsByTagName('head')[0].appendChild(baseTag); var anchor = doc.createElement('a'); anchor.href = url; return anchor.href; } finally { if (iframe) iframe.parentNode.removeChild(iframe); } }()); } // An inner object implementing URLUtils (either a native URL // ob
ビッグモーターの次はネクステージでも不正発覚「ビッグモーターよりエグい」「わざとタイヤをパンクさせて…」 Tweet カテゴリニュース 0 ：ハムスター速報 2023年09月06日 09:11 ID：hamusoku 《ルールや方針が「ビッグモーター化」》中古車販売業界第2位「ネクステージ」の不正を現役社員、元社員が続々告発！「BMよりエグい」「わざとタイヤをパンクさせて…」#文春オンラインhttps://t.co/HtPMsagcWB— 文春オンライン (@bunshun_online) September 5, 2023 大手がこんなことやってるのかと思うと業界全体が信じられなくなるよね…車検や修理どこに出そうか？もうディーラーしかないのか？— ぼくさー🎦アマゾンでひと休み (@stockfxport) September 6, 2023 中古車販売業界の闇きたか— まー (@CPb
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
When to Nest CSS
With the recent news that CSS nesting is now available in the major evergreen browsers, our team was discussing how it differs from nesting in Sass, and the question came up — When should you use nesting? There’s a simple answer and a slightly more complicated answer. The simple answer is “avoid nesting.” The more practical, but also more complex answer is “nest pseudo-selectors, parent modifiers,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
モノタロウ社内デザインシステムの今までとこれから - MonotaRO Tech Blog
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
書評 「心理学を遊撃する」 - shorebird 進化心理学中心の書評など
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita
Tailwind CSS実践入門
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
Tailwind CSSはCSS設計に何をもたらすか
【初心者向け】Amazon CloudFront について改めて整理してみた
【インタビュー】Kis-My-Ft2宮田俊哉が作家デビュー！ キッカケは「アニメの原作を作りたかった」
PLUTO | Netflix (ネットフリックス) 公式サイト
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
蓮舫「コミュニティノートをつける奴の実名を出せ！」 : 痛いニュース(ﾉ∀`)
Old Dogs, new CSS Tricks
T・Pぼん | Netflix (ネットフリックス) 公式サイト
スコット・ピルグリム テイクス・オフ | Netflix (ネットフリックス) 公式サイト
ビッグモーターの次はネクステージでも不正発覚「ビッグモーターよりエグい」「わざとタイヤをパンクさせて…」 : ハムスター速報
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita