常連

注目の的

JAVAを勉強している者です。説明が下手ですいませんが、「**インターフェース**」って何のメリットがあるんですか？
「**インターフェース**」は

「**派生化してその目的に特化したそれぞれのクラスを統一しておくことでそれらのクラスを気にしなくても、使うことができるもの**」

とか

「**派生化したそれぞれのクラスが、その中身を気にしなくても統一して利用できるようにするためのもの**」（説明が下手ですいません。）

らしいですが、そんなことして何のメリットがあるんですか？開発が短縮されるんですか？

バラバラな（派生化してその目的に特化した）クラスを統一するなら、最初からきちんと完璧に設計すれば早いと思うのですがどうでしょうか？

**わかりやすいような例や例えで教えてくれませんか？  **

よろしくお願いします。

インターフェースって何のメリットがあるんですか？

``` JS
<script>
  $(function() {
    var hotel = $("<div>", {
      "class": "hotel"
    });
    var hotelpics = $("<div>", {
      "class": "hotelpics"
    });
    var mainpic = $("<div>", {
      "class": "mainpic"
    });
    var others = $("<div>", {
      "class": "others"
    });
    var hotelinfo = $("<div>", {
      "class": "hotelinfo"
    });
    var hotelname = $("<h2>", {
      "class": "hotelname"
    });
    var tags = $("<div>", {
      "class": "tags"
    });
    var rating = $("<div>", {
      "class": "rating"
    });
    var price = $("<div>", {
      "class": "price"
    });
    var clear = $("<div>", {
      "class": "clear"
    });
   hotelpics.append(mainpic,others);
    hotelinfo.append(hotelname,tags,rating,price);
    hotelpics.after(hotelinfo);
    console.log(hotelpics);
  });
</script>
```

こ作成しているタグの構造としては以下になります。
```HTML
  
          <div class="hotelpics">
            <div class="mainpic">
      
            </div>
            <div class="others">
            </div>
          </div>
          <div class="hotelinfo">
            <h2 class="hotelname">
            </h2>
            <div class="tags">
            </div>
            <div class="rating">
            </div>
            <div class="price">
            </div>
          </div>
          <div class="clear"></div>
```



```result
<div class="hotelinfo">
<h2 class="hotelname"></h2>
<div class="tags"></div>
<div class="rating"></div>
<div class="price"></div>
</div>
```

しかしafterを使用しているのに,hotelinfoしか表示されません。
欲しい結果としては、一つ上のHTMLタグです。afterは要素の外、appendは要素の中と思うのですが。

jQueryのafter

### 前提・実現したいこと
HTML,CSSのアウトプットの為 iSara様のサイト模写をしているのですが、
bootstrapのcolをうまく再現することが出来ません。

検証からそのままコピペしてCSSも真似してみたのですが、どうしても横並びになりません。

[こちらのサイト](https://isara.life/)の（ノマドエンジニアとして自由に稼ぐことは「 本当に 」可能なのか？）の項目の部分です。

### 発生している問題・エラーメッセージ

```
![キャプチャです](b2baf289c877302869b885338d4d1d4f.png)
```

### 該当のソースコード

```html
<div class="container">
  <div class="row">

      <div class="answer-inner clearfix col-md-8 col-md-offset-2">
        <div class="col-xs-4">
          <img src="img/take.jpg">
        </div>
        <div class="col-xs-8">
          <p>リモートワークという言葉がありますが、弊社では何も気にしません。エンジニアに求めるのは、快適なコミュニケーションと信頼と成果物のみ。</p>
          <small>Kredo IT Abroad . Inc 代表取締役 横田 猛夫</small>
        </div>
      </div>


      <div class="answer-inner clearfix col-md-8 col-md-offset-2">
        <div class="col-xs-4">
          <img src="img/minami_sato.jpg">
        </div>
        <div class="col-xs-8">
          <p>社内でスキルのある人材を採用するのは難しい。外部パートナーとして継続的に依頼できるフリーランスには助かっています。 </p>
          <small>SAPEUR . Inc 代表取締役 佐藤 陽</small>
        </div>
      </div>

      <div class="answer-inner clearfix col-md-8 col-md-offset-2">
        <div class="col-xs-4">
          <img src="img/asada.jpg">
        </div>
        <div class="col-xs-8">
          <p>プログラマーが足りていないときに外部リソースとして、フリーランスに発注しています。今はどこの会社でもエンジニアが不足していますね。 </p>
          <small>株式会社BeautifulWorks 代表取締役 淺田 百合</small>
        </div>
      </div>

  </div>
  </div>
```
```css
.answer-inner{
  padding:20px 0;
  font-style:italic;
  font-weight:400;
  color:#777777;
}

.answer-inner img{
  border:3px #EBB94D solid;
  width:auto;
}

.answer-inner p{
  font-size:18px;
  line-height:29px;
  margin-top:15px;
  font-weight:400;
}

.answer-inner small{
  font-size:15px;
  line-height:24px;
  text-decoration: underline;
  margin:8px 0 10px 0;
}
```

### 試したこと

classの"clearfix col-md-8 col-md-offset-2"を消した状態でも特に変わりません。

このように１つの"answer-inner"クラスに対して１つの"row"クラスを設置しても出来ませんでした。
```html
<div class="row">
 <div class="answer-inner>

 </div>
<div>

<div class="row">
 <div class="answer-inner>

 </div>
<div>

<div class="row">
 <div class="answer-inner>

 </div>
<div>

```

### 補足情報（FW/ツールのバージョンなど）

Bootstrapのグリッドシステム col の横並びが再現できない。

Laravel+vue.jsで制作したWebサイトを、ロリポップレンタルサーバのスタンダードプランで公開しました。しかし、npmのインストール方法がわからず、ビルドを行なっていないためサイトが上手く表示されません。やはりレンタルサーバではvue.jsを動かすことは厳しいのでしょうか？それとも何か方法はあるのでしょうか？回答よろしくお願いします。

レンタルサーバでvue.jsを使いたい

### 前提・実現したいこと
Vue CLI 3(`vue create xxx`)を用いて作成したプロジェクト内で、
CSSフレームワークの[Buefy](https://buefy.org/)（vue + Bulma）を使用し、期待通り当りのスタイルを実現したいと考えています。

### 発生している問題・エラーメッセージ
現在、views以下のHome.vue, About.vue内で単純なhtml, cssのコーディングを行っており、
[Buefy](https://buefy.org/)のサンプルをコピペ+その要素にclassを付与して、スタイルをあてていました。

その後、styleにscopedを付与したところ、Buefyから持ってきた要素上に`.control`や`.is-clearfix`等のクラスが付与されており、
以前は当たっていたスタイルが当たっている部分、当たっていない部分ができてしまいました。
（例えば、Buefyのinputに付属しているlabel要素に付与されているclassは.labelのままだったのですが、以前.labelに当てていて期待通り動作していたスタイルが当たらなくなってしまいました。）

scoped追加後、具体的には以下の要素に下記のようなclassが付与されていました。
**・labelには**
`label`
**・b-selectには**
`is-empty`
**・b-input要素には**
`control` `is-clearfix`

現在はHome.vueのstyleタグにはscopedを指定し、About.vueのstyleタグにはscopedを指定していません（後で気づいたため）
scopedをつけなければ競合してしまうstyleがあるため、各ページのstyleタグにscopedを指定したいと思っています。

また、styleにscopedを付与しないことで、scoped有りの時には動作しているページ内のrouter-linkが動作しなくなってしまい、こちらも困っています。

### 具体的な質問
- Vue CLI 3を使用して作成したプロジェクトでCSSフレームワークを使う際、styleタグにscopedをつけるとclassが当たらなくなってしまう要素があり、その挙動への対処方法
- styleタグにscopedを付与するとrouter-linkによる画面遷移が動作しなくなることに対する対処方法（scopedをつけなければ正常通り動きます）
- そもそもですが、CSSのフレームワークから持ってきた要素に、classを付与してスタイルを上書きするのは正しいことなのでしょうか？それなら、はじめから自分でスタイルを作ったほうがいいのではないか、とも思っています。


上記に関して、なにかアドバイス等いただけますでしょうか。
よろしくお願いいたします。

### ディレクトリ構成
ディレクトリ構成は以下ですが、`vue create xxx`で作成したものから構成に関してはほとんど変わっていません。
変更点として、グローバルCSSとして`common.css`や`reset.css`を読み込んでいます。
![イメージ説明](53e310e5298b855393f77f007e40484c.png)





### 該当のソースコード

`views/About.vue`
以下はstyleタグにscopedを付与していないため、指定しているスタイルが当たっている状態です。
scopedを付与したところで、classが追加されスタイルが当たらなくなってしまいます。
```
<template>
  <section class="about">
    <div class="container">
      <form action="#" class="form">
        <div class="input__item-wrapper">
        
          
          <b-field label="インプット" class="input__item">
            <b-input v-model="name" class="input"></b-input>
          </b-field>

          
          <b-field label="セレクト" class="input__item">
            <b-select placeholder="Select a name">
              <option
                v-for="option in data"
                :value="option.id"
                :key="option.id"
                >{{ option.document }}</option
              >
            </b-select>
          </b-field>

        </div>
      </form>
    </div>
  </section>
</template>

<script>
export default {
  name: "home",
  data() {
    const data = [
      {document: "doc1"},
      {document: "doc2"},
      {document: "doc3"}
    ];
    return {
      data,
      name
    };
  }
};
</script>

<style>

.label {
  color: #fff;
  font-size: 1.6rem;
}
.input {
  padding: 20px 0;
  width: 200px;
  height: 30px;
  padding: 0;
  text-indent: 8px;
  font-size: 1.4rem;
}
select {
  width: 200px;
  padding: 0;
  text-indent: 8px;
  padding: 20px;
}
</style>

```

### 試したこと

グローバルのcssが影響しているのかと思い、すべてコマンドアウトしてみましたが関係なさそうでした。
styleタグににscopedを付与したのち、新たに追加されていたclassにスタイルを当ててみましたが、当たるもの、当たらないものがありました。


### 補足情報（FW/ツールのバージョンなど）

    "buefy": "^0.7.2",
    "vue": "^2.5.22",
    "vue-router": "^3.0.1"