私の仕事
結論 display: flex;flex-direction: column;flex-wrap: nowrap; ←こいつをつければOK ざっくり何があったか 子要素が空なら高さ要らんやん。縦並びにするならflexも要らんやん。 まぁそれはごもっとも。 今カスタマイズしていたのは、はてなブログのアーカ…
<ul> <li>1</li> <li>2</li> ← これと <li>3</li> ← これと <li>4</li> ← これ <li>5</li> </ul>真ん中のアイテムだけ見た目を変えたいの！！！ というときがスライダーやらページャーを作るときによくあって クラスをつけるのもなんだかなぁというときに使えるCSS技。nth-of-typeを複数設定/* 2番目から5番目の要素…
vueを使って、フワッと要素を切替表示したいと思います。 こんな感じで↓ソースはこちら↓<transition name="formTxt"> <span v-if="isShown">3日以内に返信いたします。お気軽にお問い合わせください。</span> <span v-else>お問い合わせ、ありがとうございました。</span> </transition>何の変哲もないDOMですが、この状態だとどれだけCSSを調整しても…
どっちがどっち？と確実に毎回悩むこのセット。 パラメータ関連でよく出会います。 Javascriptで片付けちゃうよ！エンコードする（例：「あ」➛「%E3%81%82」）encodeURI( エンコードしたいURI ); https://www.aaa.com/あ ↓ https://www.aaa.com/%E3%81%82予…
var items = { "pen" : 80, "book": 450 };itemsの中にプロパティがいくつあるのかほしい！ 数を求めるといえばlengthだ！！！console.log(items.length);➛➛➛ undefined( ◜ω◝ ) ｱﾋﾝオブジェクトではObject.keys()メソッドを使うObject.keys()にlengthをつけ…
最近なるべくjQueryではなくバニラJSを書くように心がけている私ですこんにちは。 Javascriptって、大体は書いた順に上から処理してくれるイメージですが 実は同時進行タイプ（正しくは非同期言語）なのでちょっと時間のかかる処理を挟むと、他の処理を先に…
const contents = location.pathname.split('/').slice( -2, -1); let itemName = 'リスト'; switch (contents) { case 'title': itemName = 'タイトル'; break; case 'btn': itemName = 'ボタン'; break; ・・・ ・・・ }現在地のディレクトリ名を取得その…
あんまり来ないBootstrap案件がきた。 管理画面作るにはとても便利なBootstrapさん。 今回はCoreUIというテーマを使いました。 これを使うにはnpmでビルドしなければいけないので そのコマンドと作業の流れを忘備録的にメモ。CoreUIをダウンロードこちらから…
開発環境と本番環境ではURLが違うので、本番用にパスを書き換えなきゃいけないのが地味にめんどくさいけど間違えたら致命的な大事な作業。 かんたんにショートコード作っちゃいましょ！ショートコード用.phpを作るオリジナルテーマ使っててfunction.php内が…
案件ごとに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 に下記…
色々と使い勝手良く作られている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サイト…
増えてきましたね、タスクランナー案件。 なんどやっても環境構築の手順を覚えられないので 自分用に記録。 ちなみにイチからgulp環境を作っていくのではなく、 一通り環境を作ってあるものをgit等で持ってきて その中に入っているであろうpackage.jsonに合…
Webサイトが完成して一段落、と思いきやお客さまから 「印刷でここがずれちゃうんですけど・・・」 という一言が入ることがちらほら。 作ってる方からすると当たり前過ぎて念押しし忘れてしまうことが多いのだけど 実はきれいに印刷するためには別途印刷用の…
