<p>ページ内でアンカーリンクさせる場合、</p>
<p>何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、</p>
<p>jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。</p>
<p>&nbsp;</p>
<p>ただ、この場合、急激な動作を避けるために、&lt;a&gt;のクリックイベントに対して&#8221;return false;&#8221;をかけて、</p>
<p>実際にはリンクさせないようにするのですが、</p>
<p>CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、</p>
<p>「:target」という疑似クラスがあり、</p>
<p>通常のスムーススクロールではこの「:target」を活かすことができません。</p>
<p>&nbsp;</p>
<p>そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/67/" target="_blank"> DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<p></p>

		<div id="crayon-649540158456f182295739" 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">jQuery</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></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;">
$(function(){
	/*-------------------------------
	通常のsmooth scroll
	-------------------------------*/
	$('a[href^=#]').click(function() {
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

↓

$(function(){
	/*-------------------------------
	「:target」に対応したsmooth scroll
	-------------------------------*/
	$('a[href^=#]').click(function() {
		var speed = 400;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'swing', function(){
			location.href = href;　←ここを追記
		});
		return false;
	});
});</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-649540158456f182295739-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-2">2</div><div class="crayon-num" data-line="crayon-649540158456f182295739-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-4">4</div><div class="crayon-num" data-line="crayon-649540158456f182295739-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-6">6</div><div class="crayon-num" data-line="crayon-649540158456f182295739-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-8">8</div><div class="crayon-num" data-line="crayon-649540158456f182295739-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-10">10</div><div class="crayon-num" data-line="crayon-649540158456f182295739-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-12">12</div><div class="crayon-num" data-line="crayon-649540158456f182295739-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-14">14</div><div class="crayon-num" data-line="crayon-649540158456f182295739-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-16">16</div><div class="crayon-num" data-line="crayon-649540158456f182295739-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-18">18</div><div class="crayon-num" data-line="crayon-649540158456f182295739-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-20">20</div><div class="crayon-num" data-line="crayon-649540158456f182295739-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-22">22</div><div class="crayon-num" data-line="crayon-649540158456f182295739-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-24">24</div><div class="crayon-num" data-line="crayon-649540158456f182295739-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-26">26</div><div class="crayon-num" data-line="crayon-649540158456f182295739-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-28">28</div><div class="crayon-num" data-line="crayon-649540158456f182295739-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158456f182295739-30">30</div><div class="crayon-num" data-line="crayon-649540158456f182295739-31">31</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-649540158456f182295739-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-2"><span class="crayon-h">	</span><span class="crayon-c">/*-------------------------------</span></div><div class="crayon-line" id="crayon-649540158456f182295739-3"><span class="crayon-c">	通常のsmooth scroll</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-4"><span class="crayon-c">	-------------------------------*/</span></div><div class="crayon-line" id="crayon-649540158456f182295739-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a[href^=#]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-6"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-7"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">"href"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-8"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"#"</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-9"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-10"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-i">position</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-11"><span class="crayon-h">		</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-12"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-14">&nbsp;</div><div class="crayon-line" id="crayon-649540158456f182295739-15">↓</div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-16">&nbsp;</div><div class="crayon-line" id="crayon-649540158456f182295739-17"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-18"><span class="crayon-h">	</span><span class="crayon-c">/*-------------------------------</span></div><div class="crayon-line" id="crayon-649540158456f182295739-19"><span class="crayon-c">	「:target」に対応したsmooth scroll</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-20"><span class="crayon-c">	-------------------------------*/</span></div><div class="crayon-line" id="crayon-649540158456f182295739-21"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a[href^=#]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-22"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-23"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">"href"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-24"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"#"</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-25"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-26"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-i">position</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'swing'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158456f182295739-27"><span class="crayon-h">			</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">href</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">;</span>　←ここを追記</div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-28"><span class="crayon-h">		</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-29"><span class="crayon-h">		</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158456f182295739-30"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158456f182295739-31"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>方法は簡単で、</p>
<p>通常のスムーススクロールのアニメーション部分のコールバック関数で、</p>
<p>本来のリンクを強制的に行わせます。</p>
<p>&nbsp;</p>
<p>「:target」を使うときには是非どうぞ。</p>

「:target」疑似クラスを考慮したスムーススクロール

<p>以前、あるコーディングの案件を受けている時に、ニュースの文で文末を&#8230;にしてほしいと言われ、それはコーディングですることじゃなくてシステムでやるのではないかと思ったのですが、いざ調べてみると、CSSで出来る方法がありました。</p>
<p>早速説明していきます。<br />
DEMOもありますのでご覧ください。</p>
<p><a href="/demo/abe/53/" target="_blank" class="demo">DEMO</a></p>
<h2>CSSのみで文末をカットし、&#8230;を代入する方法</h2>
<p>html</p>

		<div id="crayon-649540158425c304956696" 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;div class="text"&gt;
  	&lt;p class="textCut"&gt;つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。&lt;/p&gt;
 &lt;/div&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-649540158425c304956696-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158425c304956696-2">2</div><div class="crayon-num" data-line="crayon-649540158425c304956696-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-649540158425c304956696-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"text"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158425c304956696-2"><span class="crayon-i ">&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"textCut"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540158425c304956696-3"><span class="crayon-i "> </span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>css</p>
<p></p>

		<div id="crayon-6495401584260044683358" 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;">
.text {
  width: 400px;
}
.text .textCut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}</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-6495401584260044683358-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-2">2</div><div class="crayon-num" data-line="crayon-6495401584260044683358-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-4">4</div><div class="crayon-num" data-line="crayon-6495401584260044683358-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-6">6</div><div class="crayon-num" data-line="crayon-6495401584260044683358-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-8">8</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-6495401584260044683358-1"><span class="crayon-k ">.text </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">400px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-4"><span class="crayon-k ">.text .textCut </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584260044683358-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">text-overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">ellipsis</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">white-space</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">nowrap</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>すべて必須になります。<br />
text-overflowのellipsisという値で&#8230;を代入するようです。<br />
横幅の設定はその要素でも、親の要素でも大丈夫です。</p>
<p>そしてこれは横幅で指定し、それ以上のテキストを消すというものなので、<br />
複数行に対応しておらず、一行の場合のみとなります。</p>
<p>複数行、もしくは文字数を設定したい場合、jQueryを使用すれば可能です。</p>
<h2>jQueryでやる方法</h2>
<p>htmlは同じで、<br />
jQueryのソースは以下になります。</p>
<p></p>

		<div id="crayon-6495401584262968720239" 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">JavaScript</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;">
$(function(){
	var elm = $('.textCut2');//対象
	var cutNum = '55';//文字数
	var endTxt = '…';//何を代入するか

	elm.each(function(){
		var textLength = $(this).text().length;
		var textTrim;
		if(cutNum &lt; textLength) {
			textTrim = $(this).text().substr(0,(cutNum));
			$(this).html(textTrim + endTxt);
		}
	});	
});</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-6495401584262968720239-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-2">2</div><div class="crayon-num" data-line="crayon-6495401584262968720239-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-4">4</div><div class="crayon-num" data-line="crayon-6495401584262968720239-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-6">6</div><div class="crayon-num" data-line="crayon-6495401584262968720239-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-8">8</div><div class="crayon-num" data-line="crayon-6495401584262968720239-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-10">10</div><div class="crayon-num" data-line="crayon-6495401584262968720239-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-12">12</div><div class="crayon-num" data-line="crayon-6495401584262968720239-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-14">14</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-6495401584262968720239-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-2"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">elm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.textCut2'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//対象</span></div><div class="crayon-line" id="crayon-6495401584262968720239-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">cutNum</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'55'</span><span class="crayon-sy">;</span><span class="crayon-c">//文字数</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-4"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">endTxt</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'…'</span><span class="crayon-sy">;</span><span class="crayon-c">//何を代入するか</span></div><div class="crayon-line" id="crayon-6495401584262968720239-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-6"><span class="crayon-h">	</span><span class="crayon-i">elm</span><span class="crayon-sy">.</span><span class="crayon-st">each</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584262968720239-7"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-8"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textTrim</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-9"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-10"><span class="crayon-h">			</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">substr</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-11"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">endTxt</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-12"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401584262968720239-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-14"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>もっと良い方法があるかもしれません。</p>
<p>text-overflowについては下記URLで説明されておりますので、<br />
よろしければご覧ください。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow" target="_blank">text-overflow &#8211; CSS | MDN</a></p>

CSSのみで文末をカットし、&#8230;を代入する方法

かなり便利！LESSを少し使ってみました。

最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた

Symfony2 Request クラス 使い方

<p>Markdown記法すぐ忘れちゃう自分向けにまとめ。</p>
<p>文章は少なく行きます。使いやすそうなのだけピックアップ</p>
<table>
<caption>Markdown記法早見表</caption>
<tbody>
<tr>
<th rowspan="2">要素</th>
<th>Markdown 記法</th>
<th>HTML出力</th>
</tr>
<tr>
<th colspan="2">説明</th>
</tr>
<tr>
<td rowspan="2">見出し</td>
<td> ### H3見出し</td>
<td>&lt;h3&gt;H3見出し&lt;/h3&gt;</td>
</tr>
<tr>
<td colspan="2"># はレベル数に応じる。</td>
</tr>
<tr>
<td rowspan="2">段落</td>
<td>文章文章</td>
<td>&lt;p&gt;文章&lt;/p&gt;&lt;p&gt;文章&lt;/p&gt;</td>
</tr>
<tr>
<td colspan="2">空行を挟むと上下の文章が別の段落</td>
</tr>
<tr>
<td rowspan="2">改行</td>
<td>改行する際は   半角スペース2つ以上を末尾に追加</td>
<td>改行する際は&lt;br /&gt;半角スペース2つ以上を末尾に追加</td>
</tr>
<tr>
<td colspan="2">半角スペース2つ入れて改行</td>
</tr>
<tr>
<td rowspan="2">並列リスト</td>
<td>* リスト* リストor- リスト</p>
<p>&#8211; リスト</td>
<td>&lt;ul&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;/ul&gt;</td>
</tr>
<tr>
<td colspan="2">*+ (半角スペース)もしくは-+ (半角スペース)</td>
</tr>
<tr>
<td rowspan="2">順序リスト</td>
<td>1.リスト1.リスト</p>
<p>2.リスト</td>
<td>&lt;ol&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;/ol&gt;</td>
</tr>
<tr>
<td colspan="2">数字＋ピリオド+ (半角スペース）　数字は関係なく、順番に出力される</td>
</tr>
<tr>
<td rowspan="2">引用</td>
<td>&gt;引用</td>
<td>&lt;blockquote&gt;〇〇&lt;/blockquote&gt;</td>
</tr>
<tr>
<td colspan="2">文頭に&gt;</td>
</tr>
<tr>
<td rowspan="2">罫線</td>
<td>&#8211; &#8211; &#8211;</td>
<td>&lt;hr /&gt;</td>
</tr>
<tr>
<td colspan="2">アンダーバー+ (半角スペース）3回</td>
</tr>
<tr>
<td rowspan="2">斜体</td>
<td>*斜体*</td>
<td>&lt;i&gt;斜体&lt;/i&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">強調</td>
<td> **強調**</td>
<td>&lt;strong&gt;強調&lt;/strong&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を2つずつ</td>
</tr>
<tr>
<td rowspan="2">打ち消し線</td>
<td>~~打ち消し線~~</td>
<td>&lt;s&gt;打ち消し線&lt;/s&gt;</td>
</tr>
<tr>
<td colspan="2">前後に~（波線）を２つずつ</td>
</tr>
<tr>
<td rowspan="2">コード</td>
<td><code>コード</code></td>
<td>&lt;code&gt;コード&lt;/code&gt;</td>
</tr>
<tr>
<td colspan="2">前後に｀（バックティック）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">リンク</td>
<td>[Google](http://google.com)</td>
<td>&lt;a href=&#8221;http://google.com&#8221;&gt;Google&lt;/a&gt;</td>
</tr>
<tr>
<td colspan="2">[リンク文字列](URL)</td>
</tr>
<tr>
<td rowspan="2">画像</td>
<td> ![画像名](http://xxx.com/img/logo.jpg)</td>
<td>&lt;img src=&#8221;http://xxx.com/img/logo.jpg&#8221; alt=&#8221;画像名&#8221; /&gt;</td>
</tr>
<tr>
<td colspan="2">![画像名](http://xxx.com/img/logo.jpg)</td>
</tr>
</tbody>
</table>


Markdown記法早見表

初心者は意外と使っていないかもしれないCSSの指定の仕方

SVG.jsでjQueryのようにSVGを軽快に扱う

PHPUnitを使った単体テスト

初級者は意外と理解してない(?)CSSの優先順位について

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

HTML5のインラインSVGとjQueryでお絵描き

<p>今回も趣味シリーズ。</p>
<p>airdroidというアプリのミラーリングという機能を試してみたくそれには端末のRoot化が必要であったため、</p>
<p>Nexus7（2013）をRoot化してみました。</p>
<h2>airdroid</h2>
<p><a href="/uploads-archive/2015/02/AirMirror.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6788" src="/uploads-archive/2015/02/AirMirror-194x300.jpg" alt="AirMirror" width="194" height="300" srcset="/uploads-archive/2015/02/AirMirror-194x300.jpg 194w, /uploads-archive/2015/02/AirMirror-228x351.jpg 228w, /uploads-archive/2015/02/AirMirror.jpg 472w" sizes="(max-width: 194px) 100vw, 194px" /></a></p>
<p>まず、結論のほうから先に紹介しますが、これ分かりますか？</p>
<p>PCのディスプレイ内でAndroidがミラーリングされているんです。<br />
タブレット端末をPCの外部ディスプレイ化するというサービスはあるんですが、それの逆パターンです。<br />
タブレットをPC画面から操作が出来ることになります。</p>
<p>このAirMirrorという機能を有効化するために、端末のroot化が必要になります。</p>
<p>要は、通常では変更出来ないシステム内部まで変更出来る権限を持ったユーザーになることです。</p>
<p>こうすることで何か不具合が生じても、保証範囲外になるのですが、メーカー保証も切れていることですし、サブのタブレット機なので試しにやってみました。</p>
<p>他にもAirdroidというアプリはいろんなことが出来るので面白いです。</p>
<p><a href="https://www.airdroid.com/ja/" target="_blank">https://www.airdroid.com/ja/</a></p>
<h2>Root化までの手順</h2>
<h3>ブートローダーのアンロック</h3>
<p>所要時間30分</p>
<p>この工程が一番大変でした。</p>
<p>AndroidをPCから操作出来るようにAndroidSDKを導入するという工程が初心者からすると難しく、実工程の所要時間だけを記載しましたが、</p>
<p>実際は、理解をするためにいろいろな調査をして数時間要しました。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html</a></p>
<h3>カスタムリカバリ TWRPの導入</h3>
<p>所要時間5分</p>
<p>前工程が出来ているようであれば、同じ要領でカスタムリカバリ TWRPをインストールするだけですので、非常に簡単に思えました。</p>
<p><a href="/uploads-archive/2015/02/IMG_20150202_202521.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6792" src="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg" alt="IMG_20150202_202521" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_202521-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_202521-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_202521.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a>いかにもAndroidをいじりますという画像ですね。</p>
<p><a href="/uploads-archive/2015/02/IMG_20150202_203523.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6793" src="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg" alt="IMG_20150202_203523" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_203523-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_203523-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_203523.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>&nbsp;</p>
<p>インストールが終わるとこのような画面になります。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html" target="_blank"> http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html</a></p>
<h3>SuperSUの導入</h3>
<p>所要時間3分</p>
<p>同じように、以下のサイトを参考にさせて頂いて導入します。</p>
<p>こちらは、アプリアイコンが出現すれば完了です。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html</a></p>
<h3>Airdroidを遊ぶ</h3>
<p>最後に冒頭に掲載した画像になります。</p>
<p>root化が出来ていてればairmirrorという機能が使えるようになります。</p>
<h2>まとめ</h2>
<p>やりたいことが出来ました。</p>
<p>&nbsp;</p>
<p>ANDROIDLOVER.NET様のブログを全面的に参考にさせて頂きました。</p>
<p>ありがとうございます。</p>
<p><a href="http://androidlover.net/" target="_blank">http://androidlover.net/</a></p>


Nexus7（2013）をRoot化してAirdroidを使う

<p>レスポンシブのコーディングは通常のサイトコーディングと違った書き方をした方がいい時があります。</p>
<p>たまにレスポンシブ化されているサイトのソースを見て、「こんな風にやってるんだ〜」と思いながら、<br />
実際に似たようなレイアウトがある場合、参考にさせていただいたりしていますが、そのレスポンシブのパターン集なるサイトがありました。</p>
<h2>Responsive Web Design Patterns</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6790" src="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg" alt="Responsive Web Design Patterns  This Is Responsive" width="640" height="428" srcset="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg 1024w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-300x200.jpg 300w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-228x152.jpg 228w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive.jpg 1235w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちらのサイトは、</p>
<ul>
<li>レイアウト</li>
<li>ナビゲーション</li>
<li>イメージ(画像)</li>
<li>メディア/データ</li>
<li>フォーム</li>
<li>テキスト</li>
<li>モジュール(カルーセルやタブ等)</li>
</ul>
<p>といったレイアウトのパターンがあり、<br />
DEMOを見ることができます。</p>
<p>あとはDEMOのページをFirebugかなにかでソースを見ればその手法がわかります。</p>
<p>初心者はもちろん、経験者にもなにかしら得れるものがあるかと思います。</p>
<p><a href="http://bradfrost.github.io/this-is-responsive/patterns.html" class="link" target="_blank">Responsive Web Design Patterns | This Is Responsive</a></p>


レスポンシブのコーディング時に参考にしたいレイアウトサンプル集

Symfony2　テーブル作成、エンティティの生成

<p>PCとスマホで違うHTML,テンプレートを使用したい場合、Wordpressで作成する場合は便利なプラグインがあるようです。</p>
<p>最近はレスポンシブも増えていますが、別々のソースを使用する場合もまだまだ多いです。<br />
今後そのような状況になりそうなので、プラグインを使ってインストールしてみました。</p>
<p>紹介出来そうなのが3つありましたので、早速紹介したいと思います。</p>
<h2>Multi Device Switcher</h2>
<p>オプションという観点から見ると、こちらが一番豊富だと思います。<br />
日本人の方が作成しているのでもちろん日本語です。</p>
<p>インストール後、<br />
外観に「マルチデザイン」という項目が表示されるので、そこに行くと・・・<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-6756" src="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png" alt="スクリーンショット 2015-01-27 13.25.00" width="636" height="632" srcset="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png 636w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-150x150.png 150w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-300x298.png 300w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-228x226.png 228w" sizes="(max-width: 636px) 100vw, 636px" /><br />
上の写真のようにスマートフォンやタブレット、ガラケー用にテーマを選択できます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6757" src="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png" alt="スクリーンショット 2015-01-27 13.25.28" width="635" height="773" srcset="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png 635w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-246x300.png 246w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-228x277.png 228w" sizes="(max-width: 635px) 100vw, 635px" /><br />
ユーザーエージェントも自由に記載できます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6758" src="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png" alt="スクリーンショット 2015-01-27 13.25.54" width="626" height="350" srcset="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png 626w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-300x167.png 300w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-228x127.png 228w" sizes="(max-width: 626px) 100vw, 626px" /></p>
<p>スマートフォン等で見た際に、PC版を表示といったボタンの設定の可能です。</p>
<p>かなりいい感じだと思いますが、下のサイトでは評価があまりされてないようですね・・・</p>
<p>&nbsp;</p>
<p><a class="link" href="https://wordpress.org/plugins/multi-device-switcher/" target="_blank">Multi Device Switcher</a></p>
<p>&nbsp;</p>
<h2>Any Mobile Theme Switcher</h2>
<p>&nbsp;</p>
<p>こちらはインストール後、<br />
設定に「Any Mobile Theme」という項目が表示されます。<br />
このプラグインはスマホを細かくわけることができます。<br />
iPhone,Android,Window Mobileなんかもありますね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6759" src="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png" alt="スクリーンショット 2015-01-27 13.24.16" width="630" height="626" srcset="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png 737w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-150x150.png 150w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-300x297.png 300w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-228x226.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>スマホでも更に細かくテーマを切り替えたい場合はこちらがいいかもしれませんね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6760" src="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png" alt="スクリーンショット 2015-01-27 13.55.48" width="630" height="414" srcset="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png 729w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-300x197.png 300w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-228x149.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>オプションとしては、先ほどのにもあった「PC版」「スマホ版」へ切り替えリンクがフッターに表示されます。<br />
また、「PC版」「スマホ版」の表示の記憶を設定できます。</p>
<p>評価としては、こちらのほうが先ほど紹介したものよりは高くなっております。</p>
<p><a class="link" href="https://wordpress.org/plugins/any-mobile-theme-switcher/" target="_blank">Any Mobile Theme Switcher</a></p>
<p>&nbsp;</p>
<h2>Device Theme Switcher</h2>
<p>&nbsp;</p>
<p>インストール後、<br />
外観に「Device Themes」という項目が表示されます。</p>
<p>そこへ行くと以下の画像のようなページになりますが・・・上２つと比べるとちょっと、、、って感じですね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6761" src="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png" alt="スクリーンショット 2015-01-27 13.24.47" width="630" height="211" srcset="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png 867w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-300x100.png 300w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-228x76.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="https://wordpress.org/plugins/device-theme-switcher/" target="_blank">Device Theme Switcher</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>一つのWordpressで作れば、記事やカテゴリが共有できるので便利ですね！！</p>


WordPressにてデバイス毎にテーマを切り替えさせるプラグイン

アニメーション付きSVGで実装する滑らかで自然なアニメーション

<p>今回は動画でweb系のスキルを学べるサービスをご紹介します。</p>
<p>以前、web上で学べるサイトを紹介した時にあった、ドットインストールやschooも動画で学べるサイトですね！<br />
その二つはかなり普及されているように感じます。</p>
<p>今回ご紹介するのは3つのサイトになります。</p>
<h2>Progate</h2>
<p><a href="http://prog-8.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6683" src="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg" alt="Progate  Learn to Code, Learn to be Creative." width="620" height="346" srcset="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg 1024w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-300x167.jpg 300w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-228x127.jpg 228w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative..jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://prog-8.com/" target="_blank" class="link">Progate | Learn to Code, Learn to be Creative.</a></p>
<h2>Udemy</h2>
<p><a href="https://www.udemy.com/courses/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6681" src="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg" alt="Best Online Courses  Udemy" width="620" height="346" srcset="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg 1024w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-300x167.jpg 300w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-228x127.jpg 228w, /uploads-archive/2015/01/Best-Online-Courses-Udemy.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="https://www.udemy.com/courses/" target="_blank" class="link">Best Online Courses | Udemy</a></p>
<h2>Learn Git</h2>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6682" src="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg" alt="Learn Git - Learn Version Control with Git" width="620" height="346" srcset="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg 1024w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-300x167.jpg 300w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-228x127.jpg 228w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank" class="link">Learn Git &#8211; Learn Version Control with Git</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2015/03/05

2015/03/04

2015/02/27

2015/02/27

2015/02/27

2015/02/26

2015/02/18

2015/02/18

2015/02/11

2015/02/11

2015/02/11

2015/02/10

2015/02/05

2015/02/05

2015/01/28

2015/01/27

2015/01/27

2015/01/22