【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法｜kasumiblog
ページ内アンカーリンクでスムーズスクロールを実装したが、別ページのアンカーリンクに飛んだ時も、スムーズスクロールさせたい！ このような疑問に回答します。 本記事では別ページでも、アンカーリンクへスムーズスクロールさせる方法について解説します。 script内に以下ソースを記述 $(function () { // 別ページの場合は以下 var urlHash = location.hash; if (urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ // ヘッダー固定の場合はヘッダーの高さを数値で入れる、固定でない場合は0 var headerHight = 0; var target = $(urlHash); var position = target.offset().top - headerH
git/index.lockを解除し無事にadd/commitできました。 | ハイパー猫背
なんかよく分からないが怒られた。 .git/index.lockとは エラーの文言的には，index.lockってファイルが存在しているからエラーになってるっぽい。 なんや，index.lockって。。 git/index.lockとは 同じgitのリポジトリ内で同時に複数の処理を行わないための排他制御を行うもの。 つまり，index.lockが存在するということは，裏で他のgit操作が行われている。 ならば，他のgit操作が終了するのを待てばいい。 もちろん，時間をおけばgit操作できるようになるのだが，「そんなの待ちきれないよ」って方は別の解決法で。 git/index.lockを削除 index.lockを削除してしまっても構わない。
【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！
どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとは アコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意
JavaScriptでvideoを操作する
videoタグをJavaScriptで色々操作してみます。 対応ブラウザ videoが対応しているブラウザはこちら。 IE8以下が非対応なので、対応が必要な場合はIE8以下ではFlashにするなどの処理が必要です。 あと、スマホでは自動再生が不可だったり、再生時の挙動が機種によって違ったりなど色々と問題が多いので、対応する場合は注意が必要です。 サンプルコード HTML <video id="video" width="480" height="270" controls> <source src="./movie.mp4" type="video/mp4" /> </video> <div id="time"> <span id="currentTime">0</span> / <span id="totalTime">0</span> </div> <div id="control">
【jQuery入門】offset()で要素の位置を取得・設定する方法！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
こんにちは、ライターのマサトです！ 今回は、jQueryで対象要素の位置座標を取得することができる「offset()」メソッドについて学習をしていきいましょう！ この記事では、 「offset()」とは？ offset()の使い方 「offset()」「position()」の違い スクロール量をoffset()で取得する方法 offset()の注意点 「offset()」とは？ それでは、まず最初に「offset()」メソッドについて基本的な知識から学習していきましょう！ 「offset()」は、画面上（document内）に配置したHTML要素の表示位置を座標で取得できるメソッドになります。 次のような位置座標をイメージすると分かりやすいでしょう！ このように「offset()」では、対象となるHTML要素の左上を原点としたX・Y座標を取得することができます。 これにより、jQuery
ヘッダ固定時のアンカーリンクずれ解消法｜assassin@Web屋
position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する例えば、以下のようなソースに実装すると <div class="header"> ヘッダー </div> <div class="content"> <a href="#link01">コンテンツ</a> </div> <div class="content" name="link01" id="link01">リンク先</div>ヘッダの高さが80pxとした場合 .header { width: 100%; min-width: 960px; height: 80px; position: fixed; lef
JavaScript：連続クリック対応方法 - 覚え書き.com
画面上に設置したボタンを連続でクリックされた場合に予期しない挙動を引き起こす事が良くあります。 そういう場合の対応方法についてメモしておきます。 基本的に対応する方法としては以下の様な方法があります。 ボタンのdisabled属性をtrueにする フラグを設置してクリックされたらフラグをfalseに設定してイベント処理されないようにバイパスする 以下はjQueryベースで連続クリックされた場合にフラグを使用して判定する方法です。 jQueryサンプル // 連続クリック防止フラグ var clickFlg = true; jQuery(function($) { $(".button").on("click", function() { if(clickFlg) { // イベント処理中はフラグをoffにします。 clickFlg = false; // クリック処理を実施 } else
WordPressにSimple GA RankingとGoogle Analytics Post Pageviewsで記事ランキングを表示する | ヤマムギ
WordPressにSimple GA RankingとGoogle Analytics Post Pageviewsで記事ランキングを表示する 参考にさせていただいた記事 【Simple GA Ranking】にサムネイルと順位とPVを表示してみたよ サムネイルも表示したかったのでこちらを参考にさせていただきました。 というかほぼそのままやってみました。 ありがとうございます！ 「データベース接続確立エラー」が多発 WordPressの「データベース接続確立エラー」への対応(様子見中 EC2 + RDS t2.micro) ある時期を境に「データベース接続確立エラー」が多発するようになりました。 時間の経過的には単純にアクセス数が増えたことが原因ですが、改善をしなければです。 環境はAWSで、 EC2 + RDS + CloudFront + WAF etc。 EC2インスタンスはt2.
javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのです... - Yahoo!知恵袋
javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのですが、どなたか解決方法をご存じないでしょうか？ javascriptでinnerHTMLで指定する対象にダブルクォーテーションが含まれている場合、HTML変換がうまくいかないようなのですが、どなたか解決方法をご存じないでしょうか？ HTMLのテーブル内要素に次のような記述があります。 Sort()は自作のjavascriptの関数で、初期表示時は正常に動作します。 <td> <img src="./a.jpg" title="上に移動" onclick="Sort(0, 'up');"> </td> この記述を変更するために、javascriptで次のようにinnerHTMLで代入しています。 cell.innerHTML = '<img src="./a
【ポップアップ（吹き出し・ツールチップ）で「ツアー」や「チュートリアル」の表現ができるjQueryプラグイン「Joyride」】｜今村だけがよくわかるブログ
【ポップアップ（吹き出し・ツールチップ）で「ツアー」や「チュートリアル」の表現ができるjQueryプラグイン「Joyride」】 jQueryでポップアップ（吹き出し・ツールチップ）を使って「ツアー」や「チュートリアル」の表現ができるプラグインがありました。 「なんだ、どういう意味だ・・・？」 といいますと・・・言葉で表現するのはヘタなので、サンプルを作りました。興味がありましたらご参考ください。 サンプルはこちらタブの「Result」を押して動作をご確認ください スルスルッとスクロールするんで、見た目的にもおもしろいです。 まとめサンプルではたまたま「私のアカウント紹介ツアー」みたいに作りましたけど、使い方は発想次第でいろいろですね。こういったものをあらかじめwebに設計してあると、制作側の配慮が見られて「親切設計だな～」って私は感じます。 参考リンクhttp://www.zurb.co
『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。 - Qiita
js苦手なデザイナーの筆者としては、なるべくならコピペして事なきを得たい…と考えている。 が、仕事をしている以上、コピペしてちょっと手を加えて…という事は避けて通れない。特に、今回は再開発案件だったので、仕様を大きく変更することが難しい。 そこを前提として、下記の要件で絞ってみた。 jsに弱いデザイナーが考えた要件 ツールチップちっくだけど、マウスオーバーではなくクリックして表示させる 再開発前のツールチップは、『閉じる』のボタン以外では閉じない。非常に邪魔。要素外でクリックしても閉じたい そもそも『閉じる』ボタンの表示が邪魔だからいらない（とデザイナーは思った） 高機能ツールチップもいいけど、少しでも軽量化したかったので、不要なアニメーションとか永遠に使わないオプションはいらない そこで発見したのが クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた …要件ぴった
クリックされたらツールチップを表示するスクリプトをjQueryで組んでみた - Wataame Frog
リンクをクリックされると表示するツールチップのスクリプトを組んでみました。 フォーム入力する際のヘルプなどの表示を主な用途と考えていますが、使いどころはほかにもありそうな予感。 基本的なものなので、改造は簡単にできそうですしね。 イメージ / デモ イメージ デモ <table> <tr> <th>タイトル <a href="#note1" class="clickToolTip">?</a></th> <td><input type="text" name="title"></td> </tr> <tr> <th>メッセージ <a href="#note2" class="clickToolTip">?</a></th> <td><textarea name="message" rows="5" cols="30"></textarea></td> </tr> </table> <!--
WordPress で AMP をプラグイン実装してカスタマイズ | LuftGarden
デフォルトで読み込むテンプレートを変更する functions.phpでテンプレートのパスを指定する関数をフックに登録します。 function custom_amp_template( $file, $type, $post ) { if ( is_string( $type ) && preg_match( '/\A[a-z\-]+\z/', $type ) ) { $file = WP_CONTENT_DIR . '/themes/[テーマ名]/amp/' . $type . '.php'; } return $file; } add_filter( 'amp_post_template_file','custom_amp_template', 10, 3 ); これでテーマディレクトリにコピーしたテンプレートを読み込んでくれます。 テンプレートを編集する テンプレートは自由に編集可
HTML入門 第3回 -これからのHTML-｜オンライン動画授業・講座のSchoo（スクー）
たにぐち まこと 株式会社エイチツーオー・スペース 代表取締役 「ちゃんとWeb」をコーポレートテーマに、Web標準に準拠したメンテナンスしやすいWebサイトを「ちゃんと」作ることを目指したWeb制作会社。 WordPressを利用したサイト制作や、スマートデバイス向けサイトの制作、PHPやJavaScriptによる開発を得意とする。 また、CSS Niteや Word Campでの講演や著書などを通じ、クリエイターの育成にも力を入れている。 主な著書に『WordPressをちゃんと使うための教科書』（マイナビ刊）、『よくわかるPHPの教科書』（マイナビ刊）など。 Web http://h2o-space.com Twitter http://twitter.com/seltzer Facebook http://facebook.com/taniguchi.makoto 主な講演実績 C
銀ねこアトリエ | 広島のフリーランスWebクリエータの忘却メモや徒然な日々の日記です
2016.04.05 16回広島でコンクリ勉強会開催します。今回はブロックのカスタマイズ。https://goo.gl/pei7Ej 2015.11.28 広島でコンクリ勉強会＆忘年会します。お申し込みはこちらhttps://goo.gl/hTH7ci 2015.07.15 「ヒロハタ」中間発表会サイト制作しました。 http://ginneko-atelier.com/works/ 2015.05.22 5/27（水）『広島でコンクリ』 Vol10を開催いたします！ お申し込みはコチラ https://goo.gl/gexVmP 2015.02.08 広島でコンクリVol7開催します。今回はページタイプとコンポーザーと制作事例。 お申し込みはコチラから。 http://goo.gl/LWrBTh 2015.01.15 2015年2月7日『CMSの会』を開催します。ハンズオン形式で同じテー
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
.attr() | jQuery 1.9 日本語リファレンス | js STUDIO
属性に値を設定、または設定されている値を取得します。 .attr( name ) 1.0追加 .attr( name, value ) 1.0追加 .attr( map ) 1.0追加 .attr( name, function(index, attr)) 1.1追加 jQuery1.6の問題 jQuery1.6で、attrに大幅な仕様変更がありましたが、この変更はユーザーに大きな混乱を招く結果となり1.6.1で 後方互換(新しいバージョンが古いバージョンの規格を扱えること)を持つように修正されました。 .attr( name ) 1.0追加 戻り値:String 指定した属性の値を取得します。 引数 説明
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
jQueryってなに？超初心者向け入門講座 | 株式会社WEB企画
こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。 もう少しで長かった冬も終わり、春を迎えますね。 春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。 昔とは違い、最近は「デザイン＋htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。 そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない！」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。 jQueryを使えるデザイナーは、今後必ず重宝されます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペで簡単】ハンバーガーメニューをCSSだけで作る方法 | ルイログ
