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 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

tableのレイアウトに関して

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

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …