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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

Q&A

解決済

2回答

3381閲覧

CSS ボタンにマウスオーバー時ボーダーにエフェクトをかける

sem2012sp_a

総合スコア49

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

0グッド

0クリップ

投稿2015/08/06 03:06

編集2015/08/06 03:07

このサイトにあるTwitter・RSSなどへのリンクボタンのように、マウスカーソルを合わせた時にボーダーがボタンの周りを回転?移動?するようにしようと思い、CSSを書いてみたのですが思うように動きません。

まず、「btn__box」という名前のボタンを作成し、マウスを合わせるとボタンの背景と文字の色が変わる処理まではできたのですが、ボーダーをアニメーションで移動させる処理がうまくいきません。

このサイトを参考にコードを書いてみたのですが幾つか問題が発生しました。
まず、 HTML側で<a>タグで囲む必要があるのですが、そうするとAタグで囲んである文字にカーソルを合わせた時にしか4つ全てのボーダーが動いてくれません。(.btn__box a:before)で書いていない残り2つのボーダーは動きます)
文字にカーソルを合わせなくても、ボタンの端にカーソルを合わせただけで、全てのボーダーが動くようにしたいです。
あと、できれば<a>タグは使わずに

HTML

1 <p class="btn__box" input type="submit" value="" onclick="location.href='http://www.yahoo.co.jp/'">

このようなHTMLでいけるようにしたいです。

CSS初心者でよくわからず、困っています。
どなたかお力をお貸しください。

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

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

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

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

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

edo_m18

2015/08/06 03:25

a要素を使いたくない理由はなんでしょうか? 動作を見るとただのリンクなので、この場合はa要素を使うのが正しいと思いますが・・・。
sem2012sp_a

2015/08/06 03:37

a要素を使ってもいいのですが、ボーダーが動く条件をa要素部分だけでなくボタン全体にしたいです。 あと、a要素だと青文字?になって下線もでてしまうのでそれを消すのがめんどくさいなと思ったからです。
edo_m18

2015/08/06 04:10

なるほど。それであればCSSで下線の削除と色を変更するのがよさそうです。 それから、a要素以外を想定しているのであれば入れ子になる要素にclass名を付けて、それらを含めてひとつのコンポーネントとして扱うようにしておけば、中身の要素に惑わされずに実装できるかと思います。
guest

回答2

0

参考としてリンクされているURLでは
a::before
といった形でaタグに対してCSSの指定があり、それらが集まってボーダーの動作をつけているかと。
(アニメーションに関する記述もありますし)
HTMLの文法的にaタグを用いた方が良いように思うのですがなぜ使用したくないのでしょうか?

また質問文にあるHTMLはめちゃくちゃすぎて「CSSが……」とかそういった問題以前かと。
可能であれば現在作業中のソースコードを載せておいた方が多くの意見を得られるものと考えます。

投稿2015/08/06 12:44

Cf_cwd

総合スコア730

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

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

sem2012sp_a

2015/08/07 00:56 編集

回答ありがとうございます。 あれから、CSSに色々追記して思うように動作させることができました。 HTMLも確かにこれだとめちゃくちゃですね
guest

0

自己解決

すいません、CSS初心者すぎて<a>タグにCSSを入れたらボタンみたいに扱えることを理解しておりませんでした。
CSS+Aタグで色々やることで解決しました。
今となっては何を聞きたいのかわからない変な質問ですので、本当は質問削除したいのですができないようなので自己解決とします。

投稿2015/08/07 00:52

sem2012sp_a

総合スコア49

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問