常連

注目の的

社会貢献

質問力

SCSS記法で以下のようなCSSを実現したい場合はどのように記述すればいいですか？

```css
.btn {
  color: red;
}

div.btn {
  color: blue;
}
```

できれば `btn` という記述が１回で済むような方法が知りたいです。
よろしくお願いいたします。

SCSS記法でタグ名とクラス名をつなげて記述する方法

###前提・実現したいこと
Macでスクロールバーを表示させたい。

###発生している問題・エラーメッセージ

overflow-y: auto;で、windowsではスクロールバーの表示ができたのですが、
Macで見るとスクロールバーが表示されません。
どうすれば、Macでもスクロールバーが表示されるのでしょうか？

まだ初心者なので、どのように質問すればいいのかも分からなくて…。
質問が分かりにくかったらすみません。

Macでスクロールバーを表示させる方法を教えてください。

いつもお世話になっております。

早速本題に入らせていただきます。

jQueryを使用してAjaxを実装したのですが、2回目以降にイベントが重複実行されてしまいます。
下記が現在のコードとなります。

---

```jQuery
$('#btn').click(function(){
   console.log("1");

   $("form").submit( function(event) {
        console.log("2");
        event.preventDefault();
        var form = $(this);
        $.ajax({
            url: form.prop("action"),
            method: form.prop("method"),
            data: form.serialize(),
            timeout: 10000,
            dataType: "text",
        })
        .done( function(data) {
            console.log("3");
            if (data.length > 0) {
                    alert("Error");
            } else {
                    alert("Success");
            }
        })
    });
});

```

**出力結果**
```
// 1回目
1
2
3


// 2回目
1
2
2
3
3

// 3回目
1
2
2
2
3
3
3

```

---

上記の通り、なぜかsubmit()以降の処理がどんどんと増えていきます。

on('click') を click に変更してみたり、諸々調べてみましたが、解決策が見つかりませんでした。

お時間ある方でjQueryのイベントが複数回実行されてしまう件に関して知識をお持ちの方いらっしゃいましたら、ご助力頂けますと幸いです。

【jQuery・Ajax】 Submitイベントがクリックした回数分追加で実行されてしまう

### 抱えている問題

![イメージ説明](c830ab6f020c69d7067baead71d5639a.jpeg)

高さ100vhのボックスを3つ作り、それぞれの幅は33.3%、33.4%、33.3%。そのボックスのバックグラウンドに画像を指定するみたいなことをやっているのが上記の画像です。
ただ実際にブラウザで確認してみると画面が少しだけスクロール出来ます。分かりやすいようにbodyのbackgorund-colorをredにしておきました。



### 試してみたこと
![イメージ説明](741849bf49d1f271c0dca54885759bb0.jpeg)

ボックスにマージンがついているか確認してみましたが、マージンはついていませんでした。
またデベロッパーツールで赤い領域をクリックして詳細を確認しようとしましたが、クリック出来ませんでした。なんでですかね...。



### コード
```ここに言語を入力
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
	<div class="ichi"></div><div class="ni"></div><div class="san"></div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


</body>
</html>
```

```ここに言語を入力
body{
    padding:0;
    margin:0;
    background:red;
}

.ichi{
    width:33.3%;
    height:100vh;
    background-image:url("2.jpg");
    background-size: cover;
}
.ni{
    width:33.3%;
    height:100vh;
    background-image:url("3.jpg");
    background-size: cover;
}
.san{
    width:33.4%;
    height:100vh;
    background-image:url("4.jpg");
    background-size: cover;
}
.ichi,.ni,.san{
    display: inline-block;
}
```

### 追記
box-sizing:border-boxにしたら解決しました。でも解決した理由がよくわかりません。。。；；

縦方向に微妙な余白が出来てしまう

### 抱えている問題
インラインブロック要素に文字列を入れると、ボックスが大きくしたに下がってしまいます。

![イメージ説明](62e33328094db0721db1f760cd141571.jpeg)
![イメージ説明](0924751d9ffcbc8730a1b6d784177b8a.jpeg)
※空白が出来るのを避けるために、bodyにフォントサイズ0を指定しているので文字の表示自体はされていません。

### コード

[CodePen](https://codepen.io/anon/pen/bZeKZL)

```ここに言語を入力
<div class="ichi"></div>
<div class="ni"></div>
```

```ここに言語を入力
body{
    padding:0;
    margin:0;
    font-size:0;
}

.ichi{
    width:20%;
    height:100vh;
    background:red;
    display: inline-block;

}
.ni{
    width:20%;
    height:100vh;
    background:blue;
    display: inline-block;
}
```

### 試してみたこと
デベロッパーツールを確認してみたり、google先生を使ってみましたが、原因は分かりませんでした。ざこです、ごめんなさい；；

文字を入れるとinline-block要素が下に下がってしまう

### div要素を横並びにしたいです。

アコーディオン型の要素の前にテキストを挿入させたいです。

### 試したこと

```css

.num{
	display: flex; 
}

```

div　要素　横　並び

### 前提・実現したいこと
HTMLのブロック要素3つをCSSで縦１列の横並びにしたいです。どうかお力をお貸しくださいm(._.)m

### 該当のソースコード
```HTML
<div class="works">

        <section class="work">
          <img src="img/work1.jpeg" width="400" height="260" alt="旅ログ">
          <h1>旅ログ</h1>
          <p>これまでの旅とこれからの旅の予定です。これまでの旅とこれからの旅の予定です。これまでの旅とこれからの旅の予定です。これまでの旅とこれからの旅の予定です。これまでの旅とこれからの旅の予定です。</p>
        </section>

        <section class="work">
          <img src="img/work2.jpeg" width="400" height="260" alt="写真">
          <h1>旅の写真</h1>
          <p>これまでの旅の思い出の写真などです。これまでの旅の思い出の写真などです。これまでの旅の思い出の写真などです。これまでの旅の思い出の写真などです。これまでの旅の思い出の写真などです。これまでの旅の思い出の写真などです。</p>
        </section class="work">
        <section>
          <a href="https://hira-jasorede.hatenablog.com" target="_blank">
            <img src="img/work3.jpeg" width="400" height="260" alt="ブログ">
          </a>
            <h1>ブログ</h1>
            <p>旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。旅のブログです。</p>
        </section>
    </div>
```

```CSS
section{
  text-align: center;
}

section h1{
  font-weight: normal;
  margin-bottom: 8px;
}

section p{
  margin-top: 0;
  font-size: 14px;
}

.icon{
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 0 5px gray;
}

section img{
  border-radius: 20px;
  border: 5px solid pink;
  box-shadow: 0 0 5px gray;
}

.works{
  width: 400px;
  border-bottom: 1px solid gray;
}

.work{
  display: inline-block;
}

.works img:hover{
  opacity: 0.8;
}

.works h1,
.works p{
  text-align: left;
}

.works > section{
  margin-bottom: 40px;
}
```

### 試したこと
img、pが１セットとなったブロック要素を3つ横並びにしてページに表示したいのですが、
floatやdisplay: inline-block;を使用しても横並びになりませんでした。