常連

自分はホームページ作りをしたいです。
なにも知識がないことだけはわかってください。
また、エンジニアになりたいわけでもないし、
プログラミングでお金儲けをしたいわけでもないです。
html cssを学べば簡易的なホームページ作りができると調べて出てきて、勉強していて簡単なホームページは作れそうです。
しかし自由度が少ないというか、自分が思った通りのデザインができません。もっと違う言語を学べばデザインの幅は広がりますか？またそう言った場合どんなことをすればいいですか？
初心者すぎて申し訳ございません

初心者のホームページ作成

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
簡単な登録画面を作っており入力欄に何も書かれなかったときに入力してくださいと表示したいのですがうまくいきません。

どこが間違っているのでしょうか、初学者のためわかりやすく教えていただけると幸いです。```ここに言語を入力
コード
```<?php
session_start();
  $error = array();
  if(!empty($_POST)) {
    if($_POST['name'] == ''){
      $error['name'] = 'blank';
    }
    if($_POST['mail'] == ''){
      $error['mail'] = 'blank';
    }
    if($_POST['pass'] == ''){
      $error['pass'] = 'blank';
    }
    if (strlen($_POST['pass']) < 4) {
      $error['pass'] = 'length';
    }
    if(empty($error)) {
      $_SESSION = $_POST;
      header('Location:join_check.php');
      exit;
    }
  }


?>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>gymgym</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <p>会員登録</p>
    </header>
    <div class="container">
      <form class="" action="" method="post" enctype="multipart/form-data">
        <h1>次のフォームに必要事項をご記入ください</h1>
        <dl class="">
          <p>ニックネーム  <span class="required">必須</span></p>
            <input type="text" name="name" size="35" maxlength="255" class="_text">
            <?php if($error['name'] == 'blank'): ?>
              <p>ニックネームを入力してください</p>
            <?php endif; ?>
          <p>メールアドレス  <span class="required">必須</span></p>
            <input type="text" name="mail" size="35" maxlength="255" class="_text">
            <?php if($error['mail'] == 'blank'): ?>
              <p>メールアドレスを入力してください</p>
            <?php endif; ?>
          <p>パスワード  <span class="required">必須</span><p/>
            <input type="password" name="pass" size="10" maxlength="20" class="_text">
            <?php if($error['pass'] == 'blank'): ?>
              <p>パスワードを入力してください</p>
            <?php endif; ?>
            <?php if($error['pass'] == 'length'): ?>
              <p>四文字以下で入力してください</p>
            <?php endif; ?>

          <p>写真など<p>
            <input type="file" name="image" size="35" class="btn" id="btm"><label for="btm"></label> <br>
            <input type="submit"  value="入力を確認する" class="confirmation">
          </dl>
            </form>
    </div>

  </body>
</html>


■■な機能を実装中に以下のエラーメッセージが発生しました。
### 発生している問題・エラーメッセージ
Notice: Undefined variable: error in join_index.php on line 43

Notice: Undefined variable: error in join_index.php on line 48

Notice: Undefined variable: error in join_index.php on line 53

Notice: Undefined variable: error in join_index.php on line 56
エラーメッセージ
```

### 該当のソースコード

あとの3つも同じ書き方です。
```ここに言語名を入力
<?php if($error['name'] == 'blank'): ?>
<p>ニックネームを入力してください</p>
<?php endif; ?>
```


### 試したこと
ここに問題に対して試したことを記載してください。
＄errorが定義されてないよというエラーメッセージだと思ったので $error = array();を付け足してみたのですが
Notice: Undefined index: name と出てしまいどうすればいいかわかりません。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

if文で名前　パスワード等がからの時入力してくださいと表示したいのですがうまく動作しません

### 前提・起きていることなど
phpでメール送信の機能を実装しようと思っています。

メール送信のテストを行っていたのですが、CCに複数アドレス指定すると
CCのうち２つ目以降のアドレスにメールが届かない事象が起きています。


### 実際のコード

```php
<?php

        $headers = 'From: メールアドレス' . "\r\n";   //ここは直接指定してます。

        if(strlen($mail_cc) > 0){
                $cc_list = explode(",", $mail_cc); 
                foreach ($cc_list as $cc_item) {
                        if(empty($cc_item) == false){
                                $headers .= "Cc: $cc_item" . "\r\n";
        }}}

        //中略

        mb_send_mail($to, $subject, $message, $headers);
?>
```

CC部分を処理している実際のコードです。
CCはカンマ区切りで複数指定できるようにしているので、カンマ毎に「CC:」と改行コードを付与する処理をしています。

迷惑メールフォルダに振り分けられるわけではなく、全く送られていない状態なのですが、
コードの方に何か問題点などありますでしょうか？

### 補足
・CCの１つ目に対しては必ず送られます
・TOも複数指定できるようにしているのですがそちらは問題ありません
・２つ目以降をGmail、Yahooメール、携帯キャリアメールにしましたが全てダメでした
・関係ないとは思いますが、該当のメールをTOのメールから見るとヘッダーには「SPF : Pass」があります
・メールサーバや送信元アドレスを変える、メールサーバのログを確認する、といった点についてはコードが問題なければ確認しようと思っています(phpは今日初めて触るので自信がなく...)

不足情報などあるかと思いますが、ご助言いただけますと幸いです。

CCに複数人設定するとメールが届かない(PHP)

お世話になっております。

セッションＩＤを乱数化する際に、base64_encode と openssl_random_pseudo_bytesを使用していますが、
ネットに掲載の記事で「$token = rtrim(base64_encode(secure_random_bytes(32)),'=');」
というのを見つけました。

なぜ末尾から＝（イコール）を削除しているのか調べても該当するような記事がありませんでした。
どなたかお解かりの方いらっしゃいましたらお願いします。

セッションＩＤを乱数化(base64_encode)する際の疑問点

回転するCSSアニメーションが終了し次第、モーダルのアニメーションを始動させたいと思っています。しかし、現状のコードでは同時にアニメーションが起こってしまいます。

## コード
```javascript
class App extends Component {
    state = {
      isOpen: false,
      isAnimated : false,
    };
    onOpenModal = () => {
      this.setState({ isAnimated: true });
      this.setState({ isOpen: true });
    };

    render() {
        return(
          <div className="wrapper">
            <div className="container">
              <div className="center-align">
                <img src={img3} alt="" className={this.state.isAnimated ? "anime-a" : ""} />
              </div>
              <div className="center-align">
                <button onClick={this.onOpenModal}>クリック</button>
              </div>
            </div>
          </div>
          
        );
    }

}

```

```css
.anime-a {
  animation:rotateAnimation 1s;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
```

クリックすると`onOpenModal`関数が動くようになります。その中で、画像の回転アニメーションが起こり、その後にモーダルが開くという形を実装したいです。しかし、これだと同じタイミングでアニメーションが起きてしまいます。回転アニメーション終了のタイミングで次のアニメーションを起こすにはどうすれば良いでしょうか。もっと言うと、アニメーション終了のタイミングで`setState({isOpen: true})`にしたいです。良い方法があれば教えてください。

## 試したこと
###addEventListenerを使ってみました。

```javascript
   onOpenModal = () => {
      var el = document.querySelector('.anime-a');
      this.setState({ isAnimated: true });
      el.addEventListener('animationed', function() {
        this.setState({ open: true });
      });
    }
```

これでうまくいくはず！と思ったんですが、

`Unhandled Rejection (TypeError): Cannot read property 'addEventListener' of null`

というエラーが出てしまいました。おそらくDOMの問題だと思います。この方法ではReactにおいてCSSアニメーションを制御できない。

### onAnimationEndを使ってみた

```javascript
   onOpenModal = () => {
      // this.setState({ isAnimated: true });
      this.setState({ open: true });
    }

   onImageRotate = () => {
      this.setState({ isAnimated: true });
    }

// 略
<button onClick={this.onImageRotate} onAnimationEnd={this.onOpenModal}>クリック</button>
```

しかし、これではなぜかonAnimationEndの方が動かずモーダルが出てきません。

React --- CSSアニメーションの終了を感知して次のイベントを発生させたい

メインビジュアルの文字をCSSアニメーションで動かしています。
ですがページローディングアニメーション中にメインビジュアルのアニメーションが動いてしまいます。
ローディングアニメーションが終わったことを感知してメインビジュアルのアニメーションを始めたいです。
コードの書き方がよく分からないのでアドバイスがありましたらよろしくお願いいたします。

[参考URL](http://kazuki-portfolio.net)

```HTML

  <div id="loading" class="loading active">
    <div class="spinner">
      <span>Loading...</span>
    </div>
  </div>


    <div class="mv">
      <div id="fly-in">
        <div><span>Welcome to</span>My portfolio</div>
        <div><span>My name is</span>Kazuki Matsuda</div>
        <div><span>I am a</span> Web engineer</div>
        <div><span>I would be happy</span>if I could help you</div>
      </div>
      <div class="scroll">
      </div>
    </div>
```

```JavaScript
// ローディング画面を消す
window.addEventListener('load', function () {
    document.getElementById('loading').classList.remove('active');
})
```

```CSS
// /* ========= ローディング画面 ========= */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: all 1s ease;
  color: #ffffff;
  background-color: #333;
  visibility: hidden;

  &.active {
    opacity: 1;
    visibility: visible;
  }
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent;
  animation: spinner1 1.8s infinite linear forwards reverse;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    opacity: 0.6;
  }

  &::before {
    transform-origin: right bottom;
    border-right: 1px solid;
    z-index: 1;
    animation: spinner2 .4s infinite linear forwards;
  }

  &::after {
    transform-origin: calc(100% - 2px) bottom;
    border-right: 4px solid;
    z-index: 2;
    animation: spinner3 1.5s infinite linear forwards;
  }

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    z-index: 3;
    animation: spinner_loading_text 1.8s infinite linear forwards;
  }
}

/* Spinner animation */
@keyframes spinner1 {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner3 {
  0% {
    transform: translateX(2px) translateZ(0) rotate(0deg);
  }

  100% {
    transform: translateX(2px) translateZ(0) rotate(360deg);
  }
}

@keyframes spinner_loading_text {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========= mv ========= */
.mv {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url(../img/mv.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-attachment: fixed;
  color: #fff;
  text-align: right;
  font-weight: bold;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;

  #fly-in {
    font-size: 6.7rem;
    font-style: italic;
    margin: 50vh auto 30vh;
    height: 20vh;
    text-transform: uppercase;
    user-select: none;


    span {
      display: block;
      font-size: 2.8rem;
      opacity: .8;
    }

    div {
      position: absolute;
      opacity: 0;
      right: 10vw;
      width: 90vw;
      animation: switch 18.8s linear infinite;

      &:nth-child(2) {
        animation-delay: 4.7s;
      }

      &:nth-child(3) {
        animation-delay: 9.4s;
      }

      &:nth-child(4) {
        animation-delay: 14.1s;
      }

    }

    @keyframes switch {
      0% {
        opacity: 0;
        filter: blur(20px);
        transform: scale(50)
      }

      8% {
        opacity: 0;
        filter: blur(17px);
        transform: scale(25)
      }

      12% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1)
      }

      25% {
        opacity: 1;
        filter: blur(0);
        transform: scale(.9)
      }

      28% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(.1)
      }

      80% {
        opacity: 0
      }

      100% {
        opacity: 0
      }
    }
  }

  .scroll {
    position: absolute;
    bottom: 20px;
    left: 48.3%;
    transform: translateY(-48.3%);

    &::after {
      content: "";
      opacity: 0.7;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      display: block;
      width: 40px;
      height: 40px;
      transform: rotate(135deg);
    }
  }
}


/* ========= about ========= */
.about {
  color: $maincolor;
  background-color: #fff;

  .container {
    margin-bottom: 35px;
  }

  &-box {
    width: 100%;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 4px solid #666;
    border-radius: 30px;
    box-shadow: 10px 10px 10px $maincolor;

    &-left {
      margin: 0 auto;
      width: 330px;
      height: 330px;
    }

    &-right {
      font-size: 1.8rem;

      p {
        padding-bottom: 30px;

        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
}
```

ローディングアニメーション終了を感知して次のアニメーションを開始したい

下記の記事を参考に、アニメーションを色々試しているのですが、アニメーションを動かす順番を制御する方法が分かりません。
https://coco-factory.jp/ugokuweb/move01/4-1-2/

【参考サイト】
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-4/1-4.html

一通り動きは全部できています。

【実現したいこと】
参考サイトのように、ローディング画面が終了後に、FV(最初の画面)のアニメーションを動かしたい。
下記のコードですと、```.text```の文章がロード終了時に右から出てきてほしいです。
今のままだとローディング画面中に動いているようです。

外部読み込みもあるのでheadタグから書きます。
```HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>template</title>
    <meta name="”description“" content="““" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/animate.css" />
  </head>
  <body>
    <div id="splash">
      <div id="splash_text"></div>
      
    </div>
    <div id="container">
      <p>ローディング後、この画面が見えます。</p>
      
    </div>
    <div id="particles-js"></div>
    <div id="wrapper">
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>

      <div class="test">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.inview.min.js"></script>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

```

```CSS
.text {
  font-size: 20px;
  margin: 100px auto;
  text-align: center;
  opacity: 0;
}

.box {
  width: 700px;
  height: 700px;
  background: grey;
  margin: 1000px auto;
  position: sticky;
  top: 0;
}

.anime-active {
  opacity: 1;
}

html,
body {
  height: 100%; /*高さを100%にして描画エリアをとる*/
}

#particles-js {
  position: fixed; /*描画固定*/
  z-index: -10; /*描画を一番下に*/
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #fff; /*背景色*/
}

#wrapper {
  position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width: 100%;
  height: 100%;
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
  /*fixedで全面に固定*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #333;
  text-align: center;
  color: #fff;
}

/* Loadingバー中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg {
  height: 2px;
}

```

```js
//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(splash_text, {
  //id名を指定
  easing: "easeInOut", //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
  duration: 1000, //時間指定(1000＝1秒)
  strokeWidth: 0.2, //進捗ゲージの太さ
  color: "#555", //進捗ゲージのカラー
  trailWidth: 0.2, //ゲージベースの線の太さ
  trailColor: "#bbb", //ゲージベースの線のカラー
  text: {
    //テキストの形状を直接指定
    style: {
      //天地中央に配置
      position: "absolute",
      left: "50%",
      top: "50%",
      padding: "0",
      margin: "-30px 0 0 0", //バーより上に配置
      transform: "translate(-50%,-50%)",
      "font-size": "1rem",
      color: "#fff",
    },
    autoStyleContainer: false, //自動付与のスタイルを切る
  },
  step: function (state, bar) {
    bar.setText(Math.round(bar.value() * 100) + " %"); //テキストの数値
  },
});

//アニメーションスタート
bar.animate(1.0, function () {
  //バーを描画する割合を指定します 1.0 なら100%まで描画します
  $("#splash").delay(500).fadeOut(800); //アニメーションが終わったら#splashエリアをフェードアウト
});

particlesJS("particles-js", {
  particles: {
    number: {
      value: 38, //この数値を変更すると幾何学模様の数が増減できる
      density: {
        enable: true,
        value_area: 800,
      },
    },
    color: {
      value: "#333", //色
    },
    shape: {
      type: "polygon", //形状はpolygonを指定
      stroke: {
        width: 0,
      },
      polygon: {
        nb_sides: 3, //多角形の角の数
      },
      image: {
        width: 190,
        height: 100,
      },
    },
    opacity: {
      value: 0.664994832269074,
      random: false,
      anim: {
        enable: true,
        speed: 2.2722661797524872,
        opacity_min: 0.08115236356258881,
        sync: false,
      },
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false,
      },
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: "#ffffff",
      opacity: 0.6,
      width: 1,
    },
    move: {
      enable: true,
      speed: 6, //この数値を小さくするとゆっくりな動きになる
      direction: "none", //方向指定なし
      random: false, //動きはランダムにしない
      straight: false, //動きをとどめない
      out_mode: "out", //画面の外に出るように描写
      bounce: false, //跳ね返りなし
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 961.4383117143238,
      },
    },
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false,
        mode: "repulse",
      },
      onclick: {
        enable: false,
      },
      resize: true,
    },
  },
  retina_detect: true,
});

$(function () {
  $(".text").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).addClass("animate__animated animate__lightSpeedInRight anime-active");
    } else {
      $(this).removeClass("animate__animated animate__lightSpeedInRight anime-active");
    }
  });
});

```

ロード終了後にアニメーションさせたい

メインビジュアルの文字をCSSアニメーションで動かしています。
ですがページローディングアニメーション中にメインビジュアルのアニメーションが動いてしまいます。
ページが読み込み完了し、ローディングアニメーションが終わった後に、メインビジュアルのアニメーションを動かしたいです。
アドバイスよろしくお願いいたします。

参考URL　https://kazuki-portfolio.net