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

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

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

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

CSS

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

解決済

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

penpenland
penpenland

総合スコア1

WordPress

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

CSS

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

1回答

-1評価

0クリップ

141閲覧

投稿2022/05/12 08:23

編集2022/05/16 16:35

前提

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

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

実現したいこと

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

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

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>

CSS

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; } .btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; } a.btn-flat { overflow: hidden; padding: 1.5rem 6rem; color: #fff; border-radius: 0; background: #000; } a.btn-flat span { position: relative; } a.btn-flat:before { position: absolute; top: 0; left: 0; width: 150%; height: 500%; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); transform: translateX(-98%) translateY(-25%) rotate(45deg); background: #00b7ee; } a.btn-flat:hover:before { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); }

試したこと

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

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

CSS

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; } .btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; margin: auto; } a.btn-flat { overflow: hidden; padding: 1.5rem 6rem; color: #fff; border-radius: 0; background: #5A8EE8; } a.btn-flat span { position: relative; } a.btn-flat:before { position: absolute; top: 0; left: 0; width: 150%; height: 500%; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); transform: translateX(-98%) translateY(-25%) rotate(45deg); background: #d83473; } a.btn-flat:hover:before { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; } .btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; margin: auto; } a.btn-naibu { overflow: hidden; padding: 1.5rem 6rem; color: #fff; border-radius: 0; background: #00858A; } a.btn-naibu span { position: relative; } a.btn-naibu:before { position: absolute; top: 0; left: 0; width: 150%; height: 500%; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); transform: translateX(-98%) translateY(-25%) rotate(45deg); background: #ee7800; } a.btn-naibu:hover:before { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); } .box { margin: 2em auto; padding: 1em; width: 90%; border: 1px solid #ccc; /* 枠線 */ background-color: #fff; /* 背景色 */ box-shadow: 1px 1px 2px #ccc; }
  • なぜか一つ目のボタンの仕様が変わってしまった

イメージ説明

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

CSS

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; } .btn, a.btn, button.btn { font-size: 1.6rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; margin: auto; }
  • よく分からないけどデザイン・サイズが揃って上手くいく

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

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

イメージ説明

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

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

補足情報

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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とスマホの表示両方をそろえる必要はありません。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

CSS

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