css3を使って要素を上下左右中央に配置する方法

jQueryとCSS3で円の型抜きのホバー効果

レスポンシブ化に便利！CSSで画像を文字に置き換える方法

CSS3 + jQueryによる、グラデーションのホバー効果

<p>Webフォントは、最新のブラウザやスマートフォンやタブレットPCで利用できるだけでなく、</p>
<p>形式によってはIE6などでも利用することができます。</p>
<p>&nbsp;</p>
<p>なんとなくとっつきにくいイメージがあったのですが、調べてみると、</p>
<p>サービスも広がっていて、今後実際に自分で使う機会も増えていくように感じました。</p>
<p>&nbsp;</p>
<p>今回調べた中で、自作したアイコンをWebフォントに変換して利用する方法がありましたので、</p>
<p>実際にやってみることにしました。</p>
<p>（参考サイト：<a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">仕事で使える、アイコン作画のコツとSVG変換のススメ</a>）</p>
<p>↓こちらが作ってみたものです</p>
<p><a class="demo" href="/demo/ninomiya/19/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3> 1.SVGのアイコン画像を準備する</h4>
<p>参考のサイトでは、Fireworksを使った方法でしたが、</p>
<p>今回はIllustratorでアイコンを制作し、SVGで出力する方法を使いました。</p>
<h4>i.画像の準備</h6>
<p><img decoding="async" loading="lazy" alt="Illustratorでアイコンを制作" src="/uploads-archive/2013/05/nino_image_01.jpg" width="640" height="497" /></p>
<p>パスツールなどを使って画像を制作します。</p>
<p>ポイントは、シルエットにし、重なった部分は「パスファインダー」などを使って合体させておくことです。</p>
<p>合体させておかないと、Webフォントにしたときに、意図した形にならないことがあります。</p>
<p>&nbsp;</p>
<p>また、Webフォントに変換してしまうと、グラデーションはもちろん、色の情報はなくなってしまうので、</p>
<p>黒一色で制作するとわかりやすいです。</p>
<p>&nbsp;</p>
<h4>ii.SVGで出力</h6>
<p>できたら、「ファイル」→「Webおよびデバイス用に保存」で、保存形式をSVGに設定し、書き出します。</p>
<p><img decoding="async" loading="lazy" alt="SVG形式で出力" src="/uploads-archive/2013/05/nino_image_02.jpg" width="716" height="549" /></p>
<p>&nbsp;</p>
<h3>2.SVGをWebフォントに変換</h4>
<p>IcoMoonのWebアプリを使ってWebフォントに変換します。</p>
<p>サイトはこちら→<a href="http://icomoon.io/app/" target="_blank">http://icomoon.io/app/</a></p>
<h4>i.ファイルを選択する</h6>
<p><img decoding="async" loading="lazy" alt="IcoMoon　ファイルを選択" src="/uploads-archive/2013/05/nino_image_03.jpg" width="640" height="442" /></p>
<p>「import Icons」をクリックして画像を選択して（複数選択可）、</p>
<p>その後下に表示されたアイコンをクリックして選択します。</p>
<p>&nbsp;</p>
<h4>ii.アイコンをあてる文字を選択し、データをダウンロード</h6>
<p><img decoding="async" loading="lazy" alt="フォントをあてる文字を選択" src="/uploads-archive/2013/05/nino_image_04.jpg" width="656" height="385" /></p>
<p>アイコンをあてる文字をそれぞれ選択します。</p>
<p>ここで選択した文字を入力したときに、その文字にあてたアイコンが表示されることになります。</p>
<p>フォント名を「Preferences」から指定することができます。</p>
<p>入力が終わったら、下のDownloadのボタンからデータをダウンロードしてください。</p>
<p>&nbsp;</p>
<h3>3.HTML+CSSで実装する</h4>
<p>IcoMoonでダウンロードしたデータに、フォントのセットと、CSS等のサンプルが入っています。</p>
<p>こちらを利用して、Webフォントを指定していきます。</p>
<p>HTML</p>

		<div id="crayon-64953fd5894a6118355911" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p&gt;&lt;span class="icon"&gt;m&lt;/span&gt;&amp;nbsp;桃&amp;nbsp;-m-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;y&lt;/span&gt;&amp;nbsp;ヨット&amp;nbsp;-y-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;p&lt;/span&gt;&amp;nbsp;鉛筆&amp;nbsp;-p-&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894a6118355911-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5894a6118355911-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">m</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;桃&amp;nbsp;-m-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894a6118355911-2"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">y</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;ヨット&amp;nbsp;-y-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd5894a6118355911-3"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">p</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;鉛筆&amp;nbsp;-p-</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>アイコンをあてる文字のみ、&lt;span&gt;などでクラスをつけます。</p>
<p>CSS</p>

		<div id="crayon-64953fd5894aa728540308" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face {
	font-family: 'testicon';
	src:url('fonts/testicon.eot');
	src:url('fonts/testicon.eot?#iefix') format('embedded-opentype'),
		url('fonts/testicon.woff') format('woff'),
		url('fonts/testicon.ttf') format('truetype'),
		url('fonts/testicon.svg#testicon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon{
	font-family: "testicon";
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-4">4</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-6">6</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-8">8</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-10">10</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-12">12</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5894aa728540308-1"><span class="crayon-n">@font-face </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-2"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'testicon'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-3"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-4"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot?#iefix'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'embedded-opentype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-5"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-6"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.ttf'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'truetype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-7"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.svg#testicon'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'svg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-8"><span class="crayon-h">	</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-9"><span class="crayon-h">	</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-11"><span class="crayon-k ">.icon</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-12"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"testicon"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたデータに入っているstyle.cssにある「@font-face」をコピー&amp;ペーストし、</p>
<p>対象のクラスにフォント名を指定します。</p>
<p>あとは装飾などをCSSで指定すれば実装が完了します。</p>
<p>大きさを自由に変えられるので、Retinaなどの高解像度のデバイスでも安心です。</p>
<p>&nbsp;</p>
<p>アイコンを制作する時間や手間が取れないときは、多くのWebフォントアイコンを公開しているサイトもありますので、</p>
<p>是非ご利用してみてください。</p>
<p>「<a href="http://weboook.blog22.fc2.com/blog-entry-332.html" target="_blank">画像の代わりに使えるアイコンタイプのWebフォントのまとめ</a>」</p>
<p>&nbsp;</p>
<p>参考サイト：</p>
<p>アイコンのWebフォント化：</p>
<p><a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">http://www.slideshare.net/r360studio/css-nite68-iconv3</a></p>
<p>Webフォントの形式と対応状況：</p>
<p><a href="http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/">http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #css3

2013/09/11

2013/09/05

2013/08/21

2013/07/10

2013/05/09

2013/05/02

2013/04/25

2013/02/14

2013/01/17

2013/01/10

2012/12/20

2012/11/22

2012/05/10