frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.jsコンポーネントフレームワーク5選

Vue.jsのコンポーネントを公開してるサービスは複数ありますので5つまとめたいと思います。 Vuetify vuetifyjs.com 特徴 フォームのバリデーション機能、モーダルウィンドウ、パララックスがある。 解説記事 Vueでもっと幸せになりたいあなたへ。VueのUIコン…

【Visual Studio Code】vue拡張子を補完させる方法

Visual Studio Codeではある程度拡張子に対応しているため自動でカラーテーマに対応するようになっていますが、.vue拡張子などは初期設定では未設定になっているため、白文字一色になるかと思います。そのため、.vueも補完させるよう設定していきましょう。…

【CSSのみ】liに丸付き数字の連番を最も簡単につける方法(色付きも)

css

デザイナーが丸付き数字のデザインを挙げてくることはあるかと思います。 環境依存文字の①、②を打っても表示はされますが、手間なのでcssで自動で表示されるようにしましょう。 ちなみにcircled-decimalはchrome対象外なので、実質現実的な方法ではありませ…

Vue.jsで超簡単でシンプルなTODOリストをレシピのようにわかりやすく解説

下記のようなTODOリストを作りましたのでわかりやすく解説します。※元となるソース See the Pen BMJrdz by funclur (@funclur) on CodePen. <div id="app"> <input type="text" v-model="inputText"> <button type="submit" v-on:click="save">保存</button> <ul> </ul></div>

【ES6】import/exportがchromeで動作しない原因

ローカルファイルでES6の機能import / exportをテストしたところ下記エラーが出ました。Access to script at '該当のパス' from origin 'null' has been blocked by CORS policy: The response is invalid. CORSエラーとは CORSとはCross-Origin Resource Sh…

【JSなし】CSSのみで中の要素を高さ揃えする方法

css

外側ボックスを高さ揃えする方法 See the Pen exeGgv by funclur (@funclur) on CodePen. ※codepenのlogoをクリックして別タブでご確認ください。 <div class="box-wrap"> <div class="box"> <div class="content1"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p></div></div></div>…