第11回ホームページ勉強会

　第97日目開催：2024年 8月22日

　今回の勉強会では『CSSだけで作る「回転する3Dバナー/ vol3 6面の横回転サンプル色々」(コピペOK)』の2番目の項目である『縦に垂らしたバナーアニメの作成』と『ウイルス対策とウイルスチェック』について勉強しましょう

｢Wayback Machine｣から『6面_②縦に垂らしたバナーアニメの作成』

　回転灯篭の様に写真やコメント文を回すという手法を、私が那須シニアネットに加入の直後の2010年頃に、西那須野支部のOBに教えて頂きましたが、その後のJAVAのセキュリティー強化により、コの様なJAVAうを使うアプリは使えなくなってしまい、代わりのアプリを探していました。
　そこで2021年暮れにやっと見つけたのが、前回の勉強会で皆さんにご紹介した『CSSだけで作る「回転する3Dバナー」』シリーズです。
　今回も同じWebページ『CSSだけで作る「回転する3Dバナー」』の、Vol3 6面の横回転サンプル色々の第2項目『 2. 縦に垂らしたバナーアニメーション』をご覧になり、6面のスライドショーを作って見て下さい。

　Webページからコピペして私の写真に入れ替え、RESETをPAUSEに変えた事例を下記に表示します。

1Link
2
3
4
5
6

今回の専用CSSは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ul.t2 {
animation: anime2 4s linear infinite;
transform: rotateY(60deg);
width: 280px;
height: 590px;
}
.t2 li {
position: static;
width: 140px;
height: 140px;
}
@keyframes anime2 {
0% {transform: rotateY(60deg); }
100% {transform: rotateY(-300deg); }
}
.t2 .face1 {transform: translate3d(-75%, 0, 60.62px) rotateY(-60deg); }
.t2 .face2 {transform: translate3d(0%, -50px, 121.24px); }
.t2 .face3 {transform: translate3d(75%, -100px, 60.62px) rotateY(60deg); }
.t2 .face4 {transform: translate3d(75%, -150px, -60.62px) rotateY(-240deg); }
.t2 .face5 {transform: translate3d(0%, -200px, -121.24px) rotateY(180deg); }
.t2 .face6 {transform: translate3d(-75%, -250px, -60.62px) rotateY(240deg); }

　ul.t2 に記載されている 4sは1回転の時間 width: 280px; height: 590px; は6枚の垂れ下がった写真が回転しながら表示される全領域。
　.t2 li に記載されている width: 140px; height: 140px; はオリジナルの写真の表示サイズですが、横縦比を変える場合には、width: 140px; height: 140px; の横縦の比率で高さの数値で調整します。4：3の場合はwidth: 140px; に対して、高さをheight: 105px; に変えます。
　基本的にはこの6枚の写真は右下に斜めに表示する設定になっているが、16～21行目の赤で示した負の値だけ上に表示させる。つまりこの例では50pxだけ縦方向に重ねて表示するように設定されている。

　写真の表示サイズを変えたい(倍率を変えたい)場合は、基本的にはcss部に記載された全てのpx数に全て同じ倍率を掛けます。
　尚、上記の説明はWebサイトには何処にも書かれていません。

　設定を変えタイトルやBGMを追加し､画像のサイズも大きくして、全体の幅を900pxにした事例はここからご覧になれます。

支部だより風にアレンジした 6枚の事例はここからご覧になれます。
8枚の事例はここから　10枚の事例はここから　12枚の事例はここからご覧になれます。
45度毎に8枚を垂れ下がらせた事例はここからご覧下さい。

『ウィルス対策』と『ファィルのウイルスチェック』

Ⅰ．『Windows Defender』にランサムウエアーに対する防御機能をONにする

＊ランサムウェアの定義
　ランサムウェアとは、被害者のデータを暗号化するマルウェアの一種のことで、感染すると、ファイルやネットワークへのアクセスを復元するために、攻撃者から「身代金」つまり金銭が要求されます。通常、身代金の支払いが行われると、被害者は暗号化解除キーを受け取り、ファイルへのアクセスを復元できます。身代金の支払いが行われないと、脅威アクターは、データリークサイト（DLS）にデータを公開したり、ファイルへのアクセスを永久にブロックします。
　ランサムウェアは、政府セクター、教育セクター、金融セクター、医療セクターなどの広範なセクターを標的にした最も有名なマルウェアタイプの1つになっており、毎年、世界中で数百万ドルが強奪されています。

　Windows には無償のウィルス対策ソフト『Windows Defender』が標準で装備されています。無償にもかかわらず優れたウイルス対策機能が含まれていますが、何故かランサムウエアーに対しては標準では非適用になっています。これを下記手順で適用します。
１．タスクバーの左の

赤で囲んだ

をクリック。
２．

が表示されるので、赤で囲んだ

をクリックし、『Windows Defender』を
　　起動。
３．左のバーの

ウイルスと脅威の防止をクリックし、一番下までスクロールし、ランサムウエア防止の
　　管理をクリック。
　　

４．ランサムウエアの防止のコントロールされたフォルダーアクセスのオフボタンをクリック。
　　

５．何時もの様に変更の許可を聞いてくる。｢はい｣をクリック。
　　

６．ランサムウエアの防止が｢ON｣になりました。
　　

Ⅱ．『Chrome』にマルウェアやフィッシングサイトからの保護を強化

＊マルウェアとウイルスの違い
　マルウェア（malware）とは、英語のmalicious（マリシャス：悪意のある）にsoftware（ソフトウェア）の2つの単語が組み合わさった造語です。ウイルス（コンピューターウイルス）やワーム、トロイの木馬、スパイウェアなど、ユーザーのデバイスに不利益をもたらす悪意のあるプログラムやソフトウェアを総称する言葉です。
　ただし、一般にそれほど普及していない言葉であるため、マルウェアのことをウイルスやコンピューターウイルスという言葉で表現する場合もあります。

＊フィッシングサイトとは？
　「フィッシングサイト」は、実在の宅配業者や金融機関、ショッピングサイトなどを装った偽のサイトで、アカウント・IDやパスワード、クレジットカード番号などの個人情報を入力させ騙し取るために設けられます。実際のロゴを使用していたり、真正のWebページとまったく同じデザインを盗用していたりするため、一見しただけでは本物と見間違ってしまう可能性があり、個人情報を入力する際には十分に注意する必要があります。

下記に簡単な例を示します････。
那須シニアネットのURLは http://www.nasu.senior.ne.jp/ ですが、クリックしてみて下さい。
簡単に、全く別のページを開かせることができます。

　　この項目はEdgeでは対応済みですが、Chromeでは別途オプションとして組み込みます。
１．Chromeを起動し｢ｗindows defender browser protection｣で検索欄します。
　　

２．下記の様な画面になりますので、一番上の『Microsoft Defender Browser Protection - Chrome
　　ウェブストア』を選択し、クリックします。
　　

３．『Microsoft Defender Browser Protection』が表示され、赤枠で囲んだ場所に日本語に翻訳すると
　　『マルウェアやフィッシングサイトからの保護を強化』と書かれています。
　　右上の｢Chromeに追加｣をクリックします。
　　

Ⅲ．『VIRUSTOTAL』でファイルの｢ウイルスチェック｣
　VirusTotalは、ファイルやウェブサイトが悪性であるか否かを検査できるGoogle社が提供する世界最大の脅威インテリジェンスソリューションです。
　30億以上のファイル、50億以上のURL、30億以上のドメイン、50億以上のPassive DNSレコードといった膨大なデータを保有しており、多様なデータベースを用いた多角的な調査が可能です。
　VirusTotal は、シマンテック、トレンドマイクロ、マイクロソフト、アバスト、マカフィー、キングソフト等、70 を超えるウイルス対策スキャナと URL/ドメインブロックリストサービスを使用してアイテムを検査するほか、調査対象のコンテンツからシグナルを抽出するためのさまざまなツールを備えています。

１．『VIRUSTOTAL』へアクセスすると各画面になります。
　　

２．検査したいファイルをD&Dで乗せる
　　

３．検査中は下図の表示になります
　　

４．検査結果は下図の様に表示されます
　　

５．『まとめ』タブをクリックすると下図の様に表示されます。
　　74のセキュりティーベンダー中の1つのベンダーが悪意のあるファイルとしてフラグ付けされました
　　