CSS framework である Bulma を使ったサンプルページです。
<head> タグの中に以下を記述します。
(このコードのハイライトには、highlight.js を使っています。Bulma の機能ではありません。)
<meta name="viewport" content="width=device-width, initial-scale=1">
<link ref="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
これ以降、Bulma の Section を使っていきます。Section は以下のように書きます。
<section class="section has-background-primary">
<h2 class="title">セクションタイトル</h2>
<div class="container">
<h1 class="title">タイトル1</h1>
<div class="box">
Foo
</div>
</div>
<div class="container">
<h1 class="title">タイトル2</h1>
<div class="content">
Bar
</div>
</div>
<div class="container">
<h1 class="title">タイトル3</h1>
<div class="box content">
Baz
</div>
</div>
</section>
色もSASSの変数を使ってカスタマイズできる。
Bulma の修飾用CSSクラスは、is- もしくは has- で始まる。
ほとんどの要素に指定できるヘルパークラス
デスクトップサイズ以上で display: flex になります（つまり横並びの表示になります）。( is-flex-desktopクラス )
以下は、デスクトップサイズ以下では表示されません。( is-hidden-touchクラス )
テキストのサイズと色を変更するクラス（viewport によって値を変えるクラスもある）
レスポンシブなカラムを作成する。
is-mobile を付けた場合header, main, footer タグ等と、どう組み合わせて使えばよいのか？複数要素を水平に並べて表示できる。
This username is available
This email is invalid
box を使っている。どこでも使えて便利。<ul> はstyle が付かないようになっている。
同様に、よくあるスタイルが変更されている要素があるが、元のスタイルで使いたい場合は、contentクラスを持った要素で囲めばよい。
content クラスの中に入れなくてもよい。| One | Two |
|---|---|
| Three | Four |
| Five | Six |
| Seven | Eight |
| Nine | Ten |
| Eleven | Twelve |
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
Jeff Atwood
John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
本ページの先頭に付けてある。
boxクラスを使えばよい。foo bar