inputタグに表示するプレースホルダの位置を変更する
- 2019.05.31
- placeholder
スタイルシートでフォーム内にデフォルトで表示する「プレースホルダ」の位置を変更することが出来る。 下記例ではplaceholderを左から100pxずらして表示する。 hoge::placeholder { padding-left: 100px; }
2019年5月
AtomicDesignに挑戦した所感 ～クラスの命名規則のミス～
- 2019.05.31
- AtomicDesign, 感想
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 変更時を一括で行う事を目的としたボタンの命名規則で失敗。 .c-btnをボタンの基本クラスとし、デザイン用に.c-btn–-◯◯ というクラスを別途使用することを決めた。 […]
AtomicDesignに挑戦した所感～デザイン完成からコーディング開始時点～
- 2019.05.29
- AtomicDesign, 感想
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— デザイン作成からコーディングまで完了した時点で、いくつか不安点など出てきた。 ◆レベル感がわからない ◯デザイナー： 「このパーツの別サイズを作るのは、コンポーネントとして […]
Vue.jsチェックポイント（随時更新）
- 2019.05.29
- チェックポイント
◆最終チェック時に行うこと ☆不要な処理（使用していないもの／console.log(); など）が残っていないか ◆ポイント ☆要素の変更により値が変わる、計算するもの computed で処理を行う。 ☆==は===にしましょう（型の比較もしてくれるので安全です） ◆ソースコード短縮 ☆ v-bind:は省略して:にしましょう ☆ hoge: function() {}は省略してhoge() […]
Vue.jsでのスクロール感知
スクロール位置を判定したパーツの表示に利用。 下記ソースではスクロール値が200pxに達すると、divに対して「isVue」クラスを付与。 handleScroll()でwindow.scrollYを指定すると、横スクロールが取得できる。 ◆hrml <div v-bind:class="{ isView: isView }"> ◆vue new Vue({ el: '#app', d […]
WordPressのパーマリンクに数値のみを設定した際に「-2」が付与される
WordPressのパーマリンクで%postname%を設定した状態で、数字のみを入力した場合に「-2」が自動付与される。 投稿タイトルを使用していたサイトにおいて、投稿日にパーマリンクを変更したいと言われた場合にその仕様がわかった。 ◆WP仕様上、タイトルに「-2」が入る条件 A：すでに同名のパーマリンク指定をしている記事がある（投稿URLの重複を避ける為） B：パーマリンクを“数字のみ”で設定 […]
vue.jsで条件に合わせてクラスを変更する（複合条件）
- 2019.05.02
◆単一条件 <div v-bind:class="{ addclass: 条件 }">ほげほげ</div> ◆複合条件 <div v-bind:class="{ addclass: !aaaa || bbbb }">ほげほげ</div>