Chapter 03

2. CSSフレームワークの設定

Masumi Morishige(umi-mori)
Masumi Morishige(umi-mori)
2021.01.01に更新

CSSフレームワークとは?

CSSフレームワークとは、ノーコードである程度綺麗なウェブサイトを作ることができる強力なツールです。

MVP.cssとは?

MVP.cssとは、Andy Brewerという方が作ったCSSフレームワークです。CSSフレームワークを導入すると、余計なコードも組み込まれるため、ウェブサイトが重くなってしまうという欠点があるのですが、このフレームワークは、最小限のコードのみ書かれており、大変軽量です。

https://andybrewer.github.io/mvp/

mvp-view.png

MVPの導入方法

1. mvp.cssのダウンロード

上記のウェブサイトからmvp.cssというファイルをダウンロードして、以下のようにcssフォルダの中に入れましょう。

mvp-introduced.png

2. linkタグの追加

index.htmlheadタグの中に以下のようなコードを挿入します。
<link rel="stylesheet" href="./static/css/mvp.css" />

結果的に、headタグ全体のコードは以下のようになります。

index.html
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="format-detection" content="email=no,telephone=no,address=no">
	
    <title>Landing Page Temp</title>
    <!-- この行を追加 -->
    <link rel="stylesheet" href="./static/css/mvp.css" />
</head>

ウェブサイトの比較

以上の2つの手順のみで導入が完了します。
では、実際にウェブページがどのように変わったか見てみましょう。

before-after


CSSフレームワークを導入する前に比べて、それっぽい綺麗なウェブサイトになりましたね。
ここまでで大枠のウェブサイトは完成です。

次のチャプターではウェブサイトを公開して、誰でもアクセスできるURLを生成する方法を紹介します。