404 NOT FOUND | 東田ダダーン https://higashidadan.com Life was like a box of chocolates. You never know what you're gonna get. Sun, 31 Dec 2023 22:46:30 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 https://higashidadan.com/wp-content/uploads/2018/12/cropped-icon-32x32.png 404 NOT FOUND | 東田ダダーン https://higashidadan.com 32 32 145571538 2024年もよろしくお願いします。 https://higashidadan.com/diary/2024.html https://higashidadan.com/diary/2024.html#respond Tue, 02 Jan 2024 01:17:02 +0000 https://higashidadan.com/?p=5733 どうも「光る君へ」です。
しきしきぶんぶんしきぶんぶんは観る気にならないなぁ。

そんなこんなぽんな、あけましておめでとうございます。
2023年は本当に個人的にめちゃくちゃ大変で激動の1年でした。
引っ越しやら、引っ越しやら、引っ越しとか、その他いろいろ、、、
でも、おかげさまで自分も子供たちも元気に楽しく生活できる環境・体制になりました。
ありがとうございます。

2023年を振り返って

とにかくAI

去年のご挨拶に書きましたが、AIに怯える日々。
でしたが、まぁまだまだ大丈夫と判断しました。

いろいろ使ってみて、まぁまだまだ製作のクオリティを考えると、まだまだ信頼できて作らせれるレベルではないと思いました。
結局、デバッグやらテストやら、テキストの確認、信憑性の確認に時間とられたりって感じで余計大変なイメージです。

でも、部分的な制作にはAIにたくさん助けてもらいました。
この記事のサムネもフォトショップのAdobe Fireflyで背景とか生成AIが作った感じです。
めちゃくちゃ怖いのも作られるけど。
ありがとう。

まぁその日が来る前に「備え」は必要なわけで。。。

2回引っ越した

初めて仮ぐらしをしまして、アリエッティっこんな気持ちやったんかなって思いました。
観たことないけど。

前住んでたところから仮ぐらし先へ、仮ぐらしから新居へ。
2回の引っ越しは本気でしんどかったです。。
しんどすぎて、こうやって人は変わってしまうんやなって、道を踏み外して罪を犯してしまうんやなと。
2回の引っ越しで少年院を覚悟しました。

めっちゃ家具組み立てた

新居引っ越しに伴い、IKEAのPAXとか、可動棚とかめっちゃ組み立てて、
しんどすぎて、こうやって人は変わってしまうんやなって、道を踏み外して罪を犯してしまうんやなと。
家具組み立てすぎて女子刑務所を覚悟しました。

IKEAのPAXは注文するとき、頼みすぎでネット買えなくなり、電話で注文になり面倒だった。
細かい事言うたら、電話つながるまでの電話代入れたら、1000円プラスだかんね!

それにしても、今回買った可動棚は、かなりしっかりしてて、取り付けも割と簡単でした。(デカいから大変は大変でしたけど)
けっこう値段するけど、阪神の優勝セールで安く買えました、ありがとう。

なんとか、刑に服すことなく、2023年は過ごせました。

2024年は

パリオリンピックとか、テイラースウィフトとか、世界の各地で選挙が多かったりとか、僕の免許更新とか、テイラースウィフトとか、テイラースウィフト観に行きたいなぁ。

まぁ免許の更新ですね。
目標というか、車庫証明とかナンバープレートの変更というか、免許の更新ですね。

今年もどうぞよろしくお願い致します。
って思った一日でした。

]]>
https://higashidadan.com/diary/2024.html/feed 0 5733
僕がしたふるさと納税、おすすめのふるさと納税 https://higashidadan.com/diary/furusato-nouzei.html https://higashidadan.com/diary/furusato-nouzei.html#respond Sat, 25 Mar 2023 03:00:00 +0000 https://higashidadan.com/?p=5465 ふるさと納税をやろうやろうと思いながら、なかなかできない人多いと思います。
僕もなかなか始める事ができず、遅れながら昨年(2021年)から始めました。

そんな「ふるさと納税」ド素人の僕ですが、初心者なりにおすすめの返礼品を紹介できればと思います。

はじめに

タイトルの「買った」ではなく「寄付した」が正しいと思いますが、ふるさと納税をはじめる方がわかりやすいよう、あえて「買った」と記載しています。

紹介する返礼品は楽天ふるさと納税です

ふるさと納税もいろんなサイト、サービスがありますが、この記事で紹介するのは楽天のふるさと納税のみ紹介します。
というのも、シンプルに他サイトへの登録等が面倒だから、、、
というのが一番大きいです。

楽天ならアカウントを持ってるという方も多いと思います。
アカウントお持ちの方なら、そのまま買い物するようにふるさと納税を始めれます。

他サイトの方がお得だったり、特典があったりするのかもしれませんが、楽天のポイントで還元される「楽天ふるさと納税」がおすすめです。

金額は1万円台

ふるさと納税を行うにあたり、「寄付上限額」を調べる必要があります。
これは、楽天でも他サービスでもシミュレーターがあるので、おおよその金額を調べることができます。

この記事では寄付上限額が3万~6万円ぐらいの方を対象にし、1万~2万円の寄付を紹介します。
おそらく、それ以上の寄付上限額の場合は、よりいろんな寄付を選べると思いますので、あえて1万円台の寄付を紹介します。

また返礼品は寄付金額の3割までという上限があるため、1万円の寄付なら返礼品が3,000円の価値があるかという事を一番に考えて選びました。

お買い物マラソン等と併用するとさらにお得

楽天の「お買い物マラソン」と組み合わせると、かなりお得にポイント還元されます。
プラス、「0と5の付く日はポイントアップ」、「楽天イーグルスが勝った日はポイントアップ」を一緒に利用すると、さらにポイント還元率が増えます。

おすすめ返礼品

【熊本県玉東町】 国産ハンバーグ 冷凍 大容量 20個 デミグラス 和風ジャポネ テリヤキ

ふるさと納税のハンバーグ系はたくさんあります。
そのなかでも「美味いな」ってなったのが、このハンバーグです。
量も150gが20個なので、多い方かと思います。しかも国産。
味も3種で、少し味付けが辛くも感じましたが、ご飯が進む美味しさで、リピートしたいと思ってます。

【宮崎県都城市】都城産豚「高城の里」わくわく3.6kgセット

とにかく得です。
味より量なのかと思ったら、味も美味しいお肉でした。
部位もいろいろあり、量が多いので、いろんな料理に使えます。
ふるさと納税を初めて、普段使いの豚肉が欲しいという方なら損はないはずです。

【鹿児島県出水市】鹿児島県産赤鶏さつま!サラダチキンバラエティーセット合計10袋

これは結構リピートしてます。
一袋が300円ぐらいと思うと、コンビニで売っているものに比べると、ほんの少し高いかもしれません。
でも、グラムとか値段というより、サラダチキンとして味が美味しいです。
5種類もいろんな味が入っているので、飽きずに食べれます。

【香川県善通寺市】5本 鶏油付き・国産ひな鳥 骨付鳥

香川県はうどんだけじゃなく、骨付きの焼き鳥も有名です。
子供ができるまでは、お店に食べに行ってたのですが、なかなか食べにいける機会がなくなり、そんななか見つけました。
味はお店よりは劣るかもしれませんが、しっかり美味しいです。
鳥の油も付いており、人によっては臭うかもしれませんが、この油が美味しいです。
この油で、チャーハンとか、出汁を入れてお茶漬けみたいにしてシメてます。
だいたいお店だと、1本1000円ぐらいなので、この返礼品なら660円ぐらいでお得です。
個人的には、1本は親鳥にしてほしいです。

【北海道音更町】ソーセージ・チーズおつまみ」セット

量でいうと、安いという感じではないかもしれませんが、いろんなチーズやソーセージが入っているので、すごくお得に感じます。
もちろん美味しいですし、チーズの味は濃いめに感じました。お酒にあう!
詰め合わせはシンプルにテンションあがります。

宮崎県都城市】本格手焼き!炭火焼鶏1.5kg(ゆずこしょう付)

ビール、ビール、ビールな炭火焼鳥です。
正直、すごく良いお肉という感じではないのですが、味も濃いめで、炭火の味がお酒に合います。
青唐辛子の柚子胡椒の小瓶が付いてくるのですが、それが美味しく嬉しいです。
量が多いので、親子丼にしてアレンジしたのも美味しかったです。

岐阜県 北方町】トイレットペーパー(シングル)60m×96ロールのセット

食べ物ばかりじゃなく、消耗品も助かります。
トイレットペーパーにこだわりのある方にはおすすめできませんが、特にこだわりがなければ、かなりお得だと思います。
こだわりとは言っても、固い紙とかではなく、柔らかい方のトイレットペーパーで、使い心地も悪くないと思います。
結構な量なので、置き場所がない人も大変かもしれませんが、買いに行く事を考えると楽すぎて、もう戻れないかもしれません。

僕オススメふるさと納税まとめ

上記以外に、カニや普段は絶対買わないような高級ジュース等も寄付してみたのですが、おいしいけど、、人に勧めれるほどじゃないなぁと思いました。
あと、フルーツも当たりはずれの差が激しい気がします。。

僕自身、根本的にどこの自治体を応援したいかというのも忘れないように選んでいます。

それから、価格の高騰も影響しており、値上がりや量が減ったりもしているので、年末にまとめて行うより、早めに対応したほうが良いかと思います。

僕自身、まだまだ始めたばかりなので、これからもいろいろ試して、良かったものは追加していきます。

]]>
https://higashidadan.com/diary/furusato-nouzei.html/feed 0 5465
2023年もよろしくお願いします、ちょっと色々変えました。 https://higashidadan.com/diary/2023.html https://higashidadan.com/diary/2023.html#respond Fri, 24 Mar 2023 11:00:00 +0000 https://higashidadan.com/?p=5604 WBC優勝おめでとうございます。
年末年始は忙しくて、毎年やってる、あけおめ・ことよろの更新してませんでした。

日本代表は応援しましたが、春のセンバツは許してません。
野球が嫌いというわけではないです、ルーキーズ好きですから。
ただ、昔から高校野球はなんというか、なんと言いますか、いっつも言うてるけど、夏なら「こどもアニメ大会」とかを放送せずにテレビで中継するやん?
だから許せないのよ、、

で、夕方4時頃、1歳前の息子がEテレ楽しみにしてるのに、センバツやってるじゃなslさじjgd!

WBC優勝、おめでとうございます。
それは本当に興奮しました、ありがとうございました。
だけど、今まで会ってきた高校球児はチャラい人ばっかやったし、これからも偏見を持って生きます。
嘘です、放送時間か放送局を変えて欲しいです。

遅れましてあけおめ・ことよろです。

あけおめ・ことよろってもう死語なのかな。
死語という言葉がもう、あかんのかな。

とにかく元気です。
いや元気というか、年齢からくる?謎のだるさはありますが、無事、健康診断もバージョンアップの年齢になりました。
先生は、胃キレイって言ってくれました。

ただ、冒頭を読んでくれた方がいるかはわかりませんが、年々、些細な事で怒ってますね。
こうやって老害になっていくんだろうなって。

ブログをマイナーチェンジ

higashidadanのサイトカラー変更した一覧画像

変えたから何?
どこが変わったかわからねぇよ。
そもそもなんだよ、マイナーチェンジって車かよ。
って思った方もいると思いますが、どうかお付き合いください。

このブログは、知る人ぞ知る、更新するたびに色が変わる、カメレオンサイトなのです。
その色を見直して、毎年決められてる流行色系に変更した次第です。

  • ビバマゼンタ
  • ルミナスイエロー
  • ベリー・ペリ (2022年)
  • ジョリーコーラル (2022年)
  • とか、キャンプグッズで使われてるっぽい色とか

色以外にも、一覧の表示方法とか、トップのメインビジュアルの動画を今までは読み込ませてなかったのに、あえてスマホでも表示させるとか、改善と改悪の間。冷静と情熱のあいだ。

あれやったら、再読み込みして見てもらえると幸いです。

モーフィズム

2~3年前から目にするようになった、ニューモフィズム。
今さらではありますが、取り入れようかなぁって思っていたところ、色をたくさん使ってるこのブログでは、やっぱ厳しめなんですよね。

で、グラスモーフィズムやったら、簡単そうって思ってチョメチョメしてたら、別にぼかさんでも透過入れるだけでいいかって感じで、今の形にしました。
視認性は多少悪くなるのは良くないところ。

色々がんばらなくっちゃね

言わずと知れたChatGPTの登場から、ずっと怯えてます。
お仕事がなくなるよって。
ChatGPTへ指令を送る側の人間にならなければと、色々ゴニョゴニョやっては、知らない間にどうでもいい質問して終わってます。

インボイスもちくしょーこのやろーですね。。。
しょうがないですけど、ちくしょーこのやろーですね。。。

コロナ禍になってからは、毎年がターニングポイントのイメージですが、今年こそがターニングポイントだね、きっと!

これからもよろしくお願いしますと思った1日でした。

]]>
https://higashidadan.com/diary/2023.html/feed 0 5604
メインビジュアルや画像をCSSでアニメーションを付ける8パターン https://higashidadan.com/web/css/mv-css-animation.html https://higashidadan.com/web/css/mv-css-animation.html#respond Mon, 28 Mar 2022 11:06:50 +0000 https://higashidadan.com/?p=5477 メインビジュアルや、記事のメイン画像、タイトルに使えそうな動き・アニメーションを、CSSでいくつか作成してみました。
シュワッ、シュッ。みたいな。

基本的な形は、アニメーション変化前のデザインに、クラスを付与しアニメーションをしながら変化後の表示にする流れです。

2023/4/5 パターンを追加しました。

基本のhtml、CSS

基本の構成は下記です。
テキストをposition: absolute; で画像の上に配置し固定している形ですので、お好みでtopleftを調整して下さい。

またclassのpattern1もデザインに合わせて、数字を変更してください。

html

<div class="anime_wrap pattern1">
    <img src="image1.jpg" alt="">
    <p>ANIMATION DEMO</p>
</div>

CSS

.anime_wrap{
    position: relative;
    overflow: hidden;
}
.anime_wrap p{
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
    font-weight: bold;
}

javascript

どちらもjqueryを読み込ませた例ですので、下記を使う場合は必ずjqueryを読み込ませてください。

ページ表示にアニメーション(クラス付与)する場合

window.onload = function() {
    const fade = document.getElementsByClassName('pattern1');
fade[0].classList.add('show');

要素が表示したらアニメーション(クラス付与)する場合

$(window).scroll(function (){
    $(".anime_wrap").each(function(){
      var offset    = $(this).offset().top;
      var scroll    = $(window).scrollTop();
      var wHeight   = $(window).height();

      if (scroll > offset - wHeight + wHeight/2){
        $(this).addClass("show");
      }
    });
  });

アニメーション例

下記のサンプルはスクロールで対象の要素が表示時にアニメーションをするプラス、画像クリックで再度アニメーションするようにもしております。

基本的なシンプルフェードイン

ANIMATION DEMO

CSS

.pattern1 img{
    opacity: 0;
    transition: 1s;
    transition-delay: .5s;
}
.pattern1.show img{
    opacity: 1;
}
.pattern1 p{
    color: #ffdee7;
    opacity: 0;
    transition: .5s;
    transition-delay: 1s;
}
.pattern1.show p{
    opacity: 1;
}

横からスライドフェードイン

ANIMATION DEMO

CSS

.pattern2 img{
    opacity: 0;
    transform: translateX(40px);
    transition: .5s;
}
.pattern2.show img{
    opacity: 1;
    transform: translateX(0);
}
.pattern2 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern2.show p{
    opacity: 1;
    transform: translateX(0);
}

上にスライドフェードイン

ANIMATION DEMO

CSS

.pattern3 img{
    opacity: 0;
    transform: translateY(40px);
    transition: .5s;
}
.pattern3.show img{
    opacity: 1;
    transform: translateY(0);
}
.pattern3 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern3.show p{
    opacity: 1;
    transform: translateX(0);
}

大きいサイズから小さくなってフェードイン

ANIMATION DEMO

CSS

.pattern4 img{
    opacity: 0;
    transform: scale(1.2);
    transition: .5s;
}
.pattern4.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern4 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern4.show p{
    opacity: 1;
    transform: translateX(0);
}

小さいサイズから大きくなってフェードイン

ANIMATION DEMO

CSS

.pattern5{
    background: #333;
}
.pattern5 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.pattern5.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern5 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(40px);
    transition: .8s;
    transition-delay: .8s;
}
.pattern5.show p{
    opacity: 1;
    transform: translateX(0);
}

要素をカーテンみたいに隠して?から表示

ANIMATION DEMO

CSS

.pattern6::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    z-index: 2;
    transition: .5s;
}
.pattern6.show::before{
    transform: translateX(100%);
}
.pattern6 img{
    opacity: 0;
    transition: .5s;
}
.pattern6.show img{
    opacity: 1;
}
.pattern6 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
    z-index: 1;
    overflow: hidden;
}
.pattern6.show p{
    opacity: 1;
    transform: translateX(0);
}
.pattern6 p::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    transition: .5s;
    transition-delay: 1s;
}
.pattern6.show p::before{
    transform: translateX(100%);
}

いろいろ混ぜてみてのパターン

ANIMATION DEMO

.pattern7::before,
.pattern7::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pattern7::before{
    background: #FFF;
    z-index: 3;
    transition: 1s;
}
.pattern7::after{
    background: #dc7497;
    z-index: 2;
    transition: 1s;
    transition-delay: .5s;
}
.pattern7.show::before,
.pattern7.show::after{
    transform: translateY(100%);
}
.pattern7 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: .4s;
}
.pattern7.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern7 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: 1.2s;
    transition-delay: .8s;
    z-index: 1;
    overflow: hidden;
}
.pattern7.show p{
    opacity: 1;
    transform: translateX(0);
}

手前から飛んでくるパターン

ANIMATION DEMO

.pattern8 img,
.pattern8 p{
    opacity:0;
}
.pattern8.show img {
    transform: scale(1);
    animation: vibe .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
.pattern8.show p {
    transform: scale(1);
    animation: vibe .5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes vibe {
    0% {transform: scale(5); opacity: 0;}
    60% {transform: scale(1); opacity: 1;}
    65% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
    75% {transform: translate(2px, 2px) rotateZ(1deg);opacity: 1;}
    85% {transform: translate(0px, 2px) rotateZ(0deg);opacity: 1;}
    95% {transform: translate(2px, 0px) rotateZ(-1deg);opacity: 1;}
    100% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
}

MV(メインビジュアル)や画像のアニメーションまとめ

上記は割と定番なパターンかもしれませんが、transformtransitionを調整すれば、様々なパターンが作成できると思います。
また、疑似要素を使えば更に表現は膨らむかと思います。

ちなみに、上記で使用している画像はO-DANより使用させてもらってます。
ありがとうございまーす!

]]>
https://higashidadan.com/web/css/mv-css-animation.html/feed 0 5477
2022年もよろしくお願いします。 https://higashidadan.com/diary/2022.html https://higashidadan.com/diary/2022.html#respond Sat, 01 Jan 2022 00:42:11 +0000 https://higashidadan.com/?p=5407 新年あけましておめでとうございます。
2021年もありがとうございました。
去年も全然、更新しませんでしたが、僕はいたって元気です。

去年の「あけおめ」記事にも書きましたが、
離脱される前に先に言わせてもらいます、「今年もどうぞよろしくお願いします!」

今年の干支は虎やからサムネも「虎」

2021年はハッピーセットで連続で3回、虎当たったで。

2021年は2022年に向けて虎がたくさんやってきた年でした。

このホワイトタイガーに関して、娘が付けた名前は「恐竜」です。

娘に買った図鑑の表紙も虎でした。

たくさんと言っても上記ぐらいでした。
大げさに言いました。

2021年を振り返って

比較的、ウィルス性胃腸炎みたいなのにかかることが多かった一年でした。
コロナのワクチン接種も受けたし、インフルエンザの予防接種も受けたけど、結局、腹壊したら死ぬほどしんどいという事を身に染みて感じた一年でした。

いつも、4年に1回ぐらいのオリンピックペースで、
やばいレベルの腹をこわしていたのですが、2021年はかなりペースが早くなったので、「ついに始まったな」と思いましたが、振り返ってみると「何が?」という気持ちです。

2022年にしたいこと

めっちゃ適当に言いますけど、そりゃ「メタバース」。

2022年あけおめ、まとめ

2022年のスタートは800円マイナスですが、なんとか年末には2兆ぐらいになってほしいな。
今年もどうぞよろしくお願いいたします。

追記:2兆になんか、ぜんぜんならんかったよ!

「2023年のよろしく」はコチラ!

]]>
https://higashidadan.com/diary/2022.html/feed 0 5407
WEBページをダークモードに対応させ、切り替えスイッチを設置する https://higashidadan.com/web/dark-mode.html https://higashidadan.com/web/dark-mode.html#respond Mon, 20 Dec 2021 10:10:31 +0000 https://higashidadan.com/?p=5425 今さらではありますが、対応しました。
ダークモードに。

個人的には特に見やすいとも思わないダークモード。
なんでも明るい印象が好きなので、別にいいかって思ってました。

でも、有機ELもやけど、改めて黒を見直すと、かっこいいですよね。
ってことで、対応してみました。

このサイトのダークモード切り替え方法

単純にOSの設定でダークモードにされている方は、メインのコンテンツ箇所の背景が黒くなっているはず。

とりあえず、ダークモードの表示に変更する場合は、画面上部の切り替えスイッチ(月のマーク)、を押してもらえると切り替わるはず。
スマホ表示時は右側サイドバー展開で、上部にボタンがあるはず!

ダークモード対応内容

ダークモードに対応させる方法をまとめてみる。ついでに他のカラーテーマにもできるようにしてみる。|夕月悠里
経緯 ダークモードに対応したWebサービス、増えてますね。 私もPCとかスマホのテーマはダークにしていて、ダークモードがメインになってます。ずっとダークモード使っていると、白い画面がちょっとずつまぶしくなってきます。 自分が運営しているWebサイトもまぶしいなと感じてきたので、ダークモードに対応させました。その時に調べ...

上記のページ、そのまま拝借させていただきました。
ありがとうございます!

当初は、ただ切り替えができればいいかと思い、ダークモード時のclassをjavascriptで付与して表示を変えるように作成したのですが、それだとページ遷移した時に、端末のOSでのダーク―モードの設定状況に沿った表示に戻ってしまうので、上記のリンクを参考にしローカルストレージに設定を保存する形を拝借しました。

僕が追加した内容としては、CSSはもちろんですが、inputタグのオン・オフに、labelタグを使ってます。

<label for="btn-dark-mode" class="theme-change"></label>

読み込み時にチェックボックスをcheckedにする

22.03.29追記

このサイトだとダークモードにした状態で、新しいページを開き、切り替えスイッチを押すと、1回目の押下時は切り替わらず、2回目押下で切り替わる状態でした。

というのも、
チェックボックスにチェックが入っている状態=ダークモードなのですが、
ページを開いた時はチェックボックスにチェックが入っておらず、空押しみたいな状態になってました。。。

なので、ローカルストレージに記録している内容がダークモードの場合、以下のチェックボックスにチェックを入れる処理を追加しました。

if(localStorage.getItem('dark-mode-settings')==='dark') {
    document.body.classList.add("dark-mode");
    document.getElementById("btn-dark-mode").checked = true; //←追加した内容
}

これで、このサイト場合、ダークモードで他ページに遷移してから切り替えスイッチを押しても、1回目から切り替わります。
細かい事なのですが、気になりますよね。

ダークモード注意点

CSSはマーカー系のデザインは視認性が全然変わってくるので、注意が必要です。

通常の場合
ダークモードの表示

マーカーに関しては色と高さを変更しました。

その他の注意点として、広告の表示を合わせるのは難しいかもしれません。
いい方法があれば、教えていただければ助かります。。。!

ダークモード対応したよ。まとめ

元々、黒ベース背景のデザインだったので、対応は簡単でした。
ダークモードの実際の利用者数とかってどうなんですかね?
言うても年配層含め全体的に見たら少ないんじゃないかと思ってます。

訪問者のダークモード対応状況をアナリティクスでも確認できたらいいのですが、たぶん見れない?
その情報もとに広告の設定もできればなんて思ったりします。

とにかく対応して思ったのは、ダークモード云々って言うより、2つのデザインを持つような感じでちょっと嬉しいです。
有機ELのスマホで見た時の黒さはやっぱ、かっこいい。

ダークモードの余談ですが、、

ダークモードにしていたら、いつからか急に入力フォームが黒くなりまして、、、
以下の内容を対応したところ、もとに戻りました!
ありがとうございます!

そういや、クロームでアクロバットを標準のうんたらかんたらにしませんかってでて、「はい」しちゃったなぁって。。。
これ対策で、input要素にCSSで背景色指定が必須なんかなと思いました。

]]>
https://higashidadan.com/web/dark-mode.html/feed 0 5425
「まどあけ図鑑」それは、しかけ絵本と図鑑の良いとこ取り https://higashidadan.com/childcare/madoakezukan.html https://higashidadan.com/childcare/madoakezukan.html#respond Fri, 15 Oct 2021 23:37:50 +0000 https://higashidadan.com/?p=5350 我が家の3歳の娘は、絵本が好きです。
もう寝る前は絶対に「読んで」とお願いしてきます。
親としては読み聞かせしたいけど、疲れて休みたい時も。。。
そんな時に助けてくれたのが「まどあけ図鑑」。

「まどあけ図鑑」とは?

小学館から出版されている小学校入学前の幼児から対象の図鑑です。
ページ内に「しかけ絵本」のようなめくれる箇所があり、生き物の変化だったり、乗り物の内部などを視覚的に見れる図鑑です。

めくる前
めくった後

まどあけ図鑑のいいところ

もうそりゃ、「めくれる」というところが、子供を楽しまさせてくれるのはもちろん、図鑑なので、楽しみながら学ぶことができます。
また各名称に英語の表記もあるので、一応、英語の勉強もできます。

個人的に助けてもらったというか、絵本好きな娘は毎日、寝る前に「絵本を読んで」と言ってきます。
「読み聞かせは良い」との信念を持っている僕は、一瞬嫌な顔しながらしぶしぶ了承し、読むときは100%の力で読んでいます。
でも、絵本ってたまに長い話の時とか、辛く感じてしまうんですよね。。
そんな時、助けてくれたというか、気が楽になるのが、「まどあけ図鑑」でした。

図鑑なので基本、読みあげるというより、聞かれたところを答えたり、こちらからクイズを出したり、かなり気が楽になるし、僕も楽しいです。

あと絵本と違って、おもちゃで遊ぶように、一人で図鑑を読む?見る事もあるので、その間、ちょっと一息つけます。

  • めくれる楽しみ
  • 英語表記ありなので英単語の勉強も
  • 絵本ばっかりから、気晴らしも
  • 大人も面白い

まどあけ図鑑の気になるところ

気になるというより、しょうがないのですが、図鑑なので少し重たいです。

値段は約2,000円ぐらい、絵本と比べると少し高いかもしれません。
ですが、絵本二冊分と考えれば、確実にそれ以上の価値があると思います。

他の図鑑に比べればページ数は少ないような気もしますが、めくれる分ボリュームは多く感じます。

1点だけ注意点があり、最初はめくれる箇所がひっついているので、切り離してめくれるようにする必要があります。
子供に任せると、ビリっと破ってしまいそうなので、親がやってあげる必要があると思うのですが、数が多いので、一気にやると疲れます。

まどあけ図鑑まとめ

まどあけずかん(いきもの)

とにかく買ってよかった図鑑です。
まさに、しかけ絵本と図鑑の良いとこ取りです。
大人も見てて面白いというが一番大きいです。

今、我が家で所持しているのは、「いきもの」だけなのですが、他のシリーズも買いたいです。というか、次は「食べ物」を買おうと思ってます。
食いしん坊な娘なので、寝る前には見せれませんが。。

絵本に飽きたらぜひ。

追記(せかいのりょうり)

まどあけずかん(せかいのりょうり)

買っちゃったね。
「たべもの」ではなくて、「せかいのりょうり」ですが。

料理だけではなく、世界の「おいしい」の言い方や、「ビックリ」という項目で日本じゃ考えれない食材(グロテスクな食材!)など、大人が見ても面白いです!

追記(うちゅう)

まどあけずかん(うちゅう)

永遠のロマン、「宇宙」のまどあけずかんを買ってしまいました。
ロケットの大きさの違いとか、シンプルに面白いです。
子供より大人の方が楽しめるかも。

高さの比較が面白いロケットのページ

複数まどあけずかんを買ってわかりましたが、図鑑によって絵のタッチが全然違うことに気がつきました。
本によって違いがあるのも面白いです。

]]>
https://higashidadan.com/childcare/madoakezukan.html/feed 0 5350
アクセシビリティを無視してtableのスマホ表示対応 https://higashidadan.com/web/table-responsive.html https://higashidadan.com/web/table-responsive.html#respond Tue, 09 Feb 2021 10:30:00 +0000 https://higashidadan.com/?p=5309 tableのスマホ表示は「ScrollHint」が総合的に良きと思っているのですが、時と場合によっては導入が手間だったり、システムの関係で使えないという事もあると思います。

そんな時に、やむをえず対応したtableのスマホ表示の忘備録と注意喚起。

デモ

表示のデモは以下のボタンからご確認ください。

HTML

<table>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="見出し1"><span>内容1-1</span></td>
            <td data-title="見出し2"><span>内容2-1</span></td>
        </tr>
        <tr>
            <td data-title="見出し1"><span>内容1-2</span></td>
            <td data-title="見出し2"><span>内容2-2</span></td>
        </tr>
    </tbody>
</table>

普通のtebleに属性を追加してtableの見出しとなるthの内容を入力します。

CSS

@media screen and (max-width: 768px) {
    table tr{
         margin: 0 0 30px;
         display: block;
     }
     table tr:last-of-type{
         margin-bottom: 0;
     }
     table thead{
         display: none;
     }
     table td{
         padding: 0;
         display: flex;
         border-bottom: none;
     }
     table td:last-of-type{
         border-bottom: 1px solid #ccc;
     }
     table td::before{
         content: attr(data-title);
         width: 50%;
         background-color: #eee;
         padding: 10px;
         border-right: 1px solid #ccc;
     }
     table td span{
         width: 50%;
         padding: 10px;
         text-align: center;
     }
}

基本のテーブルのスタイルは省略してます。
横幅768px以下の場合に適用する内容ですが、コンテンツ量によってはもっと細い幅でもいいかもしれないです。

何がいけないか

アクセシビリティ的にアウトになる可能性があります。
どう言う事かと言うと、WEBサイトを読み上げ機能などで閲覧されてる場合、正しく読み上げられない可能性が高いです。

また翻訳機能も使えない可能性があるので、その点でも利便性に欠けます。

表示だけを優先すると、そのページで迷子になっている閲覧者がいるかもしれません。

WEBサイトは見えている状態が全てじゃない

表示的にOKでも、アクセシビリティを考えると全ての人にサイトを閲覧してもらえない可能性があります。
コーディングを外部に依頼している知人からよくこういった内容の話を聞きます。

最近フリーランスの方が増え、スクール等から出たばっかりで、スクールではアクセシビリティ等の事を教えてもらえてないようで、表示だけ優先で対応する方が多い。

僕自身、アクセシビリティに関して、まだまだですが、CSSを取ってもサイトの中身がわかるように製作する事を心がけています。

話がそれましたが、今回記載したようなスマホ対応のtableは、ターゲットやリスクを理解した上で、使用してください。

]]>
https://higashidadan.com/web/table-responsive.html/feed 0 5309
2021年もよろしくお願いします。 https://higashidadan.com/diary/2021.html https://higashidadan.com/diary/2021.html#respond Fri, 01 Jan 2021 00:00:00 +0000 https://higashidadan.com/?p=5283 新年あけましておめでとうございます。
2020年は全然、更新しませんでしたが、僕はいたって元気です。

2021年はどんな年になるのか検討もつきません。
離脱される前に先に言わせてもらいますが、「今年もどうぞよろしくお願いします!」

今年のサムネはシンプルよ

2020年はいろいろデザインのトレンド調べてサムネイルを作成しましたけど、今年のトレンドのデザインってあんまり良く感じるデザインがないなぁって感じでして。

で、今年の干支の牛の画像調べてたらこの記事のサムネの画像見つけて、「シンプルにこれで可愛いやん」って思ってシンプルに作成しました。

去年はオリンピックの事書いたけど黒歴史

2020年のあけおめ記事で、メダルの数がどうのこうのって書いたけど、見返したらクソ恥ずかしいですね。誰が興味あるねんていう。
こういうの書いちゃう男なんですよ。

それはさておき、無事に今年はオリンピック開催されれば良いですね。
正直、去年よりコロナのせいで、熱は冷めてますが、オリンピックが始まれば応援モードに入るミーハーな私です。
今年は開催されて良い結果を残して欲しいですね。

2021年は株と投資信託をうまくやりたい

去年から株と投資信託を極小金額ではじめました。
今までアプリやデモを使って勉強はしていたのですが、やっぱり私、馬鹿には難しいです。
私、馬鹿はやっぱり実際にお金を動かさないと身につかない様です。

でも、実際に株を買うにも、永遠の課題、資金がないんですよね。。
と思っていたら、小額で取引できるLINEのサービス「LINE証券」ってのがあり始めてみました。

2020年の株トレードは難しかったのでしょうか?簡単だったのでしょうか?
年末取引最後の12/30の株価はコロナ禍克服し30年ぶりの高値水準にみたいですが、雑魚には少しだけ利益が出ただけ。

大体1万円規模でしか取引してませんが、収支としてはプラマイ0に口座開設のボーナスみたいなで2,000円ぐらいプラスになってだけでしたが、年末で合計で約3,700円ぐらいのプラスに。

3万が入金した金額です

まあそれだけでも、銀行でお金預けてる「ほぼない」金利に比べれば遥かにいいわけでして。

こんなご時世だからこそ、資産運用を身に付けたいので、今年はより勉強しようと思っております。

LINE証券のアフィリエイトタグ貼ろうとしたら、さすがに審査落ちました。

追記:2022年は一時期マイナスになりましたが。。。

gafaがあーなってこーなったから、一時期マイナスになりましたね。。
とりあえず今は、戻ってきて、少しプラスというところでしょうか。。
難しいですね、、

株は買い焦るのをやめて、応援したい企業を応援する形にしました。
やっぱり、それが一番、精神衛生的にも良いですね。

はい、特にこれと言って、儲けてません。

2021年あけおめ、まとめ

本当に、2021年というより、これから先、コロナの影響で不景気になりそう(絶対になる)という不安が個人的に大きいです。
今はなんとかありがたい事に生活もできているので、関わってくれている方々に本当に本当に感謝です。
ありがとうございます。

コロナの影響が出てきて、zoomが一般化され始めた頃、zoomの背景の画像を作成するという需要があったみたいで、僕はデザイナーじゃないので作成はできないですけど、そういった時代に合わせて行動できる人間になりたいですね。

そう考えて、「自分に何ができるか」を考えると、
そうですね、中学生の頃からですが、裸になるしか思いつきません。
って思った1日でした。

2022年と2023年のよろしくはコチラ!

]]>
https://higashidadan.com/diary/2021.html/feed 0 5283
safariとかで画像が縦に伸びる現象が起きたらflexboxを見直すんだ https://higashidadan.com/web/css/safari-flexbox.html https://higashidadan.com/web/css/safari-flexbox.html#respond Mon, 03 Aug 2020 11:15:00 +0000 https://higashidadan.com/?p=5267 コーディングには必要不可欠なぐらい多様しまくってるflexbox。
昔のようにfloatをいっぱい使っていた頃には、もう戻れないよ。

そんなflexbox、safariブラウザで確認すると画像が伸びる場合があります。

どういう場合に画像が伸びる?

おそらくsafariだけ?他のブラウザでは確認できませんでしたが、スタイルの性質上、発生してもおかしくないと思います。
特に以下のようなHTMLだと起きやすいかもしれません。

<div class="flex">
  <img src="img1.png" alt="" >
  <img src="img2.png" alt="" >
</div>

CSS対処方法

そんな時は、flexboxを設定している要素に以下の内容を追加すれば対処できます。

align-items: flex-start;

以下のような感じです。

.flex{
  display: flex;
  align-items: flex-start;
}

HTMLの記述で対処方法

いや、デザイン的にCSSの display: flex;align-items: flex-start; 使いたくないんだよね。。
って方もいると思います。

その場合は、下記のように画像(imgタグ)をdivとかの要素で囲ってあげると対処できます。

<div class="flex">
  <div><img src="img1.png" alt="" ></div>
  <div><img src="img2.png" alt="" ></div>
</div>

まとめ

画像のサイズによっては、パッと見、気づかないかもしれません。
過去に対応した内容をsafariで確認してみてはいかがでしょうか。

そろそろ、ブラウザ統一の条例とか法律とか決まりを作って欲しいです。。。
昔に比べれば全然マシですが、作る側が表示を合わせるのではなく、ブラウザ作ってる会社が合わせてよ!

って思いますが、Googleさん、Appleさん、その他のブラウザを作ってる会社さん、いつもありがとうございます。

]]>
https://higashidadan.com/web/css/safari-flexbox.html/feed 0 5267