2023.12.18
先日当社で少し話題になった文章をいい感じのところで改行してくれるCSS「word-break: auto-phrase;」ですが、2023年12月現在では Google Chrome と Microsoft Edge のみ対応のようです。
しかし、まったく同じ仕様かはわかりませんが JavaScript を使って文章を改行する BudouX というライブラリを Google が公開してくれています。
BudouX: 読みやすい改行のための軽量な分かち書き器
使い方は簡単で、<head>内にJSを読み込み、
改行を適用させたい箇所をタグで囲むだけ。
気軽に実装できるので見出しなどに取り入れても良さそうです。
しかし、まったく同じ仕様かはわかりませんが JavaScript を使って文章を改行する BudouX というライブラリを Google が公開してくれています。
BudouX: 読みやすい改行のための軽量な分かち書き器
使い方は簡単で、<head>内にJSを読み込み、
改行を適用させたい箇所をタグで囲むだけ。
<head>
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
</head>
<body>
<budoux-ja>文章の折返しのサンプルです。ここにテキストが入ります。</budoux-ja>
</body>
気軽に実装できるので見出しなどに取り入れても良さそうです。
2023.07.20
スライドショーを簡単に実装できる slick ですが、ある実装でハマったので対策をメモしておきます。
●やろうとしたこと
スライドの切り替わりに合わせて、スライド内の要素をCSSでアニメーションさせる
slickでは表示中のスライドに「slick-current」というクラスが付与されます。
そこで「slick-current」のありなしでスタイルを変更し、CSS の transition でアニメーションさせるという実装をしました。
しかし、この方法だと一番最初に表示されるスライドで初回のみアニメーションが行われませんでした。
●回避方法
最初に表示させるスライドを1枚目以外にし、スライドショーが準備できたタイミングで（少し遅らせて）1枚目に切り替える、という方法にしました。
やや力技ですが、無事に1枚目のアニメーションが実行されました。
●ポイント
・setTimeout で少し送らせないと切り替わらない
・slickGoTo に true を設定すると slick の切り替えアニメーションなしでスライドが切り替わる
・init メソッドはスライドショーの設定よりも前に記述しないと動作しない
以上です。
●やろうとしたこと
スライドの切り替わりに合わせて、スライド内の要素をCSSでアニメーションさせる
slickでは表示中のスライドに「slick-current」というクラスが付与されます。
そこで「slick-current」のありなしでスタイルを変更し、CSS の transition でアニメーションさせるという実装をしました。
しかし、この方法だと一番最初に表示されるスライドで初回のみアニメーションが行われませんでした。
●回避方法
最初に表示させるスライドを1枚目以外にし、スライドショーが準備できたタイミングで（少し遅らせて）1枚目に切り替える、という方法にしました。
// スライドショーが準備できたタイミングで、スライドを1枚目に変更
$(".your-slider").on("init", function(slick){
setTimeout(function(){
$(".your-slider").slick("slickGoTo", 0, true);
}, 100);
});
// スライドショーの設定
$(".your-slider").slick({
initialSlide: 1, // 開始時は1枚目以外のスライドに設定
fade: true,
autoplay: true
});
やや力技ですが、無事に1枚目のアニメーションが実行されました。
●ポイント
・setTimeout で少し送らせないと切り替わらない
・slickGoTo に true を設定すると slick の切り替えアニメーションなしでスライドが切り替わる
・init メソッドはスライドショーの設定よりも前に記述しないと動作しない
以上です。
2023.02.20
iPhone端末でデバッグしていたところ、ボタンをタップしても1回ではJavaScriptが動作せず、2回目のタップで動作するという現象に遭遇しました。
記述の問題かと思いましたがどうやらclickイベント自体発火していないようで、困っていたところ以下の記事を見つけました（ありがとうございます！）。
【iOS】リンクをタップしても1回では挙動しない原因とは？
https://on-ze.com/archives/3066
CSSで:hoverの設定をしていると起こるようです。
スマホ用のスタイルで打ち消しても解決しない場合があり、メディアクエリでPCのみ:hoverを当てるようにして解決しました。
これまで同様の現象に出会ったことはなかったのですが、条件としてはレアケースでもないと思うので気をつけたいところです。
※当社の環境では「iPhoneSE（iOS15.5）のSafari」にて確認。
記述の問題かと思いましたがどうやらclickイベント自体発火していないようで、困っていたところ以下の記事を見つけました（ありがとうございます！）。
【iOS】リンクをタップしても1回では挙動しない原因とは？
https://on-ze.com/archives/3066
CSSで:hoverの設定をしていると起こるようです。
スマホ用のスタイルで打ち消しても解決しない場合があり、メディアクエリでPCのみ:hoverを当てるようにして解決しました。
これまで同様の現象に出会ったことはなかったのですが、条件としてはレアケースでもないと思うので気をつけたいところです。
※当社の環境では「iPhoneSE（iOS15.5）のSafari」にて確認。
2022.08.30
日本語フォントと英語フォントを同時に指定した場合、フォントによっては和文と欧文でのサイズ差が気になる場合があります。（基本的には欧文が小さくなりがちです）
そういう場合に、欧文を判別してクラスを当ててくれる JavaScript があります。
wrapSingleByteTexts.js
デモを作成してみました。
欧文のみフォントサイズを調整して大きくしています。
判別できるのは 半角英文字、半角数字、半角記号 の3つで、spanで囲みクラスを当てることができます。
そういう場合に、欧文を判別してクラスを当ててくれる JavaScript があります。
wrapSingleByteTexts.js
デモを作成してみました。
欧文のみフォントサイズを調整して大きくしています。
判別できるのは 半角英文字、半角数字、半角記号 の3つで、spanで囲みクラスを当てることができます。
2022.04.18
横に長いコンテンツ（表組みなど）を表示させる場合、画面のサイズによっては横スクロールがでてしまいます。
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。
横長コンテンツの上には下記のような画像を表示させるようにしていました。
画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト
設定はすごく簡単です。
（1）
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。
（2）
横スクロールが出るコンテンツを下記divで囲う。
（3）
下記スクリプトをコンテンツより後に記述。
【例】
※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。
横長コンテンツの上には下記のような画像を表示させるようにしていました。
画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト
設定はすごく簡単です。
（1）
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。
（2）
横スクロールが出るコンテンツを下記divで囲う。
<div class="js-scrollable">〜</div>
（3）
下記スクリプトをコンテンツより後に記述。
<script>new ScrollHint('.js-scrollable');</script>
【例】
| Col1 | Col2 | Col3 |
|---|---|---|
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options
