年末まで毎日webサイトを作り続ける大学生 〜17日目 BootStrap & Font Awesomeに触れる〜

4735 ワード
font Bootstrap Bootstrap テキストリンク

はじめに

こんにちは！
年末まで毎日webサイトを作っている者です。
今日はbootstrapとfont awesomeを触ってみました。
昨日ap●leのファーストビュー（デザインのみ)をhtml,css,jsでコツコツと書いていきましたが、bootstrap, font awesomeを使ったら爆速で出来上がると聞いたのでちょっと触ってみました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は17日目。(2019/11/4)
よろしくお願いします。

サイトURL

やったこと

まずやることとして、bootstrapもfont awesomeもCDN（ファイルをダウンロードできる便利サービス？)を利用したのでlinkやscriptのタグを張る必要があります。

<!-- bootstrapの方 -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
<!-- font awesomeの方 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
        crossorigin="anonymous">

<!-- 3つ全てbootstrapの方 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

これであとはサイトにコードが張ってあるので、使いたいものをコピペして終了です。

結論からいうと、確かにbootstrapで簡単に大枠は作れたんですが、細部の詰め方がよくわかりませんでした。どのクラスがどの装飾をしているのか、どこがどう絡み合っているのか、結局読み解けずに1日が過ぎてしまいました。

ただやっぱりレスポンシブに対応しているだけあって、小さくなった時に↑ハンバーガーメニューが勝手に出てきてそれも動くというのがすごいですね。bootstrap おそるべし。

ちなみにfont awesomeの方のコードはこんな感じです↓

<a class="nav-link" href="#"><i class="fas fa-search"></i></a>

iタグの部分ですね。上のgifでいうとこれは検索バーを表示してくれています。

感想

今日はご覧の通り成果がほとんどありませんでした。確かにフレームワークは便利といえば便利ですが、初心者のうちは何が何やらわからないのでそこまでありがたみを感じないというのが正直な感想です。安直にパパッと作ろうとした結果がこれです。やっぱり今は生のhtml, css, jsで地道にやるべきですね・・・。フレームワークは実力がついてから利用することにします。あ、Font Awesomeはすごくシンプルでした。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

  1. Bootstrap (https://getbootstrap.com/)
  2. Font Awesome (https://fontawesome.com/)

参考になりました、ありがとうございます。またいつか使わせていただきます！