ページ移動ボタンはa要素で作り、class名に「page-link」を加える。上記のソースでは両端に「前へ」と「次へ」ボタンを加えていますが、不要なら削除しても問題ありません。ブラウザで表示すると下図の上側のように見えます。両脇に前後ページへの移動ボタンがあり、中央にページ番号ボタンが横並びになっている、よく見かけるページ番号ナビゲーションでしょう。Bootstrap4で作成できるページ移動用ボタン群なお、上図の下側のように、現在位置を示すにはli要素にclass名「active」を加えます。ボタンを無効にしたい場合にはli要素にclass名「disabled」を加えます。すると、無効であることを示す淡い灰色で表示され、クリックしても何も起きないボタンになります。href="#">次のページ→</a></li></ul>■サイズを指定したいときページ移動用ボタン全体を大きくしたい場合や小さくしたい場合は、外側のul要素に対して下記のようなclass名を付加します。</ul>■配置を指定したいとき標準では左寄せで表示されますが、ページ移動用ボタンの場合は中央寄せで表示したり右寄せで表示したい場合もあるでしょう。その際は、外側のul要素に対して下記のようなclass名を付加します。Awesomeなどの外部ライブラリを併用するBootstrap3までは、Glyphiconsというアイコンフォントが含まれており、ボタンに豊富なアイコンを表示できました。Bootstrap4ではGlyphiconsアイコンフォントが廃止されたため、そのままでは従来のようなアイコンを付加できません。Awesomeなどの外部ライブラリを併用すれば、図のようにボタンのラベル横にアイコンを加えられます。簡単な使い方」の解説をご参照下さい。Awesomeなら、Bootstrapと同じように「アイコン名を表すclass名」を追記する方法でアイコンを表示できます。ボタンのラベルにアイコンを加えると、動作や役割が分かりやすくなるのでおすすめです。ボタンも簡単に作れるフレームワークBootstrap4上記でご紹介したように、Bootstrap4はテキストリンクをボタン型にも装飾できる便利なフレームワークです。スマートフォンやタブレットはもちろんですが、最近ではノートPCでもタッチパネルディスプレイを備えた製品が多々あります。ウェブ上のリンクは、ボタン型の方が押しやすくて使いやすいでしょう。ウェブ上で使える矢印記号(絵文字)押しやすいチェックボックスやラジオボタンを作るCSS【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。