モバイルの際にカラムの順番を入れ替える

2023年2月26日 | 未分類

PCでの表示が以下の場合 【左の列】【右の列】 スマホやタブレットでは、以下のように表示されるはずです。 【左の列】【右の列】 これを、 【右の列】【左の列】 のように表示させる方法です。 以下サンプルです。なお、この方法は「nocodeweb.jp」を参考にさせてもらっています。いつも有益な情報をありがとうございます。 Tweets by YahooNewsTopics この行は特に何もしていません。 モバイル表示の際は、通常通りサラダの画像が上でこの文章が下に表示されるはずです。 この行の順番を入れ替えます。...

列の中の要素を中央に

2023年2月23日 | 未分類

「行」の設定→「デザイン」タブの「サイズ変更」→「列の高さを均等割り付け」を「はい」 「列」の設定→「詳細」タブの「カスタムCSS」に以下を記述。...

hoverで画像をズーム

2023年2月23日 | 未分類

ホバーで画像をズームしても領域からはみ出さないようにするには、「列」の「水平方向のオーバーフロー」と「垂直方向のオーバーフロー」を「隠れた」にする。...

文字にアンダーラインなどのアニメーションを入れる

2023年2月15日 | 部品や小ネタ

Rough Notationっていう、SVGで文字を丸囲みにしたり、下線を引いたりするJavaScriptライブラリ を使わせてもらっています。MITライセンスです。 以下が基本的なサンプル アンダーラインテキスト 右のテキストを丸で囲むアニメーションサークルです。これはアニメーションボックスを指定しています。 重要な部分をハイライト表示ハイライト表示できます。 これはブラケットカッコで囲みます。 HTML <span...