<p>文章はほとんどのHPにあると思いますが、</p>
<p>その文章でちょっと悩ませるのが折り返しについてです。</p>
<p>&nbsp;</p>
<p>紙とは違い完全に思い通りにはならないものなのですが、</p>
<p>cssでいろいろな設定をすることができます。</p>
<p>&nbsp;</p>
<p>その主要なものが以下になります。</p>
<h3>word-wrap</h4>
<p><strong>normal</strong><br />
単語の途中で改行はせず、必要に応じて表示範囲を拡大。<br />
<strong>break-word</strong><br />
必要に応じて単語の途中で改行</p>
<h3>word-break</h4>
<p><strong>normal</strong><br />
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。<br />
<strong>break-all</strong><br />
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。<br />
<strong>keep-all</strong><br />
言語に関係なく単語の途中では改行せず、単語で改行。</p>
<h3>white-space</h4>
<p><strong>normal</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。<br />
<strong>pre</strong><br />
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。<br />
<strong>nowrap</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。</p>
<p>&nbsp;</p>
<p>となっておりますが、</p>
<p>言葉で説明されてもあまりピンとこないと思いますので、</p>
<p>英語と日本語で実際にhtmlで作成してみましたので、</p>
<p>ご覧ください。<br />
<a class="demo" href="/demo/abe/35/" target="_blank">DEMO</a></p>
<p>あまり変わらないような感じがしますね・・・</p>
<p>word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、</p>
<p>おそらくhtmlの状況によって変わってくるのだと思います。</p>
<p>簡単な参考にしてください。</p>
<p>&nbsp;</p>
<p>ちなみに、DEMOに入ってるテキストは、</p>
<p>以下のサイトで生成されたものを使用しています。</p>
<p>テキスト何入れようかと迷った時はいいですね！</p>
<p>日本語<br />
<a href="http://www.blindtextgenerator.com/lorem-ipsum" target="_blank">http://www.blindtextgenerator.com/lorem-ipsum</a></p>
<p>英語<br />
<a href="http://lipsum.sugutsukaeru.jp/index.cgi" target="_blank">http://lipsum.sugutsukaeru.jp/index.cgi</a></p>


cssで制御する折り返しのまとめ

<p>フラットデザインが流行っているのと共に、</p>
<p>ロングシャドウもじわじわと流行りつつあるようです。（もしかしたらもう流行ってる？？）</p>
<p>&nbsp;</p>
<p>ロングシャドウってなに？？っていう人は、</p>
<p>以下のサイトをご覧ください。</p>
<p>&nbsp;</p>
<p><a href="http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/">Flat design casts a long shadow | Webdesigner Depot</a></p>
<p>&nbsp;</p>
<p>要はやたら長いドロップシャドウみたいな感じですね。</p>
<p>フラットデザインと相まっていい感じですね！！</p>
<p>&nbsp;</p>
<p>そんなドロップシャドウを簡単に作れる無料PSDがあります！</p>
<p>斜め45度限定になりますが、十分でしょう！</p>
<p>&nbsp;</p>
<p>以下からダウンロードして下さい！</p>
<p>&nbsp;</p>
<p><a href="http://graphicburger.com/long-shadow-generator/">Long Shadow Generator | GraphicBurger</a></p>
<p>&nbsp;</p>
<p>実際にPSDを開いてみると、</p>
<p>レイヤーがこんな感じになっているので、</p>
<p><a href="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3491" alt="スクリーンショット 2013-10-28 21.43.04" src="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png" width="342" height="327" srcset="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png 342w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-300x286.png 300w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-228x218.png 228w" sizes="(max-width: 342px) 100vw, 342px" /></a></p>
<p>Your design hereに合わせて、右クリックで、</p>
<p>「コンテンツを置き換え」をするとそのコンテンツに合わせてシャドウが生成されます。</p>
<p>テキスト、アイコンなんでもOKっぽいです。</p>
<p>&nbsp;</p>
<p>上のメインビジュアルが実際に作ってみたものになります。</p>
<p>&nbsp;</p>
<p>これはPSDですが、</p>
<p>htmlを生成してくれるサイトもあり、css3を使って表現しているようです。</p>
<p>以下のサイトになります。</p>
<p>&nbsp;</p>
<p><a href="http://sandbox.juan-i.com/longshadows/">Long Shadows Generator &#8211; by Juani</a></p>
<p>&nbsp;</p>
<p>実に簡単にできますね！！</p>
<p>これでロングシャドウは怖くないぞ！！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>おまけ：</p>
<p>iOS７のカラーコードを一覧にしているサイトがあります。</p>
<p>カラーの参考にぜひどうぞ！</p>
<p>&nbsp;</p>
<p><a href="http://ios7colors.com/">iOS 7 colors</a></p>
<p>&nbsp;</p>


流行りつつあるロングシャドウを作れる無料PSD

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ブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #CSS

2013/11/07

2013/10/29

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