マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
こんにちはミズノです。 2021年からモダンなブラウザのUA style sheet(ユーザーエージェントスタイルシート)に:focus-visibleが使用されるようになってきました。ChromeのUA style sheetを見ると全ての:focusが:focus-visibleになっています！ 今回は:focus-visible擬似クラスの紹介をしていこうと思います。 :focus-visibleとはキーボード操作時にフォーカスされた要素のスタイルを指定することができるキーボード入力をサポートする要素はマウス操作時でもフォーカスが表示される(input要素、またはフォーカスが当たると仮想キーボードが表示されるような要素など):focus-visibleが実装された経緯は開発者がマウスユーザーのためにoutline:0を指定してフォーカスリング(フォーカスインジケータ)を消し、キーボー
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。
ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes). Just type any color value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent in Hexadecimal, RGB, CMYK, HSL, HSV, CIE-LA
CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html （このドキュメント自体がRSCSSの実践例になってる） しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
(編注：SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか？ 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか？」と不思議に思うかもしれません。2つの点だ
@import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px; margin-right: -5px; font-style: italic; } .price2 { font-size: 59px; margin-right: 10px; font-style: italic; } .yen {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
