@blue-phoenixposted at 2024-08-07

画像付きのナビゲーションバーの設定方法について

Q&A

Closed

ｈｔｍｌのコーディングでアイコンタップで画面上部に戻る記述を書いている者ですが、
画像の大きさと位置がまったく調整できません。

このどでかい矢印を右下に小さく表示させたいです。
スクロール機能は無事成功できましたが、大きさだけまったく無機能で。

ｈｔｍｌ

<nav>
<ul>
<li><a href = "#"><img src = "img.png"></a></li>
</ul>
</nav>

ｃｓｓ

.ul {
  display: inline-block;
  width: 1px;
  height: 1px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
.li a {
  text-decoration: none;
  }
nav {
  position: -webkit-sticky;
  position: sticky;
  top: 500px;
  right: 10px;
}
img {
  width: 10%;
  height: 10%;
  object-fit: cover;  
  object-position: 50% -10%;
}

原因はやはりｉｍｇのところだと特定が予想できます。
しかし、ｗｉｄｔｈやｈｅｉｇｈｔなどいくら変えても何も変わりません。
後、考えられるのはｕｌの大きさや幅の部分だと思いますが方法が・・・。
上の記述にまとめるべきか悩んでますが、中身が滅茶苦茶になるのが怖いです。
ぜひ御教授お願いします。
使っているツールはVScodeです。

6Answer

@itagagaki posted at 2024-08-07

期待する結果が不明ですが、サイズ固定でいいなら % ではなく px などで指定すれば良いのでは？
位置に関してもやり方はいろいろありますけど、たとえば position: absolute; bottom: 0; right: 0; とか。

1Like

@juner posted at 2024-08-07

img 要素の display 初期値は inline なので inline-block とか指定するべきなのでは……？
（ inline 要素は高さ幅を css 側から設定できない為

1Like

Comments

@itagagaki
imgは置換要素なのでwidthやheightは適用できるんですね
@juner
あー。試した感じだと display ではなくて img の heightの % 指定に問題があるみたいな挙動になりますね。

もしかしたら % 指定が無効とかかも……？
@blue-phoenix
Questioner
やっぱり変わりません、ｐｘに変えても同じで、inline-blockをｉｍｇ内に書いてもいっしょでした・・・。大きさも位置も変わらないというのはやはりＵｌ～ｌｉに関係していると思うんですがやり方が。
@uasi
CSS で .ul としてますが、これだと ul というクラス名を持つ要素を選択してしまいます。 ul 要素を選択するには ul にしてください。 .li も同様です。

@blue-phoenix posted at 2024-08-07

なんだかここまでできましたけど・・・今度は上部が大きく空いてもうた。
アイコンもうちょっと小さくしたいんですけど。

1Like

Comments

@blue-phoenix

Questioner

ul {
  width: 1px;
  height: 1px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
li a {
  text-decoration: none;
}
nav {
  position: -webkit-sticky;
  position: sticky;
  top: 650px;
  left: 1100px;
}
img {
  display: inline-block;
  width: 10px;
  height: 10px;
  object-fit: cover;  
  object-position: 50px 50px;
}

現在のコードはこれです、上部の広がってるところはどうやって直せば良いですか？
後、widthとheightの記述が多くて手に負えません。

@itagagaki
とても10pxには見えないですね。なんか他のcssも効いていたりするのでは？
もしそうなら新しく書いたcssコードを一番最後にしてみては？

@blue-phoenix posted at 2024-08-07

一応、原因らしきものを発見しました。

ｃｓｓ

img {
  width: 600px;
  height: 400px;
  margin: 10px;
  margin-left: 50px;
}

ｃｓｓ内に以前書いてあったもので、これは元々あのニワトリ画像のサイズを変更するために作ったんです。
が・・・なぜか矢印にも適用されてしまい、img1 img2と分けても同じようになってしまいます。そして、上部に空いたどでかい空白・・・これはどうやって直せばば良いんでしょうか？

1Like

Comments

@uasi
なぜかも何も、そう書けばすべての img 要素に適用されるので矢印にも影響しますね。 img1 と img2 に分けるというのはどうやったんですか？

また他にも質問に書かれていない CSS があればすべて追記してください。それが影響しているかもしれないので。

@blue-phoenix posted at 2024-08-07

うおおおおおおおお、できたぞおおおおおおおおおおおおおおおおおおおお！！！

なんか端っこが切れてますが、大きさが差別化できました！
「　.　」　これが決め手だったんですね、後はimgの種類がネックでした。
まだクラスを十分認知できていなかったのが悔やまれます。
とにかくありがとうござましたああああああああああああああああ！！！！！

1Like

@blue-phoenix posted at 2024-08-07

/*画像１*/
img1 {
  width: 600px;
  height: 400px;
  margin: 10px;
  margin-left: 50px;
}

/*画像２*/
ul {
  width: 1px;
  height: 1px;
  list-style-type: none;
}
li a {
  text-decoration: none;
}
nav {
  position: -webkit-sticky;
  position: sticky;
  top: 650px;
  left: 1100px;
}
img2 {
  display: inline-block;
  width: 10px;
  height: 10px;
  object-fit: cover;  
  object-position: 50px 50px;
 }

これで全部です、あとはもう画像は入れていません。
１はともかく２が問題で区別して書いても差別化できなくって。
ｈｔｍｌの方はもちろん１～２と書いています。

0Like

Comments

@uasi
img1 { ... } と書くと、 <img1> というタグに一致するルールになってしまいます。そんなタグは（書くには書けますが）画像として認識されないので意味がありません。

<img> タグの中でも特定のものにルールを適用させたいときは、タグにクラスを割り当ててそのクラスに適用されるルールを書いてください。タグを <img class="img1"> とするなら CSS は .img1 { ... } のようにします。 CSS ではクラス名は先頭にドットをつけて表します。

Are you sure you want to delete the question?

画像付きのナビゲーションバーの設定方法について

6Answer

Comments

Comments

Comments

Comments

Your answer might help someone💌