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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

252閲覧

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

satoshi1111

総合スコア13

button

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/09/07 07:44

前提・実現したいこと

同じリンク先へ飛ぶ同じ形のボタンを、1つのページに4つ実装しているのですが、
2つだけ、ボタンを
CSSはHTML上に書いていて、どのボタンも
「class="tamago"」
という名前でつなげています。

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

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

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

どうかよろしくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2018/09/07 08:25

コードはteratail内のコードブロックにて提示してください。入りきらない量の場合、その旨を記載し、最低限必要な箇所だけでもご提示ください。なぜかというと何かでそのコードを掲載した外部サービスが何かで参照できなくなった場合、コードが確認できなくなるためです
x_x

2018/09/10 03:21

どのようなコードを書いたのでしょうか?
guest

回答2

0

ベストアンサー

返信のコード拝見しました。
marginが指定されているのでninjinの指定ではmargin:0 0 0 auto;を指定するようにしています。
指定の仕方として(上 右 下 左)の順番なので、左でautoを指定することで右寄りにした感じです。
大きさなどはwidthやfont-sizeでの変更です。

もし、これで動かないということであれば、変更後のコードを見せてもらえないと原因特定は不可能ですので、変えたコードを張り付けて下さい。

css

1// 変更と書いているところが変更点 2a.ninjin { 3position: relative; 4display: block; 5width: 200px; // 変更 6margin: 0 0 0 auto; // 変更 7max-width: 200px; // 変更 8padding: 0.5em; 9text-align: center; 10font-weight: bold; 11text-decoration: none; 12color: #FFF; 13text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 14background: #e6b422; 15transition: .4s; 16border-radius: 4px; 17font-size: 13pt; // 変更 18}

投稿2018/09/10 02:55

mikan_s4n

総合スコア377

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

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

satoshi1111

2018/09/10 03:53

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

0

改変元はリンク先のソースとしても、改変後のソースを教えて頂けないと、何がどう問題があるかの指摘や回答ができません……。
普通にcssの書き方をミスしているのか、仕様的なところでコケているのか判別不能なので、なんとも……。

投稿2018/09/07 07:53

mikan_s4n

総合スコア377

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

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

satoshi1111

2018/09/08 02:02

ご回答ありがとうございます。 それではURL:画像は架空のものにしつつ HTMLを全て貼らさせてもらいます! <!DOCTYPE html> <html lang="ja"> <html> <head> <meta charset="utf-8"> <title>駄菓子</title> <style type="text/css"> a.cp_btn { position: relative; display: block; width: 400px; margin: auto; max-width: 500px; padding: 0.5em; text-align: center; font-weight: bold; text-decoration: none; color: #FFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); background: #e6b422; transition: .4s; border-radius: 4px; font-size: 17pt } a.cp_btn:hover { text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); transition: .4s; } </style> </head> <body> <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> <img class="img-responsive maximage" src="http://www.amu.jpg" alt="" width="1000" height="704" /> <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> <img class="img-responsive maximage" src="http://www.nroke.jpg" alt="" width="1000" height="699" /> <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> <img class="img-responsive maximage" src="http://www.nde-ta.jpg" alt="" width="1000" height="828" /> <a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> </body> </html> これは今は全て、同じ形・位置のボタンとなっていますが、 これから「2番目と3番麺のボタン」をデザインはそのままに、 小さくして右寄りに配置したいと思っております。 どうかよろしくお願い致します。
satoshi1111

2018/09/08 02:09

すみません。 「class="tamago"」ではなく、「class="cp_btn"」で結んでいました。 失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問