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も補完させるよう設定していきましょう。…

【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>…

Vue.js初心者がいち早く習得するためのロードマップ

公式ガイドライン 基礎から学ぶVue.js 環境構築 コンポーネント 改めてVue.jsを学ぶ じゃんけん1 TODOリスト じゃんけん Vuex Vue.js入門 基礎から実践アプリケーション開発まで 認証付きの簡易チャットを作る! netlify Nuxt.js 公式ガイドライン jp.vuejs.…

【Vue.js】数字の計算をバインディングで表示させる

Vue.jsを使用して数字の計算をバインディングで表示させます。やりたいことは以下です。1.価格の初期値受け取り 2.セレクトボックスで個数変更 3.価格の変更 <div id="app"> <p>{{ a }}</p> <select v-model="b"> <option disabled="disabled">選択してください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> </select> <p>小計:{{ sum }}</p> </div>

【中級者向け】痒い所に手が届くSourceTreeの使い方~こういう時どうする?~

Git

過去に戻って新規ブランチを作成、作業をやり直したい 過去のコミットを打ち消したい(リバート) 履歴を一直線にしたい(リベース) コミットを一つにまとめたい(スカッシュ) リモートリポジトリから最新の状態を取得したい(フェッチ) リモート追跡ブラ…

AWSでrailsのプロジェクト新規立ち上げ手順

AWSでrailsのプロジェクトを新規立ち上げる手順を備忘録としてまとめました。 1.newする mkdir myapp cd myapp bundle init gem 'rails', '5.0.3' bundle install rails new . 2.Gem追加インストール Gemfile gem 'mysql2', '0.3.18' # Use SCSS for stylesh…

RailsのomniauthでTwitter認証の手順

railsでログイン時にTwitter認証を実装できるのですが、意外とエラーが多発して難しかったです。 記事によってもやり方は違かったのですが、自分が実現できた方法を書いていきます。Twitter認証のみの新規アプリとして作ります。※devise install済みの想定 1…

Untracked filesが出てコミットできない

Untracked files:が出てコミットできなくなりました。この場合不要ファイルを消す必要があります。git cleanで消すこともできますが、誤って必要なファイルを消さないように 手動で消しました。node-modulesなど大量のファイルをコミットしようとしてないか…

paperclipをheroku上でも可能にする

paperclipで画像を投稿した際、herokuでは一時的に保存されるだけで、数時間経つと読み込みできなくなっていました。こちらは、awsでiam userのアクセスIDとkeyの取得、heroku上の環境変数の設定、paperclip.rbの作成の必要があります。 i am userのアクセス…

LoadError (cannot load such file -- aws-sdk-s3 (You may need to install the aws-sdk-s3 gem)):のエラー解決

タイトルのようにLoadError (cannot load such file -- aws-sdk-s3 (You may need to install the aws-sdk-s3 gem))というエラーが出たのですが、 gem 'aws-sdk', '~> 2.3' を既にインストールしていたためgem 'aws-sdk-s3'を入れようとすると、 Bundler cou…

CodepenでできるVueの基礎を学ぶVol.5 コンポーネントでUI部品を作る

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見るこちらの記事で気になることは本の中に全…

CodepenでできるVueの基礎を学ぶVol.4 データの監視と加工

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

CodepenでできるVueの基礎を学ぶVol.3 イベントとフォーム入力の受け取り

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…