CSSフレームワーク一覧

Bulma チートシート [CSSフレームワーク ブルマ]

CSSフレームワークのBulmaとは Bulmaは、オープンソースで開発されている無料のCSSフレームワークです。 レスポン...

記事を読む

Bulma 入門 Tips 使い方 日本語 ドキュメント [CSSフレームワーク]

当ブログでは、CSSフレームワークの「Bulma」の使い方を日本語ドキュメントとしてまとめています。 Bulmaの学習、クラスのリ...

記事を読む

Bulmaのクラス(部品)を組み合わせてWebページを作成する

今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。 ここでは、以下のペー...

記事を読む

Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]

Bulmaには、viewport(ビューポート)の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されていま...

記事を読む

Bulmaのタイポグラフィヘルパー Typography helpers [CSSフレームワーク]

Webページでは、ケースに合わせて様々なスタイルのフォントを使用します。 Bulmaには、テキストのフォントサイズや太さをはじ...

記事を読む

Bulmaのスペーシングヘルパー Spacing helpers [CSSフレームワーク]

Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。 今回は、スペースを簡単に設定できるBu...

記事を読む

Bulmaのタイル Tiles [CSSフレームワーク]

Windowsのスタートメニューをクリックすると表示されるタイルは、Windowsを使っているユーザーの方であれば、一度は目にしたこ...

記事を読む

Bulmaのコンテナ Container [CSSフレームワーク]

Webページでは、水平方向に左寄せではなく、中央に要素(ブロック)を配置したい場合があります。 Bulmaには、水平方向の中央...

記事を読む

Bulmaのフッター Footer [CSSフレームワーク]

Webページでは、ヘッダーと共にフッターを設けるのが一般的です。 Bulmaにはフッターを配置するためのクラスが用意されていま...

記事を読む

Bulmaのセクション Section [CSSフレームワーク]

Webページでは、ページ内の一定の範囲を見出し(h1~h6)ごとや、何らかの区切り、かたまりなどで分けます。 これをセクションと言...

記事を読む

Bulmaのヒーローバナー Hero Banner(Header) [CSSフレームワーク]

Webページをデザインしていると、横幅いっぱいに広がったバナーを配置したい時があります。 Bulmaには、このようなバナーを配...

記事を読む

料理のレシピサイトで使えそうなスタイル [CSSフレームワーク Bulma]

CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することがで...

記事を読む

住所情報を入力するコントロールボックス [CSSフレームワーク Bulma]

CSSフレームワークのBulmaには、入力フォームのスタイルを設定するための様々なクラスが用意されています。 今回は、Bulm...

記事を読む

ログイン情報(ユーザーID、パスワード)を入力するコントロール [CSSフレームワーク Bulma]

CSSフレームワークのBulmaを利用することで、WebページのUIを簡単に実装することができます。 今回は、Bulmaを使っ...

記事を読む

Bulma テキストと背景の色を指定するカラーヘルパー一覧 Color helpers [CSSフレームワーク]

Bulmaには、テキストの前景色(fore color)や背景色(back ground color)を指定するためのクラスが用意さ...

記事を読む