vue.jsの自分用メモ書き
- 2020.03.14
◆ボックスの情報を取得 １、refで名前を指定 <div ref="box"></div> 2、要素の情報を取得（下記では高さ） let scrollHeight = this.$refs.box.clientHeight; ◆子供要素から親要素に値を渡す １、親に値を渡す this.$emit(‘hogehoge’, this.index); ２、 […]
imgをmargin: autoで中央寄せにする
- 2020.02.10
よく忘れるのでメモ。 画像はインライン要素のため、margin: autoが効かない。 display: block を行い、ブロック要素に変更する。
vue.jsでスライダーを導入する
htmlで実装していたページをvue.js形式で作り直すことになった。 その際にスライダーを導入する必要があったため下記の対応を行った。 １、VueAwesomeSwiperを追加 ◯yarnでのインストール yarn add vue-awesome-swiper ◯npmでのインストール npm install vue-awesome-swiper ２、main.jsへの記述追加 // Swip […]
VSCodeの設定変更手順
- 2020.01.08
- ESLint, Prettier, stylelint-plus, VSCode
VSCodeのESLint拡張により、ソースコードの自動整列が効かなくなった。 そのため拡張機能を変更したのでメモ。 1.拡張機能Prettierを無効にする 2.拡張機能stylelint-plusをインストール 3.settings.jsonの設定を下記のようにする "editor.codeActionsOnSaveTimeout": 2000, "editor.codeActionsOnSa […]
【勉強会資料共有】マークアップエンジニア＆フロントエンドエンジニア初心者向け
- 2019.12.10
- ウェブコーダー, ドキュメント, フロントエンドエンジニア, マークアップエンジニア, 資料
在籍する制作会社の新卒者を対象として、フロントエンドに関する勉強会を行いました。 業務終了後、１時間の勉強会を週２回を3ヶ月間。 その間に共有した内容を資料化しましたので公開をします。 実際には板書と口頭説明を行いましたが、資料の内容を追っていただければ最低限案件を行うにおいて必要な知識が身につく内容となります。 ※実際に社内で使用したものから、公開用に内容を一部変更しております。 ◆フロントエン […]
Hubspotで導入したフォーム送信ボタンにFacebookピクセルコードの処理を追加する
- 2019.10.16
- Facebookピクセルコード, Hubspot
Hubspotフォームを作成し、そのボタンに発火処理を入れた。 <script> window.addEventListener('message', event => { if ( event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit' ) { fbq('tr […]
Vue.jsのrouter-linkにアンカーリンクを設定する
- 2019.10.02
- hash, router-link, アンカー, アンカーリンク, ハッシュタグ
遷移先の項目にアンカー移動したいときなど、router-linkの指定を行うことで「#hashtag」を末尾に追加出来る <router-link :to="{ name: 'hogeProject', hash: '#hashtag' }" > ページを移動する </router-link> ただしこのままでは、URL末尾にハッシュがつくのみであり、移動はまだ行われない。 […]
WordPress Popular Postsでランキングデータが取れない場合
- 2019.09.26
- WordPress Popular Posts, データ取得, ランキング
インストールしたてのWordPress Popular Postsでデータが保存されなかった。 原因は「記事を“投稿”ではなく“カスタム投稿”で投稿していた」ため。 デフォルトでカスタム投稿の値は取得しないため、管理画面からカスタム投稿タイプを設定する必要がある。
Vue.jsでURLパラメータから値を取り出す
- 2019.08.26
- パラメータ
http://hogehoge.com/info?edit=true&id=123456 上記のようなパラメータを含んだURLから、パラメータの値を取り出す。 今回、編集ページとそれ以外でページの分岐を行い、またパラメータでIDを渡す事を行った。 ——————————& […]
Vue.jsでウィンドウ及びボックスのサイズ取得を行う
ベースとなる処理は、VueコンポーネントでWindowサイズ変更検知＆値取得を参照した。 <template> <div> <p>window width: {{ width }}</p> <p>window height: {{ height }}</p> </div> </template> < […]