A-TOOLHOMEABOUTDESIGNCOMPANYNEWSCONTACTNews2022.02.22Bootstrapを使ったアイコンの設定方法について今回はBootstrapを使ったアイコンの設定方法についてご紹介します。BootstrapとはBootstrapとはHTML/CSS/JavaScriptから構成される世界で最も有名なCSSフレームワークの1つです。CSSフレームワークとは、Webサイトの制作においてページのレイアウトやパーツの装飾、フォームのデザインなどを簡単にスピーディーに作成できるCSSコードがまとまったもののことを指します。そのため、Bootstrapに用意されているクラスなどを指定することで簡単にWebサイトのデザインを作成することができます。自分でCSSを記述することなくWebサイトを簡単に制作することができます。レスポンシブデザインに対応ほとんどのCSSフレームワークがレスポンシブデザインに対応しているためスマートフォンやタブレットなどのデバイスに合わせたデザインを簡単に制作することができます。グリッドシステムが利用できるデバイスの画面を12分割した「グリッド」とよばれるガイドラインを管理することができます。グリッドに沿ってパーツやコンテンツを配置することでデバイスごとに画面幅が異なってもレイアウトを崩さず表示することができます。(簡単にレスポンシブ化させることができます)A-TOOLとBootstrapA-TOOLの最新のテンプレートはBootstrapを実装済みです。アイコンやボタンを簡単に設置できたり、パララックス機能を使って奥行きのある表現も可能です。Bootstrapで無料配布のテンプレートを容易にカスタマイズできるので、短時間での納品が可能となります。Iconsでは、1500以上のアイコンを用意しています。今回はそのアイコンを使ってメニューリストにアイコンを表示させる設定方法をご紹介します。Iconsのアイコンを選択します。Iconsで選択したアイコンのHTMLをコピーしてください3.アイコンを設定したいサイトにログインして編集画面に入ります【編集画面】4.アイコンを設定するメニューを決めて右クリック→ショートカットメニューからメニューの編集をクリックしてください5.メニューの編集ダイアログが表示されるのでメニュー名を編集しますメニュー名に先ほどコピーしたHTMLテキストをメニュー名の前に貼付けて【OK】ボタンをクリックして設定完了です。Iconsのアイコンをチェックしてみてください。1500個以上のアイコンが用意されているので、サイトにあったアイコンがきっと見つかるはずです。今回はBootstrapのアイコンを使ったアイコンの設定方法についてご紹介しました。簡単に設定することができるためアイコンを画像を用意することが難しいといった場合や少しメニューリストをわかりやすくしたいとき、文章にアイコンを入れたいときに活用していただけます。この機会にお試しください。