Vue.jsでのスクロール感知
スクロール位置を判定したパーツの表示に利用。 下記ソースではスクロール値が200pxに達すると、divに対して「isVue」クラスを付与。 handleScroll()でwindow.scrollYを指定すると、横スクロールが取得できる。 ◆hrml <div v-bind:class="{ isView: isView }"> ◆vue new Vue({ el: '#app', d […]
2019年
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>
【参考資料】Atomic Design参考資料／参考書籍
- 2019.03.09
- AtomicDesign, 参考リンク, 参考書籍
参考サイト： ◆atomic design http://bradfrost.com/blog/post/atomic-web-design/ ◆Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで https://logmi.jp/tech/articles/320358 ◆DevLOVEの「Atomic Design ～堅牢で使いやすいUIを効 […]
【第四回】コンポーネントカタログの利用
- 2019.03.09
- AtomicDesign, 読み物
Atomic Designの調査レポート第四回です。 第一回と第二回は、コンポーネントを理解するための内容でした。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 【第ニ回】コンポーネントの考え方 http://note.favorite-color.net/2019/201902221497/ 【第三回 […]
【第三回】コンポーネントを用いた構築と運用方法
- 2019.03.01
- AtomicDesign, 読み物
Atomic Designの調査レポート第三回です。 第一回と第二回は、コンポーネントを理解するための内容でした。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 【第ニ回】コンポーネントの考え方 http://note.favorite-color.net/2019/201902221497/ 今回は、 […]
【第ニ回】コンポーネントの考え方
- 2019.02.22
- AtomicDesign, 読み物
Atomic Designの調査レポート第ニ回です。 コンポーネント＝部品と考え、サイトをデザインしていくという事は第一回でお話しました。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 今回は、「実際コンポーネントってなんなの？」の解説を行います。 【コンポーネントの種類】 Atomic Designは […]
【第一回】Atomic Designとは
- 2019.02.14
- AtomicDesign, 読み物
Atomic Designの調査レポート第一回です。 今回は、「Atomic Designとはなんぞや？」の解説を行います。 【Atomic Designとは】 Atomic Designの「デザイン」とは見た目だけのデザインだけではなく「設計」を指します。 これは、元々は UI/UXデザイナーのBrad Frost氏によって、Webフロントエンド向けに開発された手法です。 http://brad […]
javascriptで配列をランダムに表示する
jsを用いた、配列のランダム表示。 var array = [1,2,3,4,5,6,7,8,9,10]; for(i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = array[i]; array[i] = array[j]; array[j] = tmp; } […]
position: absolute;した要素を中央位置に配置する
- 2019.01.31
- position: absolute;, 上下中央, 配置
よく忘れるのでメモ。 top: 50% と transform: translateY(-50%) を併用することで、上下中央に要素を配置できる。 ◆上下左右中央 div{ position: relative; .hoge{ position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50 […]