ボタン作成で失敗したこと

こんばんは、有村です。
新年度を迎えても、実装でうんうん唸ってます。いつになったら立派になれるんだろうか。

さて、今日は備忘録としてボタン作成で失敗したことを残しておきたいと思いまーす!

何に失敗したかというと、ボタンに当てるCSSの選択と、HTML側の構造です。
(全然まだ最適解だとは思ってないのですが)

簡単に要所だけ書きますが、私こんな感じのソースを書いてました。

やりたかったのは、ボタンの中身を天地中央にするということ。
最初はline-heigetとpaddingを使っていたのですが、font-sizeとの兼ね合いもあったりとかで、「それだと高さを意識してボタン作るのが若干面倒だなぁ…」と思い、上のような形に作り変えました。

flexだとalign-itemsがあるじゃないですか。
そりゃ使うじゃないですか。
そしたらですよ。
実機(iPhone)で見たら崩れてた。

具体的にどう崩れていたかというと、ボタンの文言が思いっきり左に寄ってました。
普段はchromeのエミュレータで実装しているので、全く気付かなかったんですよね…。

なんでー!?って調べてみたら、どうやらブラウザのデフォルトスタイルとdisplay: flex;が干渉し合っており、flexのほうが競り負けているようだと知りました…。
いやらしいのがchromeは問題なく見れるということ。まだ見れてないですけど、IE11も大丈夫らしい。Edgeはダメだとかなんとか。

そこで有村は色々考えました。

1. かつてのpadding方式に戻す。
paddingを駆使して高さを設定するのはやはり面倒では?
高さを設定したいなら素直にheigetを使うべきじゃないか?
よって却下。

2. ボタンってもともと天地中央だから何もしなくてよくない?
わざわざflexを使った理由は、それがbuttonだけではなく、aタグなど他の要素でも使用されるため。
よって、buttonのデフォルトスタイルに頼ればいいや〜が使えない。
これも却下。

3. buttonがダメならinputは?
そもそも試していないけども、inputは空要素なのでbeforeやafterが使えなかったり、小回りが効かない時点で却下。

4. HTMLとCSSを書き換える

みたいな。要は間にspanをかませる。
デメリットとしては、本来ひとつで完結するはずなのに、buttonとspan(場合によってはaとspanなども)のようにHTML側の記述が増えてしまうということ…
けれども、現時点ではこれ以上の策は無さそうだし、「ボタンを配置する時はspanもセットで」というルールがあればいい話なのかなと思ったので、この案を採用しました。

form系はどうも痒いところに手が届かない感がありますね…
いつか「そんな日もあったね〜www」という時代が来ればいいのですが。
ひとまず締めとしては、Appleさん早くなんとかして!!!!

それでは、きょうはこのへんで。

ボタン作成で失敗したこと」への1件のフィードバック

  1. >CSSな人さん

    わー!CSSな人さんだ!お久しぶりです、こんにちは!
    返信遅れて大変失礼しました…そしてコメントありがとうございます!!

    最近、
    ・なんでbuttonの中にspanが居るんだ?もう少しなんとかならんのか?
    ・ていうかbuttonにflex当たらなければいいだけよな…だってbuttonは中身がデフォルトで天地中央にレイアウトされるし…
    ・ん?てことは、 :not 使えばいいんじゃないか?
    と思考が巡り試してみたところ、↑の方法がspanを使うより良さそうに思えたので、用済みのspanは抹殺しました!

    SASS側はこんな感じにしました。。

    %button
    display: block
    box-sizing: border-box
    padding: 0
    border-radius: 5px
    font-weight: bold
    text-align: center
    line-height: 1.0

    &:not(button)
    display: flex
    justify-content: center
    align-items: center

    体調があまり優れず、更新頻度は減ってしまっているのですが、
    「やっぱりボタン自身はw100p、h100pでサイズを持って、使う側がサイズを決めるべきだったよ…」の気付きも含めて、
    「ボタン作成で失敗したこと2」の記事を書こうと………書きたい!!と思います!!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です