CSSでユーザーのトラッキング

少しずつ実装の進んできているCSSのグリッドレイアウトを試してみる

D3.jsでアニメーション付き棒グラフを作ってみました

small_switch.png

thumbnail_switch.png

switch.png

デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる

CSS3のPerspectiveを使ったパララックス

Three.jsでCSS3の3D描画ができた！

前から気になっていたwebサイトの表現を試してみた&#8230;

CSSの3D回転で切り替える画像ビューアを作ってみました

<p>CSS3 や SVG など、HTML5 のアニメーションに対応したブラウザが普及したことで、<br />
アニメーションを実装するのが以前と比べて簡単になってきました。</p>
<p>そのため、以前と比べるとアニメーションを WEB ページの多くの要素に使う機会が増えてきます。</p>
<p>ただ、自力でとなると、どうしても技術や工数の問題などで、アニメーションの種類が簡単なものに偏り、ワンパターンになってしまいがちなのが、最近気になってきていました。</p>
<p>そこで、もっとリッチなアニメーションを実装するためのライブラリがないか探していたところ、以下のサイトで「mo.js」というライブラリが紹介されているのを見つけました。</p>
<p><a class="link" href="http://creator.dwango.co.jp/6527.html" target="_blank" rel="noopener noreferrer">生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい | dwango creators&#8217; blog（ドワンゴクリエイターズブログ）</a></p>
<p>デモを見ると、とても凝ったアニメーションが実装されており、<br />
是非使ってみたいと思いました。</p>
<p><a class="link" href="http://mojs.io/" target="_blank" rel="noopener noreferrer">mo · js &#8211; Motion Graphics For The Web</a></p>
<p>mo.js は HTML の CSS3 と SVG によりアニメーションが実装されるため、<br />
Canvas のように枠にとらわれることもなければ、HTML + CSS3 でのアニメーションのように、形が制限されることもありません。<br />
また、IE9 以上のブラウザで使うことができるなど、多くのブラウザで使うことができるのも特徴です。</p>
<p>以下、mo.js を使って作ったものです。</p>
<p><a class="demo" href="/demo/ninomiya/128/">DEMO</a></p>
<p>使ってみての感想としては、難易度が高めという印象を受けました。<br />
理由は、</p>
<ul>
<li>JavaScript や SVG について、ある程度使い慣れている前提のライブラリになっているよう</li>
<li>習得するためには、<a href="http://mojs.io/tutorials/shape/" target="_blank" rel="noopener noreferrer">チュートリアル</a>を実践しながら、長い時間をかけて学習する必要がある</li>
<li>チュートリアルのデモコードが ECMAScript 6 で書かれているところがあるので、IEや旧ブラウザに対応させるために、そのままのコードは使えない場合がある(でもページからコードを引っこ抜く必要がある)</li>
</ul>


mo.jsを使った心地よいアニメーション

<p>サイトの一覧ページ等で画像のサムネイルを枠の上下中央に設置したいという要望がよくあります。</p>
<p>以前はjavascriptを使ってみたりしていたのですが、<br />
ある条件下ではcssだけで設置することが可能なことを知りました。</p>
<p>ある要素を上下中央に設置する代表例としては、<br />
left,topを50%にして、marginのleft,topをその要素の半分の数値のマイナスにする形だと思います。</p>
<p>しかし、CMSを使って更新するサイトの場合、画像のサイズがバラバラになる事が多く、marginの指定をすることができません。</p>
<p>そこで以下のようにすると、画像を上下中央にすることができます。</p>
<p></p>

		<div id="crayon-6495402646976467790077" 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></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;">
li figure {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
li figure img {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}</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-6495402646976467790077-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-2">2</div><div class="crayon-num" data-line="crayon-6495402646976467790077-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-4">4</div><div class="crayon-num" data-line="crayon-6495402646976467790077-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-6">6</div><div class="crayon-num" data-line="crayon-6495402646976467790077-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-8">8</div><div class="crayon-num" data-line="crayon-6495402646976467790077-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-10">10</div><div class="crayon-num" data-line="crayon-6495402646976467790077-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-12">12</div><div class="crayon-num" data-line="crayon-6495402646976467790077-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-14">14</div><div class="crayon-num" data-line="crayon-6495402646976467790077-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-16">16</div><div class="crayon-num" data-line="crayon-6495402646976467790077-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402646976467790077-18">18</div><div class="crayon-num" data-line="crayon-6495402646976467790077-19">19</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-6495402646976467790077-1"><span class="crayon-e">li</span><span class="crayon-h"> </span><span class="crayon-e">figure</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">300px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">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" id="crayon-6495402646976467790077-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">relative</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495402646976467790077-7"><span class="crayon-e">li</span><span class="crayon-h"> </span><span class="crayon-e">figure</span><span class="crayon-h"> </span><span class="crayon-e">img</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">width</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-6495402646976467790077-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">height</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-striped-line" id="crayon-6495402646976467790077-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">min</span>-<span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">min</span>-<span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402646976467790077-14"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">top</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-15"><span class="crayon-h">&nbsp;&nbsp;</span>-<span class="crayon-i">webkit</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">translate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>-<span class="crayon-cn">50</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-6495402646976467790077-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span>-<span class="crayon-i">moz</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">translate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-i">ms</span>-<span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">translate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>-<span class="crayon-cn">50</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-6495402646976467790077-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">transform</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">translate</span><span class="crayon-sy">(</span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>-<span class="crayon-cn">50</span><span class="crayon-sy">%</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495402646976467790077-19"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>実際にDEMOがあります。<br />
<a href="/demo/abe/70/" target="_blank" class="demo">DEMO</a><br />
元画像を下の方に表示しているので比べてみて下さい。</p>
<p>今までmarginで調節していたのを、css3のtranslateを使用することでサイズを指定する必要がなくなりました。<br />
あとポイントとしては、<br />
・画像が小さくても、高さか幅の短い方が100%になり、枠の中で余白が出ない</p>
<p>注意点としては<br />
・枠のサイズが決まっている必要がある<br />
・枠のサイズより大きい時に、短い方を100%にして&#8230;というのはできない<br />
・大きすぎる画像を調節できない(DEMOではmax-width200pxを設定していますが&#8230;)</p>
<p>という感じです。</p>
<p>CSSで、短い方を基準として&#8230;みたいなことができるといいですね〜</p>
<p>&#8230;.</p>
<p>なんとそれが近い未来できるようになりそうです。</p>
<h3>object-fitを使う</h3>
<p>css3の「object-fit」というプロパティでそれができます。<br />
これは簡単に言うと、background-sizeのcontain,coverをimgタグで実装できるというものです。</p>
<p>ただ、ブラウザのサポートがIE,Edgeで全くサポートしてないため、まだ使うに注意が必要です。<br />
<a href="http://caniuse.com/#feat=object-fit" target="_blank">Can I use&#8230; Support tables for HTML5, CSS3, etc</a></p>
<p>DEMOの下の方にあるのでそちらも良ければご覧ください。</p>
<p>方法はこれだけです！</p>

		<div id="crayon-649540264697a323534660" 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;">
li figure img {
  object-fit: cover;
  width: 300px;
  height: 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-649540264697a323534660-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264697a323534660-2">2</div><div class="crayon-num" data-line="crayon-649540264697a323534660-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264697a323534660-4">4</div><div class="crayon-num" data-line="crayon-649540264697a323534660-5">5</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-649540264697a323534660-1"><span class="crayon-k ">li figure img </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264697a323534660-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">object-fit</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264697a323534660-3"><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 ">300px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264697a323534660-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">240px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264697a323534660-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>画像が勝手にトリミングされて表示されています。<br />
coverは枠内に<strong>余白が出ないように表示</strong>するため、短い方を指定されたサイズに合わせ、長い方は切ってくれます。<br />
containは写真が全部表示されるようにするため、長い方を指定されたサイズに合わせます。そのため<strong>余白が生まれます</strong>。</p>
<p>これは素晴らしいですね！！</p>
<p>もちろん画像自体をトリミングしているわけではないので大きい画像を入れると重たくなってしまうので気を付けて下さい。</p>
<p>果たしてこれはいつIEに搭載されるのでしょうか&#8230;?</p>
<p>以下のサイトを見て勉強させていただきました。<br />
ありがとうございます。</p>
<p>参考サイト：<br />
<a href="http://qiita.com/suin/items/8de26866a8ab6ca65ba4" target="_blank">【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する &#8211; Qiita</a><br />
<a href="http://blog.mismithportfolio.com/web/20151027cssimageplace#d" target="_blank">【CSS】画像の上下中央配置とか画像配置に関するいろいろ – Snaplog</a></p>

CSSだけで画像を上下中央に配置する方法

<p>レスポンシブデザインでは、<br />
PC、タブレット、スマホそれぞれに合わせて、フォントサイズを変更するということが多いと思います。</p>
<p>その際、タイトルなどのアイコンを、<br />
CSSでのアイコンの大きさや背景画像などをpxによって行っていた場合、<br />
フォントサイズごとに指定の変更を行う必要が出てきます。</p>
<p>私はずっとそうしてきたのですが、<br />
そうすると、アイコンが追加になったり、変更になった場合に、多くのCSSコードを追加・変更しなければならなくなるため、<br />
非常に面倒なことになります。</p>
<p>しかし、以下のサイトで、</p>
<p><a class="link" href="http://coliss.com/articles/build-websites/operation/css/resizeable-components-with-relative-units.html" target="_blank" rel="noopener">CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス</a></p>
<p>CSSでの単位として、emを積極的に使うことで、<br />
問題が解決されることを知りましたので、試しにやってみました。</p>
<p><a class="demo" href="/demo/ninomiya/121/">DEMO</a></p>
<h2>例</h2>
<p></p>

		<div id="crayon-649540264504a425741992" 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></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;">
h2::before {
  content: "";
  display: inline-block;
  width: 1.333333em;
  height: 1.333333em;
  margin-right: 0.5em;
  background-image: url(images/icons.png);
  background-size: 10.416667em auto;
  vertical-align: middle;
}
.ttl-chat::before {
  background-position: 0 0;
}
.ttl-pc::before {
  background-position: -1.458333em 0;
}
.ttl-sp::before {
  background-position: -2.916667em 0;
}
.ttl-calender::before {
  background-position: -4.375em 0;
}</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-649540264504a425741992-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-2">2</div><div class="crayon-num" data-line="crayon-649540264504a425741992-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-4">4</div><div class="crayon-num" data-line="crayon-649540264504a425741992-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-6">6</div><div class="crayon-num" data-line="crayon-649540264504a425741992-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-8">8</div><div class="crayon-num" data-line="crayon-649540264504a425741992-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-10">10</div><div class="crayon-num" data-line="crayon-649540264504a425741992-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-12">12</div><div class="crayon-num" data-line="crayon-649540264504a425741992-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-14">14</div><div class="crayon-num" data-line="crayon-649540264504a425741992-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-16">16</div><div class="crayon-num" data-line="crayon-649540264504a425741992-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-18">18</div><div class="crayon-num" data-line="crayon-649540264504a425741992-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-20">20</div><div class="crayon-num" data-line="crayon-649540264504a425741992-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-22">22</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-649540264504a425741992-1"><span class="crayon-i">h2</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">inline</span>-<span class="crayon-i">block</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">margin</span>-<span class="crayon-i">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.5em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-i">images</span>/<span class="crayon-i">icons</span><span class="crayon-sy">.</span><span class="crayon-i">png</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">10.416667em</span><span class="crayon-h"> </span><span class="crayon-i">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vertical</span>-<span class="crayon-i">align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">middle</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-11"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">chat</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-13"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-14"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">pc</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-15"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1.458333em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-17"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">sp</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-18"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">2.916667em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-20"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">calender</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-21"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">4.375em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-22"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回の例では、</p>
<ol>
<li>width, height</li>
<li>background-size</li>
<li>background-position</li>
</ol>
<p>について、emを使った指定を行ってみました。</p>
<p>設定するときは、pxをemへ置き換えるための計算をしなくていはいけないので、若干手間のように感じますが、<br />
一つ設定してしまえば、あとは、font-sizeごとに設定する必要が無いため、<br />
全体としては手間を減らすことができました。</p>
<p>注意点としては、emで指定する場合、小数点6桁くらいまでは指定しないと、微妙にずれてしまうことがあるようです。</p>
<p>今後はこの方法を使っていきたいと思います。</p>
<p>&nbsp;</p>
<h3>追記(2019.09.10)：</h3>
<p><a href="https://launchcart.jp/blog/img%e3%82%bf%e3%82%b0%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a01%e3%81%a4%e3%81%aesvg%e7%94%bb%e5%83%8f%e3%82%92id%e3%81%a7%e5%87%ba%e3%81%97%e5%88%86%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/" target="_blank" rel="noopener">1つのSVGでアイコンを出し分ける方法</a>を紹介しました</p>

【CSS】レスポンシブでは画像を使ったアイコンの指定をemで行う

CSS3の:targetセレクタを使って、アンカーリンクだけでpJaxのような演出

ちょっとかっこいいサイトのMENUを再現してみました

jQueryのアニメーションをCSS3アニメーションに置き換える

<p>私はこれまで、HTML＋CSSでテキストを組む場合で、<br />
左揃えを行う場合、</p>

		<div id="crayon-649540263e536258630715" 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-align: left;</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-649540263e536258630715-1">1</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-649540263e536258630715-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">left</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>しか、方法がないと思っていました。<br />
この方法を使った場合、テキストの右側は文章によって<br />
がたがたになってしまったり、<br />
中途半端なところで折り返してしまったりして、<br />
あまり美しくない場合が多いのが悩みでした。</p>
<p>しかし、とあるサイトのCSSを調べていると、<br />
たまたま、以下の様な記述を見つけました。</p>

		<div id="crayon-649540263e53a607946156" 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-align: justify;
text-justify: inter-ideograph;</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-649540263e53a607946156-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e53a607946156-2">2</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-649540263e53a607946156-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">justify</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e53a607946156-2"><span class="crayon-e ">text-justify</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inter-ideograph</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>調べてみると、テキストを両端揃えをするための記述でした。<br />
しかも、すべての主要な最新ブラウザとIE8以上で利用できました。</p>
<p>↓こちらがDEMO</p>
<p><a class="demo" href="/demo/ninomiya/106/">DEMO</a></p>
<p>もっと早く知っていれば…と、恥ずかしながら今更ながらに気づきました。</p>
<p>今後は、どんどん利用していこうと思います。</p>

large_nino-eye-1.png

medium_nino-eye-1.png

small_nino-eye-1.png

thumbnail_nino-eye-1.png

nino-eye-1.png

知らなかった…CSSでテキストの両端揃えが普通にできた

checkbox,radioがチェックされた時にちょっとアニメーションさせてみる

スマホ時のyahooやgoogleにあるメニューを実装してみる

CSSアニメーションでinputに動きをつける

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #css3

2019/02/20

2018/02/14

2017/11/15

2017/10/11

2017/09/30

2017/08/17

2017/08/10

2017/07/19

2017/04/12

2016/12/07

2016/10/12

2016/09/07

2016/08/31

2016/06/08

2016/06/01

2016/05/25

2016/05/18

2016/05/11