CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
Chat v2.0 Style Generator 日本語版
YouTubeLive + OBSでチャットを映しながら配信する時に使われる"Chat v2.0 Style Generator"の日本語版です。(最終更新日：2024/06/01) ※正常に動作しない場合は Google Chrome か Microfoft Edge で閲覧ください。 ※プレビューがおかしい場合は「フォントサイズなどの数値変更」の「リセット」ボタンを押してみてください 更新情報(クリックで詳細表示) 8月6日 シーン切替時にチャット欄が爆速で流れるのを防ぐ方法を新しく書きました。 チャット欄のURLを自動で更新する方法に「テスト版」の説明を追加しました。テスト版は以前のバージョンよりサーバーダウンしにくい（予定）です。 「初スパチャおめでとうございます」のメッセージを非表示にするコードを追記しました。 ※CSSの再生成が必要です 7月31日 スーパースティッカーの金額表
CSS Gradient Animator
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
CSSのcounters()で箇条書きの数字をカスタマイズできておもしろい - hogashi.*
CSS に counters() というのがあって、 1.1 とかをカスタマイズできておもしろい。 counters() - CSS: Cascading Style Sheets | MDN 言 葉 庭 というのをシンボルに使うことにして、繋ぎを の にするとこうなる。 @counter-style kotonohanoniwa { system: fixed; symbols: 言 葉 庭; suffix: " "; } ol { counter-reset: kounter; } ol li { counter-increment: kounter; margin-left: 30px; } ol li::marker { content: counters(kounter, 'の', kotonohanoniwa) ") "; } 実際に ol で見るとこう。 1 1,
恐竜に教える現代のCSS – Part 1 | POSTD
注釈： 「CSSでピクセルをいじるのは確かに難しかった！ 今じゃHTMLで非セマンティックなクラス名とかインラインCSSとかを使うのがクールで、JavaScriptでCSSスタイルを書いたりもできるって！」 「『ファミリー・ガイ』の『CSS』GIF（訳注：米アニメ『ファミリー・ガイ』のキャラクターを使った、CSSを扱う厄介さを示唆するGIF画像）をここに挿入」 「ハハッ！」 CSSは不思議なことに、Web開発者が学ぶ中で非常に易しいとも難しいとも考えられている言語です。確かに、CSSは簡単に始められます。特定の要素に適用するスタイルの属性と値を定義して、それから……いえ、差し当たって必要な作業はほぼそれだけです。しかし、比較的大規模なプロジェクト向けに意義のある形でCSSを組むとなると、作業は複雑に入り組んできます。あるページのある要素のスタイルを指定しようとCSSのどの行を変更しただけで
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
はてなブログのシンタックスハイライトの色を変更する - 素人趣味のWeb制作ブログ
シンタックスハイライトの色を変えたいので頑張ってみる。 まず、デフォルトのCSSがこれです。 /* SUPER PRE SYNTAX HIGHLIGHT */ .synSpecial { color: #c000c0; } .synType { color: #3EC63E; } .synComment { color: #4F80E5; } .synPreProc { color: #9355E6; } .synIdentifier { color: #51CFCF; } .synConstant { color: #FF6666; } .synStatement { color: #D88A17; } わかりやすいように表にするとこんな感じ Class Hex Color .synSpecial #c000c0 .synType #3EC63E .synComment #4F80E5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Carbon | Create and share beautiful images of your source code