mkasumi.com


デザイナーさんから、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

これは、 a-blog cms Advent Calendar 2015 の1日目の記事です。

最近、CMSプロトタイピングの手法を使ってで案件を進めることが多くなってきています。そのCMSプロトタイピングを実際やってみて、コーダー(実装側)の作業がどう変わったのかご紹介したいと思います。

CMSプロトタイピングとは

CMSプロトタイピングとは、先にCMSを実装し、コンテンツを流し込み、コンテンツ量を見ながら、最適なデザインや提案をしていく考え方のことです。例えば、「思っていたよりコンテンツ量が少なくてこのデザインは使えないので修正してください」なんてことを少なくすることができます。

「コーダー目線で考えるa-blog cmsで行うCMSプロトタイピングについて」のつづきを読む


Tag:a-blogcms CMS 

Posted by 森田かすみ at 21:25  Permalink

a-blog cms の Unit_List のおすすめの使いかたについて、a-blog cms DAY in Nagoya で紹介しました。今回はa-blog cms DAYの後に、a-blog cms Training Camp 2015 Autumn が開催され、私は事例紹介の枠で10分ほどお時間をいただきましたが、タイトルを見たらわかる通り機能紹介9割事例紹介1割の内容になっています。

「a-blog cms の Unit_List のおすすめの使いかた」のつづきを読む


Tag:a-blogcms CMS セミナー 

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


10月24日(土)に名古屋で開催された「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました。講師は BA 太田良典さん、株式会社Gaji-Labo 山岸ひとみさんでした。

株式会社ボーンデジタルさんが出版している「コーディング Webアクセシビリティ」と「デザイニングWebアクセシビリティ」の出版イベントでした。勉強会&ワークショップということでちょっとドキドキしながらの参加でした。

「「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました」のつづきを読む


Tag:アクセシビリティ コーディング セミナー 

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

以前、結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも1クリックカウントっぽいSafari という記事があったのですが、どうやらiOS9では修正されて、CSSの:hoverは1クリックカウントではなくなったようです。

私自身、さきほどのページにあったサンプルページをiOS8.4.1で確認していたのですが、2015年9月17日にiOS9がリリースされ、iOS9をインストールした端末で同じページを開いたところ、1クリックでページが移動できるようになっていました。

記事内では、Safariだけではなく、Chromeでも同様の問題が起こるとのことでしたが、確認したところどちらのブラウザも修正されていました。

「iOS9にてCSSの:hoverが1クリックでカウントされる問題が修正された件について」のつづきを読む


Posted by 森田かすみ at 21:33  Permalink

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー