CSS Fixedしたコンテンツでスクロールさせたい

モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ

top, left, right, bottom と overflow を利用する

.modalNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

position: fixedと一緒に top: 0, bottom: 0, left: 0, right: 0 を使用するとコンテンツがエリア全体に伸びるので、そこにoverflowの指定があればfixedしたコンテンツであってもスクロールを表示させることができるようです。
縦方向のスクロールを発生させるだけならtop: 0;とbottom: 0;の指定があればleft、rightの指定は特に無くても問題ないようでした。

サンプル

See the Pen Scroll in Fixed modal by KIKIKI (@chaika-design) on CodePen.

---

HTML&CSSとWebデザインが 1冊できちんと身につく本

Wordpress CMB2 1行text(input)フィールドでHTMLタグを入力できるようにしたい。

WordPressにコードベースでカスタムフィールドを作成することが出来るCMB2。

とても便利なのですが、
1行textフィールド(通常のinput[type="text"])はデフォルトだとHTMLタグを保存時に除去(sanitization)する仕様になっていました。(以前はサニタイズされてなかった気がするのだけど...)
HTMLタグが入るなら最初からtextareaにしとけば良いだけなのですが、運用段階でやっぱりこのフィールドにHTMLタグ入れたいんだよね。とかが発生する可能性は無きにもあらずです。

例えば、こんな感じで改行いれたいとか。

sanitization_cb を使って独自のサニタイズ処理を適応する

sanitization_cb
Bypass the CMB sanitization (sanitizes before saving) methods with your own callback. Set to false if you do not want any sanitization (not recommended).

サニタイズを変更したいフィールドのを作成している箇所にsanitization_cbプロパティを作成し、値にデータ保存前に値を処理するコールバック関数名を指定します。

<?php // function.php
// <中略>

$cmb->add_field([
  'id'     => $fieldID,
  'name'   => '発売日',
  'type'   => 'text',
  // sanitaize callback
  'sanitization_cb' => 'cmb_allow_html_cb',
]);

// <中略>

/**
 *  Sanitization Handler: Allow HTML tag
 * @param  mixed      $value      The unsanitized value from the form.
 * @param  array      $field_args Array of field arguments.
 * @param  CMB2_Field $field      The field object
 *
 * @return mixed                  Sanitized value to be stored.
 */
function cmb_allow_html_cb($value, $field_args, $field) {
  // 保存する値を返す
  return wp_kses_post( $value );
}

コールバック関数は最後に保存する値をreturnします。
上の例では、値を保存する前に行われるコールバック関数でwp_kses_post()を使ってWordPressの投稿コンテンツと同じHTMLタグが使える様にしています。

これで、この1行テキストの中では改行<br>を始めとするHTMLタグを使うことが出来るようになりました！

加工したい形式ごとに処理関数作成する手間がありますが、デフォルトの処理関数をバイパスできるので自由度が高いです！

公式リファレンスには同じような使い方のescape_cbというプロパティもありましたが、こちらはサニタイズ処理が終わった後で呼び出されるっぽく、既にHTMLが除去された値が$valueで渡されてきたので、HTMLタグを残したい場合には適していませんでした。

---

[参考]

• sanitization_cb | Field Parameters · CMB2/CMB2 Wiki · GitHub
• escape_cb | Field Parameters · CMB2/CMB2 Wiki · GitHub
• Function Reference/wp kses post « WordPress Codex

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング

PHP 配列のキー・Objectのキー(プロパティ)の有無をチェックしたい。

配列のキーの有無のチェック

<?php
// return: bool
array_key_exists( 'key_name', $array );

array_key_exists
指定した key が配列に設定されている場合、 array_key_exists() は TRUE を返します。 key は配列添字として使用できる全ての値を使用可能です。
注意:
array_key_exists() は、最初のレベルのキーだけを捜します。 多次元配列のネストされたキーは、この関数では見つけられません。

isset()との違い

isset() は未定義またはNULLの時 false になるので、配列の値がnullの時、配列にキーが存在してもfalseになってしまう。
ex

<?php
$arr = [
  'str'        => 'text',
  'blank_str'  => '',
  'no'         => 1,
  'zero'       => 0,
  'bool_true'  => true,
  'bool_false' => false,
  'null'       => null,
];

👇 array_key_exists

<?php
array_key_exists("str", $arr);        // => true
array_key_exists("blank_str", $arr);  // => true
array_key_exists("no", $arr);         // => true
array_key_exists("zero", $arr);       // => true
array_key_exists("bool_true", $arr);  // => true
array_key_exists("bool_false", $arr); // => true
array_key_exists("null", $arr);       // => true
array_key_exists("no_key", $arr);     // => false ... 存在しないキーとの時だけfalse

isset

<?php
isset($arr["str"]);        // => true
isset($arr["blank_str"]);  // => true
isset($arr["no"]);         // => true
isset($arr["zero"]);       // => true
isset($arr["bool_true"]);  // => true
isset($arr["bool_false"]); // => true
isset($arr["null"]);       // => false ... 値がnullだとキーが存在してもfalse
isset($arr["no_key"]);     // => false

オブジェクトのプロパティの有無のチェック

<?php
// return: bool
property_exists( $object, 'property_name' );

property_exists
この関数は、与えられたプロパティ property が 指定されたクラスに存在するかどうかを確認します。
注意:
isset() とは対照的に、 プロパティの値が NULL の場合でも property_exists() は TRUE を返します。

プロパティの値が無くても、プロパティが存在していれば true になる

変数が何の型なのか調べる

<?php
// return: string
gettype( $var );

gettype
PHP 変数 var の型を返します。 型のチェックには、この関数ではなく is_* 関数を使います。

---

[参考]

• PHP: array_key_exists - Manual
• PHP: array_key_exists - Manual
• PHP: isset - Manual
• PHP: isset と array_key_exists による配列キー存在チェックの違い | Thought is free
• PHP: gettype - Manual

初めてのPHP