カテゴリ「CSS」の記事一覧

 / CSS

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

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

 / CSS

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

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

 / Accessibility, CSS

display-wai-aria.css v0.3.0

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

 / Accessibility, CSS

display-wai-aria.css v0.1.0

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

 / CSS, Design

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

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

 / Accessibility, CSS, JavaScript

すごいシンプルなニュースティッカー。role="marquee"を添えて

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

 / CSS

選択範囲の背景がはみ出す問題を調べてみた

テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。

 / CSS

Web制作者のためのCSS設計の教科書を読んだ

今までは趣味で書いていたアマコーダーにとって、最初の壁が設計で、それはCMS, HTMLに限らず(と言うよりは一番)CSSの設計の重要だと痛感してる。そんな中、CSSの設計に関する情報や書籍も増えてきてて大変ありがたい限り。 第1章「CSSにおける設計とは」の2節「破綻しやすい...

 / CSS, HTML

WEB+DB PRESS vol.81 イマドキHTML/CSS開発を読んだ

いろんなデバイスが増えて、検証コストが増大していく中、最先端な方々が検証コストを下げるための色々な手法を考えててるんだけど、実際どうやって自分の業務に組み込んでいくか、ってのが中々難しいなーと感じてた。 この特集の第1章〜3章では、最新技術動向の解説っていうよりは「イマドキの開...

 / CSS

extendでSassから出力されるCSSをスッキリさせる

Sassのeachとかforの繰り返しって便利ですよね。色んな方がご紹介されているのですが、繰り返しのソースサンプルって下記のような物が多くて自分も見よう見まねでなんとなくそうしてました。(メニューとかで現在地だけ表示を変えるみたいなスタイル) SCSS $gHeaderMenu...

 / CSS

勉強会資料 Webサイトの中の色について

会社の事務の方が色彩検定の勉強を始めるってことで、デザイナーさんも巻き込んで色の勉強会を開催しました。その資料を少し改変してアップします。 Webサイトの中の色について mdpress使ってHTMLスライドを作成したので、そのうち記事にするかも... 参考 CSS カラーモジュー...

 / CSS, HTML

サンプルエントリー及びスタイルガイド

スタイル確認用のエントリーです。性質上、スタイルガイドを兼ねていますが全てのエントリーが、以下のとおりマークアップされているわけではありません。 なお、文中の例文は太宰治の作品から引用しています。 段落 ほとんど裁判官の如く、もったいぶって尋ねるのでした。彼は、自分を子供とあなど...