masuP.net

ダークモード

ダークモードに対応した。ダークモードのときはコントラスト比低めが好き。

2020.10.25 / Design CSS

高さが低い要素に高さを揃える

2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。

2017.07.11 / CSS

フレックスコンテナ内で絶対位置指定された要素の静的位置

フレックスコンテナの中に配置したposition:absoluteな要素の初期位置（静的位置）がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。

2017.06.06 / CSS

text-decoration の子要素への適用のされかた

第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。

2016.08.16 / CSS

display-wai-aria.css v0.3.0

display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。

2016.08.05 / Accessibility CSS

display-wai-aria.css v0.1.0

勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。

2015.10.28 / Accessibility CSS

線を上手く使ったデザイン

良いデザイナーの方は単純な図形、特に線（ボーダー）の使い方が上手いなあと思っていたので、ボーダーをデザインに取り入れてみました。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。

2015.10.09 / CSS Design

シンプルなニュースティッカーにrole=marqueeを添えて

シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。

2015.10.08 / Accessibility CSS JavaScript