![見出し画像](https://assets.st-note.com/production/uploads/images/106992377/rectangle_large_type_2_4ae87e4888c389f94200ef139e4eeac0.png?width=1200)
【ティラノビルダー】テキスト入力ボックスのデザインを変更する方法
![](https://assets.st-note.com/img/1685526037187-MavlSHCFm2.png?width=1200)
ティラノビルダーでテキスト入力ボックスのデザインを変更する方法について解説します。
①tyrano.cssファイルを開く
![](https://assets.st-note.com/img/1685524065242-QvqalOIcsn.png?width=1200)
画面左上のプロジェクト名をクリックします。
![](https://assets.st-note.com/img/1685524224790-prnxyqmUGS.png?width=1200)
フォルダが開かれるので、矢印のアイコンをクリックします。
![](https://assets.st-note.com/img/1685524722136-EvLpDDEoqG.png?width=1200)
tyranoフォルダをクリックします。
![](https://assets.st-note.com/img/1685524733570-AbxkApiHV3.png?width=1200)
tyrano.cssファイルをメモ帳等で開きます。
②tyrano.cssファイルの編集
![](https://assets.st-note.com/img/1685524854898-NSqysd4eKO.png?width=1200)
tyrano.cssファイルが開かれました。
![](https://assets.st-note.com/img/1685525096900-usYD43dlUC.png?width=1200)
赤線の位置までスクロールします。
![](https://assets.st-note.com/img/1685525397226-fNEZDi3OXV.png?width=1200)
下記のコードを貼り付けます。
border: 10px solid #ff0000;
【コードの解説】
![](https://assets.st-note.com/img/1685525731345-el9CAHo1Pq.png?width=1200)
上記の数値をお好みで変更してください。
今回は、枠の太さを10px、枠の色を赤(#ff0000)にしました。
上記のサイト等で、お好きな色を探せます。
最後に必ず上書き保存をしてください。
これで、テキスト入力ボックのデザインを変更する手順は完了です。
以上で解説を終わります。おつかれさまでした。
この記事が気に入ったらサポートをしてみませんか?