常連

自己紹介

### 前提・実現したいこと
添付画像のような４つ角にカッコを付けたデザインのボタンを作りたい

![イメージ説明](55bebbe5a48b993ad9f2092970bff0bb.png)

### 発生している問題・エラーメッセージ

左上と右下にカッコを付けるデザインのサンプルを見つけたので
応用して作成することは出来たのですが
もっと簡潔に書くことは出来ないかと思い質問しました。
参考サイト様　（19. カギカッコ）
https://saruwakakun.com/html-css/reference/box


### 該当のソースコード

```ここに言語名を入力
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      margin: 100px;
      padding: 25px;
      width: 200px;
      background-color: skyblue;

      box-sizing: border-box;
    }

    .button::before,
    .button::after {
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .txt::before,
    .txt::after {
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .button::before {
        top: 0;
        left: 0;
        border-top: 3px solid #555;
        border-left: 3px solid #555;
    }
    .txt::before {
      top: 0;
      right: 0;
      border-top: 3px solid #555;
      border-right: 3px solid #555;
    }

    .button::after {
        bottom: 0;
        left: 0;
        border-bottom: 3px solid #555;
        border-left: 3px solid #555;
    }
    .txt::after {
        bottom: 0;
        right: 0;
        border-bottom: 3px solid #555;
        border-right: 3px solid #555;
    }

    .txt {
      width: 100%;
      text-align: center;
    }
    a {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div class="button">
    <div class="txt">button</div>
    <a href=""></a>
  </div>
</body>
</html>
```

ボタンの4つ角にカッコを付けたい

このPHPファイルはリターンで返したい配列($mouths)を関数内でフィールドに宣言されている変数($results)に格納し、リターンするgetMouths()メソッドがあります。この配列は$currentpageと$itemperpageで返す配列を制限します。($currentpagが1,$itemperpagが5の場合はインデックスが0から4の配列を返す)
```php
<?php
$results = array();
$mouths = array(
  array('hotel_id' => '1', 'title'=>'気に入りました', 'date'=>'2016/09/21', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'レビューが良かったので気になってたホテル。初めて泊まりましたが常宿決定。 新館に泊まりましたが、価格に対して部屋の広さ、設備が良い。周りに日本食屋が多い。隣りの焼肉屋がとても美味しかった。 ホテルのマッサージも良かった。
  アヤラモールもタクシーですぐだし、銀行も徒歩圏内。旅行会社も並びにあるみたいで翌日のボホール島のチケットも買えるらしい。とにかく便利で部屋も満足。熱いシャワーも出る。'),

  array('hotel_id' => '1', 'title'=>'ロケーション良い', 'date'=>'2016/10/21', 'number'=>'9', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'レビューが良かったので気になってたホテル。初めて泊まりましたが常宿決定。 新館に泊まりましたが、価格に対して部屋の広さ、設備が良い。周りに日本食屋が多い。隣りの焼肉屋がとても美味しかった。 ホテルのマッサージも良かった。
  アヤラモールもタクシーですぐだし、銀行も徒歩圏内。旅行会社も並びにあるみたいで翌日のボホール島のチケットも買えるらしい。とにかく便利で部屋も満足。熱いシャワーも出る。'),

  array('hotel_id' => '1', 'title'=>'セブでベスト', 'date'=>'2016/10/23', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'この値段でこのクオリティは素晴らしい。広さを除けば、部屋のグレードはマルコポーロ・ホテルと遜色ありません。
  立地もよく便利なホテルです。前面道路の騒音だけがマイナスポイント。おススメです。'),

  array('hotel_id' => '1', 'title'=>'ｇｏｏｄ　ｈｏｔｅｌ', 'date'=>'2018/10/03', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'動きやすい場所にあり、知名度もありホテルに帰るのが楽。部屋はリノベーションされてて綺麗で居心地よい。
  近くにあるタイのスパはオススメです。前回に続き二度目の利用ですが、次回もここかな。'),

  array('hotel_id' => '1', 'title'=>'評判通りの良いホテル”', 'date'=>'2019/01/03', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'評判通りの良いホテル'),

  array('hotel_id' => '1', 'title'=>'良いホテル”', 'date'=>'2016/01/23', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'また行きたいと思います'),

  array('hotel_id' => '1', 'title'=>'便利なロケーション', 'date'=>'2017/08/07', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'セブに滞在の際利用しますが、交通の利便性、立地環境などがいいとおもいます。
 価格に対するパフォーマンスもgood!です。'),

 array('hotel_id' => '1', 'title'=>'また行きます', 'date'=>'2018/09/07', 'number'=>'8', 'word'=>'最高', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'１日の滞在でしたが、立地も分かりやすく、目の前のジャズバーももあり、いい環境でした。
 部屋のグレードも値段の割には申し分なしです。次回も滞在'),

 array('hotel_id' => '1', 'title'=>'また行きます', 'date'=>'2018/09/07', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'１日の滞在でしたが、立地も分かりやすく、目の前のジャズバーももあり、いい環境でした。
 部屋のグレードも値段の割には申し分なしです。次回も滞在'),

 array('hotel_id' => '1', 'title'=>'wifiが無料', 'date'=>'2018/11/07', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'タクシーの運転手で知らない人がいなかったので、便利だった
 wifiが無料で普通に使えたこの値段からしたらかなりいいと思う横の焼肉屋がうまい　タン塩が最高スタッフの愛想が良かった'),

 array('hotel_id' => '1', 'title'=>'気に入りました', 'date'=>'2016/09/21', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'レビューが良かったので気になってたホテル。初めて泊まりましたが常宿決定。 新館に泊まりましたが、価格に対して部屋の広さ、設備が良い。周りに日本食屋が多い。隣りの焼肉屋がとても美味しかった。 ホテルのマッサージも良かった。
 アヤラモールもタクシーですぐだし、銀行も徒歩圏内。旅行会社も並びにあるみたいで翌日のボホール島のチケットも買えるらしい。とにかく便利で部屋も満足。熱いシャワーも出る。'),

 array('hotel_id' => '1', 'title'=>'ロケーション良い', 'date'=>'2016/10/21', 'number'=>'9', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'レビューが良かったので気になってたホテル。初めて泊まりましたが常宿決定。 新館に泊まりましたが、価格に対して部屋の広さ、設備が良い。周りに日本食屋が多い。隣りの焼肉屋がとても美味しかった。 ホテルのマッサージも良かった。
 アヤラモールもタクシーですぐだし、銀行も徒歩圏内。旅行会社も並びにあるみたいで翌日のボホール島のチケットも買えるらしい。とにかく便利で部屋も満足。熱いシャワーも出る。'),

 array('hotel_id' => '1', 'title'=>'素晴らし', 'date'=>'2017/10/29', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'この値段でこのクオリティは素晴らしい。広さを除けば、部屋のグレードはマルコポーロ・ホテルと遜色ありません。
 立地もよく便利なホテルです。前面道路の騒音だけがマイナスポイント。おススメです。'),

 array('hotel_id' => '1', 'title'=>'GOOOD', 'date'=>'2018/10/03', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'動きやすい場所にあり、知名度もありホテルに帰るのが楽。部屋はリノベーションされてて綺麗で居心地よい。
 近くにあるタイのスパはオススメです。前回に続き二度目の利用ですが、次回もここかな。'),

 array('hotel_id' => '1', 'title'=>'とてもよかったです', 'date'=>'2015/12/23', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'評判通りの良いホテル'),

 array('hotel_id' => '1', 'title'=>'良いホテル”', 'date'=>'2016/01/23', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'また行きたいと思います'),

 array('hotel_id' => '1', 'title'=>'パーティもある', 'date'=>'2019/01/12', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'セブに滞在の際利用しますが、交通の利便性、立地環境などがいいとおもいます。
価格に対するパフォーマンスもgood!です。'),

array('hotel_id' => '1', 'title'=>'プールがよかった', 'date'=>'2018/09/07', 'number'=>'8', 'word'=>'最高', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'１日の滞在でしたが、立地も分かりやすく、目の前のジャズバーももあり、いい環境でした。
部屋のグレードも値段の割には申し分なしです。次回も滞在'),

array('hotel_id' => '1', 'title'=>'また行きます', 'date'=>'2018/09/07', 'number'=>'8', 'word'=>'満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'１日の滞在でしたが、立地も分かりやすく、目の前のジャズバーももあり、いい環境でした。
部屋のグレードも値段の割には申し分なしです。次回も滞在'),

array('hotel_id' => '1', 'title'=>'wifiが無料', 'date'=>'2018/11/07', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'タクシーの運転手で知らない人がいなかったので、便利だった
wifiが無料で普通に使えたこの値段からしたらかなりいいと思う横の焼肉屋がうまい　タン塩が最高スタッフの愛想が良かった'),

array('hotel_id' => '1', 'title'=>'気に入りました', 'date'=>'2016/09/21', 'number'=>'8', 'word'=>'非常に満足', 'name'=>'Chandler', 'country'=>'JPN', 'text'=>'レビューが良かったので気になってたホテル。初めて泊まりましたが常宿決定。 新館に泊まりましたが、価格に対して部屋の広さ、設備が良い。周りに日本食屋が多い。隣りの焼肉屋がとても美味しかった。 ホテルのマッサージも良かった。
アヤラモールもタクシーですぐだし、銀行も徒歩圏内。旅行会社も並びにあるみたいで翌日のボホール島のチケットも買えるらしい。とにかく便利で部屋も満足。熱いシャワーも出る。')
);


//表示される
//var_dump($mouths[0]);

function getMouths($itemperpage, $currentpage)
{
    $i = ($currentpage * $itemperpage) - $itemperpage;
    for ($i; $i < $itemperpage; $i++) {
        //表示される
        var_dump('sample');
        $results[] = $mouths[$i];
    }
    //表示されない
    var_dump($mouths[0]);
    return $results;
}
?>
```
こちらのPHPから呼び出します。
```PHP
<?php
require_once("wordofmouth.php");

$currentpage = 1;
$itemperpage = 5;

var_dump(getMouths($itemperpage, $currentpage));
?>
```

これが表示結果となります。
```表示結果
string(6) "sample" string(6) "sample" string(6) "sample" string(6) "sample" string(6) "sample" NULL array(5) { [0]=> NULL [1]=> NULL [2]=> NULL [3]=> NULL [4]=> NULL }
```

getMouthsでvar_dump()をすると変す$i,$currentpage,$itemperpageにはきちんと値が入っていました。
なぜNULLになるのでしょうか。

PHPの関数ないで配列でが取り出せな

### 前提・実現したいこと

お世話になります。
JavaScriptで簡単なアイコンのアニメーションを設定したくてfor文で条件分岐で実現しようとしました。
以下のコードでfor文の条件をvarで設定するとうまくいかず、letで書くとうまくいくことまでわかりました。
なぜvarだとエラーが起こるのか根本的な理由を理解したいです。一応var,letの違いは認識しているつもりなのですが、ブロックスコープを認識するletでエラーがでず、認識しないvarでエラーになる理由がわかりません。
アドバイスいただけますと、大変助かります。


```JavaScript
'use strict';
{

  const plus = document.querySelectorAll('.plus');
  // 必要ない部分と変数名を変更しました
  for (var i = 0; i < plus.length; i++) {
    console.log(i)
    // 期待した通り012と表示
    plus[i].addEventListener('click', () => {
      console.log(i);
      // なぜ3が表示されるのか？i<plus.lengthは３未満の数値になるはず
      if (plus[i].textContent === '+') {
        plus[i].textContent = '-';
      } else {
        plus[i].textContent = '+';
      }
    });
  }


}

```

```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>

      <p class="plus">+</p>
      <p class="plus">+</p>
      <p class="plus">+</p>
      

    <script src="js/main.js"></script>

  </body>
</html>

```

```CSS
/* クラスに変更しました */
.plus {
  color: #00AED9;
  text-align: center;
  line-height: 15px;
  border: solid #DADADA 2px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 20px;
}
```


### 補足情報（FW/ツールのバージョンなど）

Atomエディタ、CHROME

for文における、letとvarの挙動の違い

いつもお世話になっております。
マイナス評価、修正依頼の問題点の含まれてない質問がいっぱいつくことを前提で書き込ませていただきます。

単刀直入に私は皆さんに崇拝されたいです。
どういう感じかというと私が質問をすると
「syosinsyapuroguさん、いつも質問していただき誠にありがとうございます」的なことを言われたいです。ユーザーランキング上位の人や金枠を付けた方々が回答されたときみたいに「すごい人が回答してくれた！うれしい！」みたいな気持ちで私の質問を見てほしいです。「syosinsyapuroguさんがまた質問してるすごい！回答したい！」みたいな感じで。
上位に位置する人達はずるいです。自分達がすごい知識を持ってるから回答するたびにうれしいすごいって思われるじゃないですか。ずるいです。嫉妬します。妬みます。嫉みます。僕みたいな知識のない質問ばかりしているものは指をくわえて黙って見ていなくてはいけないのですか？そんなのは嫌です！だから私はジオン公国のように立ち上がります。皆から崇拝されるエキスパートの質問者になりたいです。質問で1ポイントを貰えるので1万5000回して、maisumakunさんを抜きユーザーランキング1位になれば皆さんは私が質問するたびにいつもご質問していただきありがとうございますって思ってくれますか？ご回答お願いします。