mkasumi.com


ブログに書くほどのことなんだろうかと思ったけれど、誰かに聞いてみたいという思いがあって書いてみます。

先日私はデザイナーさんに余白の意味を確認していて、デザイナーが意識していなかったグリッドシステムの余白ルールに気がつきました。(でも、もしかしたらこのルールは社内だけなのかもしれない...。多くの人たちに確認したわけでもないので、多様な環境でも耐えうるという絶対的な自信がある訳ではないのでその辺りはご容赦ください)

例えばカードのコンポーネントのときや、写真をグリッドに合わせて並べるときに個人的な感覚では、このルールはよく見られます。

例えばガターの幅が30pxだったとします。その場合、ガターの半分の値である15pxを親の要素にmargin: 0 -15px、子要素にpadding: 0 15px;を指定します。

そうすると、私がもらうデザインカンプでは子要素の下マージンの値はガターの幅30pxであることが多い。


「コンポーネント間の無意識の余白ルールについて」のつづきを読む


Tag:CSS デザイン 

Posted by 森田かすみ at 18:23  Permalink

受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。

テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。

今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。

「ユーザーにスクロールを予測させるCSSの書き方について」のつづきを読む


Tag:CSS レスポンシブ 

Posted by 森田かすみ at 09:55  Permalink


この記事でご紹介するのは CSS Talk vol.2 で会場を少しざわつかせることができたテクニックです。JSをつかわずに、HTMLとCSSのみでブラウザ上からスタイルをダイレクトに修正する方法をご紹介します。決して実務で使えそうな技ではないので、楽しんで読んでいただければ、と思います。

「ちょっとしたデモに使える!JSを使わずにブラウザ上からスタイルをダイレクトに修正する方法」のつづきを読む


Tag:CSS HTML 

Posted by 森田かすみ at 12:42  Permalink


CSS Talk vol.2に登壇しました。とても雰囲気のいい勉強会で、話す側としてもとても楽しい時間を過ごせました。

今回は、CSSネタということで、私自身がCMSを作っている会社に所属しているので、自己紹介ついでに動的コンテンツに対応したレイアウトを提供できる「Quantity Queries」についてご紹介しました。

「「数が増えてもこわくない!Quantity Queriesの紹介」というセッションでCSS Talk Vol2 で登壇しました」のつづきを読む


Tag:CSS セミナー 

Posted by 森田かすみ at 13:08  Permalink

Webアクセシビリティに対応しているサイトを制作する機会があったので、最近Webアクセシビリティについて勉強しています。今回の記事はWebアクセシビリティビギナーな私が、実際に対応してみてWebアクセシビリティについて改めて知ったことや感じたことを社内の人に共有したくて、先日行われた公開アップルップル社内勉強会用にまとめたものです。

Webアクセシビリティ対応への印象

正直、Webアクセシビリティ対応は周りの人たちが抵抗感を感じているようなので、すごく怖いイメージがありました。実際に JISの規格表を読んでみると、私が普段意識していなかったことも書かれていましたが、普段から行っているような対応方法も記述されていました。一般的に怖がられているものは、「時間依存メディアのガイドライン」であったり、コントラスト比であったり、Javascriptが関わってくる部分は対応に時間がかかるのかなという印象を受けました。

実際にJISの規格表を読んでみて、私自身納得できるような対応が紹介されていることもあり、どうマークアップするとベターまたはベストプラクティスなのか判断するヒントをもらえたような気がしています。

「Webアクセシビリティについて勉強してみて知ったことや感じたこと」のつづきを読む


Tag:HTML アクセシビリティ CSS 

Posted by 森田かすみ at 14:53  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー