案件ごとにgulpのバージョンが違うので、 nodenvを使ってローカルごとにnodeのバージョンを変えています。 gulpのバージョンに合ったnodeを探すために、何度もバージョン切り替えをするわけですが（バージョンのゲシュタルトが崩れてきた） そのときによくこ…
PCの容量に限界が見えてきて掃除を開始。 そういえば、パッケージ版nodeを最初に入れたけど nodenvで管理してるから重複しているのでは・・・？ と思い検索してみるとやっぱりパッケージ版は削除しても問題なさそうだったので、その削除手順を残します。パッ…
サーバー立ててテストしたいけどxamppとか使うほどでも・・・ というときのPHPコマンドphp -S localhost:8000これでhttp://localhost:8000/にアクセスできるようになるよ！ ただ、簡易サーバーなのでちゃんと開発したいときはxampp使いましょうネ。
はやくIEサポート終了こい！！！の気持ちを全面に出しつつ 手元にEdgeしか無いときに、IEモード表示で開発者ツールが出ないのに困ったので手順を残しておきます。 IE対応はいい加減あきらめてほしいナ♡EdgeをIEモードに変更ブラウザ右上の「・・・」から「設…
環境を整えるにあたって、便利そうな機能をメモ。gulp-plumber コンパイルエラーが出てもgulpを停止させない gulp-notify コンパイルエラーの内容をデスクトップに表示 gulp-sourcemaps 開発者ツールでcssではなくsassの記載位置を表示 gulp-mode 本番環境と…
色を選ぶのが苦手、イラスト載せたいけど描けない、かっこいい写真置きたいのに撮れない。 そんなわたしに優しいサイトをお気に入りがてら載せていきます。色を決めるColor Hunt Color Palettes for Designers and Artists - Color Hunt Discover the newest…
gulpとバージョン相性が合わなくて動かないよ！？のときの対処法。 この記事の続き。↓ gulp走らせてみたらこんなエラーが出ました。ReferenceError: primordials is not definedgulpとnodeのバージョンの相性が悪くて動かないよ！の合図だそうで。 共同作業…
フォーム要素があるページをスマホでみているとき、 入力しようとすると、何も指定していないにもかかわらず 勝手ににゅんっとズームする問題。 見て見ぬ振りをしてきましたが（とくに指摘されたこともなかったし・・・）、どうやらfont-sizeが影響している…
LiveServerが便利すぎて、このために使っていると言っても過言ではないVisualStudioCode。 ローカルサーバーを立ち上げたときにスマホやらiPadやらですぐに確認するために、URLにローカルIPアドレスを表示してもらうための設定方法です。setting.json に下記…
そういえば、web制作用のtwitterアカウント(放置)があったなーと思い noteを更新したら自動でツイートされるような設定をしてみました。 使用するのはIFTTTアプリ。 家電の自動化でもお世話になってます！！1. Createボタンを選択新しく機能を作ります。2. i…
色々と使い勝手良く作られているiPhone。 その便利機能のおかげでtableの一部のセルだけ文字が大きくなり、 !importantすら無視されてしまう問題に出会ったので修正方法をメモ。html { -webkit-text-size-adjust: 100%; }結果から言うと、これで解決。事件詳…
同意画面とかでよく見る 「テキスト部分を最後まで読んだら次へすすめるよ！」 を実装するための覚書。すぐ忘れるので。残念なほどに。 次回はコピペで行きたい。HTML<div class="box_agreement"> <div class="textarea"> <div> テキストテキストテキストテキストテキストテキストテキストテキスト </div> </div> <a class="-disabled" href="#">同意するボタン</a> </div>…
同意画面の初期表示時はボタンを押せない状態にしたい！ とかで使えるCSSのご紹介。 昔はJSでonclickなんちゃらを設定したりが必要だったけど CSSで大丈夫だよ（わーいpointer-events:none;はい、これだけ。 hover時にポインターが変身することもなくなりま…
Webサイトをまったくのゼロから新規作成するとき、 既存のサイトに新たなコンテンツを追加したいとき、 既存のサイトのサイドコンテンツとして新しく作り始めるとき そんなときに確認しておきたい事項のまとめ。対応デバイス・ブラウザ・バージョンWebサイト…
for~ とか each とかは知っていたけど今回はじめて知った繰り返し処理の書き方のメモ。function consMemo( txt ){ console.log( txt ); }; // 3回コンソールに表示。 var hyouji = _.times( 3, consMemo );シンプル＆わかりやすくて好き。うん。と、思ってい…
スクロールバーやアドレスバーを含まない$(window).width() document.documentElement.clientWidth; $(window).height() document.documentElement.clientHeight;スクロールバーやアドレスバーを含む値がアドレスバーの出現等によって動的に変化しますwindow…
jQueryで書かれていたajaxとアニメーションをJavascriptに書き換える（戻す？）作業が発生したのでメモ。 jQuery畑で育ちすぎて検索の仕方もわからなかったよ。検索について検索するときは頭に「脱jquery」をつけろ！！！ .hasClass をjavascriptに書き換え…
増えてきましたね、タスクランナー案件。 なんどやっても環境構築の手順を覚えられないので 自分用に記録。 ちなみにイチからgulp環境を作っていくのではなく、 一通り環境を作ってあるものをgit等で持ってきて その中に入っているであろうpackage.jsonに合…
Webサイトが完成して一段落、と思いきやお客さまから 「印刷でここがずれちゃうんですけど・・・」 という一言が入ることがちらほら。 作ってる方からすると当たり前過ぎて念押しし忘れてしまうことが多いのだけど 実はきれいに印刷するためには別途印刷用の…
複数条件、全部含む （^…$ これで１行を表す）^(?=.*あああ)(?=.*いいい)(?=.*ううう).*$
<meta name="viewport" content="width=1024px">久しぶりにこの設定みたな、と思ったら この子のおかげでメディアクエリが使えなくなるアクシデントに遭遇。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">最近はこんな設定ばっかり使ってたからすっかり忘れてたけど、 デバイスの幅を「1024px」と認識させちゃう状態だものね、あたりまえよね・・・この</meta></meta>…
