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>

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

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

ズームアウト

書き方

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

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

 

ごみ箱

書き方

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

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

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

 

1時間でできる無料体験！

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デザイナーが毎日すぐに回答します。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

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

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

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

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

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

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

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

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

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

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

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。   全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。 完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。   1. 識別しやすいアイコンをデザインする アイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。 アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。 アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。 そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。   抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。 ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。 アプリ「The Game Center」のアイコンは何を表しているように見えますか？ ゲームに関連した意味があるように見えますか？   ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。 たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。 アイコンの「封筒」そのものが「メール」の意味を伝えています。   2. ミニマリズムを追求する アプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。 ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。 このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。   アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。 アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。   詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。 写真の画像やスクリーンショットは使用しないこと   透視投影による3Dデザインはアイコンに使用するべきではありません。 透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。   アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。 アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。 瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。 良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。   [PR] Webデザインで副業する学習方法を動画で公開中3. 異なる背景上でアイコンをテストする アイコンはホーム画面の背景上で見やすいデザインにしましょう。 識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。 ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。   アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。 ユーザーがアイコンを探すのに苦労するようなデザインにしないこと   アイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。 透明なアイコンを使用するのは避けましょう。 また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。   結論 今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。   TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。 現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような
アプリデザイン

擬似クラス！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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザイン Bootstrap スマホ対応に便利！Bootstrapで使えるアイコンまとめ