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

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

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

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5d2ce5 …