質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1035閲覧

スマホで見ると、ボタンのサイズが変わってしまうので揃えたい

penpenland

総合スコア1

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/05/12 08:23

編集2022/05/16 16:35

前提

普段はライターとして働いているものです。
会社にデザイナーがおらず、CSS周りの相談ができる人が誰もいないので、こちらで相談させていただきます。

わかりにくい点や不手際などありましたら申し訳ありません。

実現したいこと

ワードプレス上でボタンを実装する際、画面をスマホサイズにするとサイズとデザインが変わってしまうので、揃えたいです。
ものすごく変でなければ、デザインが多少変わってしまっても問題ありません。

元々のCSSは、フリーのものを引っ張ってきました。
HTMLの表記は最初から最後まで変えていません。

HTML

1<a href="https://card-lab.com/link/mizuho/mizuho.html" class="btn btn-flat" target="_blank" rel="noopener"><span>公式サイトはこちら!</span></a> 2<a href="" class="btn btn-naibu" target="_blank" rel="noopener"><span>もっと詳しく知る</span></a>

CSS

1*, 2*:before, 3*:after { 4 -webkit-box-sizing: inherit; 5 box-sizing: inherit; 6} 7 8html { 9 -webkit-box-sizing: border-box; 10 box-sizing: border-box; 11 font-size: 62.5%; 12} 13 14.btn, 15a.btn, 16button.btn { 17 font-size: 1.6rem; 18 font-weight: 700; 19 line-height: 1.5; 20 position: relative; 21 display: inline-block; 22 padding: 1rem 4rem; 23 cursor: pointer; 24 -webkit-user-select: none; 25 -moz-user-select: none; 26 -ms-user-select: none; 27 user-select: none; 28 -webkit-transition: all 0.3s; 29 transition: all 0.3s; 30 text-align: center; 31 vertical-align: middle; 32 text-decoration: none; 33 letter-spacing: 0.1em; 34 color: #212529; 35 border-radius: 0.5rem; 36} 37 38a.btn-flat { 39 overflow: hidden; 40 41 padding: 1.5rem 6rem; 42 43 color: #fff; 44 border-radius: 0; 45 background: #000; 46} 47 48a.btn-flat span { 49 position: relative; 50} 51 52a.btn-flat:before { 53 position: absolute; 54 top: 0; 55 left: 0; 56 57 width: 150%; 58 height: 500%; 59 60 content: ""; 61 -webkit-transition: all 0.5s ease-in-out; 62 transition: all 0.5s ease-in-out; 63 -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); 64 transform: translateX(-98%) translateY(-25%) rotate(45deg); 65 66 background: #00b7ee; 67} 68 69a.btn-flat:hover:before { 70 -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); 71 transform: translateX(-9%) translateY(-25%) rotate(45deg); 72}

試したこと

現在の状況に至るまでにどのような段階を踏んだかリスト化すると、以下の通りです。

  • 同じデザインのボタンを二つとなり合わせて表示させたいので、タグを分けるために、CSS上の二つ目のボタンの名称を変更する

CSS

1*, 2*:before, 3*:after { 4 -webkit-box-sizing: inherit; 5 box-sizing: inherit; 6} 7 8html { 9 -webkit-box-sizing: border-box; 10 box-sizing: border-box; 11 font-size: 62.5%; 12} 13 14.btn, 15a.btn, 16button.btn { 17 font-size: 1.6rem; 18 font-weight: 700; 19 line-height: 1.5; 20 position: relative; 21 display: inline-block; 22 padding: 1rem 4rem; 23 cursor: pointer; 24 -webkit-user-select: none; 25 -moz-user-select: none; 26 -ms-user-select: none; 27 user-select: none; 28 -webkit-transition: all 0.3s; 29 transition: all 0.3s; 30 text-align: center; 31 vertical-align: middle; 32 text-decoration: none; 33 letter-spacing: 0.1em; 34 color: #212529; 35 border-radius: 0.5rem; 36 margin: auto; 37} 38 39a.btn-flat { 40 overflow: hidden; 41 42 padding: 1.5rem 6rem; 43 44 color: #fff; 45 border-radius: 0; 46 background: #5A8EE8; 47} 48 49a.btn-flat span { 50 position: relative; 51} 52 53a.btn-flat:before { 54 position: absolute; 55 top: 0; 56 left: 0; 57 58 width: 150%; 59 height: 500%; 60 61 content: ""; 62 -webkit-transition: all 0.5s ease-in-out; 63 transition: all 0.5s ease-in-out; 64 -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); 65 transform: translateX(-98%) translateY(-25%) rotate(45deg); 66 67 background: #d83473; 68} 69 70a.btn-flat:hover:before { 71 -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); 72 transform: translateX(-9%) translateY(-25%) rotate(45deg); 73} 74 75*, 76*:before, 77*:after { 78 -webkit-box-sizing: inherit; 79 box-sizing: inherit; 80} 81 82html { 83 -webkit-box-sizing: border-box; 84 box-sizing: border-box; 85 font-size: 62.5%; 86} 87 88.btn, 89a.btn, 90button.btn { 91 font-size: 1.6rem; 92 font-weight: 700; 93 line-height: 1.5; 94 position: relative; 95 display: inline-block; 96 padding: 1rem 4rem; 97 cursor: pointer; 98 -webkit-user-select: none; 99 -moz-user-select: none; 100 -ms-user-select: none; 101 user-select: none; 102 -webkit-transition: all 0.3s; 103 transition: all 0.3s; 104 text-align: center; 105 vertical-align: middle; 106 text-decoration: none; 107 letter-spacing: 0.1em; 108 color: #212529; 109 border-radius: 0.5rem; 110 margin: auto; 111} 112 113a.btn-naibu { 114 overflow: hidden; 115 116 padding: 1.5rem 6rem; 117 118 color: #fff; 119 border-radius: 0; 120 background: #00858A; 121} 122 123a.btn-naibu span { 124 position: relative; 125} 126 127a.btn-naibu:before { 128 position: absolute; 129 top: 0; 130 left: 0; 131 132 width: 150%; 133 height: 500%; 134 135 content: ""; 136 -webkit-transition: all 0.5s ease-in-out; 137 transition: all 0.5s ease-in-out; 138 -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); 139 transform: translateX(-98%) translateY(-25%) rotate(45deg); 140 141 background: #ee7800; 142} 143 144a.btn-naibu:hover:before { 145 -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); 146 transform: translateX(-9%) translateY(-25%) rotate(45deg); 147} 148 149.box { 150 margin: 2em auto; 151 padding: 1em; 152 width: 90%; 153 border: 1px solid #ccc; /* 枠線 */ 154 background-color: #fff; /* 背景色 */ 155 box-shadow: 1px 1px 2px #ccc; 156}
  • なぜか一つ目のボタンの仕様が変わってしまった

イメージ説明

  • 試しに二回書いていた共通のCSSを、二回目の記述だけ削除(以下の部分)

CSS

1*, 2*:before, 3*:after { 4 -webkit-box-sizing: inherit; 5 box-sizing: inherit; 6} 7 8html { 9 -webkit-box-sizing: border-box; 10 box-sizing: border-box; 11 font-size: 62.5%; 12} 13 14.btn, 15a.btn, 16button.btn { 17 font-size: 1.6rem; 18 font-weight: 700; 19 line-height: 1.5; 20 position: relative; 21 display: inline-block; 22 padding: 1rem 4rem; 23 cursor: pointer; 24 -webkit-user-select: none; 25 -moz-user-select: none; 26 -ms-user-select: none; 27 user-select: none; 28 -webkit-transition: all 0.3s; 29 transition: all 0.3s; 30 text-align: center; 31 vertical-align: middle; 32 text-decoration: none; 33 letter-spacing: 0.1em; 34 color: #212529; 35 border-radius: 0.5rem; 36 margin: auto; 37}
  • よく分からないけどデザイン・サイズが揃って上手くいく

イメージ説明
ちなみに、このボタンもそもそものデザインとは違ってしまっているのですが、あまり問題ではないのでスルーしました。
本来は、以下のようなデザインになるはずでした。
デザインは違っても、カーソルが上に来ると色が変わる仕様は問題なく動いています。
イメージ説明

  • ただ、このままだとスマホサイズでページを表示したときにサイズが全然違うことが判明する

イメージ説明

検証をしてみても、どうしてサイズが違ってしまうのか分かりません。
検証モードで色々比較してみましたが、サイズ以外の違いは見当たりませんでした。
イメージ説明
イメージ説明

また、試しに削除したCSSをもう一度追加してみましたが、サイズも仕様も変わってしまいました。
イメージ説明

補足情報

ワードプレスで利用しているテーマは、WordPress 5.9.3 (賢威8.0(子テーマ) テーマ)のようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2022/05/13 00:24

状況がよくわからないです。 とりあえず、HTMLがないと問題が再現できなさそうです。
penpenland

2022/05/13 03:20

大変失礼しました。 こちらの利用も初めてなので、勝手がわからず申し訳ありません。 HTMLの記載は以下の通りです。 <a href="https://card-lab.com/link/mizuho/mizuho.html" class="btn btn-flat" target="_blank" rel="noopener"><span>公式サイトはこちら!</span></a> <a href="" class="btn btn-naibu" target="_blank" rel="noopener"><span>もっと詳しく知る</span></a>
Lhankor_Mhy

2022/05/13 03:56

解決したい問題は「スマホサイズでページを表示したときにサイズが全然違うこと」でいいですか?
penpenland

2022/05/13 05:07

そうです。 PCとスマホどちらで見ても、二つのボタンのサイズとデザインが一緒であってほしいです。 PCとスマホの表示両方をそろえる必要はありません。
guest

回答1

0

ベストアンサー

 テキストが折り返しているのが原因だと思いますので、テキストを折り返さないようにするのがいいかと思います。

 たとえば:

  • テキストを短くする
  • フォントサイズを小さくする
  • 字詰めをしてスペースを稼ぐ
  • word-break: keep-allなどで強制的に折り返しを禁止する
  • width: max-contentなどでボタンの幅を強制的に大きくする

投稿2022/05/13 04:09

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

penpenland

2022/05/13 05:49

アドバイスありがとうございます。 挙げていただいたkeep-allを試したところ、デザインは改善されましたが縦幅がなぜか太くなってしまいました。 https://gyazo.com/d7300c160d4c6c2f2840566545d958be これをそろえることはできないでしょうか? また、検索しましたがイマイチ分からなかったのでお伺いしたいのですが、 keep-allを入れる場所は .btn, a.btn, button.btn { } のカッコ内で問題なかったでしょうか? 大変申し訳ありませんが、ご回答いただけますと幸いです。 どうぞよろしくお願いいたします。
Lhankor_Mhy

2022/05/13 07:17

スクリーンショットを拝見しましたが、縦幅は同じように見えました。 どのように計測をしたのか、教えていただけますか?
penpenland

2022/05/13 07:55

私には上の方が縦幅が太く見えるのですが、きちんと計測したところ確かに縦幅は同じでした。 大変失礼いたしました。 横幅は文字数が同じでないと、サイズをそろえることは難しいでしょうか? もし可能でしたら、ご教示いただけますと幸いです。 どうぞよろしくお願いいたします。
Lhankor_Mhy

2022/05/13 08:28

width で横幅を指定するのではだめですか?
penpenland

2022/05/16 07:35

できました!!! 本当にありがとうございます!!! 学ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問