URLからウェブサイトのキャプチャを取得する
WordPressが提供しているサービス（API）で、サイトのキャプチャを取得することが出来る。 APIを使用するサイト及び、キャプチャを取得するサイトはWPで構築されていなくても可能。 注意点は、「:」を「%3A」。「/」が「%2F」というように、URLをエンコードしておく必要がある。 ◆表記例 <img src="https://s.wordpress.com/mshots/v1/【ここ […]
Coding
文字列を任意の文字数で丸めるjavaScript
str・・・文字列 len・・・数値 ◆文字列を任意の文字数で丸める function truncateText(str, len) { return str.length <= len ? str : str.substr(0, len) + '...'; } ◆文字数を半角は1文字、全角は2文字として計算し丸める // 文字列を任意の文字数で短縮する function truncateT […]
同一レベルの要素において「◯◯以降」を指定するスタイルシートセレクタ
「.A ~ .B」と ~ で繋ぐことで、クラスAと同じ階層で（親が一緒で）、以降に来るクラスBを全て指定する事ができる。 下記のような、現在値を基準として前後で要素を変えたいものに利用できる。 下記では、「.is-current を指定したliから後ろにあるliに対してスタイルをかける」ことが出来る。 ◆HTML <ul class="c-progress"> <li>2& […]
inputタグに表示するプレースホルダの位置を変更する
- 2019.05.31
- placeholder
スタイルシートでフォーム内にデフォルトで表示する「プレースホルダ」の位置を変更することが出来る。 下記例ではplaceholderを左から100pxずらして表示する。 hoge::placeholder { padding-left: 100px; }
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 […]
vue.jsで条件に合わせてクラスを変更する（複合条件）
- 2019.05.02
◆単一条件 <div v-bind:class="{ addclass: 条件 }">ほげほげ</div> ◆複合条件 <div v-bind:class="{ addclass: !aaaa || bbbb }">ほげほげ</div>
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 […]
vue.jsでbuttonのdisabledを切り替える
■html <div id="app"> <button href="#" class="btn btn-info" v-on:click="button_disable()" :disabled="isTestDisabled">Disable_Button</button> </div> ■script <script> var vm […]