リストやテーブルの行をドラッグ＆ドロップで並べ替えられるようにするにはjQuery UIやSortableJSを使えば実現できます。
しかし、他のライブラリと相性が悪く他の方法を探していたらHTMLとJavaScriptだけで実現する方法がありましたのでご紹介します。

まずはHTMLで適当なテーブルを用意します。

<table id="data_table">
    <tr>
        <th>columnA</th>
        <th>columnB</th>
        <th>columnC</th>
    </tr>
    <tr id="1" draggable="true">
        <td>row1 value1</td>
        <td>row1 value2</td>
        <td>row1 value3</td>
    </tr>
    <tr id="2" draggable="true">
        <td>row2 value1</td>
        <td>row2 value2</td>
        <td>row2 value3</td>
    </tr>
    <tr id="3" draggable="true">
        <td>row3 value1</td>
        <td>row3 value2</td>
        <td>row3 value3</td>
    </tr>
    <tr id="4" draggable="true">
        <td>row4 value1</td>
        <td>row4 value2</td>
        <td>row4 value3</td>
    </tr>
</table>

表示例

ここでのポイントはtr要素に設定したidとdraggable="true"です。
draggable="true"は要素をドラッグ可能にします。
idは要素を一意なものとして認識するために必要なIDです。
tableに設定したidは対象を特定するために必要なものですので、任意でクラス等にしても問題ありません。

続きを読む…»

WordPressのメニューを表示する際、wp_nav_menuメソッドを使って表示することがあると思います。
その際の例

wp_nav_menu( array( 'menu' => 'GlobalMenu', 'menu_id' => 'global_navi', 'container_class' => 'global_navigation' ) );

wp_nav_menuではidやクラス等、ある程度はパラメータを与えることでカスタマイズ出来るようになっています。
しかし、例えばメニューアイテムの最後に任意のアイテムを追加で表示させたいなど、柔軟なカスタマイズをすることが出来ません。

そんな柔軟なカスタマイズを行いたいときの手法をご紹介します。

順に解説していきますが、実際には一連の処理をfunctions.phpにカスタムメソッドとして作成し、メニューを表示したい任意の箇所で実行してください。

解説

メニュー名を指定し、wp_get_nav_menu_objectメソッドでメニュー情報を取得します。
※メニュー名は[外観]->[メニュー]->[メニュー構造]で設定しているメニュー名を指定してください。

// メニュー名
$menu_name = 'GlobalMenu';
// メニュー情報取得
$menu = wp_get_nav_menu_object($menu_name);

取得したメニュー情報を基にメニューアイテムを取得します。

// メニューアイテム取得
$menu_items = wp_get_nav_menu_items($menu->term_id);

続きを読む…»

コンテンツをテキストは左揃えで中央寄せしたいとき、これまでラッパーとしてdiv等で囲み、flexを使ったり、幅を決めてmargin: 0 auto;を使ったりしていました。
しかし、もう少し簡単にできる方法があったのでご紹介します。

これまでのやり方例

<div>
    <ul>
        <li>Sea sit et duo</li>
        <li>Labore velit enim gubergren</li>
        <li>Duo kasd amet clita</li>
        <li>Eirmod takimata est possim</li>
        <li>Nobis sed sed justo</li>
        <li>Clita sit erat iriure</li>
    </ul>
</div>

ラッピングしたdivにflexを設定

div {
    display: flex;
    justify-content: center;
}

gridでも同じようなレイアウトにできます。

div {
    display: grid;
    justify-content: center;
}

div等でラッピングせずにやる方法

<ul>
    <li>Sea sit et duo</li>
    <li>Labore velit enim gubergren</li>
    <li>Duo kasd amet clita</li>
    <li>Eirmod takimata est possim</li>
    <li>Nobis sed sed justo</li>
    <li>Clita sit erat iriure</li>
</ul>

ulをコンテンツの幅で表示するようにし、中央寄せにする

ul {
    max-inline-size: max-content;
    margin-inline: auto;
}

表示結果

IE以外のブラウザは対応しているようなので問題なく使用できると思います。

justify-content – CSS: カスケーディングスタイルシート | MDN

上下左右中央揃え

上下左右共に中央揃えしたいときはplace-contentを使います。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    display: grid;
    place-content: center;
    height: 100%;
}

表示結果

place-content – CSS: カスケーディングスタイルシート | MDN

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中（カーソル位置）に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}

iOS 12.3.1のSafariでは、デフォルトでセンサーの値が取得できなくなったようです。

window.addEventListener("deviceorientation", function(event){}, true);

上記イベントがキャッチできません。

iOS 12.1では動作することを実機で確認しました。

対応策としては[設定]-[Safari]-[モーションと画面の向きのアクセス]をONにすると
キャッチできるようになりますが、一般ユーザーにこの設定を変えてもらうわけにはいきませんよね；
他に何か有用な情報を発見したら追記したいと思います。