HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた ｜ Developers.IO

2013/04/07 381 users Bootstrap Developers.IO HTML

前置き - Twitter Bootstrap について 今さらここで語るのも野暮といえるほどメジャーなフレームワークですが、これを読んでいただいている方々の中に一人だけ知らなくて悲しんでいるアノ娘のためにも、軽ーく解説しておくとします。 概要 トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単な... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス ｜ Developers.IO

2013/03/17 518 users ベストプラクティス MdN Developers.IO 勉強

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた ｜ クラスメソッド開発ブログ

2013/02/14 184 users HTML クラスメソッド開発ブログ 勉強 Evernote

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べるとその頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく ｜ クラスメソッド開発ブログ

2013/02/07 128 users Widget 備忘録 jQuery UI HTML プラグイン

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく そんな訳で、jQuery UI プラグイン(※以下、jQuery UI Widget) の作り方について学んだので、ここに書き記しておくとします。忘れっぽい自分のための備忘録として書いた内容なの... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #13 iOSのUITableViewをjQueryで作ってみた ｜ クラスメソッド開発ブログ

2013/01/24 104 users jQuery iOS UITableView beta 勉強

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強 – #13 iOSのUITableViewをjQueryで作ってみた 2013年1月14日にjQuery Mobile 1.3.0 Betaがリリースされました。 Announcing jQuery Mobile 1.3.0 Beta jQuery Mobile 1.3.0 ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた ｜ クラスメソッド開発ブログ

2013/01/15 502 users Pinterest HTML グリッド 従来 画面

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰め... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた ｜ クラスメソッド開発ブログ

2013/01/07 155 users HTML クラスメソッド開発ブログ 勉強

そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) ｜ クラスメソッド開発ブログ

2012/12/27 158 users HTML クラスメソッド開発ブログ 勉強

matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きま... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) ｜ クラスメソッド開発ブログ

2012/12/27 158 users HTML クラスメソッド開発ブログ 勉強

matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きま... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #9.1 CSS3アニメーション（Animation） ｜ クラスメソッド開発ブログ

2012/11/15 27 users Animation HTML クラスメソッド開発ブログ 勉強

animation-nameは、実際にどのような動きをするかを定義した@keyframesを指定し、唯一の必須項目です。 記述例) animation /* * @animation-name * @animation-duration * @animation-timing-function * @animation-delay * @animation-iteration-count * @a... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） ｜ クラスメソッド開発ブログ

2012/11/15 296 users Ｔｒａｎｓｉｔｉｏｎ HTML クラスメソッド開発ブログ

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく ｜ クラスメソッド開発ブログ

2012/10/31 477 users jQueryプラグイン HTML 手順 プラグイン コレ

僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに – jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #7 jQueryのセレクタAPIについて詳しく ｜ クラスメソッド開発ブログ

2012/10/19 132 users jQuery HTML クラスメソッド開発ブログ 普段 勉強

そんな訳で、普段何気なく使っているjQueryですが、そのセレクタAPIについて多少は知っておいたほうが良いよなということで、いくらか調べてみました。けっこう地味な内容なので、「へー、そんな風になってるんだぁ…」と軽く読み流していただければと思います嘘です。割と大事な内容なので、しっかりと把握しておくのがよろしいかと思います。 はじめに - jQueryのセレクタAPI jQueryでは、$(‘#... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 ｜ クラスメソッド開発ブログ

2012/10/16 761 users パララックスエフェクト パララックス parallax ディ

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに – パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac） ｜ クラスメソッド開発ブログ

2012/10/05 30 users less コンパイル WIn CSS 補足

そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS ｜ クラスメソッド開発ブログ

2012/10/02 357 users less 毛色 CSS ハードル 拡張メタ言語

そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 – LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておき... 続きを読む