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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

907閲覧

float rightが効きません

kimu05

総合スコア23

CSS3

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/05 07:46

編集2021/07/05 10:11

ハンバーガーメニューの隣に画像を配置し、リンクを飛ばしたいのですが
float: rightが効きません。
CSSのどのあたりが誤っていますでしょうか?
宜しくお願い致します。
イメージ説明

CSS

.onlinelink{ width: auto; float: right; position: fixed; margin-right:20px; } .onlinelink img{ position: absolute; } /*gnav ハンバーガーメニュー*/ .gnav{ background: rgba(0,0,0,0.8); display: none; height: 100%; position: fixed; width: 100%; z-index: 98; } .gnav__wrap{ align-items:center; display: flex; height: 120%; justify-content: center; position: absolute; width: 100%; } .gnav__menu__item{ list-style: none; } .gnav__menu__item a { color: #FFF; font-size: 1em; display: block; width: 100%; padding: 8px 30px 8px 30px; border: 1px solid; text-decoration: none; transition: .5s; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-align: center; margin: 15px 0 15px 0; } .gnav__menu__item a:hover{ color: #666; }

html

<div class="header"> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--center"></span> <span class="menu__line menu__line--bottom"></span> </a> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <div id="menu_sns"> <div class="container"> <div class="row"> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/A.png" alt=""></a> </div> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/B.png" alt=""></a> </div> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/C.png" alt=""></a> </div> </div> </div> </div><!--menu_sns end--> <li class="gnav__menu__item"><a href="/">トップ</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo04">AAAAAA</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo05">BBBBBB</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo06">CCCCCC</a></li> </ul> </div><!--gnav-wrap--> </nav> </div><!--header end--> <div class="onlinelink"><img src="img/kari.jpg" alt=""></div>

イメージ説明

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

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

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

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

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

yambejp

2021/07/05 07:58

ハンバーガーメニューはどうなっているのですか?
kimu05

2021/07/05 08:01 編集

ハンバーガーメニューのCSSでしょうか? 本文に追記します!
kimu05

2021/07/05 08:12

追記完了いたしました!
kimu05

2021/07/06 06:45

すみません! rightを使うことで解決いたしました。 お騒がせいたしました!
guest

回答1

0

ベストアンサー

ひとまず、打ち間違いのようです。

.onlinelink.online

または、

class="online"class="onlineLink"

投稿2021/07/05 09:26

Lhankor_Mhy

総合スコア36158

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

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

kimu05

2021/07/05 10:13 編集

ありがとうございます。 失礼いたしました!! 修正したのですがfloatrightは効かずでした。。
kimu05

2021/07/06 06:47

すみません! rightを使用すると解決いたしました。ありがとうございました。
Lhankor_Mhy

2021/07/06 06:57

お役に立てずすみません。
kimu05

2021/07/14 05:03

とんでもございません!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問