皆さんNaokiです！今日は、htmlやcssで上手く行かない時の原因と対処法を考えて行きたいと思います！

あるある01cssが効かない

htmlもcssもしっかりと書いているつもりなのになぜか反映されない...そんな時はありませんか？大半の方はcss側に問題がないかどうかを探してしまうと思います。

解決策1 <link>タグが無い

初心者の方にありがちなのがhtml側に<link>タグを書き忘れてしまっているパターンです！cssはhtmlと紐づけ無いといくら素晴らしいコードを書いたところで適応してくれません！一度<link>タグがあるかどうか確認してみて下さい！　　　　　　　　リンクタグの書き方↓

<link rel="stylesheet" href="css/style.css">　<!--hrefにcssの場所を指定する-->

解決策2 <class>名が間違っている

<link>タグは紐付いているのに何故かcssが適応されない場合は<class>名が間違っているかもしれません！これは単純にスペルミスの可能性が非常に高いです！特にaとeやdとb等形が似ているものには要注意です！おすすめの対処法は<class>名をコピーペーストする方法です！これでスペルミスはほぼなくなります！

解決策3 css側の<class>名に「．」をつけ忘れている。

以外に多いのがこの場合!<class>名をコピーペーストしているにもかかわらず適応されなのはこの場合の可能性が高いです！つけ忘れていないか確認してみましょう！

あるある02　cssで思った通りの位置に動かない

cssでデザインをしているとなんで中央に来てくれなの？とかなんで動いてくれなの？とか出てくると思います！そんな場合はどうすればいいのでしょうか？？

解決策1　動かしたい要素が<div>で囲えていない

要素をデザインする上で上手に<div>タグを使えると要素を動かす事が簡単になります！具体的にはdisplay: flex;が効かないやtext-align: center が効かない場合は<div>タグで動かしたいタグを位置を指定したい要素を囲えていない場合がほとんどです！普段からどこの中に何を入れるかを意識してみましょう！

あるある03 要素と要素が被ってしまっている

画像の下に文字が来るはずなのに何故か文字と画像が被るや要素同士が被ってしまっている場合があると思います!この場合はどうしたら良いのでしょう

解決策1 被ってしまっている上(htmlの中での上)での高さ指定が足りていない

これは要素をまとめる<div>に対してのheightが足りていない場合があります<div>タグで大きくボックスを作っている場合その<div>の中の要素の高さが上回ってしまっていると下の要素と被ってしまう場合が多いです！しっかりと自分がその<div>の中にどれだけの高さを入れるかを理解するか、heightをautoにしましょう！

まとめ

今回は初心者にありがちなミスと対処法をまとめてみました！いずれも僕自身に起きたミスでかなりイライラしましたが一度、深呼吸をして冷静になりスペルミスがないかcssの指定先はあっているか等を見ていきましょう！

オマケ コピペで使えるhtmlとcss

２つの画像を横並びにする

<!--ｈｔｍｌ−−＞
<div class="box">
        <div class="box01">
            <p><img src="" alt=""></p>
        </div>
        <div class="box02">
            <p><img src="" alt=""></p>
        </div>
    </div>

<!--css-->
.box{
    display: flex;
}

3つの画像の下にそれぞれ説明文をつけた物の横並び

<!--html-->
<div class="box">
                <div class="box01">
                  <p class="box01_img">
                    <img src="" alt=""><br>
                    <p class="box01_text">
                        <p class="box01_text_01">2016/11/18</p>
                        <p class="box01_text_02">
                          
                        </p>
                    </p>
                  </p>
                </div>
                <div class="box01">
                    <p class="box01img">
                      <img src="" alt=""><br>
                      <p class="box01_text">
                          <p class="box01_text_01">2016/11/18</p>
                          <p class="box01_text_02">
                            
                          </p>
                      </p>
                    </p>
                  </div>
                  <div class="box01">
                      <p class="box01_img">
                        <img src="" alt=""><br>
                        <p class="box01_text">
                            <p class="box01_text_01">2016/11/18</p>
                            <p class="box01_text_02">
                              
                            </p>   
                        </p>
                      </p>
                    </div>
              </div>

<!--css-->
.box{
    width: 960px;
    height: auto;
    margin: 0  auto;
    display: flex;
    justify-content: space-between;
}
.box01{
    width: 300px;
}
.box01_text{
    width: 300px;
}
.box01_text01{
    padding-top: 30px;
    padding-bottom: 24px;
}
.box01_text_01{
    padding-top: 30px;
    padding-bottom: 24px;
}
.box01_text_02{
    line-height: 25px;
}