これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';

jQueryを使用してWEBサイトを制作している時に、使用しているjQueryのバージョンを確認することがあります。 新しいプラグインを導入する時など、対応していないバージョンがあるので、jQueryのバージョン確認を行います。 また、jQueryが動かない時なども確認を行います。 そのjQueryのバージョンを確認する際の簡単な確認方法をメモします。 確認を行いたいページで下記のjavascriptを実行します。 alert($.fn.jquery); アラートで下記のように表示されます。 また、ブックマークに下記を登録しておくとページ内に記述しなくても簡単に確認ができます。 javascript:alert($.fn.jquery); jQueryのバージョンを確認したいページで登録したブックマークを呼び出すと同じようにアラートを出力します。 ※Firefoxで登録した場合 とても便利

作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ

2014/02/22 (更新日: 2016/12/24) 【コピペでOK】スマホとPCのデバイスごと条件分岐するスクリプトまとめ PROGRAMMING スマホとPCのデバイスごとにリダイレクトするスクリプトまとめです。 スマホファーストの時代にはかかすことができないスクリプトです。 スマホとPCのデバイスごとに『CSS』で条件分岐するスクリプト ※幅によって動作が変わります。以下の場合、最大幅が400pxの場合は「sp.css」を参照します。 // スマホ用のCSS <link rel="stylesheet"type="text/css"media="only screen and (max-device-width:400px)"href="./layout/sp.css"/> // PC用のCSS <link rel="stylesheet"type="text/css"media

The jQuery Foundationは、JavaScriptライブラリjQueryの最新版として、バージョン1.11.1の後継となる「jQuery Compat 3.0」、バージョン2.1.1の後継となる「jQuery 3.0」をリリースすることを、公式ブログの10月29日（現地時間）付けの投稿で発表した。 jQueryは、WebブラウザのAPI互換性に対応すべく、2013年に互換性を最大限に重視したバージョン1.x系列と、Internet Explorer 8以前の古いブラウザをサポートしないバージョン2.x系列とに分かれている。 ただし、1.x系列と2.x系列では、内部実装こそ異なるものの、APIとしての動作は同じであり、それは「jQuery Compat 3.0」と「jQuery 3.0」でも引き継がれる。 なお、メインパッケージの「jQuery」は、最新バージョンおよび1つ前

サイトの動きに魅力を与える フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」 webサイトをより魅力的に見せるためには、デザイン性はもちろんですが、意外性のある動きなどを取り入れることで実現することも。今回はそんなサイトの動きに魅力を与える、フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」を紹介したいと思います。 Direction-Aware Hover with CSS3 and jQuery さまざまな種類のエフェクトが豊富に紹介されており、サイト自体にどこか物足りなさを感じていた方におすすめのまとめとなっています。 詳

Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a

JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr

Lighter is a jQuery plugin designed to provide gallery view for images. Example Installation To install download one of these packages and include the jquery.lighter.js and jquery.lighter.css files in your head with the following: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.lighter.js" type="text/jav

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリー内にサムネイルを設置できナビゲーションできるものなどがあります。また、最近のものは、モバイルに最適化されておりレスポンシブ対応はもちろん(タッチ)スワイプも可能なものが増えてきました。 Lightboxなどが実装できるプラグイン「Magnific Popup」 Lightboxプラグイン「Boxer」

windowsアプリ作りたい → C#,VB.NETmacアプリつくりたい → Objectiv-CWebアプリ作りたい → PHP ＆ JavascriptiOSアプリを作りたい → Objectiv-C, swiftAndroidアプリを作りたい → Java(スマホアプリは両方のソースを共通化したいとかゲームを作りたいという需要でJavaScriptやC#,C++という選択肢も用意されている)unix系のOSでツールをつくりたい → C, Ruby, Pythonunix系のOSでミドルウエア的なものを作りたい → C, C++バリバリ動くゲームを作りたい → C++言語を作りたい → COSを作りたい → Cやりたいことが無いがなんとなくプログラムをやりたい → なにかやりたいことを見つける就職したい → PHP, Java, C#

作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面

今回作成したページ 今回作成したページはこのようなページです。 demo download このような動きをしています。 ページをスクロールするとページトップへ戻るリンクがフェードイン・アウトする。 ページトップへ戻るリンクをクリックするとスムーズにスクロールする。 ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。 フッターのところまでスクロールするとページトップへ戻るリンクがフッターに貼り付く。 動作がややこしいですね…。私のようにjQueryが苦手な方のために1つずつ解説していきます。 1.jQuery本体を読み込む jQueryを使用するには以下のファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

フロントエンドの、のりこです。 スライダーなどの便利なライブラリを多くの開発者さんが無償提供してくださっていて、利用させていただくことも多いと思いますが ちょっと何かどうにかすればできそうなのにできない！！！ という局面に当たった事はないでしょうか？ こんなときに、親切なライブラリにはcallback関数（コールバック関数）やメソッド群が用意されていますので、ありがた～く利用してみようというお話です。 今回はbxSliderのバージョン4を使用しています。 まずは完成品をご覧いただきましょう。 はい、確かに何の変哲もないスライダーです。 が、bxSliderの場合、最初に自動再生をさせる事は出来るんですが、サムネイルをクリックしてスライドさせたとき・＜＞をクリックして前のスライドや次のスライドを表示した際に、その後自動再生が始まらず静止してしまいます。 そこを克服したのが↑のスライダーにな

高機能なjQueryスライドショー「bxSlider」webサイトのトップページでよく見かけるスライドショーは、サイトのイメージやイチオシ情報を視覚的に伝えることができます。最近は高機能なjQueryスライドショーがたくさんあり、設置もそれほど難しくはありません。 サイト構築の時はjQueryスライドショーをよく使っていますが、最近はレスポンシブ対応で、スマホやタブレットでもはみ出したりせずに表示できるbxSliderがお気に入りです。 bxSliderは軽量で設置も簡単、普通にスライドショーを使うならこれで十分です。レスポンシブ対応で、スマホやタブレットでも横幅に合わせて画像のサイズを自動的に調整してくれます。 また、画像だけでなく動画も含めた表示が可能です。最近はWordPressで作ったサイトでもbxSliderを使ってますよ。 bxSliderを設置するでは、さっそくbxSlide

ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st

1: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:04.45 ID:ZsWrBm0M0 まずはNode.jsをインストールしろ話はそれからだ Download：http://nodejs.org/ 2: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:26.57 ID:hzAFYxvI0 一方俺はコボルから始めた 3: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:57:50.90 ID:ZsWrBm0M0 インストールしたかてめぇら 4: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:59:13.96 ID:2B5lF2zi0 javaでいい？ 5: 以下、名無しにかわりましてVIPがお送りします 投稿

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の