【JavaScript】カレントページのとき「current」のclassを付与するメモ
HTML カレントページのときに「current」をつけて、cssでデザイン変更したい。 CSS カレントページのときの表示デザインを記述。 JavaScript これでカレントページのとき「current」が付与される...
HTML・CSSJavaScript
HTML・CSSHTML・CSS【JavaScript】縦スクロールを横スクロールにするメモ（ついでに画面幅が変わってもいい感じになるよう調整するCSSも）
横並びの画面からはみ出してるコンテンツを全部見てもらいたいとき、スクロールするだけで横に動いたらいいなーってことないですか？ yukipan的には横にはみ出してるより縦並びで全部見れたほうが親切じゃないかと思う派なんだけ...
HTML・CSS【JavaScript】videoの音声ミュートをON・OFF切替るボタン設置の方法メモ
videoを自動再生設定してるけど、最初は音を出したくない。けど音を出したい人はボタンを押して音声ONにしてね〜っていう仕様にするときのコードメモ。jQueryは使わず、JavaScriptで記述。 HTML SCSS ...
JavaScript「Instagram Graph API」を使って取得し、PHPでサイトに埋め込む方法メモ(WPでインスタの投稿写真表示を自動化したい）
せっかくInstagramに写真アップしてるなら、自動でサイトにもギャラリーとしてアップしたいよね。イチイチサイトにも別でアップするとかめんどう〜。 だけど、Instagramをサイトに埋め込むのも結構大変。アクセストー...
JavaScript【JavaScript】トップ（上）に戻るボタンでスクロールしたら表示・footerまで来たら止まる（固定）ように実装するメモ
上に戻るボタンでスクロールしたら表示されて、footerまで来たらいい感じにfooterの上で止まるようにしたいときのコードをメモしておく。 HTML SCSS JavaScript totop.style.bottom...
JavaScript【JavaScript】複数のモーダル（modal)ポップアップ実装のメモ。
モーダルウィンドウ、idでページに一つだけ実装すると、複数設置したいときにモーダル開かない、、複数のときどうだったけ？といつも調べてるのでコピペで使えるようにメモしとく。 HTML data-modal=”m...
HTML・CSS【JavaScript・jQuery】アコーディオンメニュー。アコーディオン内に下層のアコーディオンも実装できるよ
こんにちは、yukipanです。メニューやコンテンツがたくさんあるときにアコーディオンでギュッと凝縮できるの、便利ですよね。見たいところだけ開いてみてくださーい、みたいな。 CSSのみで実装できるけど、CSSはinput...
HTML・CSSふわっと浮き出てくるグローバルナビのハンバーガーメニュー
ちょこっと解説とサンプルページ 横とか上からスライドで出てくるメニューじゃなくて、ふわっと浮き出てくるハンバーガーメニューを作ってみた。 非表示のときは「opacity: 0;」だけじゃなくて、「right: -100v...
HTML・CSS【jQuery】文章が長いときのみグラデーションで隠して続きを読む・閉じるを表示
文章が長いときによくある「続きを読む」っていうやつ。一定の長さのときのみ「続きを読む」を表示させて、短いときは表示しないようにできます。jsの高さを調整すれば、ある程度表示させたい文章の長さを調整できる。 デモはこちら ...
HTML・CSSコピペで使えるcssアニメーション
コピペで使えるCSSアニメーションをメモしておきます。よかったらご自由にコピペして使ってください。 一文字ずつふわっと表示テキストアニメーション ※jQueryのCDNを先に読み込まないと動きません。 背景が幕のように上...