Javascriptで作成したボタンを下揃え、もしくは中央揃えにしたいです。

kintone カスタマイズ
1

現在、スペースフィールド(id=test)にボタン(Button)を以下のように設置していますが、隣のフィールド(文字列1行)と上揃えになっており、フィールドのタイトルの横にあるようになっています。見た目と操作性を踏まえると、フィールドの入力欄の横に置きたいので、下揃え(または中央揃え)にしたいのですが、どのようにすれば良いでしょうか。

kintone.app.record.getSpaceElement(‘test’).appendChild(Button);

CSSの知識がありませんので、それを踏まえてご教示いただけると幸いです。
よろしくお願いいたします。

2

NSさん

ボタンにマージンを当てるのが容易かと思います。

Button.style.marginTop = '33px';

縦方向に揃える場合は、flexbox・inline-blockとvertical-align・positionあたりを使うのが正攻法ですが、kintoneのフィールドにはfloatが効いていたりするので難易度は高いかと思います。

3

江田篤史様

ご教示いただきありがとうございます。
下にずらすことが出来ました！

なお、同様なやり方で、ボタンの表示文字の大きさも変えられるのでしょうか？

追加の質問ですみません。

4

NSさん

CSSのfont-sizeプロパティで指定できます。

Button.style.fontSize ='50px';

差し出がましいかとは思いますが、「CSS 文字の大きさ」などでGoogle検索すると情報が出てくるので、こちらでの質問より早く情報にたどり着けるかと思います。
CSSでプロパティ名がkebabケースとなっているものは、lower camelケースにすることで、JavaScript内で指定することができます。

CSS

Buttonのセレクタ {
margin-top: 33px;
font-size: 50px;
}

↓

JavaScript

Button.style.marginTop ='33px';
Button.style.fontSize ='50px';
5

江田篤史様

ご丁寧にありがとうございます！
非常に助かりました。

デフォルトの文字サイズより小さくできませんでしたが、自力で調べてみようと思います。

ありがとうございました。

6

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。