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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

2回答

7064閲覧

vueファイル 余白の打ち消し

TAIniko

総合スコア32

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/04/17 07:47

編集2019/04/18 03:31

(上がcomponents-Myheader.vue,下がpages-about.vue)
これを表示するとaboutページに表示させたヘッダーの周りに余白ができてしまいます。
html/cssで同じように作ったときこの余白を解消するために

body{
margin:0;
}

をcssに追加したので、同じようにMyheader.vueファイルへこれを追加しましたが余白が解消されません。
何が原因でしょうか?

vue

1<template lang="html"> 2 <body> 3 <header class="header-container"> 4 <!-- topへのリンク --> 5 <nuxt-link 6 to="/" 7 class="menu" 8 > 9 top 10 </nuxt-link> 11 <!-- 終了 --> 12 <!-- aboutへのリンク --> 13 <nuxt-link 14 to="/about" 15 class="menu" 16 > 17 about 18 </nuxt-link> 19 <!-- 終了 --> 20 <!-- languageへのリンク --> 21 <nuxt-link 22 to="/language" 23 class="menu" 24 > 25 language 26 </nuxt-link> 27 <!-- 終了 --> 28 <!-- frameworksへのリンク --> 29 <nuxt-link 30 to="/frameworks" 31 class="menu" 32 > 33 frameworks 34 </nuxt-link> 35 <!-- 終了 --> 36 <!-- worksへのリンク --> 37 <nuxt-link 38 to="/works" 39 class="menu" 40 > 41 works 42 </nuxt-link> 43 <!-- 終了 --> 44 <!-- contactsへのリンク --> 45 <nuxt-link 46 to="/contacts" 47 class="menu" 48 > 49 contacts 50 </nuxt-link> 51 <!-- 終了 --> 52 </header> 53 </body> 54</template> 55 56<script> 57export default { 58 name:'Myheader' 59} 60</script> 61 62<style lang="css" scoped> 63/*問題のところ*/ 64body{ 65 margin:0; 66} 67/**/ 68.header-container{ 69 display: flex; 70 justify-content: space-around; 71} 72.menu{ 73 width:16%; 74 padding:20px; 75 text-align:center; 76 color:#34459e; 77} 78 79.menu:hover{ 80 background-color: rgb(255, 0, 0,0.6); 81 transition:0.3s; 82} 83 84 85</style>

vue

1<template> 2 <div> 3 <myheader /> 4 </div> 5</template> 6<script> 7import Myheader from '~/components/Myheader.vue' 8export default { 9 components:{ 10 Myheader 11 }, 12 layout:'default', 13 data(){ 14 return{ 15 title:"about" 16 } 17 }, 18 head(){ 19 return{ 20 title:this.title, 21 meta:[ 22 {hid:'discription', name:'discription', content: 'My custom description'} 23 ] 24 } 25 } 26} 27</script> 28<style> 29 30</style> 31

追記

vue

1<template lang="html"> 2 <!-- <div id="body">変更点 --> 3 <header class="header-container"> 4 <!-- topへのリンク --> 5 <nuxt-link 6 to="/" 7 class="menu" 8 > 9 top 10 </nuxt-link> 11 <!-- 終了 --> 12 <!-- aboutへのリンク --> 13 <nuxt-link 14 to="/about" 15 class="menu" 16 > 17 about 18 </nuxt-link> 19 <!-- 終了 --> 20 <!-- languageへのリンク --> 21 <nuxt-link 22 to="/language" 23 class="menu" 24 > 25 language 26 </nuxt-link> 27 <!-- 終了 --> 28 <!-- frameworksへのリンク --> 29 <nuxt-link 30 to="/frameworks" 31 class="menu" 32 > 33 frameworks 34 </nuxt-link> 35 <!-- 終了 --> 36 <!-- worksへのリンク --> 37 <nuxt-link 38 to="/works" 39 class="menu" 40 > 41 works 42 </nuxt-link> 43 <!-- 終了 --> 44 <!-- contactsへのリンク --> 45 <nuxt-link 46 to="/contacts" 47 class="menu" 48 > 49 contacts 50 </nuxt-link> 51 <!-- 終了 --> 52 </header> 53 <!-- </div>変更点 --> 54</template> 55 56<script> 57export default { 58 name:'Myheader' 59} 60 61</script> 62 63/* <style lang="css">変更点 */ 64/* 変更点 */ 65#body{ 66 margin:0; 67} 68.header-container{ 69 display: flex; 70 justify-content: space-around; 71} 72.menu{ 73 width:16%; 74 padding:20px; 75 text-align:center; 76 color:#34459e; 77 opacity:0.7; 78} 79 80.menu:hover{ 81 background-color: rgb(230,0,18,0.6); 82 opacity:1.0; 83 transition:0.3s; 84} 85 86</style>

書き直したのですが余白が解消されません、、、
ほかに考えられる原因はありますか??

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

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

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

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

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

guest

回答2

0

自己解決

*{
margin: 0;
}

で治りました。
回答してくださった方ありがとうございました!

投稿2019/04/18 03:35

TAIniko

総合スコア32

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

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

0

そのページを表示しようとすると、以下のような階層になるHTMLを生成することになりますが、

html

1<div> 2 <body> 3 <header /> 4 </body> 5</div>

<body>タグは<html>タグの下でなければいけないので、ブラウザは <body> タグが存在しなかったことにしてしまいます。

なので、<body> タグを <div id="body"> のようなものに変更し、
CSSのほうは div#body { margin: 0; } みたいにしてみてください。

もし、<html> 直下にある方の <body> タグのマージンを無くしたいのであれば、
scopedなしの<style> でスタイルを指定してください。

投稿2019/04/17 11:21

wtokuno

総合スコア448

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

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

TAIniko

2019/04/18 03:32

回答ありがとうございます! 追記にも書いたのですが余白が解消されません汗 ほかにもなにか考えられる原因はありますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問