比較関数とは、複数の値を比較し、使用された関数に基づいてそれらの1つの値を利用する関数です。
比較関数として次の３つが挙げられます。
・min()
・max()
・clamp()
この３つについて、これから３回にわけて順に説明していこうと思います。
　

min()

min()関数には、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します。つまり、最大値を設定するにはmin()を使用します。
　
例えば、要素の最大幅を700pxにしたい場合は、下記のように記述します。

　.element {
    width: min(50%, 700px);
　}

min()関数を使用すると、ブラウザは値(50%, 700px)の中で最も小さい値を選択する必要があります。
どちらを選択するかはこの場合は%単位を使用しているため、ビューポートの幅に依存します。
50%の値が700pxよりも大きい場合は無視され、代わりに700pxが使用されます。

　
そうでない場合、つまり50%の値が700px未満の場合は、50%が幅の値として使用されます。
そうなる場合のビューポートの幅は、Xの50%イコール700pxなので、ビューポートの幅は1,400pxです。
　
　

今回は、font-size によく使われる rem という単位について紹介します。
レスポンシブル対応には欠かせない単位になりますので、ぜひ理解して使いましょう。
　

rem とは

rem というのは root em の略になります。
すなわち、root のフォントサイズを 1rem とする単位です。
root とは html のことですので、html 要素のフォントサイズが 1rem になります。
　
例えば、html 要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
　
html 要素のフォントサイズから相対的にサイズ指定できるのが rem になります。
　

rem を使うときは

主要なブラウザのデフォルトの文字サイズは 16px なので、そのまま rem を利用すると、
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいので、
　
あらかじめ

html {
  font-size: 62.5%;
}

と、ルート要素（html要素）のフォントサイズを10pxにしておきます。
　
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。

rem の使いかた（レスポンシブル対応）

rem は、レスポンシブル対応にとても適しています。
例えば、
720pxのスマートフォンなどの　720px では 62.5%
それ以上のサイズの時は 1.2 倍に拡大したいときは

html {
        font-size: 62.5%;
}
@media screen and (max-width: 720px) {
    html {
        font-size: 75%;
    }
}

とすれば良いのです。

form の input[type=”text”] が一つしかないと Enter キーを押すと submit して入力値がクリアされてしまうようです。
この仕様は、ほとんどブラウザの仕様です。
　
例）
form に input[type=”text”] が一つしかないとき

　　<form method="post" action="?">
    　　<input type="text" name="test">
　　</form>

解決方法）
form に input[type=”text”] が二つ以上あれば、 Enter キーを押しても submit されません。
form に input[type=”text”] が二つ以上作成して、 Enter キーを押すと submit 不必要な input を 「display:none;」で非表示にすればOKです。

　　<form method="post" action="?">
    　　<input type="text" name="test1">
    　　<input type="text" name="test2" style="display:none;">
　　</form>

例）Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”hidden”]

　　<form method="post" action="?">
    　　<input type="text" name="test1">
    　　<input type="hidden" name="test2">
　　</form>

　
例）Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”textarea”]

　　<form method="post" action="?">
    　　<input type="text" name="test1">
    　　<textarea name="test2"></textarea>
　　</form>

div や p などのブロックレベルの要素の width の初期値は auto です。
width の値 auto は、親要素の水平方向のスペース全体を占めます。
　

　
よく似た設定に、width = 100% というのがありますが、こちらは要素の幅は親要素の幅と等しくなるように設定します。したがって、margin や　border があるとその幅に影響を受けます。margin を設定すると、要素がはみだしてしまって困った経験は誰でもあると思います。
　

　
次で、suto と 100% の違いを見てみてください。
　

モーダルやメッセージなどの「position: fixed;」の要素を。天地左右中央に表示する時の新しい記述方法を紹介します。
今までは、transform を（負のパーセンテージ）を使用したりで、少し複雑な記述方でしたが、新しい記述方法では簡素で理解しやすい記述方法になっています。
　

　
今までの記述法は、下記のように top,left と transform の translate を使用して設定していました。

  position:fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

　
新しい記述方法は insetプロパティ を使用して次のように記述します。

  position: fixed;
  inset: 0;
  margin: auto;

　
insetプロパティとは、 top, right, bottom, left に対応する一括指定のプロパティです。

  /* <length> 値 */
　inset: 10px; /* すべての辺に適用される値 */
　inset: 4px 8px; /* 上/下 左/右 */
　inset: 5px 15px 10px; /* 上 左/右 下 */
　inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */

　/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
　inset: 10% 5% 5% 5%;

　/* キーワード値 */
　inset: auto;

　/* グローバル値 */
　inset: inherit;
　inset: initial;
　inset: unset;

ここでは、このinsetプロパティを０に設定することにより、margin:auto の場合は top, right, bottom, leftに適用される値が等しくなり、天地左右中央に配置されるようになります。
　
　

　

過去投稿してきた CSS の Tips（小技）１０個をまとめてみました。
ぜひ、参考にして魅力的なサイト作成してください。
　

　
①タイピングエフェクトをつけたい
②画像の被写体のみに影をつけたい
③JSを使用せずにスムーズスクロールを実装したい
④コンテンツを天地中央揃えにしたい
⑤長い文章を省略して「…」を付けたい
⑥カーソルを変更したい
⑦テキストに縁取り線をつけたい
⑧テキストのハイライトカラーを変更したい
⑨テキストにモーフィングアニメーションをつけたい
⑩marginを一括で設定して統一したい
　
　

　

owl セレクタ（ふくろうセレクタ）を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
　

　
＜解説＞
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する２番目以降の要素すべてを選択します。
* + * によって選択された要素の margin-top を設定することで、要素間のマージンを一括に設定できることになります。

  * {
    margin: 0;  /* ブラウザ依存のマージンはリセット */
  }

  html {
    font-size: 100%;  /* ユーザの指定した表示サイズを尊重する */
    line-height: 1.5;
  }

  main > * + * {
    margin-top: 0.5rem;  /* サイト全体で上下マージンを統一 */
  }

  main > * + h2,
  main > * + h3,
  main > * + h4,
  main > * + h5,
  main > * + h6 {
    margin-top: 1.5em;  /* ヘッダ要素の上マージンは広めに取る */
  }

css だけで、テキストにモーフィング効果をつける方法を紹介します。
　

　
＜解説＞
CSSは次のとおりです。

  *, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .morphing {
    position: relative;
    display:flex;
    justify-content:center;
    align-items: center;
    font-size: 18px;
    background-color: #4DB6AC;
    color: #222;
    min-height: 50px;
    filter: contrast(5) blur(1px);
  }
  .word {
    position: absolute;
    animation: word 16s infinite ease-in-out;
  }
  .word:nth-child(1) {
   animation-delay: -16s;
  }
  .word:nth-child(2) {
    animation-delay: -14s;
  }
  .word:nth-child(3) {
    animation-delay: -12s;
  }
  .word:nth-child(4) {
    animation-delay: -10s;
  }
  .word:nth-child(5) {
   animation-delay: -8s;
  }
  .word:nth-child(6) {
   animation-delay: -6s;
  }
  .word:nth-child(7) {
   animation-delay: -4s;
  }

  @keyframes word {
    0%, 5%, 100% {
      filter: blur(0px);
      opacity: 1;
    }
    20%, 80% {
      filter: blur(1em);
      opacity: 0;
    }
  }

ユーザーがハイライト表示にした部分（テキストをマウスでドラッグ）にスタイルを適用します。
　

　
＜解説＞
CSSの::selection疑似要素を使用します。
　

　　　.custom-highlighting::selection {
  　　　　background-color: #8e44ad;
  　　　　color: #fff;
　　　}

CSSでテキストに縁取り線をつける方法を紹介します。
また、この方法を応用して少しずらしてデザイン性の高いテキストを表現することもできます。
　

＜コード＞
ベンダープレフィックスを付与して適用します。
　

　　　 -webkit-text-stroke: 3px #ffffff   //shorthand property

　　　 -webkit-text-stroke-width: 3px;  //縁取り線の太さ
　　　 -webkit-text-stroke-color: #ffffff;  //縁取り線の色
　　　 -webkit-text-fill-color: #9effff;  //縁取り線の内側の色（=テキストの色）

テキストに縁取り線から少しずらしたテキスト

　
＜対応ブラウザ＞
・すべてのブラウザで、ベンダープレフィックス（-webkit-）が必要す。
Can I use

CSSではマウスカーソルの形状を自由に変えることができます。自分の用意した画像に変えることもできます。今回はその方法について紹介します。

　
　
次のように、自分の用意した画像をカーソルとすることもできます。

長い文章を省略して表示する方法を紹介します。
　

１行の場合

  text-overflow: ellipsis;

・white-space を nowrap に設定する必要があります。
・overflow を hidden に設定する必要があります。
　

複数行の場合

  display: -webkit-box;
  -webkit-line-clamp: 3;  //表示する行数を指定
  -webkit-box-orient: vertical;

＜対応ブラウザ（line-clamp）＞
・IE以外のブラウザはほぼ対応しています。
Can I use
　

WordPress の場合

■the_excerpt を使用する
　投稿ページの本文を抽出して、長い文章を省略するときに利用します。

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_excerpt(); ?>
  <?php echo get_the_excerpt(); ?>
  <?php endwhile;endif; ?>

　
　省略する文字数を変更したい場合は、次のコードを functions.php に記載します。

　　function twpp_change_excerpt_length( $length ) {
  　　return 50; 　//抜粋する文字数
　　}
　　add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );

　
　省略記号[…]を変更したい場合は、次のコードを functions.php に記載します。

　　function twpp_change_excerpt_more( $more ) {
  　　return '......'; 　//省略記号にしたい文字
　　}
　　add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

　
　「続きを読む」とリンク付きの文字を入れる

　　function twpp_change_excerpt_more( $more ) {
  　　$html = '<a href="' . esc_url( get_permalink() ) . '">[...続きを読む]</a>';
  　　return $html;
　　}
　　add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

　
■wp_trim_words を使用する
　タイトルなど、本文以外でも省略したい場合に使用できます。

　　<?php echo wp_trim_words( get_the_title(), 30 , '…' ); ?>

第１引数は必須項目。切り取りたい文字列を指定します。
第２引数は抽出する文字数。デフォルト値は55文字に設定されています。
第３引数では切り取った文字列の後に追加したい文字を指定できます。デフォルトでは「null」です。