Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

kintone モバイル版で、行単位を目立たせる

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

kintoneのPC版で、フォームの右にラベルで注釈を付けるのはよくあると思う。

これをスマートフォンから見ると、フォームとラベルが同レベルのアイテムとして縦にならび、罫線まで入るので、どこからどこまでが1行なのかわからなくなってしまう。

CSSでちょいといじってみた。

.row-gaia {
  border-bottom: 3px solid #dadada;
  padding: 0.5em;
}

.control-gaia {
  border-bottom: none;
  padding: 0em 0.5em 0.5em;
}

こうすると行間に罫線が入るようになり、アイテム間の罫線はなくなる。

今回は注釈なので、アイテム間も少し間隔を詰めてみた。

だいぶ見やすくなったと思う。