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

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

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

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1326閲覧

Vue.js 言語のデザインのborder-rediusを適応させたくない

kakedashidesu

総合スコア50

Vue.js

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/15 08:48

編集2020/04/15 09:30

言語のデザインを画像のデザインみたいにしたいです。
現在、for文で回して、その単語を一個一個表示しているのと趣味みたいに一つの枠に全て表示しているものがあります。
言語はfor文で一つ一つ回してスポーツみたいに一個づつ表示したいのでスポーツで使っているスタイルを適応すると border-radiusを使っているので角が歩くなってしまいます。丸くならずに一個一個表示したいのですがどうしたらいいのでしょうか?
大変ざっくりとした質問で申し訳ないですが、わかる方がいましたら教えて欲しいです。よろしくお願いいたします。
イメージ説明

<div class="detail"> <p class="detail_title">スポーツ</p> <div v-if="user.sports.length > 0" class="chips"> <profile-chip v-for="sportin user.sports" :text="`${sport.name}`" :key="sport.id" /> </div> <div class="detail"> <p class="detail_title">言語</p> <div v-if="user.languages.length > 0" class="chips" > <user-chip v-for="l in user.languages" :text="`${l.languag.name}:${l.level.name}`" :key="l.language.id" /> </div> <p v-else class="detail_content"> 空欄です </p> </div> <style lang="scss" scoped> .detail { padding: 8px 0px; margin: 0 24px; &_title { font-style: normal; font-weight: 600; font-size: 10px; line-height: 14px; color: #525e6d; margin-bottom: 8px; } &_content { background: #f0f2f5; border-radius: 4px; padding: 8px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; color: #4d4452; } } .chips { display: flex; flex-wrap: wrap; }
<template> <div class="chip"> <p>{{ text }}</p> </div> </template> <script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator' @Component export default class UserChip extends Vue { @Prop({ type: String, required: true }) text: string } </script> <style lang="scss" scoped> .chip { margin-right: 8px; margin-bottom: 8px; padding: 6px 12px; background: #f0f2f5; border-radius: 13px; box-sizing: border-box; max-width: 388px; p { text-overflow: ellipsis; font-style: normal; font-weight: normal; line-height: 14px; color: #000000; white-space: nowrap; overflow: hidden; } } </style>

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

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

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

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

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

guest

回答1

0

ベストアンサー

言語用のclassを作れば良いと思いますよ
genre_detailで作ってborder-radiusをかけないようにすれば丸くならずに四角くなります

<div class="detail"> <p class="detail_title">スポーツ</p> <div v-if="user.sports.length > 0" class="chips"> <profile-chip v-for="sportin user.sports" :text="`${sport.name}`" :key="sport.id" /> </div> <div class="gengo_detail"> <p class="detail_title">言語</p> <div v-if="user.languages.length > 0" class="chips" > <profile-chip v-for="l in user.languages" :text="`${l.languag.name}:${l.level.name}`" :key="l.language.id" /> </div> <p v-else class="detail_content"> 空欄です </p> </div> .detail { padding: 8px 0px; margin: 0 24px; &_title { font-style: normal; font-weight: 600; font-size: 10px; line-height: 14px; color: #525e6d; margin-bottom: 8px; } &_content { background: #f0f2f5; border-radius: 4px; padding: 8px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; color: #4d4452; } } .chips { display: flex; flex-wrap: wrap; } .gengo_detail { padding: 8px 0px; margin: 0 24px; &_title { font-style: normal; font-weight: 600; font-size: 10px; line-height: 14px; color: #525e6d; margin-bottom: 8px; } &_content { background: #f0f2f5; padding: 8px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; color: #4d4452; } }

投稿2020/04/15 08:56

mote

総合スコア128

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

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

kakedashidesu

2020/04/15 09:25

やってみましたが変わらなかったです。
kakedashidesu

2020/04/15 09:27

質問なのですがなぜ四角い部分の <div v-if="user.languages.length > 0" class="chips" >のchipsをgengo_detailに変えずに一番大枠のdiv=detailのとこをgengo_detailに変更するのでしょうか?
kakedashidesu

2020/04/15 09:31

user-chipsのスタイルのborder-radiusは上記ので変更されるんですか?
mote

2020/04/15 09:39

あぁ,Vueの構造がそもそもおかしい... let Vue = new Vue({})というインスタンスはありますか? そこで,大枠となるidやらclassを指定します 全体を囲う一つのdivが無いと行けません <div class="content"> div#スポーツ div#趣味 div#言語 </div> みたいな構成になる筈です. このコードでは指摘するところがたくさん有るので, もう一度リファレンスを読み直すことをおすすめします!!
mote

2020/04/15 09:41

vueをやる前にまずはhtmlとcssを自力で書いてclassの関係性を見直しましょう
kakedashidesu

2020/04/15 09:47

自分が書いたコードではないのでよくわからないです。大規模すぎて書き換えたらいつ終わるのかがわかりません。書き直さないと治らないということですかね?
mote

2020/04/15 09:57

ならkakedashidesuさんはインスタンスが書かれているかどうかもわからない状況なんですね... 最初に載せたコードでダメなら,chipsのborder-radiusがかかってるでしょう. で言語のdivclassをchipsから <div v-if="user.languages.length > 0" class="gengo_chips" > にしましょう. .gengo_chip { margin-right: 8px; margin-bottom: 8px; padding: 6px 12px; background: #f0f2f5; box-sizing: border-box; max-width: 388px; p { text-overflow: ellipsis; font-style: normal; font-weight: normal; line-height: 14px; color: #000000; white-space: nowrap; overflow: hidden; } } コードが見づらくてあまりよく見てないけど
kakedashidesu

2020/04/15 10:49

上記のようにしましたが全部くっついて表示されてしまします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問