「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
デジタル庁のサイト、その後… - Qiita
はじめに 第1弾で多くの評価と批判をいただきました。 そして、第2弾もそこそこの評価をいただきました。 第3弾は全くの不発でした。 そして2023年11月1日、正式にリニューアルがされました。 今回第４弾はリニューアルされたデジタル庁のサイトについて書いていきます。 Next.jsからDrupalへ まず、試作版のデジタル庁のサイトがこちらです。 今現在は試作版のサイトが閉鎖されていて、手元にスクショがなかったので、webarchiveから取得しました。 こちらがデジタル庁のサイトです。 最初見た時、「そのまま試作版のサイトを本番サイトにしたのねん」と思いました。 しかし、よくよく調査すると、大きく変わっていることに気づきました。 なんと、Next.jsからDrupalに変わっているではないですか！！！ これはびっくりしました。第一弾の記事で、デジタル庁のサイトにNext.jsが使われてい
心理学を遊撃する 作者:山田祐樹ちとせプレスAmazon 本書は認知心理学者山田佑樹による，「心理学の再現性問題」についてそれをリサーチ対象として捉えて突っ込んでいった結果を報告してくれる書物である． 「心理学の再現性問題」は，心理学者にとって自分のリサーチの基礎ががらがらと崩れていくかもしれないような重苦しいテーマであるに違いない．しかし著者はそれを軽やかに取り上げ，様々な角度からつつき，本質を見極めようとする．物語としてはその突貫振りが楽しいし，再現性問題が非常に複雑な側面を持ち，かつとても興味深い現象であり，到達点がなお見えない奥深いものであることを教えてくれる．それはまさに最前線からの「遊撃」レポートであり，迫力満点の一冊だ． 第1章 心理学の楽屋話をしよう 第1章では心理学の「楽屋話」が書かれている．まず著者の駆け出しのころの研究（ランダムネスの知覚），面白い効果を実験で示せたと
エンジニアが開発しやすい環境作り - Qiita
はじめに 自分は現在、システム開発会社にて執行役員としてプロジェクトマネジメントやコンサルをしています。 今までのプロジェクトから得た経験を元に、エンジニアが開発しやすい環境作りについて、自分なりにまとめていきます。 対象者 エンジニアチームのモチベーションを上げたい人 エンジニアチームにとって開発しやすい環境作りを知りたい人 お断り 今回紹介するのは自分が実践してきた一例であり、必ずしも正解というわけではありません 「こうしなさい」ではなく「こうするとより良くなるかも」といったモチベで書いています GitHubで開発を進める前提 目次 ドキュメント整備 issueの作成 開発環境の整備 コードレビュー プロジェクトの開発進捗の管理について ドキュメント整備 まずはじめに、エンジニアが開発に入る際に必ず見る「README」の書き方を説明していきます。 自分がREADMEを書く時は「プロジェ
2024年10月17日、X(旧Twitter)のブロックに関する仕様が変更されました。この仕様変更が大々的に通知されたところ、競合ソーシャルメディアであるBlueskyが50万人超の新規ユーザーを獲得するという事態が起きています。 Bluesky gains half a million new users in one day after X changes how blocking works | Mashable https://mashable.com/article/bluesky-half-a-million-new-users-after-x-twitter-block-change 2024年9月24日、Xのオーナーであるイーロン・マスク氏がブロックの仕様変更を示唆するポストを行いました。これまでXでは、特定のユーザーにブロックされるとそのユーザーのプロフィール・ポスト・フ
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
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の基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
ZOZOTOWNのフロントエンド開発にCSS in JSを導入して2年後の状況 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 CSS in JS導入後の運用状況 ZOZOTOWNの開発体制は、Webフロントエンドだけでも5つのチームが存在し、さらに外部の業務委託メンバーも加えると、開発に携わるメンバーは執筆時点でのべ50名を超
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
「観光客が少ない国」第3位のサントメ・プリンシペがどんなところなのか実際に見に行ってみた【インターリンク ドメイン島巡り 第42回「.st」】
国家元首の地位を個人に持たせない共和制国家であるサントメ・プリンシペ民主共和国の経済は、カカオ豆の生産とその輸出に大きく依存しています。観光業も重要な産業の一つですが、サントメ・プリンシペは観光客が少ない国第3位。これまで犯罪多発都市や沈みかけの絶海の孤島、人よりホッキョクグマが多い世界最北の町などに弾丸現地取材してきた「ドメイン島巡り」の第42回目となる今回は、実際に首都のあるサントメ島に行き、現地の魅力を探ってきました。 ドメイン島巡り - 世界のドメイン1,000種類以上を取り扱うインターリンクが、「.cc」「.tv」「.sx」等、南太平洋やカリブ海などの「島のドメイン」約50種類に焦点をあて、実際にその島々に行き、島の魅力をレポートします。 https://islanddomains.earth/ ◆サントメ・プリンシペはどこにあるのか？ サントメ・プリンシペはアフリカ大陸のギニア
弥助関連史料とその英訳 / English translated historical documents related to Yasuke - 打越眠主主義人民共和国
はじめに Introduction 筆者の連絡先 How to contact me 信長公記 The Chronicle of Nobunaga 池田家本『信長公記』Shinchoko-ki Ikeda-hon 尊経閣本『信長公記』Sonkeikaku-bunko manuscript 尊経閣本の信頼性に関する議論 Discussion of the reliability 天正9年のイエズス会史料 Jesuit Documents in 1581 天正9年3月11日の書簡 Letter of April 14, 1581 天正9年9月11日の書簡 Letter of October 8, 1581 家忠日記 Ietada Diary 弥助に関する最後の記録 Last record of Yasuke 天正10年10月20日の書簡 Letter of November 5, 1582 書
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 }}</
スイッチの後継機「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
:has()疑似クラスは筆者が断トツで一番気に入っているCSSの新機能です。筆者と同じ意見の読者も多いでしょう。少なくとも、State of CSSのアンケートに回答した方の中には多くいるはずです。セレクタを逆向きに指定できることで、これまでできると思いもしなかったようなすごいことがもっと可能になります。 「もっと」と言うのは、すでに多くの人が極めてスマートなアイデアを色々と発表しているからです。以下に一部紹介します。 Using :has() as a CSS Parent Selector and much more（Jen Simmons） Quantity Queries for “islands of elements” with the same class, thanks to CSS :has()（Bramus） Style a parent element based o
CSSの新しい:hasセレクタと、これを使用したReactコードの改善方法について説明します。実用的で美しい例とともに。 大昔、とは言ってもCSSが出てきた当初の話ですが、CSSはカスケードする仕組みになっていると教えられていました。それは、Cascading Style Sheetsという名前からも分かります。CSSでは、入れ子のように要素の中の要素を指定し、さらにその中に含まれる要素を指定していくことができます。しかし、その逆はできません。したがって、子要素が親要素にスタイルを適用するには、JavaScriptを使うしかありませんでした。 今までは。 すべての主要ブラウザがCSSの:hasセレクタに対応したことで、親要素を指定できるようになりました。それだけではありません。これは世界が一変したと言えるほどの出来事です。筆者のように、要素の角を丸くするために透過GIFを使用していた時代か
2024年10月の発表通り、Xがブロックに関する仕様の変更の適用を開始したことがわかりました。これにより、Xユーザーは相手にブロックされていても、相手の投稿内容を確認することができるようになります。 Blocking on X https://help.x.com/en/using-x/blocking-and-unblocking-accounts X updates block feature, letting blocked users see your public posts | TechCrunch https://techcrunch.com/2024/11/03/x-updates-block-feature-letting-blocked-users-see-your-public-posts/ X now lets blocked users see your post
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
毎日17時に「YouTubeにゲーム実況動画」を配信しております。 魔が刺したら覗いて見てね↓↓↓ 昨日までのニュースを簡単に振り返ろうかなと思ってます。 よかったら御一緒に眺めましょう！ 世界の投資家「日銀が利上げしたもんなぁ。ほんとまさかだよなぁ・・・」 日本が世界の投資家の不安の中心に変貌－投資家は再評価迫られる https://t.co/bEm9EbwqkF — ブルームバーグニュース (@BloombergJapan) August 7, 2024 世界の投資家が「日本市場」を注視しているよー！って、記事があったので共有。 記事の内容は、簡単ですがこんな感じ。 ・ここ数年間、日本の株式市場は世界から人気モノだったけど、日銀の利上げによってそうではなくなった模様。市場関係者は、個人消費や投資が落ちついてしまうのを恐れている模様。 ・またこの大きな下落を引き起こした理由は「キャリート
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
『心理学を遊撃する』内容紹介
研究が再現されない，だと!? 心理学の屋台骨を揺るがす再現性問題が勃発。どのような課題があるのか？ 攻略する糸口とは？ 心理学はこれからどうなるのか？ チャンスをうかがい試行錯誤しながら，さまざまな課題にアプローチしていく1人の研究者の冒険活劇（ドキュメンタリー）。 目次 第1章 心理学の楽屋話をしよう 第2章 再現性問題を攻略する 第3章 研究のチートとパッチ――QRPsと事前登録 第4章 研究リアルシャドー――追試研究 第5章 多人数で研究対象を制圧する――マルチラボ研究 第6章 論文をアップデートせよ 第7章 評価という名の病魔 第8章 心理学の再建可能性 著者 山田祐樹（やまだ ゆうき） 2008年，九州大学大学院人間環境学府博士後期課程修了，博士（心理学） 現在，九州大学基幹教育院准教授 主要著作：『認知心理学者が教える最適の学習法―ビジュアルガイドブック』（日本語版監修，東京書
Amazon CloudFront はじめに 本ページは、AWS に関する個人の勉強および勉強会で使用することを目的に、AWS ドキュメントなどを参照し作成しておりますが、記載の誤り等が含まれる場合がございます。 最新の情報については、AWS 公式ドキュメントをご参照ください。 Contents Amazon CloudFront はじめに Contents Amazon CloudFront とは CloudFront の基本 ディストリビューション オリジン エッジロケーション リージョン別エッジキャッシュ ビヘイビア（Behavior） キャッシュ無効化（Invalidation） 圧縮機能 料金クラス 署名付き URL と署名付き Cookie S3 オリジンへのアクセス制限 ALB オリジンへのアクセス制限 コンテンツを地理的に制限 AWS Shield AWS WAFによるアク
「日本の開発者は素晴らしい」ソーシャルメディアの明るい未来を感じた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ユーザーなど、様々な属性の方が参加していた ま
【インタビュー】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)
サイボウズで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: 残差分の定点観測 まとめ 告知 移行の要件 今回の移行では以下のような要件を満たす必
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
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう１つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに？というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
梅雨時期に最適！通気性とおしゃれさ抜群の雨具
２男児育児中のミノリです^^/ 突然ですが みのり もうすぐ梅雨に入るね〜 子どもたちの雨具はどうされてます？？ 友人 レインコートじゃあ蒸し暑いし 傘は風に煽られて怪我しやすいし… 何か良い雨具ないの？ みのり ホントよね〜 暑いと子どもの機嫌も悪くなるし… 水着でもいいくらいよね。 友人 いや。。。 水着は。。。。絶対にない！ 独断と偏見で ジメジメ蒸し暑い梅雨の時期に 使いやすい可愛い雨具があったのでご紹介します^^/ ポンチョ 普通のレインコートよりも通気性の良いポンチョ型。 無難でいろんな模様があって可愛い❤︎ リンク リンク リンク リンク レインハット ポンチョよりも もっともっと通気性が良いのがレインハット。 リンク 1,000円以下で購入できる安価で可愛く目立つ幼児用レインハット。 脇の下に通すベルト付きなので風で飛ばされる心配もなし。 みのり なんだろね。 見慣れないか
Tóquio (em japonês: 東京; romaniz.: Tōkyō, pronunciado: [to̞ːkʲo̞ː] (escutarⓘ), literalmente "capital do Leste"), oficialmente Metrópole de Tóquio (東京都 Tōkyō-to?), é a capital do Japão e uma das 47 prefeituras do país. Situa-se em Honshu, a maior ilha do arquipélago. Em 2015, Tóquio possuía mais de 13,4 milhões de habitantes, cerca de 11% da população do país, e a Região Metropolitana de Tóquio poss
宮田俊哉（Kis-My-Ft2）が5月24日作家デビュー！
株式会社KADOKAWA（本社：東京都千代田区、 取締役 代表執行役社長 CEO：夏野剛）は、 宮田俊哉さん（Kis-My-Ft2）による初のライトノベル『境界のメロディ』をメディアワークス文庫より2024年5月24日（金）に発売することを決定しました。同時にドラマCD付き特装版の発売も決定し、本日1月15日（月）より予約開始いたしました。 宮田俊哉（Kis-My-Ft2）が贈る、２人の少年の青春と命の輝きを描いたライトノベル 『境界のメロディ』は「音楽」をテーマに２人の少年の青春と命の輝きを描いた、宮田さんによる初のライトノベルです。 【あらすじ】 メジャーデビュー目前にして相方のカイを事故で亡くしたキョウスケは、音楽から距離を置き無気力に生きていた。しかし事故から3年。突然カイがキョウスケの前に現れる。 「生きていても、何もやらずに止まったままだったら、死んでるのと一緒じゃん」 生前と
'); 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
実践ViewComponent（3）TailwindCSSのクラスとHTML属性（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: ViewComponent in the Wild III: TailwindCSS classes & HTML attributes—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/01/23 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに Ruby on Railsのフルスタック開発がHTMLファーストという方法によって軌
これまでWordPressを用いたWebサイト制作を多く手掛けてきましたが、フリーランスの方や他社様と制作業務をご一緒させていただくこともあります。 一口にWordPressを用いたWebサイト制作といっても、想定している進め方やレギュレーション、習得具合や期待などの認識がずれる懸念もありますので、このあたりを確認するとお互いのギャップが減るのではないかと質問事項を考えてみました。 この内容はWordPressでのサイト制作を行うエンジニア採用においても転用できる部分があると思います。 また、質問の意図を補完する意味で私の場合の回答例も記載しました。 この回答が正しいとも限りませんが、何を聞きたいかのイメージがしやすいかと思います。 質問事項 CMS選定について サイトのリニューアルを行う際に、WordPressを継続利用するかどうかも含めて提案して欲しいという要望があった場合、どのような
X(旧Twitter)がブロックの仕様変更の適用を開始、相手にブロックされても投稿が見える「ブロック貫通」状態に - ライブドアニュース
、Xがブロックに関する仕様の変更の適用を開始したことがわかりました。これにより、Xユーザーは相手にブロックされていても、相手の投稿内容を確認することができるようになります。 Blocking on X https://help.x.com/en/using-x/blocking-and-unblocking-accounts X updates block feature, letting blocked users see your public posts | TechCrunch https://techcrunch.com/2024/11/03/x-updates-block-feature-letting-blocked-users-see-your-public-posts/ X now lets blocked users see your posts https://www
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
書評 「心理学を遊撃する」 - shorebird 進化心理学中心の書評など
X(旧Twitter)がブロックの仕様変更を発表したところBlueskyが50万人超の新規ユーザーを獲得
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
Tailwind CSS実践入門
群雄割拠のCSSフレームワークのトレンドを理解する | レバテックラボ（レバテックLAB）
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
まだまだある実例に沿った:has()の使い方 | POSTD
ReactコードをCSSの:hasセレクタで置き換える | POSTD
X(旧Twitter)がブロックの仕様変更の適用を開始、相手にブロックされても投稿が見える「ブロック貫通」状態に
【あるぷす経済遅報】世界の投資家「日銀が利上げしたもんなぁ。ほんとまさかだよなぁ・・・」｜アルプス投資ブログ
【初心者向け】Amazon CloudFront について改めて整理してみた
【インタビュー】Kis-My-Ft2宮田俊哉が作家デビュー！ キッカケは「アニメの原作を作りたかった」
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
Old Dogs, new CSS Tricks
T・Pぼん | Netflix (ネットフリックス) 公式サイト
ホームページを眺めながらCSS設計について学ぼう【詳細度編】 - Qiita
Tóquio – Wikipédia, a enciclopédia livre
地面師たち | Netflix (ネットフリックス) 公式サイト
WordPressを扱うエンジニアに対する質問事項 - Qiita