[B! Javascript] m_o_k_aのブックマーク

m_o_k_a id:m_o_k_a

Javascriptに関するm_o_k_aのブックマーク (32)

Conditional CSS
I got some great comments on my post about conditionally loading content. Just to recap, I was looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating my breakpoints. That bit is important: I’m not looking for MatchMedia, which involves making media queries in JavaScript. Instead I’m looking for some otherwise-useless CSS property that I c
m_o_k_a 2012/08/27
メディアクエリによって body に非表示の content プロパティを仕込み、それを JavaScript から読む

***CSS

Javascript
リンク
http://solidstate.jp/Others/cssChange/script_85.html
m_o_k_a 2012/08/26
***CSS

*ブラウザ

Javascript
リンク
Piecon / Pie charts in your favicon!
Pie charts in your favicon! A tiny javascript library for dynamically generating progress pie charts in your favicons. Look up at your tabs for the live demo! Documentation Basic usage Piecon.setProgress(12); Piecon.setProgress(25); ... Piecon.reset(); Options Piecon.setOptions({ color: '#ff0084', // Pie chart color background: '#bbb', // Empty pie chart color shadow: '#fff', // Outer ring color f
m_o_k_a 2012/08/25
ファビコンにプログレス円グラフを表示するライブラリ

Javascript
リンク
Javascriptファイルを非同期に読み込む$script.jsを使ってみた
Javascriptの読み込みが遅いのは、ユーザー体験のリッチなウェブページを作るうえで悩むポイントです。特に、Facebook・Twitter・Google+の各スクリプトの読み込みが遅い気がしていました。 Twitter ツイートボタンの設置タグ <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/wi
m_o_k_a 2012/06/12
*web制作

Javascript
リンク
IE6-8 にもレスポンシブ・ウェブデザインを適用する「respond.js」
allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 （IE6はすでに対象外かもしれません）へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。「respond.js」は非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。利用方法利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。 <head> <meta charset="utf-8" /> <
m_o_k_a 2012/06/09
*webデザイン

Javascript

スマートフォン

レスポンシブデザイン
リンク
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
m_o_k_a 2012/05/31
Javascript

jquery
リンク
stroll.js - CSS3 Scroll Effects
m_o_k_a 2012/04/16
リストをスクロールした時のエフェクト

*webデザイン

javascript
リンク
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
m_o_k_a 2012/04/10
*web制作

webサイト高速化

Javascript
リンク
階層型のカテゴリとかリストを開閉できるライブラリ作った - tumblr
誰も期待してないどうでもいいカミングアウトをすると、実は僕は数ヶ月前に会社を辞め、晴れて日本人男性の最も憧れる職業「無職」へのジョブチェンジというかジョブロストを果たしていた訳であります。１年もwebのこと勉強してればwebサービスの１つくらいは１ヶ月もありゃあ作れるだろ！tumblrとかpinterestくらいのもんなら余裕だしｗｗｗｗとか思って密かに３つほどプロジェクトを進めていたのですが、案の定僕の（プログラミング能力・設計能力・システム構築能力・企画能力・デザイン能力・根気などの）能力不足によってリリースどころか完成までこぎつけることが出来ず、どれもこれも頓挫と相成ったわけであります。今考えてみれば、業務でプログラム書いた覚えなんてどれも100行いかない程度の滅茶苦茶なjavascriptとphpとシェルスクリプトくらいなもので、休日に自分でプログラムを必死に勉強していたなどと
m_o_k_a 2012/03/23
*web制作

Javascript
リンク
竹取 JS
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。「縦書きにする・iPhone 用リンク」「縦書き可能にする・iPhone 用リンク」「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンクを長押ししてコピー。ブックマークを開いて、追加したブックマークを「編集」。名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。最初の「http://」を削除。注意！やや動作が重いです！うまく変換できなかったときは、画面をダブ
m_o_k_a 2012/02/22
*web制作

Javascript
リンク
jQuery Plugin: Easy List Splitter - MADE IN CIMA
jQuery Plugin: Easy List Splitter jQuery Plugin: Easy List Splitter We needed a simple and clean jQuery plugin to columnize lists: after a couple of hours spent on the lookout for it with no success, we decided to create our own one. Here you find the result of a couple of nights’ work, which we find to be pretty good. We release it for free and hopefully it will help you whenever you need to spli
m_o_k_a 2012/01/17
項目が多すぎるリスト要素を複数列に分割するjQueryプラグイン。分割後はラップ用divと列用のdivで囲ってくれます。

Javascript

jquery
リンク
HTML+CSS主体のJavaScriptエフェクト！簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。ハロこんにゃんセヨがぜんウェブウェブしているほんだです。今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
m_o_k_a 2011/10/30
Javascript

jquery
リンク
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています）「Modernizr」や「html5.js」等、モダンな環境の為の便利なスクリプトは多々ありますが、「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプトダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。こんな感じに… <html lang="ja" id="test-page" class="
m_o_k_a 2011/10/26
javascript
リンク
Create a new fiddle - JSFiddle
m_o_k_a 2011/10/15
画面にHTML、CSS、JSを書いて結果確認。別のページに埋め込み可能。

*webサービス

Javascript
リンク
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。詳細はMJL本体ファイル内のライセンス告知をご覧ください。ダウンロード MJL本体（圧縮版） mjl.js
m_o_k_a 2011/10/10
画像ロールオーバー/Adobe Flashオブジェクト埋め込み機能拡張/新規ウインドウの作成/スタイルスイッチャの実装/タブインターフェイス実装/要素の高さ揃え/クロスプラットフォーム/生成コード・内部利用仕様のWeb標準準拠

Javascript
リンク
Playstation mk2
Free Backgrounds Browse the selection of free beautiful background photos submitted by our community of talented contributors and completely free to download and use.
m_o_k_a 2011/10/04
Javascript
リンク
読み込むだけでWebページの「おもてなし度」を向上 - Pryn.js ＆ Pryn.css [ゼロと無限の間に]
コメントと更新履歴はゼロと無限の間のログ » Pryn.js & cssへどうぞ。よく使う初期設定用のJavaScriptとCSSをまとめて“Pryn”と名付けた。内容は主にユーザビリティの向上（つまり、おもてなし）のためのもの。使い方は簡単。JavaScriptとCSSを1つずつ読み込むだけ。あとは勝手にやってくれる。バージョン1.0.0からはIE6はサポート対象外にした。
m_o_k_a 2011/10/01
よく使う初期設定用のJavaScriptとCSSをまとめたもの

***CSS

Javascript
リンク
会社ロゴマークデザインアーカイブ
m_o_k_a 2011/09/15
HTMLコーディング作業量を極力減らすためのjQueryプラグイン

Javascript

jquery
リンク
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
m_o_k_a 2011/09/05
jQueryプラグイン集

Javascript

jquery
リンク
UserAgentごとにスタイルシートを切り替える方法 « テスト問題作成ツール – QuizGenerator
UserAgentごとにスタイルシートを切り替えるJavaScriptを実装しました。iPad, iPad, Androidなどの端末に合わせてスタイルシートを切り替えるのにぴったりです。landscapeとportraitに対して個別のスタイルシートを設定できるので、画面を回転させた時の動作もばっちりです。利用例 $.loadStyle({ua:/iPhone/, common:'./css/iphone.css', landscape:'./css/iphone_landscape.css', portrait:'./css/iphone_portrait.css'}) || $.loadStyle({ua:/iPad/, common:'./css/ipad.css'}) || $.loadStyle({ua:/.*/, common:'./css/style.css'});
m_o_k_a 2011/09/05
***CSS

Javascript
リンク
1 2 次のページ