軽量なモーダル「Remodal」が使いやすかった - しょぼしょぼプログラマ雑記
2015-04-01 軽量なモーダル「Remodal」が使いやすかった Javascript jQuery jQueryでモーダル表示は種類が沢山ありますが、軽量かつ単純な「Remodal」というライブラリが 非常に使いやすかったのでご紹介します ただ、紹介前に一つ注意喚起があります このライブラリを使う上で参考にさせて頂いたサイト様が多数ありますが 間違った翻訳内容を記載している サイト様が非常に多かったです 具体的には「他の紹介サイトから内容をほとんどコピーしていて、実際には使っていない」というものがほとんどでした ですので、自分が使ってみたときの方法なども記載しておきます 0.jQueryをダウンロードする jQueryのライブラリですから、当たり前な話ですが記載します 1.ライブラリをダウンロードする これは普通にダウンロードすればOKですね ダウンロード先は こちら になります(
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
即完成！jQueryスクロールでページトップへ戻るボタンをたった7分で作る
WEB制作はスピードが命！作るなら簡単ですぐ作れるほうが良いに決まってますよね。 私はこのjQueryスクロールを約7分で実装する事ができました。jQueryの知識はほとんどいりませんでした。 難しくありません7分後にはゆっくりとページトップへ戻るボタンが完成します。 では、早速実装していきましょう。 jQueryスクロールのサンプルはこちら まずはjQueryのライブラリ追加 HTMLの<head>内にjQueryのライブラリを追加します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 次はHTMLファイルにトップに戻るボタンを追加 肝心の「トップに戻る」ボタンを追加しましょう。 トップ リンク先は「#wrap」
【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】 | affiliate.ks-product
affiliate.ks-product アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています！関連書籍のレビューも書いています 以前投稿した ヘッダーなどを外部化するテクニック の記事が大変好評のようでご利用いただいた皆様ありがとうございました。今回はその続編記事になります。事前知識として 前回の記事 をご覧いただくことをお薦めします。 実はヘッダーなどの共通パーツを外部化すると一つ問題が発生します。それは全ファイル共通の記述になる為、例えばグロナビ（グローバルナビゲーション）の 現在いるページに対応するボタンをアクティブにしたい という場合頭を悩ませることになるかと思います。 今回はカレントページに対応するボタンのアクティブ化、さらにはそれを 完全自動化 するテクニックを解説し
その場で展開できる「続きを読む」ボタンの作り方 [ホームページ作成] All About
その場で展開できる「続きを読む」ボタンの作り方ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。
![その場で展開できる「続きを読む」ボタンの作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/db3e470379850bb3f7a1d9b65024d6bf9f2a1e06/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F9%2F1%2F0%2F2%2F201510081708%2Ftopimg_original.png)
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験｜BLACKFLAG
最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。 レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。 そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。 【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。 ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画
jQuery基礎講座：するっと動くドロワーメニューの作り方（ZIP付） - P N R A
jQuery基礎講座[第１０回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで何かとよくみるドロワーメニューです。スマートフォンというブラウザサイズの制限を見事に克服したこのドロワーメニュー。ドロワー（引き出し）のように普段はしまっておいて、必要な時に出すというものです。 実装するにあたって、様々なjQueryプラグインもあるのですが、動きだけを考えるとそんなに複雑な仕組みではないため、自身で動作を定義してあげた方が表示速度やカスタマイズするにあたって便利だろうと思い、作ってみました。 基本的にはclick()メソッドを使ったCSSの切り替えだけなので、特に難しいことはなにもありません。 それでは、具体的にみて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
