iSARA模写　解説⑤〜表の作成など〜

iSARA模写第5回です。

前回はこちら↓

今回はこちらを作成します↓

今回のポイントは、

・三角吹き出し

・表の作成

いつもの手順で

①レイアウトの確認

②HTMLの書き出し

③CSSで見た目を整えます

①レイアウトの確認

②HTMLを書く

上から順にHTML要素を作っていく。

三角吹き出しは③のcss疑似要素で作ります。

③CSSで見た目を整える

今回のポイントは、

☑️三角吹き出し

これは、div①に疑似要素の::afterで作成できます。

コードはこれ↓

div①::after {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    border: 25px solid transparent;
    border-top-color: #ebb94d;
    left: 50%;
    margin-left: -25px;
}

なぜ上記のコードで吹き出しが作れるのか気になる方は

CSSのborderプロパティで三角形を作る

に解説があります。

☑️表の作成

HTMLで作成した表↓を

 <div class="list">
          <ul>
            <li>渡航前の事前学習</li>
            <li>０から始めるプログラミング事前学習講座</li>
            <li>参加者グループコミュニティ</li>
            <li>チャットサポート</li>
            <li>事前スカイプコンサル</li>
            <li>環境構築の事前学習</li>
            <li>jQueryの事前学習講座</li>
            <li>Bootstrapの事前講座</li>
            <li>Bootstrapの事前講座</li>
            <li>Bootstrapの事前講座</li>
            <li>Bootstrapの事前講座</li>
          </ul>
          <ul>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
            <li>バンコク渡航中</li>
          </ul>
        </div>

cssで表らしく見た目を整えるために、

リストの前につく”・”を消したり、

list-style: none;

ボーダーを引いたりします。

border:solid 1px blue;

表の一番上だけ、青色でそれ以外は白色なのでそこは疑似要素を使いました↓

ul li:nth-child(1){
  background-color:blue;
  color:#ffffff;
}

ul li:nth-child(n+2){
  background-color: #ffffff;
}

やっと半分位まで来たでしょうか。

ポイントを押さえれば、

あとは体力勝負！