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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1407閲覧

コード内容の仕組みに関して解説をお願いします。

6111-debutant_.

総合スコア15

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/06/16 12:03

リンク内容イメージ説明

<質問①>
添付写真でハイライトされている箇所において、ABOUTというメニューにカーソルを合わせると文字の左右に罫線がにじみ出てきます(アニメーションのような挙動)。この仕組みを教えてください。

特にこの罫線の出どころがわかりません。
content:"";は空白で、アンカータグのアンダーラインとは関係無さそうで特定できません。

また、検証ツールで表示されているposition:relative;は、この場合どのような役目を果たしているのでしょうか?

<質問②>
添付写真のRODS Lures Othersの3箇所は、カーソルを合わせると背景画像が拡大されたような動きを見せます。これはJavaScriptの効果でしょうか?

よろしくお願い致します。

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

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

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

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

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

guest

回答2

0

cssの:hoverの色々な使い方 | おーとえすとさいと

デベロッパーツールの右上のほうにも:hovというのがあるので、確認を取ってください。

投稿2017/06/16 13:02

toutou

総合スコア2050

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

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

6111-debutant_.

2017/06/16 13:10

:hovに特化した検証もできるのですね。 アドバイスありがとうございました。
guest

0

ベストアンサー

基礎的なCSSの知識が不足しているように見えます。なにか一冊本を買って体系的に学習するのがよいと思います。

質問1:金色のハイフンのような飾りはその検証ツールに表示されているように background-color で色づけられています。アンダーライン(text-decoration)は関係ありません。

質問2:いいえ、CSSのみで構成されています。質問①の金色罫線と同様に :hover 疑似クラスを使ってアニメーションしています。

投稿2017/06/16 12:51

miyahan

総合スコア3095

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

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

6111-debutant_.

2017/06/16 13:09

貴重なアドバイスありがとうございます。 基礎の参考書を数冊こなしたのですが、今回のCSSの使い方は初めて目にしました。 アドバイスを元にもう一度検証ツールで確認してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問