mkasumi.com



この記事でご紹介するのは 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

1月のa-blog cms DAYでも言っていたのですが、ユニットグループがレスポンシブしない時代からレスポンシブ対応するために変わったように、レスポンシブ対応により適するためにも、もう少し変わった方が使いやすくなるんじゃないかなと個人的に感じています。

そこで、社内勉強会の当番が回ってきて社内の人の意見を聞けるいい機会だったので、現状の問題をまとめて、解決策になりそうなCSSの実装方法を調べてみました。

まずは現状の問題を整理する

機能の問題

左カラムよりも右カラムの方がコンテンツ量が少ない時に要素が回り込んでしまいます。


左カラムよりも右カラムの方がコンテンツ量が少ない時に問題


上記の問題に対して、対策としてユニットの配置を「全体」を指定して、3カラムの間にhrを挿入してフロート解除していたのですが、この場合に文章量によってはPCでは3カラム、タブレットでは2カラム、スマートフォンでは1カラムが難しくなります。


PCで3カラムをタブレットで2カラムにしようとするとレイアウトが崩れる


人の使い方の問題

そもそもこの「全体」の機能は直感的に使えるものではないんじゃないかとも思いはじめてきました。


正直ユニットグループを普段から使ってないと忘れがちな機能


ユニットグループ、このままでいいの?という考えがすこしよぎってしまったので、新しいCSSのプロパティも含めて、対応策を検討してみました。

「a-blog cmsのユニットグループに5種類のグリッドシステム方法を検討する」のつづきを読む


Tag:a-blogcms CSS CMS 

Posted by 森田かすみ at 17:11  Permalink

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー