This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed i

レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。 初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。 bxSlider 最初に紹介するのが［bxSlider］です。 設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。 ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。 ダウンロードURL

In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness. Hi guys! I’m back with another CSS tutorial! After button switches and drop-down lists, let’s create some forms. In particular, we will be creating login forms. Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which me

2D、3D、アバターなど、オンラインだからこそ実現できる、 “こんな展示会を開催したい“想いを、共に制作

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメディアクエリを利用した切り替えポイントの例です。 501px以上ではdiv.baseは赤色ですが、500px以下ではdiv.baseは緑色になります。 これはCSSのメディアクエリで指定したものです。 CSSメディアクエリによる切り替えサンプル HTMLコード <div class="base"></div> CSSコード .base{ width:200px; height:100px; background-color: red; } @media (max-width:500px){ .base{ background-color: green; } } jQuery

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Webページ上の＜li＞リストなど、 いくつも同じ要素が繰り返されるものに対して、 jQueryを使って、特定の（n）番目の物に処理を加えられる 「:nth-child()」のちょっと便利な使い方の紹介をしてみます。 「:nth-child()」の基礎的な使い方としては 連続している要素のn番目の要素に対して 特定の処理を加えられるというもの。 例えば下記の様なリストがあった場合、 ◆HTML【SAMPLE01】 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> このリストの3番目の要素のみに 背景色を変えるスクリプトを実行させる場合。 ◆SCRIPT【SAMPLE01】 <script type=

There are just too many unknowns. : とにかく分からない点が多過ぎる。 HTMLで言うところの<li>のような連番を、CSSやjQueryで自動付与する方法を知ったのでメモ。 jQueryで連番を付与する方法 .each()メソッドを利用する。.each()メソッドは指定したセレクター1つ1つに処理を順番に行う動きをする。 いわゆるループと呼ばれるあれ。 $(function() { var i = 1; $('セレクタ').each(function(){ ～連番の付け方～ i++; }); }); var i = 1;部分がカウンタ初期値の設定。 ページロード時に$(‘セレクタ’)を見つけに行き、1つ目を見つけた時点で～連番の付け方～部分の処理を行う。 処理が終わったらi++でカウンタの数値を1プラスする。 その後、また$(‘セレクタ’)を見つけに行き