質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

970閲覧

Electronのアプリをビルドするたびにウィンドウの境界線に黄色の線が出たり出なかったりする

sasakaman

総合スコア53

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2021/05/22 01:26

前提・実現したいこと

Electron、Vuetifyにてアプリを開発しています。
メインウィンドウ(非透過)とサブウィンドウ(透過)を作成し、サブウィンドウに情報を書き込んでいきます。
上記の状態を完成させたのちに、Vuetifyを導入しました。

発生している問題・エラーメッセージ

v-appの背景色が指定されているため、サブウィンドウのv-appのスタイルにopacity: 0;を追加しました。
その後アプリをビルドもしくはサーブすると、下のようにメインウィンドウの境界線に黄色の線が出現する場合があります。
ただし、出現しないこともあります。条件はよくわかっていません。

この枠線は何なのでしょうか?また、これを非表示にする方法はありますか?

イメージ説明

該当のソースコード

vue

1//App.vue 2<template> 3 <div id="app"> 4 <router-view/> 5 </div> 6</template> 7 8<style lang="scss"> 9html { 10 height: 100%; 11 width: 100%; 12} 13 14body{ 15 height: 100%; 16 width: 100%; 17} 18 19#app { 20 height: 100%; 21 width: 100%; 22} 23</style>

vue

1//MainWindow.vue 2<template> 3 <v-app> 4 <v-main> 5 <!--中略--> 6 </v-main> 7 </v-app> 8</template> 9 10<script lang="ts"> 11import { Component, Vue } from "vue-property-decorator"; 12 13@Component 14export default class Setting extends Vue { 15} 16</script>

vue

1//SubWindow.vue 2<template> 3 <v-app class="sub-window"> 4 <title-bar/> 5 <v-main class="box-comment"> 6 <!--中略--> 7 </v-main> 8 </v-app> 9</template> 10 11<script lang="ts"> 12import Vue from 'vue' 13export default Vue.extend( 14) 15</script> 16 17<style scoped> 18.sub-window{ 19 height: 100%; 20 width: 100%; 21 display: flex; 22 flex-direction: column; 23 opacity: 0; 24} 25</style>

試したこと

上記の枠線が出現したのちにopacityの記述を削除しても、黄色の枠線が時々出現します。
gitにてopacityを追加する前のブランチに戻すと、出現しなくなります。

補足情報(FW/ツールのバージョンなど)

json

1"dependencies": { 2 "core-js": "^3.8.3", 3 "vue": "^2.6.11", 4 "vue-class-component": "^7.2.3", 5 "vue-property-decorator": "^9.1.2", 6 "vue-router": "^3.2.0", 7 "vue-cli-plugin-electron-builder": "~2.0.0-rc.6" 8 "vue-cli-plugin-vuetify": "~2.4.0", 9}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問