<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="sec
Layout - Bulma を読んだ。 Bulma はサイトの幅を決めるコンテナー（.container）を持つ。どこでも使えるクラスだが、主に以下のクラスの子要素とし指定される。 .navbar .hero .section .footer コンテナーのサイズ $desktop、$widescreen、$fullhd とあり、それぞれブレークポイントから左右の余白（デフォルトでは 32px * 2 ）を引いた数値になっている。これらの数値は 12px または 16px で割り切れる数値になっている。 左にロゴ、右にナビゲーションのように、水平方向の配置を指定するためにレベルというのも用意されている。親要素に .level、子要素に .level-left と .level-right（右両側配置をしたいときに使う。なくてもいい）、孫要素に .level-item といった構成で使う。レ
Web Bulma (CSS フレームワーク) のサンプルページを作りました※当サイトにはプロモーションが含まれています。 概要Bulma というCSSフレームワークを使ったサンプルページを作りました。 Bulma は、以下の特徴を持つ CSSフレームワークです。 Flexbox をフルに活用している。シンプルなグリッドシステム学習が容易カスタマイズが簡単JavaScript は含まれていない。 Flexbox をフルに活用しているFlexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。（参考：CSS Flexible Box Layout Module Level 1） このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。 Bulma はこ
新しいプロダクトを作る際にnuxt.jsのデフォルトで選択できるBulmaがあったので使ってみました。 まずは公式ドキュメントを一通り読んで見る。コンセプトなどは難しいですが、流し呼んで２０分ぐらいでざっと見れるので全ページ見たほうが良いです。
There are several ways to get started with Bulma-extensions. You can either: Use npm to install the global Bulma-extensions package (which includes all the extensions) Use npm to install Bulma-extension individually Use the GitHub repository to get the latest development version Each extension contains a dist folder which includes all available files for integration into your project (example for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く