frontendmemo

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

【SPA】Vue.jsで静的サイトの作り方まとめ

Vueで通常の静的サイトを作成するための手順をまとめました。 あくまで数ページの小規模サイトのSPAを想定しています。 Vue cilでインストール $ vue init webpack my-project www.frontendmemo.xyz ディレクトリ、ファイル構成 ├─App.vue ├─assets │ ├─comm…

nuxt.js error Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive

nuxt.jsで v-for を回す時には v-bind:key でkey属性を渡してあげないとエラーになる。 <div v-for="item in items" :key="item.id"> </div>

nuxt.jsのerror async function run(_argv) { SyntaxError: Unexpected token function

nuxtjsをインストールしてnpm run devしたところ下記errorがでました。 async function run(_argv) { SyntaxError: Unexpected token function これはnodeのバージョンが6以下だと対応していないそうでバージョンを上げる必要があります。ヴァージョンを上げ…

z-indexの数値をルール化するための覚書き

css

z-indexの数値っていくつに設定したらいいかわからないですよね。適当な数値を入れてしまうと特に大規模サイトはカオスになってどこかで崩れます。崩れ方もグレーの背景にその要素だけ前に出てたりして目立つ&かっこ悪いです。 z-indexのルール z-indexのル…

【CSS】clip-pathの対応ブラウザ、generateツール紹介

cssのclip-path プロパティは、表示領域を決められるcssのプロパティです。 つまり指定した位置を結んだ図形が表示され、その外側が非表示になります。 このcssを使えばどんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第で…

photoshopスライス3パターン使い分け

オブジェクトを選択し新規レイヤーに基づくスライスを選択(ショートカットあり) 新規レイヤーを複製してトリミング(透過があるとき便利) レイヤーの目のところをalt+クリック(透過がありスライスを保存したいとき便利) photoshopのスライスの方法を3パ…

a要素とbutton要素の使い分け

先日下記のツイートをしましたが、多くのいいねをいただいたので記事にしたいと思います。✅button要素とa要素の使い分けa要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場…

【CSS】画面サイズに合わせてfont-sizeの拡大縮小

css

レスポンシブサイトやLPの背景にテキストが乗ってる場合に画像の拡大・縮小に合わせてテキストも拡大・縮小させたい時に使います。 画面サイズに合わせてfont-sizeの拡大縮小することが可能です。計算式は下記です。 font-size: calc({フォントサイズ}vw * 1…

Vue.js ラジオボタンで要素を切り替える方法

Vue.jsを使用してラジオボタンを切り替えた時要素を切り替える方法について解説します。下記のようになります。 デモ See the Pen xBddEg by funclur (@funclur) on CodePen. htmlは通常通りですね。 <div id="app"> <label><input type="radio" name="radio" v-on:change="handler" value="a" checked> A</label> <label></label></div>

Vue.jsの本レビュー比較まとめ

Vue.jsの本は2019年の今でも数冊しか出版されていません。 そんな希少価値の高いVue.jsの本ですが、どれがどんな人を対象としているかなど比較したいと思います。 Vue.js入門 基礎から実践アプリケーション開発まで Vue.js入門 基礎から実践アプリケーション…

Vue.jsで簡単なじゃんけんゲームを作る

Vue.jsでじゃんけんゲームを作りました。環境構築についてはこちらの記事をどうぞ www.frontendmemo.xyzindex.html <body> <div id="app"></div> <script src="dist/build.js"></script> </body> App.vue <template> <div id="app"> <h1>じゃんけんゲーム</h1> <div> じゃんけん、 <button @click="fight('ぐー')">ぐー</button> <button @click="fight('ちょき')">ちょき…</button></div></div></template>

Webアクセシビリティで気を付けたいこと6つまとめ

フロントエンドでアクセシビリティ 先日下記のtweetをしました。 https://twitter.com/funclur_01/status/1100216512198074369 フロントエンドでアクセシビリティは後回しにされがちですが、Webを使う人は様々な環境、様々な人がいるので重要です。 例えばal…

Vue.js環境構築まとめ

Vue.jsを触ることが多いので環境構築をまとめます。 CDNで直接組み込み 一番簡単にVue.jsを利用することができます。 お試しで使う場合はこのやり方がおすすめです。バージョンを指定するなら↓ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> 最新バージョンを読み込むのは↓ <script src="https://cdn.jsdelivr.net/npm/vue"></script> ESモジュールを使うなら↓ <script type="module"> im…

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

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

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

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