mkasumi.com



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

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


Tag:CSS HTML 

Posted by 森田かすみ at 12:42  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

以前、結構緊急リンクが飛ばない 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

普段はDateオブジェクトはa-blog cmsの機能のおかげで使わないのですが、CMSのバージョンが古い案件で初めてJavaScriptのDateオブジェクトを先日使ったのでそのときのメモです。

これからもあまり使うことがなさそうで、すぐ忘れてしまいそうなので備忘録がてらブログにまとめます。

日付を取得する

今日の日付を出力したいとき

var dateAttr = new Date();

指定した日付を出力したいとき

var dateAttr = new Date('2014-10-05');

CMSで出力している日付を表示したいとき (例はdata-属性をつかったとき)

<!-- HTML -->
<span data-date="2014-10-05"></span>

//JS
var dateAttr = $('span').attr('data-date');
var date = new Date(dateAttr); //1行目で作った変数をnew Date()に使用

たとえば、CMSのカスタムフィールドで設定している日時を、Javascriptでも使いたいときは、CMSで出力した日付の変数をHTMLのdata-属性に書きます。

<span data-date="{eventdate}"></span>

そのdata-属性を指定して値を引っ張りだすことで、Javascriptで使うことができます。

「JavaScriptのDateオブジェクトを使ったときのメモ」のつづきを読む


Tag:jQuery コーディング 

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

先日、a-blog cmsのカスタムフィールドグループを出力するloopの中ではtouchブロックが使えないことが発覚し、校正オプションを自分で作って対応しました。

PHPを触ることになるのですが、PHP無知識のわたしでも変更できたのでPHPできないひとにも安心だと思います。といっても無知識のまま触るのも怖いと思うので、ブログ記事にしました。

「曜日を日本語変換するa-blog cmsの校正オプションの作成方法」のつづきを読む


Tag:a-blogcms CMS 

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

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー