調べてみると、当サイトの全アクセスの約1%がInternet Explorerユーザーなのですが、Office365のIE 11サポートが本年8月17日に切れることを受け、Internet Explorerをサポート外とするサービスが大多数となってきました。 これにより、IEだけに配慮したあれこれが無くなって楽になるのですが、個人的に一番嬉しいのはmin()、max()、 clamp() などのCSS関数を気兼ねなく使えるようになることです。 もうmedia queryでスクリーンサイズ別にwidthやfont-sizeを書く必要も無くなります。 今記事では、CSS関数の使い方と便利さについて説明します。 サイズの最小値・最大値・推奨値を自動的に算出するcss関数 文字に書くと少し混乱しそうですが、min()は最大値を指定するための関数。 max()は最小値を指定するための関数。 clam
こんにちは。4回目の登場です。エンジニアのuchimuroです。 存在は知っているけれども実はまだ使用したことのないCSSのプロパティや関数って結構あるんですよね…。 そんな中でも今まで食わず嫌いしていたCSS関数のclamp()・max()・min()をそろそろ実案件でも使ってみようと思っているので、今回はそれらについてまとめてみようと思います。 clamp() clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中で条件に合致する1つの値が適用されます。 推奨値：最小値と最大値の間である限り推奨値が適用されます。最小値：許容される最も小さい値で、推奨値がこの値よりも小さくなる場合は最小値が適用されます。最大値：許容される最も大きな値で、推奨値がこの値よりも大きくなる場合は最大値が適用されます。 // プロパティ: clamp(最小値, 推奨値, 最大値);
これで、「”check_flag”にチェックが入っていない記事」だけが表示されます。 しかし、ここで要注意なんですが、既にある程度記事がある段階で真/偽フィールドを追加した場合、このままだとうまく除外できません。 なぜかというと、上記は具体的には「値がfalse(0)である記事のみ表示させる」という意味なんですが、なんと真/偽フィールドを追加する前から存在している記事は、チェックをしていない場合に入ってる値はfalseではなくNULLだからなんですね。 そもそも値が入っていないのです。 だから、そういった場合は上記に加え「NULLのやつも表示」って書く必要があります。 $param = array( 'posts_per_page' => '3', 'post_type' => 'news', 'meta_query' => [ 'relation' => 'OR', [ 'key' =>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
