いろんな理由でSassが使えない案件があった場合でも、機能毎にファイルを分割管理したいので書いてみた。 ググったけどCSSファイルの結合に関してはあまり該当する記事がなかったけど需要ないの？ まあ、JSファイルを結合する時と同じ要領なので誰もわざわざ…

CSS3のtransformをひと通りやりたかったので作ってみた。 表示例 文章でかなり説明しづらいので、最初に動いているものを… 止まっているとよくわからないので回してみました。 立体を表示する画面に設定するプロパティ perspective 奥行きを設定するプロパテ…

Jekyllでポスト記事をリスト表示をする場合はこのように書きます。 <ul> {% for post in site.posts %} <li> <a href="/blog_jekyll/_site{{ post.url }}">{{ post.title }}</a> </li> {% endfor %} </ul> ただこれだと記事があるだけ表示してしまうので表示件数をを制限したいのですが、これに関する記事がどれもTOPページの表…

ブログとかによくある記事送りのページネーションを簡単に実装する方法。 page.previous ,page.nextでそれぞれ前の記事、次の記事に関する情報を取得できます。 {% if page.previous %} #前の記事がある場合この中身が表示される {% endif %} そしてページネ…

JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/ja…

スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。 HTML <div class="anime"><img src="[画像のURL]" alt=""></div> SCSS .anime{ width: 160px; height: 300px; overflow: hidden; margin: 100px; img{ margin-top: 0; -webkit-animation-name: anime; -webkit-animation-duration: 1.0s; -webkit-anim…