[B! JavaScript][CSS] uneasyのブックマーク

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-it em」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-it em"></div> <div class="grid-it em"></div> <div class="grid-it em"></div

uneasy 2015/08/03

リンク

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング

2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処カテゴリ:javascript iphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css　→　768pxで切り替えたい →　@media screen and (max-width: 768px) →　ちゃんと768pxで切りかわる js　→　768pxで切り替えたい →　if($(window).innerWidth() < 768){ → 　78

uneasy 2015/03/21

リンク

HTML5で組んでるならこの魔法のjsも入れておけっていう話

現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応透過PNGに対応 opacityに対応といったことが可能になります。要はCS

uneasy 2012/12/02

リンク

Twitter bootstrap入門 #twtr_hack

The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.

uneasy 2012/02/24

リンク

イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery

こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。ということで、jQueryを覚えよう！電卓で入門とか色々考えたのですが、私が覚えた方法で。。 myベストイモムシを作ろう！！！！とりあえずあなたのイモムシも用意しよう。ダウンロードとりあえず名前を付けると愛着がわきます。うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。つまめます。動きます。顔変わります。などなど。クロスケのjsもブログを書きながら新調してあげようと思います。イモムシのhtml解説これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh

uneasy 2012/02/03

リンク

CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log

「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタと CLASSセレクタについてです