前提
普段はライターとして働いているものです。
会社にデザイナーがおらず、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(子テーマ) テーマ)のようです。
回答1件
あなたの回答
tips
プレビュー