コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

CSSのfloatプロパティは、要素がどのように浮動するかを指定します。

floatプロパティ

floatプロパティは、コンテンツの配置と書式設定に使用されます。例えば、画像をテキストの左側または右側に浮動させることができます。

floatプロパティには次の値があります：

floatプロパティの最も単純な使用法は、テキストを画像の周囲にラップすることです。

img {
  float: right;
}

例 – float: right;

以下の例では、テキストの右側に青色の背景を持つdiv要素が浮動します：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

img {
  float: right;
}

例 – float: left;

以下の例では、div要素がテキストの左側に浮動するように指定されています：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

img {
  float: left;
}

例 – float: none;

以下の例では、div要素がテキスト内の位置に表示され、浮動しません（float: none;）：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

img {
  float: none;
}

例 – 複数の要素を隣り合わせに浮動させる

通常、div要素は上下に表示されますが、float: leftを使用することで要素を隣り合わせに浮動させることができます：

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

CSSのoverflowプロパティは、ある領域に収まりきらないコンテンツがどのように処理されるかを制御します。

以下のテキストは非常に長く、コンテナの高さは100ピクセルしかありません。そのため、読者がコンテンツをスクロールできるようにスクロールバーが追加されています。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

CSSオーバーフロー

overflowプロパティは、要素のコンテンツが指定された領域に収まりきらない場合に、コンテンツをクリップするかスクロールバーを追加するかを指定します。

overflowプロパティの値は以下の通りです：

注: overflowプロパティは、指定された高さのブロック要素にのみ機能します。

注: OS X Lion（Mac）では、デフォルトでスクロールバーが非表示になり、使用されるときにのみ表示されます（”overflow:scroll”が設定されていても）。

overflow: visible

デフォルトでは、オーバーフローはvisibleで、クリップされず、要素のボックス外にレンダリングされます：

レイアウトをよりコントロールしたい場合、overflowプロパティを使用できます。overflowプロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}
“`

z-indexプロパティは要素の重なり順序を指定します。

z-indexプロパティ

要素が位置決めされると、他の要素と重なることがあります。

z-indexプロパティは要素の重なり順序を指定します（どの要素が前面に配置され、どの要素が背面に配置されるか）。

要素は正のスタック順序または負のスタック順序を持つことができます：

この <img> 要素はz-indexが-1であるため、テキストの背面に配置されます。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

注: z-indexは、位置決めされた要素（position: absolute、position: relative、position: fixed、またはposition: sticky）およびflexアイテム（display: flex要素の直接の子要素）にのみ機能します。

別のz-indexの例

ここでは、スタック順序が高い要素が常にスタック順序が低い要素の上に配置されることがわかります：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

z-indexなし

2つの位置決めされた要素がz-indexを指定せずに重なる場合、HTMLコードで後に定義された要素が上に表示されます。

上記と同じ例ですが、ここではz-indexが指定されていません：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

CSSプロパティ

Property Description
z-index 要素のスタック順序を設定します

positionプロパティは、要素の位置決め方法（static、relative、fixed、absolute、stickyのいずれか）を指定します。

positionプロパティ

positionプロパティは、要素の位置決め方法を指定します。5つの異なるposition値があります：

その後、top、bottom、left、およびrightプロパティを使用して要素を位置決めします。ただし、これらのプロパティは、最初にpositionプロパティが設定されていないと機能しません。また、positionの値によって動作が異なります。

position: static;

HTML要素はデフォルトでstaticに位置決めされます。staticに位置決めされた要素は、top、bottom、left、およびrightプロパティの影響を受けません。

position: static; を持つ要素は特別な方法で位置決めされることはなく、常にページの通常のフローに従って位置決めされます：

この <div> 要素はposition: static;を持っています。

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position: relative;

position: relative; を持つ要素は、その通常の位置に対して相対的に位置決めされます。相対位置にある要素のtop、right、bottom、およびleftプロパティを設定すると、通常の位置から離れて調整されます。他のコンテンツは、その要素によって残された隙間に合わせて調整されることはありません。

この <div> 要素はposition: relative;を持っています。

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position: fixed;

position: fixed; を持つ要素はビューポートに対して相対的に位置決めされるため、ページをスクロールしても常に同じ場所に留まります。top、right、bottom、およびleftプロパティを使用して要素を位置決めします。

固定された要素は、通常の位置にあった場所に隙間を残しません。

ページの右下隅に固定された要素が表示されます。使用されているCSSは次のとおりです：

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

この <div> 要素はposition: fixed;を持っています。

position: absolute;

position: absolute; を持つ要素は、最も近い位置指定された先祖に対して相対的に位置決めされます（fixedのようにビューポートに対してではなく）。

注: 絶対位置にある要素には、位置指定された先祖がない場合、ドキュメントのボディを使用し、ページのスクロールに伴って移動します。

絶対位置にある要素は通常のフローから外され、他の要素と重なることがあります。以下は簡単な例です：

この <div> 要素はposition: relative;を持っています。この <div> 要素はposition: absolute;を持っています。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

position: sticky;

position: sticky; を持つ要素は、ユーザーのスクロール位置に基づいて位置決めされます。stickyな要素は、スクロール位置に応じて相対的と固定的の間で切り替わります。ビューポートで指定されたオフセット位置に達するまで相対的に位置決めされ、その後は固定的に「張り付く」（position:fixedのように）します。

注: Internet Explorerはstickyな位置決めをサポートしていません。Safariでは-webkit-プレフィックスが必要です（以下の例を参照）。また、stickyな位置決めが機能するには、top、right、bottom、またはleftのいずれかを指定する必要があります。

この例では、stickyな要素がページの上部に張り付きます（top: 0）、スクロール位置に達したときに固定されます。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

全てのCSS位置決めプロパティ

Property Description
bottom 位置指定されたボックスの下端のマージンを設定します
clip 絶対位置にある要素をクリップします
left 位置指定されたボックスの左端のマージンを設定します
position 要素の位置決めの種類を指定します
right 位置指定されたボックスの右端のマージンを設定します
top 位置指定されたボックスの上端のマージンを設定します

width、max-width、およびmargin: auto;の使用

前の章で述べたように、ブロックレベル要素は常に利用可能な全幅を取ります（左右に伸びます）。

ブロックレベル要素の幅を設定すると、要素がコンテナの端まで伸びなくなります。その後、marginをautoに設定して、要素を水平方向にコンテナの中央に配置することができます。要素は指定された幅を取り、残りのスペースは両方のマージンに均等に分割されます。

この

要素は幅が500pxで、marginがautoに設定されています。

注意：上記の<div>の問題は、ブラウザウィンドウが要素の幅よりも小さい場合に発生します。その場合、ブラウザはページに水平スクロールバーを追加します。

この状況ではmax-widthを使用すると、小さなウィンドウでのブラウザの処理が改善されます。これは、小さなデバイスでサイトを利用可能にする際に重要です：

この<div>要素はmax-widthが500pxで、marginがautoに設定されています。

ヒント：ブラウザウィンドウの幅を500px未満にリサイズして、2つのdivの違いを確認してください！

上記の2つのdivの例：


div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

レイアウトを制御するために最も重要なCSSプロパティは、displayプロパティです。

displayプロパティ

displayプロパティは、要素がウェブページ上でどのように表示されるかを指定するために使用されます。

すべてのHTML要素には、それがどのタイプの要素であるかに応じてデフォルトの表示値があります。ほとんどの要素のデフォルト表示値は、blockまたはinlineです。

displayプロパティは、HTML要素のデフォルトの表示動作を変更するために使用されます。

ブロックレベル要素

ブロックレベル要素は常に新しい行で始まり、利用可能な全幅を取ります（左右に伸びます）。

<div>要素はブロックレベル要素です。

ブロックレベル要素の例：

インライン要素

インライン要素は新しい行で始まらず、必要な幅だけを取ります。

これは段落内のインライン<span>要素です。

インライン要素の例：

displayプロパティの値

displayプロパティには多くの値があります：

値 説明
inline インライン要素として要素を表示します
block ブロック要素として要素を表示します
contents コンテナを消去し、子要素をDOMの次のレベルの親要素として表示します
flex ブロックレベルのフレックスコンテナとして要素を表示します
grid ブロックレベルのグリッドコンテナとして要素を表示します
inline-block インラインレベルのブロックコンテナとして要素を表示します。要素自体はインライン要素としてフォーマットされますが、高さと幅の値を適用できます
inline-flex インラインレベルのフレックスコンテナとして要素を表示します
inline-grid インラインレベルのグリッドコンテナとして要素を表示します
inline-table インラインレベルのテーブルとして要素を表示します
list-item 要素を<li>要素のように振る舞わせます
run-in コンテキストに応じて要素をブロックまたはインラインとして表示します
table 要素を<table>要素のように振る舞わせます
table-caption 要素を<caption>要素のように振る舞わせます
table-column-group 要素を<colgroup>要素のように振る舞わせます
table-header-group 要素を<thead>要素のように振る舞わせます
table-footer-group 要素を<tfoot>要素のように振る舞わせます
table-row-group 要素を<tbody>要素のように振る舞わせます
table-cell 要素を<td>要素のように振る舞わせます
table-column 要素を<col>要素のように振る舞わせます
table-row 要素を<tr>要素のように振る舞わせます
none 要素を完全に削除します
initial このプロパティをその初期値に設定します
inherit このプロパティを親要素から継承します

Display: none;

display: none;は、JavaScriptと共に要素を非表示にしたり表示したりするために一般的に使用されます。これにより、要素が削除および再作成されることなく非表示にできます。

<script>要素はデフォルトでdisplay: none;を使用します。

パネルを表示するにはクリックしてください

デフォルトの表示値をオーバーライドする

先述したように、すべての要素にはデフォルトの表示値がありますが、これをオーバーライドすることができます。

インライン要素をブロック要素に変更したり、その逆を行ったりすることは、ページを特定の方法で表示するのに便利ですが、ウェブ標準には従います。

水平メニューのためにインライン<li>要素を作成する一般的な例：


li {
  display: inline;
}

注意：要素のdisplayプロパティを設定すると、要素の表示方法が変更されるだけで、要素の種類は変更されません。したがって、display: block;を持つインライン要素の内部に他のブロック要素を配置することは許されません。

以下の例は、<span>要素をブロック要素として表示します：


span {
  display: block;
}

以下の例は、<a>要素をブロック要素として表示します：


a {
  display: block;
}

要素の非表示 – display:noneまたはvisibility:hidden？

display:none

visibility:hidden

displayプロパティをnoneに設定することで要素を非表示にすることができます。要素は非表示にされ、ページはその要素が存在しないかのように表示されます：


h1.hidden {
  display: none;
}

visibility:hidden;も要素を非表示にします。

ただし、要素は以前と同じスペースを取ります。要素は非表示にされますが、レイアウトには影響します：


h1.hidden {
  visibility: hidden;
}

HTMLテーブルの見た目は、CSSで大幅に改善できます：

会社名 連絡先 国
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

テーブルボーダー

CSSでテーブルのボーダーを指定するには、borderプロパティを使用します。

以下の例では、<table>、<th>、および<td>要素に実線のボーダーを指定しています：


table, th, td {
  border: 1px solid;
}

全幅のテーブル

上記のテーブルは場合によっては小さく見えるかもしれません。画面全体にわたる（全幅の）テーブルが必要な場合は、<table>要素にwidth: 100%を追加します：


table {
  width: 100%;
}

二重ボーダー

上記の例のテーブルには二重のボーダーがあります。これは、テーブルと<th>および<td>要素がそれぞれ独立してボーダーを持っているためです。

二重のボーダーを削除するには、以下の例を参照してください。

ボーダーの折り畳み

border-collapseプロパティは、テーブルのボーダーを単一のボーダーに折り畳むかどうかを設定します：


table {
  border-collapse: collapse;
}

テーブル全体にボーダーを付けたい場合は、<table>に対してborderプロパティを指定します：


table {
  border: 1px solid;
}

順序なしリスト：

順序ありリスト：

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTMLリストとCSSリストプロパティ

HTMLには、主に2種類のリストがあります：

CSSのリストプロパティを使うと、以下ができます：

異なるリストアイテムマーカー

list-style-typeプロパティは、リストアイテムのマーカータイプを指定します。

以下の例は、使用可能ないくつかのリストアイテムマーカーを示しています：


ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

注意：一部の値は順序なしリスト用であり、一部は順序ありリスト用です。

画像をリストアイテムマーカーとして設定する

list-style-imageプロパティは、画像をリストアイテムのマーカーとして指定します：


ul {
  list-style-image: url('sqpurple.gif');
}

リストアイテムマーカーの位置調整

list-style-positionプロパティは、リストアイテムのマーカーの位置を指定します。

list-style-position: outside;は、マーカーがリストアイテムの外側に表示されます。各行の開始が垂直に整列します（デフォルト）：


ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

デフォルト設定の削除

list-style-type: none;プロパティを使用して、マーカー（点や数字）を削除することもできます。リストにはデフォルトのマージンとパディングもあります。これを削除するには、<ul>または<ol>にmargin: 0;およびpadding: 0;を追加します：


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

リスト – 省略プロパティ

list-styleプロパティは、リストのすべてのプロパティを1つの宣言で設定するための省略形です：


ul {
  list-style: square inside url("sqpurple.gif");
}

省略プロパティを使用する場合、プロパティ値の順序は次のとおりです：

上記のいずれかのプロパティ値が欠落している場合、欠落しているプロパティのデフォルト値が挿入されます（存在する場合）。

色でリストをスタイリングする

リストに色を付けて、少し面白く見せることもできます。

<ol>または<ul>タグに追加されるプロパティは、リスト全体に影響します。一方、<li>タグに追加されるプロパティは個々のリストアイテムに影響します：


ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

結果：

  1. Coffee
  2. Tea
  3. Coca Cola

CSSを使って、リンクはさまざまな方法でスタイリングできます。

テキストリンク

テキストリンク

リンクのスタイリング

リンクは任意のCSSプロパティ（色、フォントファミリー、背景など）でスタイルを設定できます。

例


a {
  color: hotpink;
}

また、リンクの状態に応じて異なるスタイルを設定することもできます。

リンクの状態は以下の4つです：

例


/* 未訪問リンク */
a:link {
  color: red;
}

/* 訪問済みリンク */
a:visited {
  color: green;
}

/* マウスオーバーリンク */
a:hover {
  color: hotpink;
}

/* 選択したリンク */
a:active {
  color: blue;
}

複数のリンク状態のスタイルを設定する際には、いくつかの順序ルールがあります：

テキスト装飾

text-decorationプロパティは、リンクから下線を除去するために主に使用されます：


a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

背景色

background-colorプロパティを使用して、リンクの背景色を指定できます：


a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

リンクボタン

この例では、複数のCSSプロパティを組み合わせてリンクをボックス/ボタンとして表示する方法を示しています：


a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

その他の例

この例では、ハイパーリンクに他のスタイルを追加する方法を示しています：


a.one:link { color: #ff0000; }
a.one:visited { color: #0000ff; }
a.one:hover { color: #ffcc00; }

a.two:link { color: #ff0000; }
a.two:visited { color: #0000ff; }
a.two:hover { font-size: 150%; }

a.three:link { color: #ff0000; }
a.three:visited { color: #0000ff; }
a.three:hover { background: #66ff66; }

a.four:link { color: #ff0000; }
a.four:visited { color: #0000ff; }
a.four:hover { font-family: monospace; }

a.five:link { color: #ff0000; text-decoration: none; }
a.five:visited { color: #0000ff; text-decoration: none; }
a.five:hover { text-decoration: underline; }

別の例

リンクボックス/ボタンを作成する別の例：


a.box:link, a.box:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.box:hover, a.box:active {
  background-color: green;
  color: white;
}

カーソルの種類

リンクに役立つさまざまなカーソルの種類を示す例：

実際にカーソルをあてて違いを確認してみてください。

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

アイコンは、アイコンライブラリを使用して簡単にHTMLページに追加することができます。

アイコンの追加方法

HTMLページにアイコンを追加する最も簡単な方法は、Font Awesomeなどのアイコンライブラリを使用することです。

重要：以下のアイコンライブラリに含まれるすべてのアイコンは、CSSでカスタマイズ可能なスケーラブルベクターです（サイズ、色、影など）。

Font Awesome Icons

Font Awesomeアイコンを使用するには、fontawesome.comにアクセスし、HTMLページの<head>セクションに追加するためのコードを取得します：

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Font Awesomeの使用方法については、Font Awesome 5のチュートリアルをご覧ください。

注意：ダウンロードやインストールは必要ありません！

例

<!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

  <i class="fas fa-cloud"></i>
  <i class="fas fa-heart"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>

</body>
</html>

Bootstrap Icons

Bootstrapのグリフアイコンを使用するには、次の行をHTMLページの<head>セクションに追加します：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

注意：ダウンロードやインストールは必要ありません！

例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

  <i class="glyphicon glyphicon-cloud"></i>
  <i class="glyphicon glyphicon-remove"></i>
  <i class="glyphicon glyphicon-user"></i>
  <i class="glyphicon glyphicon-envelope"></i>
  <i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Google Icons

Googleアイコンを使用するには、次の行をHTMLページの<head>セクションに追加します：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意：ダウンロードやインストールは必要ありません！

例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <i class="material-icons">cloud</i>
  <i class="material-icons">favorite</i>
  <i class="material-icons">attachment</i>
  <i class="material-icons">computer</i>
  <i class="material-icons">traffic</i>

</body>
</html>