「サンプルあり」に関する記事一覧

公開しているソースでサンプル表示があるもの。
2016.05.09
jquery

jQueryで特定のCSSの表示を遅くする方法

HTML、CSSの一部だけ表示を数秒遅らせて表示したいときの方法を紹介します。 jQueryとwindowオブジェクトのメソッドであるsetTimeoutを使用します。とっても簡単です。 ...
続きを読む
2015.09.04
css

画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置

以前、こちらでjQueryを使った方法を紹介しましたが、実は先にCSSだけでソースを作成しようと試みました。ただ「画像に」マウスを乗せてコンテンツが動く方法が見つからず断念。 どなたか知っていた ...
続きを読む
2015.07.11
jquery

【超シンプル】jQueryプラグインなしで画像ホバー時に下からコンテンツがスライドして出てくるようにする方法

画像の上にマウスを乗せたときに、下からにゅっとアニメーションでコンテンツが出てきたり、半透明の色がにゅっと出てきて画像の上に乗るようにする方法を紹介します。 写真を使用するポートフォリオや商品紹 ...
続きを読む
2015.04.16
jquery

超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし

こちらの記事で書きましたシンプルアコーディオンメニューに、矢印(画像)をつけた方法のリクエストがありましたので、下記にご紹介します。 メニューの横に矢印の画像をつけて、サブメニューが開い ...
続きを読む
2015.02.15
css

CSSだけでマウスオーバー時にクルッと回転するボタンのメニュー

CSSのアニメーションを使いこなせるようになると、フラッシュやjQueryのようなエフェクトのメニューを作ることができます。 今回はマウスオーバーするとクルクルと回転するボタンをCSSで作成して ...
続きを読む
2014.11.20
css

CSSだけで動きのあるアコーディオン・メニュー 改訂版

CSSだけで動きのあるアコーディオンのメニューです。 以前こちらに書いたのですが、ヨロズナさんから素晴らしいアドバイスをいただきましたのでソースを改訂しました。 jQuery並みのアコ ...
続きを読む
2014.10.09
wordpress

ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応 2

こちら(ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応)の続きです。 wordpressで作成したウェブサイトは1つのページに色々なパーツを読み込んで作られています。 ...
続きを読む
2014.10.08
wordpress

ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応

既存のテーマをアレンジしてウェブサイトを作成するのも良いですが、複雑で、いらない機能が付いていたり、ソースのどこを消してどこを残したら良いのか難しいですよね。 もっとシンプルに最小限のソースで作って ...
続きを読む
2014.06.11
css

シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー

CSS3のアニーメーションエフェクトであるtransitionを使って、CSSだけでjQueryのように動きのあるドロップダウンメニューを作ってみましたのでソースを紹介します。 いろいろと応用で ...
続きを読む
2014.03.15
jquery

画像と文字がスライドしたり開閉したりする必見jQueryプラグイン

jQueryのプラグインの中でもとてもユニークな動きをするスライドショーのプラグインを紹介します。 数枚の画像などを同時にスライドすることをカルーセルといいますが、今回もカルーセルプラグインの1つで ...
続きを読む
2014.01.23
jquery

シンプルなアコーディオンメニュー jQueryプラグインなし 2

以前こちらに書いた記事ですが、若干違うバージョンを作ってみました。 前回はクリックすると他の部分が勝手に折りたたまれて、該当部分だけが伸びる構造でした。 今回は1度目クリックすると伸び、2度目 ...
続きを読む
2014.01.09
jquery

改良版:マウスオーバーでタブの表示切り替え jQuery プラグインなし

タブみたいなメニューで、マウスオーバーすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。 MEMO: こちらの記事から大幅にソースを変更しました。 head内 ...
続きを読む
2014.01.09
jquery

改良版:マウスオーバーで吹き出しを出す jQuery プラグインなし

メニューやサムネイルなどをマウスオーバーしたときに吹き出しを出す方法です。 MEMO: こちらの記事の改良版です。 HTMLのhead内にjQueryを読み込む記述 以下をheadに ...
続きを読む
おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP