CSS

画像やフォントサイズをresponsiveに調整する方法 Vuetify使用時

v-layout と v-flex を使用する(full fluid + conditional) <v-layout wrap> <v-flex lg3>1/4画像</v-flex> <v-flex lg6>1/2画像<v-flex> <v-flex lg3>1/4画像<v-flex> <v-layout> css img { width: 100%; height: auto; } ** layout にwrap を忘れないように。子コンポーネントがlayoutに収まるようになる。 ref: https://vuetifyjs.com/en/componen</v-layout></v-flex></v-flex></v-flex></v-flex></v-layout>…

CSS経由でFontAwesomeを表示→なぜかfont-familyでFontAwesomeがrenderされない時

CSS

font-weight を指定しないといけない場合がある 参考: www.genius-web.co.jp saruwakakun.com //

vue-awesome-swiper で swiper を二つ使用し、かつ swiper-container を入れ子にした場合の swiper 同士の干渉エラー

updated: 2018.11.14 サイドメニュー - メインページ ---- swiper 1 [メインページ内] コンテンツ1 - コンテンツ2 - コンテンツ3 ---- swiper 2 swiper 2 が swiper 1 の中に入れ子になっている場合、swiper2 の swiper-slide-prev が swiper 1 に干渉…

CSS vertical-align が機能しない

CSS

// 対象が インライン要素または、テーブルセル以外ではvertical-alignは適用できない 参考: www.htmq.com 対象にline-heightで値を別に設定していないかを確認 参考: www.htmq.com

優良記事リンク CSS

CSS

// app.codegrid.net phiary.me

Vue.js toggle css classes

bind single class bind object to manage multi css classes <script src="https://unpkg.com/vue"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div> <div class="demo"></div> <dv class="demo"></dv> </div> new Vue({ el: '#app', data: { attachRed: false, }…

CSS position: sticky;

CSS

// CSS position stickyについて 他のカラム等を加味しながら要素を固定したい e.g) サイドバーと別カラムでトップメニューを固定表示したい → sticky 他の要素を加味しない → fixed stickyを使うときはtop, left, right等の場所を指定するプロパティーと一…

vue-awesome-swiper でメニューバーをstickyに表示したい

// updated: 2018/2/21 vue-awesome-swiperはflexboxを使っている。 cssに追加 .swiper-wrapper { display: flex !important; align-item: flex-start; } →→ フレックスボックスの上端をそろえる .swiper-container { overflow: visible !important; } →→ デ…

UI Elements

www.nxworld.net blog.8bit.co.jp tympanus.net Bootstrapで使えるjQueryプラグイン | ENTEREAL metismenu github.com .metismenuが二つあると片方がバグる display: none してもダメ //