注意書き
自分用のメモなのでかなり雑です。初めてbulma使うので公式サイトを適当にまとめとく。英語は大嫌いなので超ガバ翻訳です。間違えてたら教えてください。
viewごとにレイアウトを分ける。今回はnewアクションだけ指定(自分用)
layout 'sample', only: :new
これでapplication.html.erbではなくnewメソッドだけsample.html.erbが適用
bulmaの紹介
- class="block"
-
MThe block element is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them:
class="block"同士を並べると間にスペースをつけていい感じに文章を並べれる。(上下にスペース) - class="box"
-
The box element is a simple container with a white background, some padding, and a box shadow.
なんかシンプルな白い容器でいい感じに空白つけつつ外側に影もつける。普通の白よりもより白い白になる。 - class="button"
- その名の通りボタンをつける。urlに飛ぶとaタグとかinoutタグとかbuttonタグにclassとしてつけれるよみたいなことが書いてある。
- class="content"
-
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag.
なんかよくわからんけどどんなタグでも大丈夫だぜ。とりあえず俺使っとけみたいな汎用性あるぜみたいな感じか？英文がよくわからんけど使うと両サイドをいい感じに空けてくれる - class="delete"
- ×ボタン。urlに飛ぶと通知とかメッセージにつけとくといいぜって書いてある。
- class="icon"
- その名のアイコンをつける。と思いきや違うぽい。Font Awesomeとかでアイコンを使うときこれで囲っとくとサイズ調整とか楽にできたりラグでアイコンが表示されるまで時間かかぅたときその空間はあけとくぜ(レイアウトが崩れるのを防ぐ)みたいな感じ多分
- class="image"
- iconのimageバージョン。Font Awesomeではなく画像バージョン
- class="notification"
- その名の通り通知。中にdeleteもいれろよって公式に書いてある。
- class="progress"
- 初学者の自分には使い方がよんでもよくわかならかぅた。データとかダウンロードした時の進捗状況を表すバーをつけれるらしい。
- class="table"
- これは公式見たほうが速そう。。tableタグにclassとしてつけてねってあとは公式から好きなの選ぶ
- class="tag"
- タグをつけれる
- class="title"
- bulmaはh1とかつけても大きさが変わらないようになってるのでtitle及びsubtitleのclassを使う。titleとsubtitleは組み合わせると距離を近づけてくれる。また組み合わせて使うときはなんとなくサイズ差が2になると見栄えが良いよとアドバイスも書いてあった。例えばtitle is-1とsubtitle is-3