af-img01
下の方のコレです ↑

記事の下には とりあえずオススメだったり期待のゲームだったりのAmazonへのリンクを貼ってました
意外とクリック数があったりします

ふと思ったのが これがAmazon飛ぶって知らずに押してる人多いんじゃ?

パソコンなら左下にリンクURL出るのでわかりますが怪しいサイトでもなければわざわざ確認する人も少ないでしょう
公式ページとか画像の大きいサイズと思ってクリックしてる人もいる気がします

わかりやすくしたいなー。ついでに通常版と限定版とか複数リンクつけたいなー。あと公式ページへのリンクあったらいいなー。
とか思って色々改良してみました


こういうのって最初はシンプルなものとして作ろうとしてても、作ってる内に「ここちょっとこだわりたい」「この機能追加すれば便利かも」「どうせならこれもできるように」…などと色々追加したくなり最終的に最初の予定とは全然違うものができるんですよね

そして時間が無駄にかかって こんな予定じゃなかった!! って…
いつものことです はい

今回ですと アニメーションとか少しこだわってます
ただ 重いパソコンやブラウザだとなんか動き遅くて少し微妙な感じに見えます
マアジブンノPCデハアンテイシテルシイッカ

それとjQueryによくある画像の切り替え
af-img02
ですがjQueryは使ってません

CSSで久々にflexbox使いました
前はflexじゃなくてboxだった頃だったからねー

そろそろみんなflexboxが動くブラウザだよね!
IE?そんなのもちろん対象外だよ



ところで、作るときはこの部分だけを別のHTMLファイルに書いてテストしながらやってたのですが、いざブログに埋め込んでみるとおかしなことになってたり……

原因はHTMLのモードの違いのようでした
strict(標準)とかtransitional(互換)とかです

HTMLの一番上に書いてるやつで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">とか<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">です

テスト段階は面倒なので何も書いてなかったので互換モードになってたようです
ですがブログの方は標準モードなので互換モードでちゃんと動くように書いたCSSでおかしなとこが出たわけです
何も書いてないんだから標準でいいんじゃないかと思うけど昔からので色々あるんでしょうねー
いまどきそんな古いページなんていらないから今の基準に合わせてよ

ところで、書くのが楽なHTML5(<!doctype html>←これだけでいい)は標準モードらしいです
いちいちこんな違い考えるのなんてめんどうだよーー