You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
Waves
Waves - Click effect inspired by Google Material DesignGetting Started It's easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.css and waves.js to your HTML file. And Waves is ready to use! To put Waves effect on your buttons, wrap it inside a <span> that contain .waves-effect and .waves-button class. Waves support Font Awesome icons, so you can give
Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net
home blog labs about contact Web・コンピュータ > あなたのソースコードを彩る、Syntax Highlighterまとめ Syntax Highlighter ソース ブログ 作成： 2007-06-30T19:14:27+09:00 更新： 2009-04-29T00:31:57+09:00 ブログに貼り付けたソースコードを分かりやすく見せたい！ というのはコードを書くブロガーなら誰でも思うはず。 最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。 何故かまとまった情報が無いようなので、まとめてみました。 ちなみに、ライブラリを選ぶ最中にまとめたので、どのツールも未使用なのであしからず。 JavaScript系 JavaScriptを使って自動で色分けしてくれるようなツール。 元
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]
jQueryで、”this”の親要素、子要素（子孫要素）を指定する記述方法のメモ、リライト版です。 （元々はこちら） 親要素 thisの親要素を取得 $(this).parent() “親要素を全て返す“記述です。 近いものとして、”ルートを除く先祖要素を全て返す“parents()や、”開始要素から最も近い親要素を選択“するclosest()もあります。 参： parent([expr]) – jQuery 日本語リファレンス parents([expr]) – jQuery 日本語リファレンス closest([expr]) – jQuery 日本語リファレンス jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く 子要素・子孫要素 thisの子要素、もしくは子孫要素（ここでは<ul>）を取得 子要素 $(this).children("ul") 子孫要素
FlashやHTML5で作成されたカードの合成UI・演出のまとめ
もはやコーディングコンテストサイトと化しているjsdo.itですが、いま開催中の SPEC vol.5 はいつもとちょっと違います。 今回は、いつものHTML5・JavaScript・CSSに加えて、ActionScriptでのエントリーもできます！ 「じつはFlashのほうが得意！」という方にも挑戦していただいているんですが、もうすでに続々と面白い作品が集まりだしているので個人的に気になる作品をいくつかご紹介したいと思います。 今回のお題「カードの合成のUI・演出を作ってください」 Flash編 forked from: SPEC vol.5 投稿用コード - wonderfl build flash online forked from: SPEC vol.5 投稿用コード - wonderfl build flash online JavaScript編 ※スマートフォン専用 締切は
一日一問!! JavaScript(1) - 演算子の問題【難易度: 低】
次のようなJavaScriptプログラムがあります。 var a="100"; var b="200"; var c= a+b; さて、変数cにはどのような値が入っているでしょうか? 次ページ：解答はこちら
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 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-decoration
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
textareaの選択範囲を取得し、前後に文字列を挿入する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 textareaの中で選択した文字列の前後に、任意の文字列を挿入するJavascript。流れとしては、まず選択領域の始点と終点の位置を取得し、その境界を基準にしてtextareaの文字列全体を分割。そして加工して組みなおす。 始点と終点の位置は、Mozillaおよび（最近の）Opera/Safariでは容易に取得できる。問題はIE。IEのTextRangeオブジェクトは、後のコンテクストを見て処理を行うことが難しいため、特にtextarea内の文字列を操作したい場合は厄介です。 逆に言えば、始点と終点の位置さえ判ればなんとかなるので、いろいろ試してみてなんとか形に出
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
絶対買うんだよ→初心者でも3時間もあればプログラミングできる「enchant.js」のバイブル本発売 【増田(@maskin)真樹】 : TechWave
[読了時間:2分] 「アプリやウェブサイトがどんな風にプログラムされているか知りたい」「プログラミングしてみたい」そう思う人がジワジワ増えている。TechWaveでは、そんな初心者の夢を実現するのに最適といえるUEI(ユビキタスエンターテインメント)の「enchant.js」に注目してきたが、そのバイブルとも言える教科書本「HTML5とJavaScriptでスマートフォンゲーム作成！ ゼロからはじめるenchant.js入門【公式ガイド】」が遂に発売となった。 若干技術用語が入ってくるが、検索しながら、かつ投稿コンテストサイト「9leap」などで公開されている大量のサンプルコードを見ながら進めれば表題の通り3時間あれば誰でもゲームを作れてしまう良書だ。「またまた、マスダさん御冗談を」という人も是非書店で手に取って頂きたい。 プログラミングの興奮を全ての人に 実際、enchant.jsでは小
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 24日目（最終日） JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。 僕なんかがおこがましいとは思うんですが。 いっぱい書く とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。 ライブラリーやフレームワークは躊躇なく使う 簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。 分かりやすいと最近評判の本ですね。プログラミングの知識が全く無い状態の読者を想定しているそうです。 「Webデザイナーのための jQuery入門」という本を書きました – Takazudo hamalog で、私が書いた本の話に戻りますが、「Webデザイナーのため
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
要注目！CSSとJavaScriptで作るアニメーション·Animatable MOONGIFT
AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。 最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。 色々な画像が並んでいます。マウスオーバーでアニメーションが実行されます。 6番は曲線が変化するアニメーションです。 2番は背景画像がアニメーションします。 12番はドロップシャドーです。 fromとtoののところで実際に設定するCSSプロパティが分かります。 data-fromとdata-toでプロパティを指定します。 AnimatableはいわばFlashのアニメーションに似ています。最初のフレームをdata-from
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/