skillup

技術ブログ

デザイン

bulmaフレームワークに関して

投稿日:

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。

https://bulma.io/documentation/

Columns

  • 基本、columns+columnで使う。
  • columnは基本的にブロック分割で使う。全ての幅が均等になる
  • 自動分割やレスポンシブ時の縦並びをコントロールできる。切り替えポイントはコントール化。
  • 幅コントロールはis-half,is-4などで分割ができる。is-offset–8などはmargin-leftに相当。is-centerdなどセンタリングもできる。
  • is-4などの幅どりはcolumn+is-4など単独のクラスの付与でも使用できる。is-nはcolumnの時のみ使用ができる(そもそもグリッドで使う用法。)

Modifiers

  • ボタン化(主にリンクの状態変化)
  • is-marginless,is-paddinglessなどの幅コントロール
  • 全要素への色変化ができる。
  • 特定端末での変化も可能。

Layout

  • containerに関しては主にheaderやsectionなどの大きいブロックないで使われ、自動的にセンタリングされる
  • containerに関しては主にheaderやsectionなどの大きいブロックないで使われ、自動的にセンタリングされる端末ごとに変えたりもできる
  • level あらゆる要素を水平にすることができるプロパティ 密集地区の横並びはこれがいいかも。サンプルもかなりある(*重要)
  • media-object 密集地区の並びだが特に画像+本文などで効果を発揮
  • hero 主にヘッダー部分で使う(自動的に横幅いっぱいになる、トップナビサンプル多数)。
  • title 読んで字のごとくページのタイトルで使う。

 

 

 

-デザイン
-,

執筆者:


  1. […] 前回に続き、bulmaフレームワークのCSSのformがらみに関して。 […]

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

アーカイブ