mkasumi.com


受託案件でレスポンシブ対応をするようになって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

デザイナーさんから、2カラムの要素が3つあったとき、最後の3つめは1カラムにしたいという要望があり、思いついた実装方法です。あまり更新しないコンテンツでしたが、要素が増えたときにCSSを書き直しが発生するのが嫌で、この書き方にたどり着きました。

HTML

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  width: 50%;
  padding: 20px;
  border: 1px solid #FFF;
  background: skyblue;
  box-sizing: border-box;
}
li:nth-child(2n+1):last-child {
  width: 100%;
  background: tomato;
}

デモ(Codepen)


See the Pen Selecting last-child of odd item by using CSS Selector by Kasumi Morita (@mkasumi) on CodePen.

要素が5つ、7つになっても適用されます。

「CSSセレクタで最後の要素が奇数だったときを指定する」のつづきを読む


Tag:CSS 

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

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー