サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
illbenet.jp
Amazonなどのように、メイン画像とサブ画像のある画像表示領域で、サブ画像をクリックするとメイン画像をふわっと変更するjQueryを書いてみました。 fadeIn処理が終わってから画像のsrc属性を書き換え、fadeIn処理をしています。 デモ 動いているサンプルはこちらからご覧できます。 DEMO <div id="mainImg"> <img src="./img-1.jpg"> </div> <ul id="subImg"> <li class="current"><img src="./img-1.jpg"></li> <li><img src="./img-2.jpg"></li> <li><img src="./img-3.jpg"></li> <li><img src="./img-4.jpg"></li> </ul> $(function(){ $('#subImg im
Instagramの投稿をサイト内に埋め込むのではなく、Instagramに投稿した写真を取得してサイト内に一覧表示する方法を紹介します。 Instagram の投稿をサイトに埋め込み表示するための手順 手順としては以下の通りです。 Instagramアカウントをプロアカウントに変更する FacebookページとInstagramプロアカウントを連携させる FacebookのデベロッパーツールでFacebookアプリを作成する FacebookアプリでGraph APIを利用してアクセストークンを3回発行する (4)で作成したアクセストークンを利用してjQueryなどでサイトにInstagramの投稿を表示する 既にfacebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみるという記事を書いていますが、(3)以降はまさにそれと同じ流れです。 Instagram
最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。 バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。 スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分(コンテンツ)をスクロールさせないドロワーメニューを作成してみます。 参考にさせていただいたサイトは記事最下部に記載させていただきました。 DEMO ドロワーメニューのHTMLサンプル たとえば下記のようなHTMLでドロワーメニューを実現します。 <div id="wrap"> <header> <h1>タイトル</h1> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input
吾輩(わがはい)は猫である。名前はまだ無い。 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)に
js.cookie.jsは、jquery.cookie.jsから発展したプロジェクトです。 jquery.cookie.jsとは操作方法が違うので、忘れないように簡単にまとめておこうと思います。 js.cookie.jsとjquery.cookie.jsの違い js.cookie.jsは、jquery.cookie.jsから発展したプロジェクトです。 jquery.cookie.jsでできることは、js.cookie.jsでもできると考えて良いようです。 一番の違いは、js.cookie.jsを利用すると、クッキーに配列を利用できるということでしょう。 jquery.cookie.jsだと、cookieというクッキーに{value}という値しか登録できなかったのが、{name : value}という値を登録できるようになったようです。 その他、クッキーの保存・削除・取得方法が違うので、利用
この記事で紹介したTipsは、現在使用できない可能性があります。 更新された情報はこちらの記事をご参照ください。 pixiv小説のように小説を表示する方法を色々と調べてみました。 pixivの小説縦書き表示では、縦書き部分にjavascriptは利用せず、縦書きをCSS3で表現し、ページめくりやスクロールの部分をjQueryで補うという方法を採用しているようです。 参考URL pixiv inside|pixiv小説縦書き機能 開発の裏側 ~横のものを縦にする~ the third place -5th take-|[底] 小説の縦書き表示 上記を参考に、pixivのように小説を表示するjQueryやCSSをまとめてみました。 DEMO 概要 pixivのような小説の表示を再現するのに、下記のような方法を採用しました。 pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。 小
WEB上でも、小説や論文・記事など、日本語の長い文章はやはり縦書きで閲覧したいですよね。 WEB上で文章を縦書きで表示するには、竹取JSやnehanというjavascriptがあります。 どちらも非常に優秀なjavascriptですが、まず第一に動作が重いというデメリットがありました。 動作をできるだけ軽くし、どの環境でも縦書きを表現するために、pixivの小説縦書き表示機能を参考にしました。 pixivの小説縦書き表示では、縦書き部分にjavascriptは利用せず、縦書きをCSS3で表現し、ページめくりやスクロールの部分をjQueryで補うという方法を採用しているようです。 参考URL pixiv inside|pixiv小説縦書き機能 開発の裏側 ~横のものを縦にする~ the third place -5th take-|[底] 小説の縦書き表示 CSSだけで縦書き表示してみる I
2022/04/22 WEB関連 【2022年版】GTMでUAからGA4に移行する方法~Google Tag Manager でGoogle Analytics 4を利用する方法
このページを最初にブックマークしてみませんか?
『I'll be NET-創作サイトとかを制作する人の備忘録』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く