やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

HTML,CSS,javascript

microCMSとJavascriptを利用して簡単なサイトを作る

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。microcms.io APIスキーマ 今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。 フィールドID:textField …

メモ:jQueryあれこれ

html、cssは省略します 全体魔法 window.addEventListener('DOMContentLoaded', function(){ // ここに全部書く }); なんでか $(function(){ }); だとエラーが出やすいので スムーススクロール(スムーズスクロール)? $('a[href^="#"]').click(function(){…

jQueryで、loading

JavaScriptがそもそも苦手すぎて、 どうもVueとかReactをやる気になれない。結局たよりになるのはjQuery、、、 気をつけたところ Scriptは、対象となるDOM要素(#loader-bgなど)の後ろに書かないと、 エラーが出ることがあるっぽい。 追記2 一瞬ちらっと見…

レスポンシブの時にpositionの指定を変えたい

たとえばtop指定→bottom指定に 大画面の時は上部に、スマホは下部に表示したいな〜っていうとき nav { position:fixed; top:16px; left:16px; } @media screen and (max-width: 600px){ nav { bottom:16px; } } ってすると、bottomが効かない。 topが優先さ…

PHPで作ったフォームにGoogle reCAPTCHAを実装する

メールフォームは たしかこれを使った www.php-factory.net reCaptcha 「私はロボットではありません」というやつ reCAPTCHA: Easy on Humans, Hard on BotsGoogleアカウントにログインした状態で上記にアクセスし、 「reCAPTCHA v2」を選択して登録し、API…

instagramのフィードを表示させたい

JSONデータをPHPでごにょごにょして....というのを自作するのは骨が折れるので、プラグインを使うことに。 下準備 ↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。 teamnaporitan.com instafeed.js instafeedjs.comheader部分で…

ハンバーガーメニュー

なんだかんだ言っても、ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであればまだまだハンバーガーメニューは有効だと思うのです。「ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。 仕様 右…