HTML

HTML

HTMLで右→左のスライダ(input type=”range”)を作成

やりたいことHTMLでは以下のように記載することで簡単にスライダを作成できます。<input type="range">ただしこのスライダは左→右固定です。(左が小さい値で、右が大きい値。)しかしUXの関係でどうしても右→左にしたいことがあります。この記事では簡単に右→左にする方法を紹介します。実装実装は以下のようにscale:-1を設定するだけです。これにより右→左になります。見た目だけでなく右側が最小の値になり、左側が最大の値になります。<input type="range" style="scale:-1">実行例:結果右→左のスライダーを作成することができました。
HTML

HTMLでいろいろ中央ぞろえ

やりたいことHTMLでよく使って簡単そうなのに何気に難しい中央ぞろえの方法をまとめます。前準備まずは中央ぞろえしたいタグが何者かを確認します。だいたい以下の2個のうちどちらかだと思います・どちらかのタグを中央ぞろえするかにより実装方法が異なります。コンテンツテキストや画像などブロック複数のコンテンツを含む領域例:divなどで宣言される例にタグを挙げていますが、displayスタイルで変更が可能です。そのためdivだったら必ずblockというわけではありません。実装コンテンツ横方向親のタグにtext-align:centerのスタイルを指定します。下の例のようにspanやimgに設定するのではな...
HTML

【代替あり】-webkit-text-strokeの動作があやしい(テキストに境界線を描く)

やりたいことHTMLで文字に縁取りを行うには-webkit-text-strokeというStyleが用意されています。(-webkitとついていますが、FireFoxやSafariでも動作するそうです。FireFoxでは動作確認済み。)しかし、実際に使ってみると動作が怪しいので実際の動きの確認と代替案を紹介します。簡単な使用方法基本的な使用方法は以下の通りです。-webkit-text-stroke: 幅 色;例:-webkit-text-stroke: 1px red;動作確認以下のHTMLの動作を見ます。<p style="font-family: system-ui;font-size:...