CSSの記事
-
ダークモード
-
高さが
低い 要素に 高さを 揃える 2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。
/ CSS -
フレックスコンテナ内で
絶対位置指定された 要素の 静的位置 フレックスコンテナの中に配置したposition:absoluteな要素の初期位置(静的位置)がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。
/ CSS -
text-decoration の
子要素への 適用の されかた 第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。
/ 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を作ってみました。
/ CSS -
選択範囲の
背景が はみ出す 問題を 調べてみた テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。
/ CSS -
Android標準ブラウザが
background短縮プロパティで background-sizeを 初期化してくれない Android標準ブラウザは、backgroundを短縮形(ショートハンド)で記載してもbackground-sizeを初期化してくれなかったという話。
/ CSS -
順序リスト[ol]の
数字の 色だけを 変更する / CSS -
Web制作者の
ための CSS設計の 教科書を 読んだ / CSS -
WEB+DB PRESS vol.81 イマドキHTML/CSS開発を
読んだ -
extendで
Sassから 出力される CSSを スッキリさせる / CSS -
勉強会資料 Webサイトの
中の 色に ついて / CSS -
ブラウザの
小数点以下の ピクセル(サブピクセル)レンダリングまとめ / CSS -
Sass/Compassコンパイル時の
色名変換で ハマった / CSS -
サンプルエントリー
/ CSS