2019年

2/4ページ

URLからウェブサイトのキャプチャを取得する

WordPressが提供しているサービス(API)で、サイトのキャプチャを取得することが出来る。 APIを使用するサイト及び、キャプチャを取得するサイトはWPで構築されていなくても可能。 注意点は、「:」を「%3A」。「/」が「%2F」というように、URLをエンコードしておく必要がある。 ◆表記例 <img src="https://s.wordpress.com/mshots/v1/【ここ […]

AtomicDesignに挑戦した所感 ~特定機能に対する個別スタイル指定~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— サイトがある程度出来上がってきた為、数値のデータや文字列が動的に入った状態での表示の調整や、コンテンツ量を踏まえたデザインの変更を行っている。 予め用意したサイズや色を元に […]

AtomicDesignに挑戦した所感 ~Storybookの利用~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 現在、制作中のサイトをVue.jsで構築している。 そのため、Vue.jsに対応しており、コンポーネントパーツをそのまま反映することが出来るStorybookをコンポーネン […]

同一レベルの要素において「◯◯以降」を指定するスタイルシートセレクタ

「.A ~ .B」と ~ で繋ぐことで、クラスAと同じ階層で(親が一緒で)、以降に来るクラスBを全て指定する事ができる。 下記のような、現在値を基準として前後で要素を変えたいものに利用できる。 下記では、「.is-current を指定したliから後ろにあるliに対してスタイルをかける」ことが出来る。 ◆HTML <ul class="c-progress"> <li>2& […]

AtomicDesignに挑戦した所感 ~コンポーネントに持たせる要素~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— コンポーネント化を考える際に一番種類が多く、パターンが多いのがボタンであった。 パーツ化して設計する際に、下記のようなルールを定めて要素はクラスで指定を変えられるようにした […]

AtomicDesignに挑戦した所感 ~クラスの命名規則のミス~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 変更時を一括で行う事を目的としたボタンの命名規則で失敗。 .c-btnをボタンの基本クラスとし、デザイン用に.c-btn–-◯◯ というクラスを別途使用することを決めた。 […]

AtomicDesignに挑戦した所感~デザイン完成からコーディング開始時点~

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— デザイン作成からコーディングまで完了した時点で、いくつか不安点など出てきた。 ◆レベル感がわからない ◯デザイナー: 「このパーツの別サイズを作るのは、コンポーネントとして […]

Vue.jsチェックポイント(随時更新)

◆最終チェック時に行うこと ☆不要な処理(使用していないもの/console.log(); など)が残っていないか ◆ポイント ☆要素の変更により値が変わる、計算するもの computed で処理を行う。 ☆==は===にしましょう(型の比較もしてくれるので安全です) ◆ソースコード短縮 ☆ v-bind:は省略して:にしましょう ☆ hoge: function() {}は省略してhoge() […]