skillup

技術ブログ

デザイン

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

投稿日:

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

ソースはこちら

メモ的に。

  • controlはinput,select,textareaなどをwrappingする要素。通常だとあまりその効果は見えないが、後述する横並びの時に均等なmarginをとったりするなど他のクラスとの合わせ技で効果を発揮する。自動的につけてしまってもいいかも。
  • field通常はlabel,inpuの外側からつける場合、下にmarginを自動的に取る。field is-groupedで内部要素を一気にflexにできる。この時controlがあれば同一のmarginを取る
  • field-label,field-bodyは横に並び、なおかつflex-growを1:5で割り合てる。
  • field is-groupedにした場合、並べる要素に文字列などのインラインがある場合は、controlとinline-iconをspanなどに付与してあげると、綺麗に並び(marginが均等)、なおかつ縦中央も決まる(align-item:center)。
  • ボタンなども.control>.buttonを使うとやはり均等に並べることができる
  • selectは.control>.select>selectという並びで配置。文字列はcontrol+inline-iconを使うと綺麗に並ぶ。
  • class=labelは太字+display:block。

-デザイン
-

執筆者:


comment

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

関連記事

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

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

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

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …