エンジニアスタンプラリー～フロントエンド編＃5

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

CSSフレームワーク
BootstrapはCSSフレームワークというカテゴリ。初耳。

CSS Frameworks

Bootstrap

yarn経由でBootstrapやPopper.jsをインストール。
CDNから引っ張る時代は終わったのかしら。
公式サイトOverview Bootstrapからいくつかの要素を導入。
主にはGridシステムを使用。Flexboxで頑張ったのは何だったのか。

index.html

    <section id="contents" class="row">

      <section class="col-md-9 row">
        <article class="skill col-lg-3 col-md-4 col-sm-6">
          <h3>HTML</h3>
          <p><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">STAMP</a></p>
        </article>

        <article class="skill col-lg-3 col-md-4 col-sm-6">
          <h3>CSS</h3>
          <p><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">STAMP</a></p>
        </article>
      </section
      <aside class="col-md-3 row">
        <section class="col-md-12 col-sm-6">
          <h3>Weather News</h3>
          <p id="weather-news"></p>
        </section>

        <section class="col-md-12 col-sm-6">
          <h3>Add Skill</h3>
          <p>
            <input type="text" name="title" id="skill-box">
            <input type="button" value="Add" id="add">
          </p>
        </section>
      </aside>

    </section>

成果物

デザインをちゃんとレスポンシブに。前回までのCSSだいぶ削除した（無駄骨）。
https://tonchan1216.github.io/WDR-frontend/v5/
https://github.com/tonchan1216/WDR-frontend/tree/v5.0