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

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

SVGとCSS3でできる筆記体のアニメーションをやってみる

背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法

CSSのぼかしフィルターを利用した、フォーカスによる遠近表現

<p>最近はちょっとした動きはもちろん、今までjavascriptで制御していた動きもcssでできるようになってきました。</p>
<p>css3も含めて、動かすプロパティはいっぱいあるのですが、正直把握しきれていないのと、実際どういう動きをするかわからないのもあります。</p>
<p>自分でいろいろ試すのも面白いのですが、<br />
動きのパターンをたくさん用意してくれているサイト(フレームワークになるのかな)を紹介します。</p>
<p>まずはhoverの動きです。</p>
<h2>Hover.css</h2>
<p>様々なパターンが用意されているので、そのまま使ってみたり、<br />
ここから発想させて自分なりの動きを考えてみたりできるかと思います！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6457" src="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg" alt="Hover.css - A collection of CSS3 powered hover effects" width="640" height="365" srcset="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg 1024w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-300x170.jpg 300w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-228x129.jpg 228w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css &#8211; A collection of CSS3 powered hover effects</a></p>
<p>次はクリックでの動きです。</p>
<h2>magic_animations</h2>
<p>hover.cssと同様、様々なパターンが用意されています。<br />
これを見て、動きを考えるのがいいですね！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6458" src="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg" alt="Magic Animations CSS3" width="640" height="365" srcset="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg 1024w, /uploads-archive/2014/12/Magic-Animations-CSS3-300x170.jpg 300w, /uploads-archive/2014/12/Magic-Animations-CSS3-228x129.jpg 228w, /uploads-archive/2014/12/Magic-Animations-CSS3.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://www.minimamente.com/example/magic_animations/" target="_blank">Magic Animations CSS3</a></p>
<p>webサイトのアクセントとしてこのような動きがあるだけでも、<br />
だいぶ違って見えるので、サイトのリッチ感がアップして見えますね。</p>
<p>デザインの発想にも使えるので見てるだけでも楽しいです！</p>


css3だけでhoverやclickの動きを豪華にしよう！

cssを使ったちょっとしたテクニック

<p>いわゆるFlexibleBoxとかFlexBoxとか呼ばれてるみたいなんですが、こちらまだ実践で使ったことがないので、試しに使ってみました。</p>
<p>こちらはcss3なので最新のブラウザしか対応してなくて、IE９ですら対応してないようなので、実践には向かないかと思います。</p>
<p>こちらはその名の通り、レイアウトをフレキシブルにできるもので、今までカラムをfloatを使っていたものをこちらのプロパティでできるというものです。<br />
考え方としてはtableと似てると思います。</p>
<p><a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>とりあえずデモがありますのでそちらをご覧ください。</p>
<p>グロナビと、メインビジュアル下のコンテンツに使用しています。</p>
<p><a href="/demo/abe/50/" class="demo" target="_blank">DEMO</a></p>
<p>htmlは以下のようになります。</p>
<p></p>

		<div id="crayon-64954015800e3321432114" 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;ul class="gnavi"&gt;
            	&lt;li class="navi01"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi02"&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi03"&gt;&lt;a href="#"&gt;Service&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi04"&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi05"&gt;&lt;a href="#"&gt;Recruit&lt;/a&gt;&lt;/li&gt;
                &lt;li class="navi06"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&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-64954015800e3321432114-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-2">2</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-4">4</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-6">6</div><div class="crayon-num" data-line="crayon-64954015800e3321432114-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e3321432114-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-64954015800e3321432114-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"gnavi"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi01"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Home</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi02"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">About us</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi03"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Service</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi04"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Work</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi05"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Recruit</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64954015800e3321432114-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"navi06"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">Blog</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e3321432114-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これに対してcssは、</p>
<p></p>

		<div id="crayon-64954015800e8318036862" 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;">
.gnavi
{
	margin-top: -3px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
    -webkit-justify-content: space-around;
}
.gnavi li
{
	flex: auto;
    -webkit-flex: auto;
	border-top: 3px solid #444;
	border-bottom: 3px solid #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	
}</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-64954015800e8318036862-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-2">2</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-striped-num" data-line="crayon-64954015800e8318036862-4">4</div><div class="crayon-num crayon-marked-num" data-line="crayon-64954015800e8318036862-5">5</div><div class="crayon-num crayon-marked-num crayon-striped-num" data-line="crayon-64954015800e8318036862-6">6</div><div class="crayon-num crayon-marked-num crayon-bottom" data-line="crayon-64954015800e8318036862-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-8">8</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-10">10</div><div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-64954015800e8318036862-11">11</div><div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-64954015800e8318036862-12">12</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-14">14</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-16">16</div><div class="crayon-num" data-line="crayon-64954015800e8318036862-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015800e8318036862-18">18</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-64954015800e8318036862-1"><span class="crayon-k ">.gnavi</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-3"><span class="crayon-h">	</span><span class="crayon-e ">margin-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-3px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-striped-line" id="crayon-64954015800e8318036862-4"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line" id="crayon-64954015800e8318036862-5"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-webkit-flex</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-striped-line" id="crayon-64954015800e8318036862-6"><span class="crayon-h">	</span><span class="crayon-e ">justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom" id="crayon-64954015800e8318036862-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-justify-content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">space-around</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-9"><span class="crayon-k ">.gnavi li</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-10"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-marked-line crayon-top" id="crayon-64954015800e8318036862-11"><span class="crayon-h">	</span><span class="crayon-e ">flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line" id="crayon-64954015800e8318036862-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">-webkit-flex</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-13"><span class="crayon-h">	</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#444</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-14"><span class="crayon-h">	</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#fff</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-15"><span class="crayon-h">	</span><span class="crayon-e ">-webkit-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-16"><span class="crayon-h">	</span><span class="crayon-e ">-moz-transition</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">all</span><span class="crayon-h"> </span><span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015800e8318036862-17"><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015800e8318036862-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>親要素に<strong>display: flex;</strong>を設定するだけで横並びレイアウトが簡単にできます！<br />
あとは、<strong>justify-contentやflex</strong>の値を変更すると、幅や余白の調整ができます。</p>
<p>ちなみに、<strong>justify-content</strong>のプロパティとイメージは以下になります。<br />
<img decoding="async" src="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/images/flex-pack.svg"><br />
参照：<a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#propdef-justify-content" target="_blank">CSS Flexible Box Layout Module Level 1</a></p>
<p>もっと複雑かつ細かく設定できるのですが、本記事ではここまでとさせていただきます。<br />
横並びだけでなく、縦の並びもできるようで、縦中央や縦均等で並べたり、今までなかなかできなかったことが簡単にできるようにもなります。</p>
<p>その辺はまたいずれご説明したいと思います。</p>

css3のFlexible Box Layout Moduleで横並びレイアウトが簡単に！

横幅だけじゃない！Media Queryでの指定の方法

<p>CSS2では、:first-childを使って最初の要素を選択することができますが、</p>
<p>CSS3では、:nth-child(n)を使って、特定の順番にある要素を選択することができます。</p>
<p>ただ、この:nth-child(n)は指定した要素の親要素からみた子要素が、<strong>要素の種類(タイプ)に関係なくカウントの対象となる</strong>ため、</p>
<p>例えば</p>

		<div id="crayon-649540157d5a6692001151" 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&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&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-649540157d5a6692001151-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-2">2</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-4">4</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-6">6</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5a6692001151-8">8</div><div class="crayon-num" data-line="crayon-649540157d5a6692001151-9">9</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-649540157d5a6692001151-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5a6692001151-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5a6692001151-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このようなHTMLで2番目の&lt;p&gt;を選択したいと思って、</p>
<p>「p:nth-child(2)」</p>
<p>としてしまった場合、pの親要素である&lt;div&gt;の子要素にはpの前に&lt;h2&gt;と&lt;h3&gt;があり、</p>
<p>この親要素の&lt;div&gt;の2番目の子要素はh3になるので、</p>
<p>p:nth-child(2)という要素は存在しないことになり、この指定は無効になってしまいます。</p>
<p>&nbsp;</p>
<p>そのため、2番目の要素の&lt;p&gt;を選ぶ場合は、</p>
<p>「p:nth-child(4)」</p>
<p>としなければならず、少しわかりづらいだけでなく、以後の更新作業において要素の位置がずれてしまい、</p>
<p>意図しない崩れが起きてしまう可能性も出てきてしまします。</p>
<p>&nbsp;</p>
<p>こんな場合に便利なのが、nth-childと同様にCSS3で使うことができるようになった、<strong>nth-of-type</strong>です。</p>
<p>nth-of-typeでは、先ほどと同じ</p>

		<div id="crayon-649540157d5aa568033988" 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&gt;
	&lt;h2&gt;h2の要素&lt;/h2&gt;
	&lt;h3&gt;h3の要素&lt;/h3&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
	&lt;p&gt;3&lt;/p&gt;
	&lt;p&gt;4&lt;/p&gt;
	&lt;p&gt;5&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-649540157d5aa568033988-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-2">2</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-4">4</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-6">6</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157d5aa568033988-8">8</div><div class="crayon-num" data-line="crayon-649540157d5aa568033988-9">9</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-649540157d5aa568033988-1"><span class="crayon-r ">&lt;div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h2&gt;</span><span class="crayon-i ">h2の要素</span><span class="crayon-r ">&lt;/h2&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-3"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;h3&gt;</span><span class="crayon-i ">h3の要素</span><span class="crayon-r ">&lt;/h3&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-5"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-6"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-7"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157d5aa568033988-8"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540157d5aa568033988-9"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のようはHTMLにおいて、</p>
<p>「p:nth-of-type(2)」</p>
<p>と指定した場合、&lt;p&gt;以外の要素が同じ親要素内に子要素として存在する場合でも、それらはカウントされず、</p>
<p><strong>指定した要素と同じタイプの要素だけを対象にカウントが行われる</strong>ため、</p>
<p>2番目にある&lt;p&gt;を選択することができます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/53/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>ちなみにこの:nth-of-typeは:nth-childと同じく、スマホのブラウザやChrome, FIreFox, Opera, IE9以上のブラウザで利用できます。</p>
<p>:nth-of-type(n)の類似の要素として、:first-of-type、:last-of-type、:nth-last-of-type(n)があります。</p>
<p>特定の種類の要素を対象にカウントするか、種類に関係なくカウントするかで、</p>
<p>使い分けするといいと思います。</p>

CSS3の:nth-child(n)と:nth-of-type(n)

CSS3でドミノ倒しみたいにテキストが倒れていくアニメーション

<p>前回css3のアニメーションの記事を書きましたが、</p>
<p><a href="/designer/css3%e3%81%aeanimation%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e4%ba%88%e6%83%b3%e4%bb%a5%e4%b8%8a%e3%81%ab%e7%b0%a1%e5%8d%98%e3%81%a0%e3%81%a3%e3%81%9f%ef%bc%81.html">css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社</a></p>
<p>タイトルのようなwebサービスがあるようです。</p>
<p>その名も、<a href="http://bouncejs.com/" target="_blank">Bounce.js</a></p>
<p>四角いボックスのアニメーションを、</p>
<p>様々な項目から設定でき、css3でエクスポートできます。</p>
<p>エクスポートのソースかなり長いですね笑</p>
<p>&nbsp;</p>
<p>アニメーションのパターンも用意されています。</p>
<p><a href="http://bouncejs.com/" target="_blank" class="link">Bounce.js</a></p>
<p>&nbsp;</p>


css3アニメーションをwebブラウザ上で作成できるサービス

css3のanimationを使ってみたら予想以上に簡単だった！

<p>border-radiusやbox-shadow、transitionなど、PCサイトでもCSS3を使うことは徐々に増えてきました。</p>
<p>今回は、そんなCSS3を使ってアニメーションをしているサイトで、</p>
<p>ちょっとひと味違う感じのサイトを集めてみました。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://giorgibou.com/" target="_blank">Georgina Bousia | Architect and Graphic Designer</a></p>
<p><a href="http://giorgibou.com/" target="_blank"><img decoding="async" loading="lazy" alt="Georgina Bousia" src="/uploads-archive/2014/04/Georgina.png" width="656" height="382" /></a></p>
<p>&nbsp;</p>
<p>メインビジュアルに使われている、微かに白がかった菱形がゆっくり移動するアニメーションがcss3によって実装されています。<br />
ナビゲーションにbefore疑似要素でつけられた伸び縮みするアンダーラインも面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.newbalance.co.jp/wellness/" target="_blank">Wellness｜New Balance Japan</a></p>
<p><a href="http://www.newbalance.co.jp/wellness/" target="_blank"><img decoding="async" loading="lazy" alt="Wellness" src="/uploads-archive/2014/04/Wellness.png" width="656" height="521" /></a></p>
<p>&nbsp;</p>
<p>メインビジュアルの動画もインパクトがありますが、コンテンツへのリンクをマウスでホバーしたときの画像の拡大と、変形が面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://trip-u.com/" target="_blank">TRIP(トリップ)：観光･体験商品の売買プラットフォーム</a></p>
<p><a href="https://trip-u.com/" target="_blank"><img decoding="async" loading="lazy" alt="TRIP(トリップ)" src="/uploads-archive/2014/04/58bf890e57cf7b71d2ae9ffda86c3885.png" width="656" height="419" /></a></p>
<p>メインビジュアルのテキスト部分がスライダーと連動してアニメーションしています。<br />
この部分と下のコンテンツ画像はマウスでホバーすると拡大されます。</p>
<p>ホバーすると画像が拡大されるアニメーションの使われたサイトが増えてきている印象を感じました。</p>
<p>&nbsp;</p>


CSS3アニメーションがひと味違うサイト

css3のtransformを使って画像のモーダルウィンドウを作ってみた

<p>CSSの設定で、&#8221;overflow: auto&#8221; や&#8221;overflow:scroll&#8221;を指定したとき、</p>
<p>iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、</p>
<p>スクロールは可能なのですが、スクロールバーが表示されません。</p>
<p>そのままでは、そこがスクロール可能であるということがわかりづらく、</p>
<p>サイトとして使いづらくなってしまう可能性が高くなります。</p>
<p>&nbsp;</p>
<p>なんとか解決策はないかと探していたところ、</p>
<p>Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、</p>
<p>その方法についてご紹介いたします。</p>
<p>&nbsp;</p>
<p>↓こちらがデモです(ChromeもしくはSafariにてご覧下さい)</p>
<p><a class="demo" href="/demo/ninomiya/42/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundとborder-radiusとなります。</p>
<p><img decoding="async" loading="lazy" alt="-webkit-scrollbarの説明" src="/uploads-archive/2014/03/webkit-scrollbar.png" width="640" height="640" /></p>
<p>横方向のスクロールバーを別で指定する場合には、:horizontal疑似クラスを設定することで可能となります。</p>
<p>また、スクロールバーの動く部分(scrollbar-thumb)の前の部分は:start疑似クラス、後ろの部分は:end疑似クラスにて設定が可能です。</p>
<p>例：</p>

		<div id="crayon-64953fd5988a7717493864" 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">CSS</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;">
.element{ /* 対象となる要素のクラス名が"element"の場合 */
	overflow: auto;
}
.element::-webkit-scrollbar{ /* スクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar-thumb{ /* スクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}
.element::-webkit-scrollbar-track-piece:start{ /* スクロールバーの動く部分の前 */
	background: #9aadfc;
}
.element::-webkit-scrollbar-track-piece:end{ /* スクロールバーの動く部分の後ろ */
	background: #a3d2a0;
}
.element::-webkit-scrollbar-corner{ /* スクロールバー角 */
	background: transparent;
}</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-64953fd5988a7717493864-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-2">2</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-4">4</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-6">6</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-8">8</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-10">10</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-12">12</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-14">14</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-16">16</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-18">18</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-20">20</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-22">22</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-24">24</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-26">26</div><div class="crayon-num" data-line="crayon-64953fd5988a7717493864-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5988a7717493864-28">28</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-64953fd5988a7717493864-1"><span class="crayon-k ">.element</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 対象となる要素のクラス名が"element"の場合 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-2"><span class="crayon-h">	</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-4"><span class="crayon-k ">.element::-webkit-scrollbar</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-5"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-6"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-8"><span class="crayon-k ">.element::-webkit-scrollbar:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバー本体 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-9"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-10"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-12"><span class="crayon-k ">.element::-webkit-scrollbar-thumb</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-13"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-14"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-15"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-16"><span class="crayon-k ">.element::-webkit-scrollbar-thumb:horizontal</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* 横方向のスクロールバーの動く部分 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-17"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#435295</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-18"><span class="crayon-h">	</span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-20"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:start</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の前 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-21"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#9aadfc</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-22"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-23"><span class="crayon-k ">.element::-webkit-scrollbar-track-piece:end</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバーの動く部分の後ろ */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-24"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#a3d2a0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-25"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-26"><span class="crayon-k ">.element::-webkit-scrollbar-corner</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">/* スクロールバー角 */</span></div><div class="crayon-line" id="crayon-64953fd5988a7717493864-27"><span class="crayon-h">	</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">transparent</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5988a7717493864-28"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こちらのサイト（→<a href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a>）で、より詳しい説明をしていただいてました。</p>
<p>&nbsp;</p>
<p>あまり細かな設定はできませんが、スクロールバーの存在を示す場合には十分に使うことができるので、</p>
<p>Webkitの利用が多いスマートフォンサイトなどでは実用としても利用できると思います。</p>
<p>&nbsp;</p>
<h3>参考サイト</h4>
<p><a class="link" href="http://dev.classmethod.jp/client-side/webkit-scrollbar-design/" target="_blank">Webkit独自拡張でスクロールバーのデザインを変更する</a></p>
<p><a class="link" href="http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank">WebKitを使ってスクロールバーをカスタマイズ</a></p>

small_nino-eye (4).jpg

thumbnail_nino-eye (4).jpg

nino-eye (4).jpg

iPhoneやAndroidのサイトでスクロールバーをカスタマイズ

<p>SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。</p>
<p>しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。</p>
<p>SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。</p>
<p><a class="demo" href="/demo/ninomiya/41/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、body内の要素を丸々コピーして要素の上に被せ、</p>
<p>被せた要素にfilterをかけてcssのclipで一部だけ表示するという方法を使いました。</p>
<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd597e37519460867" 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">HTML</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;body&gt;
&lt;div class="contents"&gt;
	：
	(コンテンツ)
	：
&lt;/div&gt;
&lt;/body&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-64953fd597e37519460867-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-7">7</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-64953fd597e37519460867-1"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-2"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"contents"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-3"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-4"><span class="crayon-i ">	(コンテンツ)</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-5"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-7"><span class="crayon-r ">&lt;/body&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>JavaScript</p>

		<div id="crayon-64953fd597e3b848665737" 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">JavaScript</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(){
	 //body内のコンテンツをコピーしてコンテンツの後ろに挿入する
	$("body").append($(".contents").clone());

	$(".contents:last").css({
		"width" : "100%",
		"position" : "absolute",
		"top" : "0",
		"left" : "0",
		"-webkit-filter" : "blur(10px)", //ぼかしをかける
		"clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する
	});
});</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-64953fd597e3b848665737-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-8">8</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-10">10</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-12">12</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-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-64953fd597e3b848665737-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-64953fd597e3b848665737-2"><span class="crayon-h">	 </span><span class="crayon-c">//body内のコンテンツをコピーしてコンテンツの後ろに挿入する</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"body"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</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-64953fd597e3b848665737-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597e3b848665737-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents:last"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-6"><span class="crayon-h">		</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-7"><span class="crayon-h">		</span><span class="crayon-s">"position"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-8"><span class="crayon-h">		</span><span class="crayon-s">"top"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-9"><span class="crayon-h">		</span><span class="crayon-s">"left"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-10"><span class="crayon-h">		</span><span class="crayon-s">"-webkit-filter"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"blur(10px)"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//ぼかしをかける</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-11"><span class="crayon-h">		</span><span class="crayon-s">"clip"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"rect(540px 600px 900px 240px)"</span><span class="crayon-h"> </span><span class="crayon-c">//クリッピングして一部だけ表示する</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-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-64953fd597e3b848665737-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>今回作ったものは、現在のところChrome, Safariだけで使える方法なので、</p>
<p>実用にはまだまだ遠いですが、SVGを使った方法（参考→「<a href="http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/" target="_blank">CSS と SVG で曇りガラスのような効果を作る</a>」）と合わせ、</p>
<p>効果の出し分けをするなどすれば、少しでも実用化に近づけることができるかもしれません。</p>
<p>&nbsp;</p>
<p>いずれにしても、Android2.3系でもぼかし効果を使うことはあきらめなければならなそうです。<br />
Android2.3系は、Androidの中でも2014年2月時点でも2割のシェアがあり（<a href="http://developer.android.com/about/dashboards/index.html" target="_blank">参考</a>）、無視することもできないため、</p>
<p>もしぼかし効果を使う場合は、Android2.3系において、ぼかし無しで問題無いようなデザインにしておく必要がありそうです。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #CSS

2015/02/26

2015/02/17

2015/01/13

2015/01/07

2015/01/07

2014/12/09

2014/12/03

2014/11/25

2014/11/05

2014/10/14

2014/07/01

2014/06/17

2014/06/11

2014/04/15

2014/03/18

2014/03/11

2014/02/18

2013/12/17