CSSフレームワークBulmaを導入する方法

Web

2020.09.27 2020.03.27

今回はCSSフレームワークのBulmaを導入する方法を紹介します。

CDNを使う場合
ダウンロードして使う場合

CDNを使う場合

HTMLのヘッダタグで次のように読み込むことで使うことができます。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

4行目でBulmaのCDNを読み込んでいます。

5行目はFont Awesomeなので使わなければ読み込まなくても問題ないです。

<meta name="viewport" content="width=device-width, initial-scale=1">
を書き忘れるとモバイルで表示したときデザインが崩れるので必ず入れてください。