Без кейворда
WEBサイトでは、可読性や操作性を最適化することで、
ユーザーの離脱率を下げることに繋がります。
では、どうすれば「操作性」を上げることができるのでしょうか？
操作性を上げる施策をしよう 目次- ナビゲーションの表示位置を固定しよう
- ページのTOPに戻るボタンを設置しよう
- 戻るボタンのアイコン化と右下に配置しよう
- フォントサイズを変更したい
- コードを簡略化しましょう
Youtubeで動画解説しています。
チャンネル登録、宜しくお願いします。
【初心者入門】Bootstrapを使ってサイト作り ナビ固定・戻るボタン編 Bootstrap5サンプルサイトナビゲーションの表示位置を固定しよう
まずは「ナビゲーション」を常にページ上部に固定していきましょう。
ナビゲーションは画面の上に固定していきますので、
クラス名「fixed-top」をコピーして、 navタグ に貼りつけます。
Before AfterページのTOPに戻るボタンを設置しよう
ユーザーのスクロールアクションを軽減できることは確かですね。
「戻る」ボタンは画面の下に固定していきます。
コードをコピーして、 mainタグ と footerタグ の間に貼りつけます。
次に、 bodyタグ にidを指定して、ボタンを設置すれば完了です。
でも、ページの左側にボタンがあると邪魔ですね。
さらに、目立っていないので、気が付かない可能性もありますねぇ・・・。
戻るボタンのアイコン化と右下に配置しよう
さらに、邪魔にならないように、ページの右下に配置していきましょう。
次に、ページの右下に配置していきます。
さらに、押しやすいように余白とテキストサイズを適用させます。
フォントサイズを変更したい
コードを簡略化しましょうコードの簡略化。省エネ！ってことです。
こんな簡略化の方法もあるということを知っておいてください。
ここの divタグ 、必要ないよね！ってことですね。
同じ表示なら、省エネで時短をしましょう！
まとめ
Bootstrap要素の固定表示クラス名「fixed-top」で、ページ上部に固定表示 クラス名「fixed-bottomで、ページ下部に固定表示 「ナビゲーション」をページ上部に固定して操作性を上げる 「トップへ戻るボタン」をページ下部に固定して操作性を上げる クラス名「text-end」で、テキストを右寄せ フォントサイズはクラス名「fs-●」で指定が可能
< Bootstrapスマホサイトを最適化しよう！ > Bootstrapセカンドページの土台を作ろう！Recent Post
【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！
【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介
【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！
Category Post
Bootstrap Google Fontsを使ってみよう
Category TagsSAKUWEBは、LiruuDesign（リールーデザイン）が運営しています。 Copyright 2022 - © SAKUWEB Powerd by Liruu Design.