TechAcademy（テックアカデミー） Webデザイン Bootstrap スマホ対応に便利！Bootstrapで使えるアイコンまとめ
オーダーメイドコース
icon
icon
Bootstrap

スマホ対応に便利！Bootstrapで使えるアイコンまとめ

Bootstrapではアイコンが200種類ほど用意されています。Webサイトを作る上でスマホ対応は欠かせませんが、そんな時Bootstrapが役立ちます。便利なアイコンをまとめて紹介しているので、ぜひ活用してみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

今回はBootstrapで使えるアイコンについて紹介します。Bootstrapではアイコンが200種類ほど用意されています。

このアイコンは自分で画像を持ってくる必要がありません。

フリー素材探しや、利用規約というものを一つ一つ読むことをせず、bootstrapの範囲内で使用できます。

001

今回、200種類、全部は紹介できませんが、いくつか使いやすいものを紹介します。

ページに合うものがあれば、ぜひ活用してみてください。bootstrapならではのシンプルページが実現できるでしょう。

 

本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。

 

音符

書き方

<span class="glyphicon glyphicon-music" aria-hidden="true"></span>

HPにBGMを付ける際のON/OFFボタンに使えますね。

他にはムービーの音のON/OFFとかにも使えます。

 

フィルム

書き方

<span class="glyphicon glyphicon-film" aria-hidden="true"></span>

動画の再生などに使えます。

スライドショーの開始ボタンにも使えますね。

 

[PR] Web制作で副業する方法とは

ダウンロード

書き方

<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>

このアイコンは汎用性が高いですね。よく見るのではないでしょうか。

 

ズームイン

書き方

<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>

そのままでズームインに使えます。

 

ズームアウト

書き方

<span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>

コチラもズームインと同様、ズームアウトに使えますね。

 

ごみ箱

書き方

<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>

HPとはいきませんが、アプリとかなら使えるかもしれません。

HTMLベースのアプリケーションを製作している人は使いやすいアイコンですね。

 

QRコード

書き方

<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>

これは使えますね。

今どきスマホの時代ですから2次元バーコード（QRコード）がないというのは聞いたことないぐらいです。

 

ブックマーク

書き方

<span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>

栞のアイコンはいろいろ使えそうです。

お気に入り機能を実装するときには使えそうですね。

 

ランダム

書き方

<span class="glyphicon glyphicon-random" aria-hidden="true"></span>

ランダム再生に使えます。

音楽だけでなく、スライドショーなんかでも使えますね。

 

リンク

書き方

<span class="glyphicon glyphicon-link" aria-hidden="true"></span>

リンクはHPならよく使うと思います。

汎用性がとても伺えますね。

 

今回は10種類ほど紹介しましたが、まだまだあります。200種類すべてを使いこなせれば、もう素材に悩むことはないかもしれません。

今回、コメントで一つ一つ使い方を提案しましたが、様々な使い方があると思います。ぜひ、使い方を模索してみてください。

[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。

記事を検索

関連するキーワード

関連する記事

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。 ...
Bootstrap

初心者でも手軽にできる！Bootstrapで作るbutton(ボタン)の作り方

今回はBootstrapで作るbutton(ボタン)の作り方です。 ボタン要素をHTMLで記述すれば、ボタンとしての機能は果たしますが見た目が良いとは言え...
Bootstrap

横並びにもできる！Bootstrapで作るform(フォーム)の作り方

今回はBootstrapで作るform(フォーム)の作り方を紹介します。 初心者の方でもすぐに作成できるフォームなので、ぜひ参考にしてみてください。CSS...
Bootstrap

シンプルでおしゃれ！無料で使えるBootstrapのテンプレートまとめ

今回はBootstrapの無料テンプレートサイトを紹介します。bootstrapはTwitter製のライブラリで簡単にサイトのコーディングを可能にしてくれます。...
Bootstrap

あわせてよく読まれている記事

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 nth-of-typeとnth-childの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   nth-of-typeについて nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。 擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。 以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。   nth-childについて nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。 //<span>と兄弟関係にある、全ての要素の中でx番目にある<span>を選択 span:nth-child(x){ 〜 } 兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。   [PR] Web制作で副業する方法とは2つの違い nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。 下記のようなHTMLで考えた場合、 <div>   <span>1</span>   <span>2<!--このspanに適用！--></span>   <span>3</span> </div> span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。 しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。 <div> <p>Number</p>   <span>1<!--nth-child(2)で適用！--></span> <span>2<!--nth-of-child(2)で適用！--></span> <span>3</span> </div> 次は下記のようなHTMLで考えてみましょう。 HTML <html>   <head>     <meta charset="utf-8">     <title>nth-of-typeとnth-of-child</title>   </head>   <body>     <ul>       <li>         <h2>List01</h2>         <span>01</span>         <span>02</span>         <span>03</span>         <span>04</span>         <span>05</span>       </li>       <li>         <h2>List02</h2>         <span>06</span>         <span>07</span>         <span>08</span>         <span>09</span>         <span>10</span>       </li>       <li>         <h2>List03</h2>         <span>11</span>         <span>12</span>         <span>13</span>         <span>14</span>         <span>15</span>       </li>     </ul>   </body> </html> CSS body{   margin:30px;   font-size:20px;   font-weight:bolder; } ul{   list-style:none; } li{   display:flex; } h2{  
CSS

3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】

3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！ 大石ゆかり お願いします！   疑似クラスの説明と使い方 通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。 例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。 CSS： a:hover{ color:red; }   このように、条件や状態を追加することができる擬似クラスはたくさんあります。 :active／アクティブ状態 :visited／訪問済みのリンク :focus／<input>などの要素が入力状態 :checked／checkboxなどでチェックされている状態 :first-child／最初の子要素 :nth-child／親要素の中で、全ての子要素の内、x番目の子要素 :nth-of-type／親要素の中で、x番目の子要素 などなど、まだいっぱいあります。   3の倍数の要素にスタイルを適用する方法 3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。 HTML： <html>   <head>     <meta charset="utf-8">     <title>nth-of-typeを使ってみよう</title>   </head>   <body>     <span>01</span>     <span>02</span>     <span>03</span>     <span>04</span>     <span>05</span>     <span>06</span>     <span>07</span>     <span>08</span>     <span>09</span>     <span>10</span>     <span>11</span>     <span>12</span>     <span>13</span>     <span>14</span>     <span>15</span>     <span>16</span>     <span>17</span>     <span>18</span>     <span>19</span>     <span>20</span>   </body> CSS： @charset "UTF-8"; /*文字コードの指定*/ body{   display:flex;   flex-wrap:wrap;   margin:30px;   font-size:20px;   font-weight:bolder; } span{   display:block;   width:100px;   height:100px;   margin:5px;   background:gold; }     このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。 span:nth-of-type(3n){ background: limegreen; } span:nth-of-type(3n)は、3×n番目の<span>という意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。   [PR] Web制作で副業する方法とはn番目の要素にスタイルを適用する方法 nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、 span:nth-of-type(10){ background:tomato; } と書きます。   疑似クラスを使ってみよう このように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。 また、 偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; } 奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato;
CSS

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。   HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。 なお、今回はBootstrapのバージョン「3.3.5」を使用します。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！Bootstrapというのは何ですか〜？ 田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 大石ゆかり フロントエンドというとHTML・CSS・JavaScriptですか？ 田島悠介 そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。   目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。   Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。   このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。 この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。     [PR] Web制作で副業する方法とはBootstrapを使う準備 実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。   Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。 ソースをダウンロードして、ローカルに配置して読み込む すでにホストされているファイルをインターネット経由で読み込む 今回は、前者の方法を紹介します。   ダウンロードするには、BootstrapのTOPページにアクセスしましょう。 「Download Bootstrap」のボタンをクリックしてください。   次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。   ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。   続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み -->
Bootstrap

PythonのSyntaxErrorの解決方法を現役エンジニアが解説【初心者向け】

PythonのSyntaxErrorの解決方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonのSyntaxErrorの解決方法について詳しく説明していくね！ 大石ゆかり お願いします！   PythonのSyntaxErrorの主な種類、読み方、原因 プログラミングを行っていると多くのエラーに遭遇します。その中でも代表的なものが「SyntaxError」です。 SyntaxError は直訳すると文法エラーという意味で「シンタックスエラー」と読みます。SyntaxErrorは、プログラムが文法的に正しくないと判断された場合に発生します。 判断はプログラムを実行する前に行われるのでSyntaxErrorを解消しないとプログラムを実行することができません。 それではSyntaxErrorはどのような場合に発生するのでしょうか。いくつか例をあげて確認してみましょう。まずは正常に動作するプログラムのソースコードです。 for i in range(1,10): print("*" * i) 実行結果は以下のようになります。 * ** *** **** ***** ****** ******* ******** ********* それでは、for文の「:」を忘れた場合はどうなるでしょうか？ for i in range(1,10) print("*" * i) 実行結果は以下のようになります。ちょうど「:」に該当する部分でSyntaxErrorが発生していることが分かります。 <span class="ansi-cyan-intense-fg ansi-bold"> File </span> <span class="ansi-green-intense-fg ansi-bold">"<ipython-input-2-80458efb33d9>"</span> <span class="ansi-cyan-intense-fg ansi-bold">, line </span><span class="ansi-green-intense-fg ansi-bold">1</span><span class="ansi-yellow-intense-fg ansi-bold"> for i in range(1,10)</span> <span class="ansi-white-intense-fg ansi-bold">
Python

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次音符フィルムダウンロードズームインズームアウトごみ箱QRコードブックマークランダムリンク そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら】   田島悠介 今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。 大石ゆかり 田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？ 田島悠介 指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。 大石ゆかり 分かりました！   nth-of-typeとは nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。 擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。   以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。 疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。   nth-of-typeの書き方 「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。 li:nth-of-type(2n){   /*適用する内容*/ } ( )内部の「n」を使って、何番目であるかを記しています。 今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。 また、「3n-1」や「odd」「even」という指定もできます。 「odd」「even」はそれぞれ奇数、偶数という指定方法です。   田島悠介 ()内で指定された部分にのみ、スタイルが適用されるんだ。 大石ゆかり この場合は偶数が対象ということですね。 田島悠介 次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。   [PR] Web制作で副業する方法とは実際に書いてみよう 実際にHTMLとCSSを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li>
CSS

CSSで縁取り文字をデザインする方法を現役デザイナーが解説【初心者向け】

CSSで縁取り文字をデザインする方法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 縁取り文字をデザインする方法について詳しく説明していくね！ 大石ゆかり お願いします！   縁取り文字のデザイン例 雑誌などの紙媒体ではよく縁取り文字を使用したデザインを見かけます。ユーザーの注目を集めたり、印象に残るようなデザインにする1つの方法として、特に強調したい文言や、タイトルに縁取り文字が用いられることがあります。Webサイトでも、特にバナー画像等で見かけることが多いかもしれません。 今回は画像作成ソフトを使わずに、HTMLとCSSだけで縁取り文字をデザインしてみましょう。   CSSで縁取り文字をデザインする方法 今回は、CSSのtext-shadowプロパティを使用して作っていきます。text-shadowは本来、テキストに影をつけるためのプロパティですが、影の方向や量を工夫することで、縁取り文字を作ることができます。   [PR] Web制作で副業する方法とはtext-shadowの使い方 text-shadowでは、X軸方向のオフセット(ずらし具合)、Y軸方向のオフセット、ぼかしの半径、影の色の値を設定することができます。 text-shadowの使い方： textshadow:X軸方向のオフセット Y軸方向のオフセット ぼかしの半径 色; 各値は半角スペースで区切ります。   このうちの影のぼかしの半径の値を0にすることにより、縁取りのデザインを作っていきます。まずは、text-shadowの値と表示の関係を確認してみましょう。 HTML： <span class="text1">HELLO</span> <span class="text2">HELLO</span> <span class="text3">HELLO</span> CSS： .text1{   text-shadow:1px 0 5px black; } .text2{   text-shadow:0 5px 5px black; } .text3{   text-shadow:1px 1px 0 black; } また、text-shadowでは、カンマ区切りで、複数の影を設定することができますので、X軸方向のオフセットとY軸方向のオフセットを少しずつずらした影をつけることによって、文字の上下左右に縁取りをつけることができます。 縁取りを作る時のtext-shadowの構造を確認してみましょう。 HTML： <span class="text1">HELLO</span> <span class="text2">HELLO</span> <span class="text3">HELLO</span> <span class="text4">HELLO</span> <span class="text5">HELLO</span> CSS： .text1{   text-shadow:1px 0 0 black; } .text2{   text-shadow:0 1px 0 black; } .text3{   text-shadow:-1px 0 0 black; } .text4{   text-shadow:0 -1px 0 black; } .text5{   text-shadow:     1px 0 0 black,     0 1px 0 black,     -1px 0 0 black,     0
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザイン Bootstrap スマホ対応に便利！Bootstrapで使えるアイコンまとめ