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

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

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

HTMLで用いる<button>タグです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

1583閲覧

4つあるうちの2つのボタンを小さくして位置を右端にしたいです。

satoshi1111

総合スコア13

button

HTMLで用いる<button>タグです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/09/08 02:19

編集2018/09/08 03:08

4つあるうちの2つのボタンを小さくして位置を右端にしたいです。

同じリンク先へ飛ぶ同じ形のボタンを、1つのページに4つ実装しているのですが、
「2番目と3番麺のボタン」をデザインはそのままに、
小さくして右寄りに配置したいと思っております。

CSSはHTML上に書いていて、どのボタンも
「class="cp_btn"」
という名前でつなげています。

そこで、
いじりたいボタンのクラス名を「class="ar_btn"」に変えて、
CSSを「a.ar_btn {」
として今あるCSS「a.cp_btn {」
の下に中身は「class="cp_btn"」のCSSをコピーして貼り付けました。

ですが、いじりたいボタンにはCSSは反映されませんでした。

どう記述すればいいのかご教示願えないでしょうか?

ボタンの形はこのページの「ふわっと光るボタン」です。
HTMLもCSSもこの通りです。
https://copypet.jp/417/

↓は「URL:画像は架空のもの」にしつつ
HTMLを全て貼らさせてもらっています。
どうぞよろしくお願いいたします。

HTML/CSS

1<!DOCTYPE html> 2<html lang="ja"> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>駄菓子</title> 7 8<style type="text/css"> 9a.cp_btn { 10position: relative; 11display: block; 12width: 400px; 13margin: auto; 14max-width: 500px; 15padding: 0.5em; 16text-align: center; 17font-weight: bold; 18text-decoration: none; 19color: #FFF; 20text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 21background: #e6b422; 22transition: .4s; 23border-radius: 4px; 24font-size: 17pt 25} 26a.cp_btn:hover { 27text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 28transition: .4s; 29} 30 31 32 33 34 35 36a.ar_btn { 37position: relative; 38display: block; 39width: 400px; 40margin: auto; 41max-width: 500px; 42padding: 0.5em; 43text-align: center; 44font-weight: bold; 45text-decoration: none; 46color: #FFF; 47text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 48background: #e6b422; 49transition: .4s; 50border-radius: 4px; 51font-size: 17pt 52} 53a.cp_btn:hover { 54text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 55transition: .4s; 56 57 58 59 60 61 62 63</style> 64</head> 65<body> 66 67<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 68 69<img class="img-responsive maximage" src="http://www.amu.jpg" alt="" width="1000" height="704" /> 70 71<a href="http://www.url/#okashi" target="_blank" class="ar_btn">小さくして右寄りにしたいボタン</a> 72 73<img class="img-responsive maximage" src="http://www.nroke.jpg" alt="" width="1000" height="699" /> 74 75<a href="http://www.url/#okashi" target="_blank" class="ar_btn">小さくして右寄りにしたいボタン</a> 76 77<img class="img-responsive maximage" src="http://www.nde-ta.jpg" alt="" width="1000" height="828" /> 78 79<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 80 81 82</body> 83</html>

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

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

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

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

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

kei344

2018/09/08 02:44

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
satoshi1111

2018/09/08 06:33

回答ありがとうございます。どうかHTMLを囲まさせてもらいました。どうかよろしくお願い致します。
guest

回答2

0

「とりあえず右で小さく」するなら。

CSS

1a.ar_btn { 2position: relative; 3display: inline-block;/*ADD*/ 4float:right;/*ADD*/ 5/*display: block; 6width: 400px;*/ 7margin: auto; 8max-width: 500px; 9padding: 0.5em; 10text-align: center; 11font-weight: bold; 12text-decoration: none; 13color: #FFF; 14text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 15background: #e6b422; 16transition: .4s; 17border-radius: 4px; 18/*font-size: 17pt*/ 19font-size: 10pt/*ADD*/ 20} 21a.ar_btn:hover {/*ADD*/ 22/*a.cp_btn:hover {*/ 23text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 24transition: .4s; 25}/*ADD*/ 26```**動くサンプル:**[https://jsfiddle.net/f9Lvqrza/](https://jsfiddle.net/f9Lvqrza/)

投稿2018/09/08 07:33

kei344

総合スコア69366

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

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

0

ベストアンサー

表示エリア全体をdiv要素で囲って、そこでは、幅の指定と
float:left;を指定しています。
a要素は全てfloat:right;を効かせることで外側のdiv要素の
右端に一致するようにしています。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>駄菓子</title> 7 8 <style type="text/css"> 9 html, 10 body { 11 width: 100%; 12 } 13 14 div { 15 width: 100%; 16 } 17 18 .btn-area { 19 width: 1000px; 20 /* left: 左寄せ right: 右寄せ */ 21 float: left; 22 /* floatをコメントアウトした場合、中央 */ 23 margin: 0 auto; 24 } 25 26 a.cp_btn { 27 position: relative; 28 float: right; 29 display: block; 30 width: 400px; 31 margin: auto; 32 max-width: 500px; 33 padding: 0.5em; 34 text-align: center; 35 font-weight: bold; 36 text-decoration: none; 37 color: #FFF; 38 text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 39 background: #e6b422; 40 transition: .4s; 41 border-radius: 4px; 42 font-size: 17pt 43 } 44 45 a.cp_btn:hover { 46 text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 47 transition: .4s; 48 } 49 50 a.ar_btn { 51 position: relative; 52 float: right; 53 display: block; 54 width: 400px; 55 margin: auto; 56 max-width: 500px; 57 padding: 0.5em; 58 text-align: center; 59 font-weight: bold; 60 text-decoration: none; 61 color: #FFF; 62 text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 63 background: #e6b422; 64 transition: .4s; 65 border-radius: 4px; 66 font-size: 17pt 67 } 68 69 a.ar_btn:hover { 70 text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 71 transition: .4s; 72 } 73 </style> 74</head> 75 76<body> 77 <div class="btn-area"> 78 <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 79 <img class="img-responsive maximage" src="http://www.amu.jpg" alt="" width="1000" height="704" /> 80 <a href="http://www.url/#okashi" target="_blank" class="ar_btn">小さくして右寄りにしたいボタン</a> 81 <img class="img-responsive maximage" src="http://www.nroke.jpg" alt="" width="1000" height="699" /> 82 <a href="http://www.url/#okashi" target="_blank" class="ar_btn">小さくして右寄りにしたいボタン</a> 83 <img class="img-responsive maximage" src="http://www.nde-ta.jpg" alt="" width="1000" height="828" /> 84 <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 85 </div> 86</body> 87 88</html>

投稿2018/09/08 02:53

編集2018/09/08 09:45
s4i

総合スコア139

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

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

satoshi1111

2018/09/08 06:19

回答ありがとうございます。 右に寄せる以前に、この状態ですと2番目と3番目が文字とリンクだけで、ボタンで表示されないのです。
s4i

2018/09/08 09:45

解答のソースコードを写真を入れた状態で動作した物に変えました。
satoshi1111

2018/09/10 03:54

無事解決しました。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問