【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!⑦

今回、模写する部分はこちらになります!
コーディングも掲載しているのでぜひ参考にしてみて下さい。

お手本

表がある部分をmain-12、下の青い部分をmain-13と名付けました。

模写コーディングの様子を最初から見たい方はこちらの記事からどうぞ!

目次

この画面のつまずきポイント

① 表を作る!

ぶーた

表の作り方なんてきれいさっぱり忘れたのだ!

progateでやったようなやってないような、ほぼ記憶のないが登場しました!

<table>で囲むと表を作ることができます。
表の要素は<th>(タイトル)または<td>で囲み、それぞれをさらに<tr>で囲みます。

言葉ではややこしいので、コードをご覧ください!

② 表が二つ並んでいる

表が2つ並んでいる影響で、右側の表がおかしくなってしまいました。

margin: 0;を指定しても直りません…。
しかし、右側の表にheightを指定してあげることで直すことができました!

実際に挑戦してみよう!

デスクトップデザイン(main-12)

ぶーた作

久々の表だったので時間がかかりましたね。

右側の表の隙間が空いてしまった問題は、右側の表にtable-2というidを付けて、height: 1px;に指定したら直りました!

参考として以下にコードを載せておきます。

 <div class="main-12">
        <h2>iSara[イサラ]で学べる内容</h2>
        <h3>渡航前の事前課題と渡航中に学べることの一覧です。</h3>
        <div class="contents">
          <table>
            <tr>
              <th>渡航前の事前学習</th>
            </tr>
            <tr>
              <td>0から始めるプログラミング事前学習講座</td>
            </tr>
            <tr>
              <td>参加者グループコミュニティ</td>
            </tr>
            <tr>
              <td>チャットサポート</td>
            </tr>
            <tr>
              <td>事前スカイプコンサル</td>
            </tr>
            <tr>
              <td>環境構築の事前学習</td>
            </tr>
            <tr>
              <td>jQueryの事前学習講座</td>
            </tr>
            <tr>
              <td>Bootstrapの事前講座</td>
            </tr>
            <tr>
              <td>PHP / Mysqlの事前学習講座</td>
            </tr>
            <tr>
              <td>稼ぐためのHTML/CSS講座</td>
            </tr>
            <tr>
              <td>WordPressの事前学習講座</td>
            </tr> 
          </table>
          <table id="table-2">
            <tr>
              <th>バンコク渡航中</th>
            </tr>
            <tr>
              <td>フリーランス独立術講座</td>
            </tr>
            <tr>
              <td>実際の実務案件をこなす</td>
            </tr>
            <tr>
              <td>ノマドフリーランス体験</td>
            </tr>
            <tr>
              <td>バンコク生活体験</td>
            </tr>
            <tr>
              <td>クラウドソーシング活用講座</td>
            </tr>
            <tr>
              <td>フリーランスのための営業講座</td>
            </tr>
          </table>
        </div>
</div>
ぶーた

HTMLが長すぎる…。

.main-12 {
    background-image: url(../img/classbgsp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.main-12 h2 {
    color: white;
    font-size: 2rem;
    padding-top: 65px;
}
.main-12 h3 {
    color: white;
    font-size: 1rem;
}
.contents {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.main-12 table {
    width: 30%;
    margin-top: 50px;
    gap: 0px;
    border: 2px rgb(1,110,169) solid;
    text-align: center;
    margin-bottom: 80px;
}

.main-12 th {
    color: white;
    font-size: 1.2rem;
    display: inline-block;
    line-height: 60px;
    width: 100%;
    background-color: rgb(1,110,169);
}
.main-12 td {
    font-size: 1.1rem;
    background-color: white;
    display: inline-block;
    font-weight: bold;
    padding: 10px 5%;;
    width: 90%;
}
#table-2 {
    height: 1px;
}

最後にheight: 1px; を指定してるのが確認できますね。
これがないと表がめちゃくちゃになります…。

デスクトップデザイン(main-13)

ぶーた作

説明不要!!

<div class="main-13">
        <div>
          <p>講座費用258,000円以上の金額が稼げるまで「永久サポート延長」します。
          <br>つまりリスク0で参加できます。</p>
        </div>
</div>
.main-13 {
    height: 180px;
    background-color: rgb(1,110,169);
    text-align: center;
}
.main-13 p {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    padding-top: 5%;
}

レスポンシブデザイン(main-12&13)

ぶーた作
ぶーた作

特に難しかったところはなかったですね。
表を横並びから縦並びにするためには、おなじみのflex-direction: column; を使っちゃえば簡単です。

@media screen and (max-width: 800px) {
    .main-12 h2 {
        font-size: 1.2rem;
        padding-bottom: 2vh;
    }
    .main-12 h3 {
        font-weight: normal;
        padding-bottom: 3vh;
    }
    .main-12 .contents {
        flex-direction: column;
        align-items: center;
    }
    .main-12 table {
        width: 90%;
        margin: 0;
    }
    .main-12 th {
        font-weight: normal;
    }
    #table-2 {
        margin-top: 2vh;
        margin-bottom: 10vh;
    }
   
  .main-13 p {
        font-size: 1rem;
    }
    .main-13 .res {
        display: block;
    }
}

以上でmain-12とmain-13は終了です!

久々に表が出たので焦っちゃいましたね。
表を使わなくても作れそうでしたが、せっかくなので表を使ってみました!

いよいよ後半戦に突入してきましたね。
あと少しですが頑張っていきたいと思います!

↓続きはこちらの記事になります

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる