ほのか

web屋になって気付けば10年以上。 忘れそうなノウハウをメモしていきます。

ほのか

web屋になって気付けば10年以上。 忘れそうなノウハウをメモしていきます。

CSSで○番目から○番目までを指定する

<ul>　　<li>1</li>　　<li>2</li>　← これと　　<li>3</li>　← これと　　<li>4</li>　← これ　　<li>5</li></ul> 真ん中のアイテムだけ見た目を変えたいの！！！ というときがスライダーやらページャーを作るときによくあって クラスをつけるのもなんだかなぁというときに使えるCSS技。 nth-of-typeを複数設定/* 2番目から5番目の要素を指定する */li:nth-of-type(n+2):nth-of-typ

ほのか

    • Vueのtransitionが効かないとき

      vueを使って、フワッと要素を切替表示したいと思います。 こんな感じで↓ ソースはこちら↓ <transition name="formTxt">　　<span v-if="isShown">3日以内に返信いたします。お気軽にお問い合わせください。</span>　　<span v-else>お問い合わせ、ありがとうございました。</span></transition> 何の変哲もないDOMですが、この状態だとどれだけCSSを調整してもトランジションが効きません。 要素

      ほのか

      • エンコードandデコード

        どっちがどっち？と確実に毎回悩むこのセット。 パラメータ関連でよく出会います。 Javascriptで片付けちゃうよ！ エンコードする（例：「あ」➛「%E3%81%82」）encodeURI( エンコードしたいURI );https://www.aaa.com/あ↓https://www.aaa.com/%E3%81%82 予約文字（;,/?:@&=+$#）はエンコードされません。 予約文字もエンコードしたい場合はこちら↓ encodeURIComponent( エンコ

        ほのか

        • Javascriptオブジェクト内のプロパティ数がほしい。

          var items = { "pen" : 80, "book": 450}; itemsの中にプロパティがいくつあるのかほしい！ 数を求めるといえばlengthだ！！！ console.log(items.length); ➛➛➛　undefined ( ◜ω◝ ) ｱﾋﾝ オブジェクトではObject.keys()メソッドを使うObject.keys()にlengthをつけることでプロパティの数を求めることができます。 console.log( O

          ほのか

        CSSで○番目から○番目までを指定する

        ほのか

          終わったらやる「Promise」

          最近なるべくjQueryではなくバニラJSを書くように心がけている私ですこんにちは。 Javascriptって、大体は書いた順に上から処理してくれるイメージですが 実は同時進行タイプ（正しくは非同期言語）なのでちょっと時間のかかる処理を挟むと、他の処理を先に進めてしまう。 でもそれじゃ困るのよ！ 絶対にこの処理は全てが片付いてから実行してほしいの！！！！ というときに使える武器の一つ「Promise」オブジェクトについてのメモ。 Promise 雛形new Promis

          ほのか

          終わったらやる「Promise」

          ほのか

          場合分けのswitchで引っかかった。

          const contents = location.pathname.split('/').slice( -2, -1);let itemName = 'リスト';switch (contents) { case 'title': itemName = 'タイトル'; break; case 'btn': itemName = 'ボタン'; break;・・・・・・} 現在地のディレクトリ名を取得 その

          ほのか

          場合分けのswitchで引っかかった。

          ほのか

          BootstrapのCoreUIを使う

          あんまり来ないBootstrap案件がきた。 管理画面作るにはとても便利なBootstrapさん。 今回はCoreUIというテーマを使いました。 これを使うにはnpmでビルドしなければいけないので そのコマンドと作業の流れを忘備録的にメモ。 CoreUIをダウンロードこちらから。 解凍後は適宜作業用ディレクトリにお引越ししてください。 npmでパッケージをインストールnpm i いつものやつですね。 ビルドするよnpm run start このまま制作を開始して

          ほのか

          BootstrapのCoreUIを使う

          ほのか

          WordPressの画像パスをショートコードでかんたんに。

          開発環境と本番環境ではURLが違うので、本番用にパスを書き換えなきゃいけないのが地味にめんどくさいけど間違えたら致命的な大事な作業。 かんたんにショートコード作っちゃいましょ！ ショートコード用.phpを作るオリジナルテーマ使っててfunction.php内がそんなにとっちらかってない、とかいう場合はあまり関係ないかもしれないですが 既存テーマを使っていて、あんまりfunction.phpを触りたくない場合におすすめなのがそれ用のphpを作ってfunction.phpに読み

          ほのか

          WordPressの画像パスをショートコードでかんたんに。

          ほのか

          nodeのバージョンを変えたときに止まるSassについて

          案件ごとにgulpのバージョンが違うので、 nodenvを使ってローカルごとにnodeのバージョンを変えています。 gulpのバージョンに合ったnodeを探すために、何度もバージョン切り替えをするわけですが（バージョンのゲシュタルトが崩れてきた） そのときによくこんなエラーが吐き出されます。 Node Sass could not find a binding for your current environment Sassがなんかわがまま言ってんなー、という感じ。

          ほのか

          nodeのバージョンを変えたときに止まるSassについて

          ほのか

          パッケージ版のnodeを削除

          PCの容量に限界が見えてきて掃除を開始。 そういえば、パッケージ版nodeを最初に入れたけど nodenvで管理してるから重複しているのでは・・・？ と思い検索してみるとやっぱりパッケージ版は削除しても問題なさそうだったので、その削除手順を残します。 パッケージ版のnodeがいるか確認/usr/local/bin/node -v 私の環境では「v17.2.0」と表示されました。やっぱりいましたね。 削除するsudo rm -rf /usr/local/{bin/{nod

          ほのか

          パッケージ版のnodeを削除

          ほのか

          簡易サーバー起動

          サーバー立ててテストしたいけどxamppとか使うほどでも・・・ というときのPHPコマンド php -S localhost:8000 これでhttp://localhost:8000/にアクセスできるようになるよ！ ただ、簡易サーバーなのでちゃんと開発したいときはxampp使いましょうネ。

          ほのか

          簡易サーバー起動

          ほのか

          EdgeでIEを検証する

          はやくIEサポート終了こい！！！の気持ちを全面に出しつつ 手元にEdgeしか無いときに、IEモード表示で開発者ツールが出ないのに困ったので手順を残しておきます。 IE対応はいい加減あきらめてほしいナ♡ EdgeをIEモードに変更ブラウザ右上の「・・・」から「設定」を選択 「規定のブラウザー」を選択 「Internet Explorer に Microsoft Edge でサイトを開かせる」を「互換性のないサイトのみ」に変更 「Internet Explorer モード

          ほのか

          EdgeでIEを検証する

          ほのか

          gulpメモ

          環境を整えるにあたって、便利そうな機能をメモ。 gulp-plumber コンパイルエラーが出てもgulpを停止させない gulp-notify コンパイルエラーの内容をデスクトップに表示 gulp-sourcemaps 開発者ツールでcssではなくsassの記載位置を表示 gulp-mode 本番環境と開発環境で書き出し方法を分けたいときに使用 del ファイルの削除を行う gulp-dart-sass sassを使う！ gulp-sass-glob @import の簡

          ほのか

          gulpメモ

          ほのか

          デザインするときにお世話になっているサイト様(無料)

          色を選ぶのが苦手、イラスト載せたいけど描けない、かっこいい写真置きたいのに撮れない。 そんなわたしに優しいサイトをお気に入りがてら載せていきます。 色を決めるColor Hunt 見た目もかわいい、お気に入り機能やソート機能も便利。 メインの色を大きく表示してくれているので、完成形に当てはめやすいのも助かります。 Coolors 色が決まらねぇ！わからねぇ！！！ ってなったときに偶然の出会いを期待してスペースキー連打するサイト。 気に入った色にはロックをかけて色チェン

          ほのか

          デザインするときにお世話になっているサイト様(無料)

          ほのか

          nodeのバージョン切り替え

          gulpとバージョン相性が合わなくて動かないよ！？のときの対処法。 この記事の続き。↓ gulp走らせてみたらこんなエラーが出ました。 ReferenceError: primordials is not defined gulpとnodeのバージョンの相性が悪くて動かないよ！の合図だそうで。 共同作業していたらgulpの設定を変えるわけには行かない場合があるので 相性の良いnodeのバージョンに変更しましょう。 バージョン管理、わたしはnodenvを使っています。

          ほのか

          nodeのバージョン切り替え

          ほのか

          スマホが勝手にinput要素をズームする問題

          フォーム要素があるページをスマホでみているとき、 入力しようとすると、何も指定していないにもかかわらず 勝手ににゅんっとズームする問題。 見て見ぬ振りをしてきましたが（とくに指摘されたこともなかったし・・・）、どうやらfont-sizeが影響しているようです。 font-sizeを16px以上に変える16px以下の文字サイズになっているときに、見やすいよう（またこれ） 勝手に大きくしてくれるようで。iPhoneさん・・・ほんとに・・・ それよりも大きい数値にすれば起こらなく

          ほのか

          スマホが勝手にinput要素をズームする問題

          ほのか