Vue.jsで構築したサイトに対して、下記のサイトを参考にしperfect-scrollbarの導入を行った。 Vue.jsで「vue2-perfect-scrollbar」を使ってカスタムスクロールバーを実装する https://nori-life.com/vue-js-perfect-scroll-bar/ ——————& […]
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— AtomicDesignの考え方、コンポーネント管理を意識して作成したサービスが仮完成した。 現段階で「良かった点」「悪かった点」の感じた点をまとめる。 ◆良かった点 A、 […]
<div class="sticky-scroll" // ベースのスタイル :class="{ isScrollEnd: isScrollEnd }" // フローティングするボックスがウィンドウ下部を付け抜けないための判定 ref="sideHeight" // 計算のための高さ取得 > ～ ここにコンテンツが入ります ～ </div> <script> e […]
◆取得した値をstyleに入れる 例）スクロール位置を取得＆その値をstyleとして渡す <div :style="{ top: scrollY + 'px' }"> ～ここにコンテンツが入ります。 </div> <script> export default { data() { return { scrollY: 0 }; }, mounted() { / […]
WordPressが提供しているサービス（API）で、サイトのキャプチャを取得することが出来る。 APIを使用するサイト及び、キャプチャを取得するサイトはWPで構築されていなくても可能。 注意点は、「:」を「%3A」。「/」が「%2F」というように、URLをエンコードしておく必要がある。 ◆表記例 <img src="https://s.wordpress.com/mshots/v1/【ここ […]
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— サイトがある程度出来上がってきた為、数値のデータや文字列が動的に入った状態での表示の調整や、コンテンツ量を踏まえたデザインの変更を行っている。 予め用意したサイズや色を元に […]
str・・・文字列 len・・・数値 ◆文字列を任意の文字数で丸める function truncateText(str, len) { return str.length <= len ? str : str.substr(0, len) + '...'; } ◆文字数を半角は1文字、全角は2文字として計算し丸める // 文字列を任意の文字数で短縮する function truncateT […]
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 現在、制作中のサイトをVue.jsで構築している。 そのため、Vue.jsに対応しており、コンポーネントパーツをそのまま反映することが出来るStorybookをコンポーネン […]
「.A ~ .B」と ~ で繋ぐことで、クラスAと同じ階層で（親が一緒で）、以降に来るクラスBを全て指定する事ができる。 下記のような、現在値を基準として前後で要素を変えたいものに利用できる。 下記では、「.is-current を指定したliから後ろにあるliに対してスタイルをかける」ことが出来る。 ◆HTML <ul class="c-progress"> <li>2& […]
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— コンポーネント化を考える際に一番種類が多く、パターンが多いのがボタンであった。 パーツ化して設計する際に、下記のようなルールを定めて要素はクラスで指定を変えられるようにした […]
