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">
を書き忘れるとモバイルで表示したときデザインが崩れるので必ず入れてください。

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

GithubからダウンロードしてCDNと同じように読み込むことで使えます。

最後まで読んでいただきありがとうございました！！

Bulma

Bulma: Free, open source, and modern CSS framework based on Flexbox

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.