## はじめに

この記事では、SassのMixinを使って、CSSのプロパティに値を適切な単位で自動的に適用する方法を説明します。SassはCSSの拡張言語であり、Mixinは再利用可能なスタイルのブロックを定義する機能です。Mixinを使用すると、同じスタイルを複数の場所で使い回すことができます。

具体的には、ビューポートの幅に応じて値を調整するためのVW単位や、親要素やコンテキストの幅に応じて値を計算するためのパーセンテージ単位を自動的に適用します。これにより、レスポンシブデザインを実現し、異なるデバイスや画面サイズに対応したスタイルを簡単に作成できます。

SassのMixinを使用して、VW単位やパーセンテージ単位を自動的に計算する方法を詳しく解説します。この方法を理解し、実際のプロジェクトで活用することで、効率的で柔軟なスタイルシートの作成が可能になります。

以下の項目を含めて、SassのMixinの活用方法を説明します。

1. Sassとは何か？
2. Mixinとは何か？
3. 単位の値を自動的に計算する方法

## 1. Sassとは何か？

Sass（Syntactically Awesome Stylesheets）は、CSSの記述をより効率的にするための拡張言語です。基本的には、普通のCSSと同じようにスタイルを記述しますが、いくつかの追加機能を提供しています。例えば、変数やネスト、Mixinなどの機能があります。これらの機能を使うことで、スタイルシートの記述が簡潔になり、保守性が向上します。つまり、SassはCSSの書き方をより便利にするためのツールです。

## 2. Mixinとは何か？

Mixin（ミキシン）は、Sassで再利用可能なスタイルの塊を定義する方法です。基本的には、CSSのスタイルルールをまとめたコードブロックです。これを定義しておくと、同じスタイルを複数の場所で使い回すことができます。Mixinは、プロパティと値の組み合わせをパラメータとして受け取り、それをCSSに変換します。つまり、同じスタイルを何度も書く必要がなくなり、コードの再利用性と保守性を高めることができます。

## 3. 単位の値を自動的に計算する方法

単位の値の自動計算とは、SassのMixinを使って、指定された値に適切な単位を自動的に付与することです。例えば、ビューポートの幅に対して相対的な値であるVW（viewport width）単位や、親要素やコンテキストに対する割合で指定するパーセンテージ単位などがあります。これらの単位を自動的に計算してCSSに適用することで、レスポンシブデザインや柔軟なスタイル設計を実現できます。

単位の値を自動的に計算する方法を使うと、以下のような利点があります。

**1. 画面サイズに合わせて自動調整:** 画面の大きさに応じて、文字や要素の大きさを自動的に調整できます。

**2. 手間を省く:** 値を手動で調整する必要がなくなり、開発時間を短縮できます。

**3. 一貫性を保つ:** 同じ値が異なる場所で常に同じように表示され、一貫性のあるデザインを保つことができます。

**4. レスポンシブデザイン:** 異なるデバイスや画面サイズに対応しやすくなり、ユーザーに最適な表示を提供できます。

### 3.1. VW単位の自動計算

VW単位の自動計算は、ビューポート（ウェブページを表示する画面領域）の幅に対する割合で値を指定する方法です。これは、画面の幅に応じて要素のサイズやフォントサイズを自動的に調整することを意味します。Sassのmixinを使えば、このVW単位を活用した自動計算を簡単に実現できます。つまり、画面の大きさに合わせて要素の大きさや文字サイズが自動的に変化するように設定できるということです。

**_get_vw**という関数と**fz-vw**というMixinが用意されています。これらの機能を使うことで、vwを簡単に設定できます。

**コード例(SCSS)**

```
//pxをvwに変換するfunction
@function _get_vw($size, $viewport: 640) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}

//フォント用のMixin
@mixin fz-vw($font_size: 10, $viewsize: 640) {
  font-size: $font_size * 1px;
  font-size: _get_vw($font_size, $viewsize);
}

width: _get_vw(117,640);
padding: _get_vw(15,640) 0;
@include fz-vw(29,640);

```

**実行結果(CSS)**

```
width: 18.28125vw;
padding: 2.34375vw 0;
font-size: 4.53125vw;

```

上記のにコードの詳細な説明を示します。

#### 関数 _get_vw ####

**引数:** <br>
```$size```: 変換対象のピクセル値<br>
```$viewport```: 参照するビューポート幅（デフォルト: 640px）

**戻り値:** <br>
ピクセル値をvwに変換した値

**Mixin fz-vw**

**引数:** <br>
```$font_size```: 設定するフォントサイズ（ピクセル値）<br>
```$viewsize```: 参照するビューポート幅（デフォルト: 640px）<br>
```width: _get_vw(117,640);```:要素の幅を117pxをvwに変換した値に設定します。<br>
```padding: _get_vw(15,640) 0;```:要素のパディングを左右に15pxをvwに変換した値、上下に0を設定します。<br>
```@include fz-vw(29,640);```:要素のフォントサイズを29pxをvwに変換した値に設定します。

**戻り値:** <br>
ビューポート幅に応じて要素のサイズやフォントサイズが自動的に調整されます。


### 3.2. パーセンテージ値の自動計算

パーセンテージ値は、親要素やコンテキストの幅に対する割合で値を指定するための単位です。SassのMixinを使って、特定のピクセル値を親要素やコンテキストの幅に基づいて自動的にパーセンテージ値に変換する方法を説明します。

**コード例(SCSS)**

```
//pxを%に変換するfunction
@function sw($size, $basewidth: 1180) {
  $rate: calc(100 / $basewidth);
  @return $rate * $size * 1%;
}

padding-top: sw(20,640);
width: sw(47,560);
```

**実行結果(CSS)**

```
padding-top: 3.125%;
width: 8.4%;
```

上記のにコードの詳細な説明を示します。

#### 関数 sw ####

**引数:** <br>
```$size```: 変換したいピクセル値<br>
```$basewidth```: 基準となるウィンドウ幅（デフォルトは1180px）

**処理:** <br>
```$rate = calc(100 / $basewidth);```
ウィンドウ幅に対する1pxあたりの割合を計算します。<br>
```@return $rate * $size * 1%;```:ピクセル値を割合に変換し、% を付加します。

**戻り値:** <br>
ピクセル値をウィンドウ幅に対する割合に変換した値（%）

**補足** <br>
```$basewidth``` は、関数内でデフォルト値として1180pxが設定されていますが、必要に応じて変更できます。vw単位以外にも、em単位やrem単位など、様々な単位を使ってレスポンシブデザインを実現できます。
今回の例では、ウィンドウ幅に対する割合を計算するために calc() 関数を使用していますが、Sassのバージョンによっては div() 関数でも同様の処理を行うことができます。


## まとめ

今回紹介した方法を使えば、簡単にレスポンシブなWebデザインを作成できます。ビューポートの幅に対する割合で値を指定するVW単位や、親要素やコンテキストの幅に対する割合で値を指定するパーセンテージ単位を活用することで、画面サイズに応じて自動的にスタイルを調整できます。実際にプロジェクトに適用してみて、どのように効果が現れるか試してみてください。


## 参考

https://qiita.com/katsunory/items/3bede89cee8e2ded8426

SassのMixinを使って、単位、幅の値を自動的に計算

## はじめに

2023 年には、CSS にいくつかの新しい機能が追加されましたので　このブログでは、2023年の新しいCSSの機能について紹介したいと思います。

最新のCSS技術や仕様は、ウェブページが早く読み込まれ、表示される速さや効率を良くすることを目指しています。

新しいCSSの機能やツールは、開発者がコードをより効果的に書き、管理するのに役立ちます。

Web 開発者は、より個性的で魅力的な Web ページを作成できるようになります。
すべてのブラウザでサポートされているわけではありません。ただし、ほとんどの主要なブラウザでは、これらの機能がサポートされています。

今回以下の新しい　CSS について説明します。

1. inset
2. Accent-color
3. Gap Property for Flexbox
4. -webkit-line-clamp
5. Small Viewport Units(svh)
6. Transform Properties

## 1. inset

CSS insetは、要素をその親要素の端に対して配置するためのプロパティです。通常の配置ではなく、要素が親要素からはみ出るようなデザインを作成する際に便利です。

**前**
```
element {
  top: 80%;
  right: auto;
  bottom: auto;
  left: 50%;
}
```
このコードはtop、right、bottom、left の各プロパティを個別に指定しています。

**現時**
```
element {
  inset: 80% auto auto 50%;
}
```
現時は inset プロパティを 使て　1 行で指定できるようになりました。

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/inset_browser_support_69d35a4768.png) 


## 2. accent-color

accent-colorプロパティとは、ラウザが提供するデフォルトのフォーム要素（チェックボックスとラジオボタンとか）の背景色を変更することができるものです。ただし、このプロパティを使用すると、フォームの見た目はブラウザによって統一的に管理されるため、その点に注意が必要です。accent-colorは、2023年からすべてのブラウザにサポートされました。


**html**
```
<input type="checkbox" class="custom" checked />Checkbox
```

**css**
```
.custom{
  accent-color: yellow;
}
```

***Result***

 ![](https://cont.sterfield.co.jp/uploads/checkbox_result_c9839aff27.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/accent_color_browser_support_4483e6b598.png) 


## 3. Gap Property for Flexbox

Gap プロパティは、flexbox レイアウトで各アイテムの余白を指定するプロパティです。
余白を指定すると　margin も使う人が多いですが、gap と　margin の違いがあります。

**Gap**
* flexbox レイアウトでのみ使用できます。
* 単一の値または 2 つの値で指定できます。
  ```
  gap: 10px;/* 行と列の両方に同じギャップ */
  gap: 10px 20px;/* 行に10px、列に20pxの異なるギャップ */
  ```
* 余白を指定すると、最初と最後の要素余白も範囲されません。
  :not()や:nth-childなどの擬似クラスを使用する必要がなく、CSSのコードがシンプルになります。

**Margin**
* 任意のレイアウトで使用できます。
* 単一の値、2 つの値、または 4 つの値で指定できます。
  ```
  margin: 10px;/* すべての辺に同じマージン */
  margin: 10px 20px;/* 上下には10pxのマージン、左右には20pxのマージン */
  margin: 10px 20px 15px 5px;/* 上、右、下、左それぞれ異なるマージン */
  ```
* 余白を指定すると、最初と最後の余白も範囲されます。

**html**
```
<div class="flexbox">
  <div class="flex-item">div1</div>
  <div class="flex-item">div2</div>
  <div class="flex-item">div3</div>
  <div class="flex-item">div4</div>
  <div class="flex-item">div5</div>
  <div class="flex-item">div6</div>
  <div class="flex-item">div7</div>
  <div class="flex-item">div8</div>
  <div class="flex-item">div9</div>
</div>
```

**css**
```
.flexbox {
  display: flex;
  gap: 10px;
  width: 500px;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-item{
  background: yellow;
  width: 30%;
  color: #000;
  padding: 10px 0;
  text-align: center;
}
```

**Result**

 ![](https://cont.sterfield.co.jp/uploads/gap_image_ee5a78ad50.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/gap_browser_support_c840b87e6a.png) 

## 4. -webkit-line-clamp

-webkit-line-clamp は、CSS の属性で、テキストの表示行数を決める機能です。この機能を使うと、テキストの折り返しを管理して、簡潔で読みやすいテキストブロックを作成することができます。

**html**
```
<p class="truncate-text">
    This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property. This is a long piece of text that will be truncated after three lines using the -webkit-line-clamp property.
</p>
```

**css**
```
.truncate-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; 
  width: 200px;
}
```

**Result**

 ![](https://cont.sterfield.co.jp/uploads/webkit_line_clamp_result_b8921f908a.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/line_clamp_browser_support_7a35bf934f.png) 


## 5. Small Viewport Units(svh)

Small Viewport Units (svh)は、ユーザーに表示される最小のビューポートの高さを表す単位です。最小のビューポートの高さは、ユーザーエージェントによってすべてのインターフェース要素が除外されます。
要素の高さを簡単に調整できます。アドレスバーが含まれるため、要素の実際の高さが異なることもあります。

**html**
```
<div id="container">
  <label>Top Full Height Example(svh)</label>
  <p>Bottom Full Height Example(svh)</p>   
</div>
```

**css**
```
#container {
  background-color: green;
  height: 100svh; 
  position: relative;
}
p{
  position: absolute;
  bottom: 0;
}
label{
  position: absolute;
  top: 0;
}
```
上記の　コード によると　divの高さを 100svh としているので　モバイルの場合アドレスバーの上に表示するようになりました。

div　の　高さを 100vh とすると　下のテキスト(Bottom Full Height Example(svh))が見えなくなります。

**Result**

 ![](https://cont.sterfield.co.jp/uploads/svh_7979a9aefa.png) 

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/svh_browser_support_f32c6b0d96.png) 


## 6. Transform Properties

CSS の transform プロパティは、要素の位置、回転、スケール、傾きなどを変更するために使用されます。

**前**
```
.target {
  transform: translateX(50%);
  transform: rotate(50deg);
  transform: scale(1.5);
}
```
このコードは、3 行にわたって、translateX()、rotate()、scale() の各関数を指定しています。

**現時**
```
.target {
  transform: translateX(50%) rotate(50deg) scale(1.5);
}
```
このコードは、1 行だけで、translateX()、rotate()、scale() の各関数を指定出来るようになりました。

**Browser Support**

 ![](https://cont.sterfield.co.jp/uploads/individual_transfrom_browser_support_4f7d36d0a1.png) 


## まとめ

将来、新しいCSSの機能がますます広くサポートされることで、開発者は安定してこれらの機能を活用できるようになります。
新しい機能を使うと、開発者はもっと効率的に作業できて、コードを書くことがスムーズになるでしょう。

日々のプロジェクト開発において、新しいCSSを取り入れて活かしていきたいです。

ただし、新しいCSS機能を利用する前に、ご希望の機能がブラウザでサポートされているか確認するために、このリンク（https://caniuse.com/ ）から確認してください。

## 参考

* https://www.w3.org/Style/CSS/all-properties.en.html
* https://developer.mozilla.org/ja/docs/Web/CSS


2023 年の新しい CSS 機能

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

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

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

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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #CSS

2024/05/02

2023/12/08

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