CSSの記事
-
ダークモード
ダークモードに対応した。ダークモードのときはコントラスト比低めが好き。
-
高さが低い要素に高さを揃える
2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。
-
フレックスコンテナ内で絶対位置指定された要素の静的位置
フレックスコンテナの中に配置したposition:absoluteな要素の初期位置（静的位置）がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。
-
text-decoration の子要素への適用のされかた
第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。
-
display-wai-aria.css v0.3.0
display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。
-
display-wai-aria.css v0.1.0
勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。
-
線を上手く使ったデザイン
良いデザイナーの方は単純な図形、特に線（ボーダー）の使い方が上手いなあと思っていたので、ボーダーをデザインに取り入れてみました。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。
-
シンプルなニュースティッカーにrole=marqueeを添えて
シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。
-
WAI-ARIAを可視化する display-wai-aria.css というツールを作りました
ページ内で使用されているWAI-ARIAを可視化するCSSのツールを作成しました。CSSならではの問題が多く素直にjavascriptで作ったほうが良かったかなと思っていますが、勢いで作って公開します。
-
Mobile SafariのselectがイケてないのでほぼCSSで擬似select作ってみた
iPhoneのMobile Safariだとoptionの中に長い選択肢がある場合、途中から省略されてしまって選択肢が見えずに困るということがあり、CSSで擬似的なselectを作ってみました。
-
選択範囲の背景がはみ出す問題を調べてみた
テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。
-
Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない
Android標準ブラウザは、backgroundを短縮形(ショートハンド)で記載してもbackground-sizeを初期化してくれなかったという話。
-
順序リスト[ol]の数字の色だけを変更する
-
Web制作者のためのCSS設計の教科書を読んだ
-
WEB+DB PRESS vol.81 イマドキHTML/CSS開発を読んだ
-
extendでSassから出力されるCSSをスッキリさせる
-
勉強会資料 Webサイトの中の色について
-
ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ
-
Sass/Compassコンパイル時の色名変換でハマった
-
サンプルエントリー