🎃

overfllow/トップに戻るボタン

2023/08/20に公開

Rails

tech

はじめに

コメント表示をうまくまとめられていなかったので、overfllowで表示領域を決めて見やすくしました。また、スマホ画面でのスクロールが面倒だなと感じたので、topに戻るボタンを実装しました。

overfllowとは

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。

scss

◯◯ {overflow:値;}

このように◯◯の部分にはセレクタを入れます。overflowを指定したい要素のタグ名やid、class名などを書きます。

overflowの4つの値

1.visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
2.hidden：はみ出た部分が隠れる
3.scroll：はみ出た部分が隠れてスクロールできる状態に
4.auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）
今回は3つ目のscrollwo使用しました。

実装

コメントを表示する部分をdiv class="comments-index">で囲い、その後cssで設定する。

comments.scss

.comments-index {
    width: 500px;
    height: 300px;
    overflow: scroll;
}

以下のように設定したwidthとheightを超えて表示される部分をスクロールすることで、表示できるようになりました。

トップに戻るボタンをCSSだけで作る方法

js:application.html.erb

<a href="#page_top" class="page_top_btn">トップへ戻る</a>

このコードを出力したい部分に記述する。
それでcssをいじるだけで完成！！

/* トップへ戻るボタン */
.page_top_btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-weight: bold;
  padding: 0.7em;
  text-align: center;
  background: rgb(255, 0, 0);
  color: #fff;
  transition: 0.3s0;
}

/* マウスオーバー時 */
.page_top_btn:hover {
  background: rgb(255, 0, 0, 0.8);
  color: rgb(255, 255, 255, 0.8);
}

これで最低限の見た目と昨日は実装できました。
ただこのままでは、トップに戻る時に読み込みの際のカクツキが起きてしまうので、それも解消します。
今回はjavascriptなしでの実装です。

applicatrion.scss

html{
  scroll-behavior: smooth;
}

参考にさせていただいた記事

まとめ

ユーザビリティーを上げるには何をすればいいのかと考えて、この2つを実装しました！！
まだまだ追加できる機能が多いので少しづつでもいいサイトに近づけたいです。