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

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …