JS 値の型について 代表的な値の型について、型を検出するtypeof関数を使って表示したサンプルを紹介します。 変数の中にはいろんな型があって型によって処理を分けないと思った通りに動いてくれないことがあります。 typeof関数を使うと型を調べることができます。... 2020-01-19 23:29:07
JS 通信速度の検知 現在Chromeではブラウザで通信速度をJacaScriptで計測できます。 navigator.connection.***の値で取得できます。 2020年1月現在、IE,EdgeやSafariではまだ実装されていません。 これをうまく使うと回線速度に応じたコン... 2020-01-15 07:23:56
HTML 縦書きのふりがな 文字を縦書きにしたとき、ふりがな(ルビ)をつけるサンプルです。 ウェブでは主に文字は横書きが主流です。 横書きのときのふりがなのコーディングは別ページに記載しています。 猫ねこ を... 2020-01-05 22:07:04
HTML 横書きのふりがな 文字の上にふりがな(ルビ)を付けたいときに使えるrubyタグのサンプルです。 漢字の読み方を記述するときにふりがなを使います。 HTMLではふりがな用のタグが用意されてます。 ふりがなは概ねのブラウザで横書きの上に配置されます。... 2019-12-28 23:05:25
htaccess gzip圧縮して通信を速くする gzip圧縮を利用するため、htaccessに記述するサンプルです。 昨今Googleでもページのスピードをサイトの評価に取り入れる動きがあります。 そのためhttpsの通信時にgzip、deflate、または brotliといった圧縮転送の方法... 2019-12-03 15:14:08
CSS デバイスの高さまで縦を広げる CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。 100vhを指定するとデバイスの縦幅いっぱいの高さとなります。 以下の親要素(破線の部分)の高さは300pxを指定しています。 height:100%; height... 2019-12-01 16:00:37
CSS デバイスの横のサイズを扱う CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位... 2019-11-16 12:53:42
CSS 画像をフィルターするアニメーション 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ... 2019-11-15 17:47:52
CSS 文字の縦書き 文字を縦書きにするスタイルの活用事例です。 CSSでは縦書きができるようになっています。 原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。 行の向きも右から左 一... 2019-11-08 15:52:32
SCSS スタイルをまとめて一つにする SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。 ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。 長いこと続けていると、CSSがとても肥大化して運用しづらく... 2019-11-08 14:53:35