CSSのみで、リンク先へスクロールするとき、スムーズにスクロールすることができます。
＜解説＞
scroll-behavior: auto / smooth;
auto : スクロールするボックスは瞬時にスクロールします。
smooth : スクロールするボックスは円滑ににスクロールします。
＜対応ブラウザ＞
・safri は非対応のため、使用する場合は注意が必要です。
Can I use
windows10 の自動アップデートが終わったら、画面右下のタスクバーに天気が表示されていませんか？
とても便利なのですが、この天気予報の地域が自分の地域でなくて変更したいけど、変更する方法が分からないという人はいませんか。
この天気予報を自分の地域に変更する方法を紹介します。
・天気予報の箇所に天気予報の地域が表示されます。
をクリック
・タブレットなど、現在地を測定できる環境の場合は、「常に現在地を検出する」をチェックすると、現在地の天気を表示することができます。
PNGなどの背景が透過されている画像の場合は、box-shadow プロパティを使用すると透過背景を含めた全体に影がついてしまいますが
filter: drop-shadow を利用することで、被写体のみに影をつけることができます。
＜解説＞
filter: drop-shadow(offset-x offset-y blur-radius color)
＜対応ブラウザ＞
・IEを除く、ほぼすべてのブラウザで対応している
Can I use
CSSのみで、テキストがタイピングで入力されたようなエフェクトをつけたい方法を紹介します。
＜解説＞
animation: typingdemo 8s steps(36), blinking .5s step-end infinite alternate;
@keyframes typingdemo {
from {
width: 0
}
}
@keyframes blinking {
50% {
border-color: transparent
}
}
①「.wrapper」に flex-box で、テキストを上下左右に中央揃え
②「.typing-demo」の横幅の長さを文字数にするため、「ch」の単位で設定
「ch」の単位は、「0」を表示したときの文字の横幅の長さを「1ch」とする単位。
このため、「0」と他の文字の横幅サイズがほぼ同じフォントを使う必要がある。
③「.typing-demo」を animation で、文字の横幅を 0 から設定している文字幅まで、22ステップにわけて延ばしていく。
④テキスト最後のカーソルは、罫線をアニメーションで表示・非表示を切り替えて表現している。
★→この手法は、あくまで使用するフォントが「0」と他の文字の横幅が同じでないとうまくできない。どうしても、そうでないフォントを使用したい場合は、各パラメータを細かく設定する必要がでてくる。
form の radio ボタンをJSで取得する場合、RadioNodeList を利用すると、簡単に取得できます。
<form id="radio_ex" action="./form.php"> <input type="radio" name="plusone" value="aaa">選択肢1 <input type="radio" name="plusone" value="bbb">選択肢2 <input type="radio" name="plusone" value="ccc" checked>選択肢3 <input type="radio" name="plusone" value="ddd">選択肢4 </form>
// form要素を取得
let element = document.getElementById( "radio_ex" ) ;
// RadioNodeListを取得
let elements = element.plusone ; // RadioNodeList
// HTMLOptionsCollectionの内容
console.log( elements[0] ) ; // 選択肢1
console.log( elements[1] ) ; // 選択肢2
console.log( elements[2] ) ; // 選択肢3
console.log( elements[3] ) ; // 選択肢4
// 現在、選択されている値を取得
console.log( elements.value ) ; // "ccc" (例)
//チェックを付ける
elements[0].ckecked = true;
//チェックを外す
elements[0].ckecked = false;
使用例
＜対応ブラウザ＞
・メジャーブラウザはほぼ全て対応しています。
Can I use
スクロールの開始位置を常に一番下に設定する方法を紹介します。
ラインを使い慣れてるユーザーには、
常に一番下に最新メッセージを表示させたプラットフォームが見慣れてるかもですね。
＜解説＞
let target = document.getElementById('scroll-inner');
target.scrollIntoView(false);
target.scrollIntoView()は、要素が（ブラウザのウィンドウ上の）表示範囲に入るまでページをスクロールします。
引数を省略または true とすることで上端に来るようにスクロールし、false ならば下端に来るようにスクロールします。
ブレンドモード（mix-blend-mode）とは、画像と文字、画像と画像などの重ね合わせ時に色々な加工（ブレンド）を設定するプロパティになります。
＜コード＞
mix-blend-mode: color-burn;
色々な描画モードを試せるようにサンプルを作成しました。色々な描画モードをお試しください。
＜対応ブラウザ＞
・IE以外のブラウザはほぼ対応しています。
Can I use
<details> と <summary> を使うことで、アコーディオン（開閉スライド）コンテンツを作成できます。
＜解説＞
<details> <summary>プラスワンってどんな会社？</summary> <div> <p>介護保険業務支援ソフトウェアを作っている会社です。</p> </div> </details>
<details> ： アコーディオン全体を囲みます。はじめからアコーディオンを開いておく場合は、open 属性を付与します。
<summary> ： アコーディオンのタイトル（常に見えているテキスト）を入れます。ここをクリックするとアコーディオンが開閉します。
<div> ： <summary> の兄弟要素で、アコーディオンが開閉で表示・非表示される要素になります。何個でも配置できます。
エクセルで、レイアウトをよく見せたいために、次のようにセルの結合を使ってレイアウトを整えることがあると思います。
しかし、セルの結合を使用すると、データの並べ替えやマクロでうまく動作しないで困ることがあります。
例）データの並べ替えを使用した場合のエラー
レイアウトを調整する場合は、セルの結合を利用しないで次のように調整することができますので、こちらを利用することをおススメします。
position プロパティに sticky と設定することで、要素がスティッキーアイテムとなり、ステッキーアイテムをラップしている要素がスティッキーコンテナとなります。
スティッキーコンテナが、スティキーアイテムがフロートすることができる最大のエリアになります。
また、top/bottom の値がステッキーコンテナからの相対距離で停止する値になります。
このたび、正式に「WordPressが次バージョンからInternet Explorer 11 サポート終了」を発表しました。
今まで苦労していた IE対策 も、これで解放されますね！
=====================
7年以上前にリリースされた Internet Explorer 11 (IE11) は、現在インターネット上の全ユーザーの1％未満にしか使われておらず、利用率は急速に低下しています。人気サイトの大部分はすでに IE11 のサポートを停止しており (2020年版の Microsoft Teams を含む)、Microsoft 365 のアプリやサービスでさえも今年の後半にはサポートを終了する予定です。
今年の7月に WordPress 5.8 がリリースされる際、Internet Explorer 11 はサポートされなくなります。
=====================
WordPress公式ページ
米Microsoftは5月19日（現地時間）、Webブラウザ「Internet Explorer」（IE）のサポートを2022年6月15日（日本では6月16日）に終了すると発表しました。
Microsoftは2015年にEdgeを発表して以降、ユーザーにIEからEdgeへの移行を勧めてきており（昨年8月にはIE（とレガシー版Edge）の「Microsoft 365」でのサポートを今年8月17日に終了）、ついにIEのサポートが終了するということになりそうです。
なお、このIEのサポート終了は、Windows 10 LTSC（長期サービスチャネル）、Windows Server上のIE 11のデスクトップアプリ、MSHTML (Trident) エンジンには影響しないということです。
↑字幕の「自動翻訳」→「日本語」を選ぶと日本語の字幕が表示されます。
これで、長年悩まされていたIE対応の呪縛から解放されそうです！