![見出し画像](https://assets.st-note.com/production/uploads/images/82210810/rectangle_large_type_2_18cbcc163f7f0ab0f4e2d9277cc9acb3.png?width=1200)
【ティラノビルダー】分岐ボタンを画面中央に配置する方法
![画像1](https://assets.st-note.com/production/uploads/images/57903632/picture_pc_b6eb89affdbc7c2dc0cf1ed52ff9c258.png?width=1200)
分岐ボタンを画面中央に配置します。
分岐ボタン全体の長さの内訳
![画像2](https://assets.st-note.com/production/uploads/images/57903714/picture_pc_7c56f97a9156fa229f67cd64da8b534c.png?width=1200)
分岐ボタン全体の長さは、
①テキストの長さ、
②余白(padding)、
③線(border)、
④余白(margin)の合計です。
①テキストの長さ
![画像3](https://assets.st-note.com/production/uploads/images/57904008/picture_pc_3b0669fc73b7bb2f3959886db4d7551a.png?width=1200)
②余白(padding)、④余白(margin)
分岐ボタンの余白の設定を調べるために、tyrano.cssを参照します。
![画像4](https://assets.st-note.com/production/uploads/images/57904384/picture_pc_a1013b0ab7c88dab9d119b0c38165c08.png?width=1200)
プロジェクト一覧を開き、ファイルのアイコンをクリックします。
![画像5](https://assets.st-note.com/production/uploads/images/57904576/picture_pc_a546d10be263f653ca8dd51a645afced.png?width=1200)
tyranoフォルダをクリックします。
![画像6](https://assets.st-note.com/production/uploads/images/57904579/picture_pc_73193328cab687666ca640ef72caddd8.png?width=1200)
tyrano.cssを開きます。
![画像7](https://assets.st-note.com/production/uploads/images/57904682/picture_pc_0e174b256baab0fc5c3508e455d9654d.png?width=1200)
tyrano.cssに、分岐ボタンの設定をしている項目があります。
その記述から、分岐ボタンの余白を計算します。
![画像11](https://assets.st-note.com/production/uploads/images/57905473/picture_pc_a5ba87ee41995619faa38a33dd999fb6.png?width=1200)
![画像8](https://assets.st-note.com/production/uploads/images/57904775/picture_pc_4b1f65d2a96f39386cc4fe6d96594372.png?width=1200)
③線
![画像9](https://assets.st-note.com/production/uploads/images/57905110/picture_pc_667c64239a8d4b10be5cf790eafff7f7.png?width=1200)
tyrano.cssに分岐ボタンの線について設定している項目があります。
その記述から、線の幅を求めます。
![画像10](https://assets.st-note.com/production/uploads/images/57905216/picture_pc_3fed111b60ea3110074329cd9ef4d4f0.png?width=1200)
⑤計算
![画像12](https://assets.st-note.com/production/uploads/images/57905562/picture_pc_96f6b053fa15a9d9657bf8e3bf67641c.png?width=1200)