【CSS】回転＋移動＝渦巻き？【実験作】

どうも！LSSです！！ ちょっとした思いつきで作ったCSSアニメーションです。 渦巻きアニメーション コード コード解説 あとがき 渦巻きアニメーション 文の頭につけたマークが渦を巻いて回転するアニメーション コード <style><!--@keyframes bfrnda{0%,30%{transform:rotate(0deg) translateX(0px);}65%{transform:rotate(900deg) translateX(70px);}100%{transform:rotate(1800deg) translateX(0px);}}.bfrnd:before{conte…

【CSS】本のページをめくるCSS【シンプルに改善版】

どうも！LSSです！！ 以前に、【CSS】本をめくる、という動作をCSSで表現してみました。というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^; コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。 理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。 その後、色々試行錯誤していましたが、だいぶ楽にページ追加可能なものができました^^ ついでに、本のサイズも「縦横比を保ったまま、スマホ画面でもPC画面でも…

【日記】散髪してきました！

どうも！LSSです！！ 8月ももうすぐ終わりですね。 今日は前髪がだいぶ伸びてきていたので、やっと散髪にいってきました！ 出かける時は、たいてい市バスを利用するんですが、 三宮に出る際によく使う市バスが2種類あります。 90系統と92系統っていうんですが、90系統は92系統に比べて本数が極端に少なく、三宮までは同じようにたどり着くのであまり違いを気にしていませんでした。 で、今日乗ったのがたまたまレアな90系統の方。 終点は「中突堤中央ターミナル」となっています。 中突堤ってなんだ？w 行きたい散髪屋さんが三宮より更に先にあるところだったので、終点まで乗って行ってみました。 普段、終点まで乗ら…

【CSS】複数の文章をアニメーションで動かすサンプル

どうも！LSSです！！ ちょっと変な文章アニメーションを作ってみました。 2021/8/29追記Windows＋GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで正常に動作しないようです^^; サンプル コード コード中、最後のpタグ あとがき サンプル あいうえお かきくけこ さしすせそ たちつてと コード <style><!--:root{--txtanm1op1:0;--txtanm1y1:30deg;--txtanm1op2:0;--txtanm1y2:30deg;}@keyframes txtanm1a{0%,20%{--txtanm1op1:0;…

【しつこく】ちょっとCSSの実験【複数要素でのアニメーション同期】

どうも！LSSです！！ ちょっと何がしたいのか、LSSにも分からないシリーズ（？） little-strange.hatenablog.com の続き、です。 サンプル コード CSSにはアニメーションの同期をとる指定はないようですが… サンプル だいぶ前の写真を引っ張り出してきました！w コード <style><!--:root{--txtop:0;}@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%…

ちょっとCSSの実験・改

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という記事をあげていましたが、少しそれに手を加えてみました。 サンプル コード やった事と言えば… サンプル コード <style><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8%;}32%{top:5%;left:3%;}33%{top:5%;left:7%;}34%{top:5%;left:4%;}35%{top:5%;left:6%;}36%{top:5%;left:5%;}70%{t…

【CSS】カードをめくる その3 idを使わない版

どうも！LSSです！！ 「カードをめくる その3」、前回の「その2」は little-strange.hatenablog.com 一年前の記事でしたw その後、そのアレンジ版として、 little-strange.hatenablog.com というのも作りました。 補足説明記事→【CSS】本をめくる、のページ追加方法について この「その2」と「本をめくる」には、「id指定を利用しているため、カードを2枚以上おく、ページ数を増やすのにCSS部分をも含めて多数の場所を書き換えないといけない」という共通した問題点があります。 それでもコード利用に挑戦していただいた方がおられ、 whisky-co…

【自作小咄】全てを言うまでもないショートストーリー

どうも！LSSです！！ 先日の記事、どんなお話でも怪談に変える方法のコメントに、 カメさん(id:tn198403s) マザーグースには、この記事のような歌があります。 Three wise men of Gotham,They went to sea in a bowl,And if the bowl had been strongerMy song would have been longer. ゴッサムの三人賢者彼らはお椀に乗って海に行きましたもしもお椀が丈夫だったなら私の歌ももっと長かったのに。 （注：私の訳なので正確性に欠けます） マザーグースの中でも結構お気に入りの歌です。 とのコ…

ちょっとCSSの実験

どうも！LSSです！！ ちょっとCSSでなにか（ってなに？w）を作るにあたり、試してみたい事があったので試してみました。 縦横比3:4とoverflow:hidden;を試してみました 外側のdivについて 内側のdivについて 知っていたはずなんですがw 縦横比3:4とoverflow:hidden;を試してみました 呼ばれて飛び出てじゃじゃじゃじゃーん コード <style><!--@keyframes tbds{0%{top:-20%;left:100%;}30%{top:0%;left:0%;}70%{top:0%;left:0%;}100%{top:20%;left:-100%;}}…

どんなお話でも怪談に変える方法

どうも！LSSです！！ とっっっってもくだらない事を思いついてしまいました。 どんなお話でも怪談に変える方法 例えば。 「むかしむかし、あるところに、おじいさんとおばあさんが住んでいました。 おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。 （中略） 桃太郎は鬼ヶ島の鬼をこらしめ、財宝を村に持ち帰りました。」 というような話があったら、その後ろにこう、続けます。 「でも、おかしいんですよね。その桃が流れてきた日の一月ほどまえに、おじいさんもおばあさんも流行り病で亡くなっていたのに。」 と、そもそも物語の進行に欠かせない人物が実は…と付け足すと、安易に怪談の出来上がりです。（ほんまか…

一日だけのアーカイブ

どうも！LSSです！！ はてなブログの「月別アーカイブ」を見ながら、ふと思いつきました。 https://little-strange.hatenablog.com/archive/2020/8 URLはこんな風に、末尾に /年/月 がついていますが、これに「日」を加えると…？ 一日だけのアーカイブ スクリプトでランダムに記事選択 一日だけのアーカイブ https://little-strange.hatenablog.com/archive/2020/8/21 ↑こういうURLになり、一日だけのアーカイブになります。 一日に複数投稿してるブログなら、その日に投稿した記事の一覧になるって事です…

【駄文】HTMLの親子関係を家系図で例示するのが困難だなぁ、と思った話

どうも！LSSです！！ あるCSSの詳細な解説記事を書こうと思い、脳内で構成を考えていたのですが、その説明の過程で「HTMLの親子関係」に触れる必要があるな、と思いました。 親子関係、というのは例えば、 <p> <span>月が</span> <span >綺麗ですね</span></p> というようなHTMLコードがあったとして…<p>から</p>までが、<p>タグの影響範囲、その中に<span>から</span>で書かれた<span>タグの影響範囲が2つある、という状態ですね。 この状態を、 「<p>の中に<span>が2つある」 と言ったり、 「<p>タグは2つの子要素＝<span>を持…

【まいくらにっき】ダブルアメジストジオード！

どうも！LSSです！！ 久しぶりの【まいくらにっき】です。 （なかなかプレイする時間が取れない、というのもあります^^;） アメジストジオード 地下に生成されるアメジストジオードを見つけやすい方法 ダブルアメジストジオード！？ 今回は水抜きも、水との境目をちょっと凝ってみました 目下の悩み アメジストジオード 最近のアップデートで、「アメジストを採集できるアメジストジオード」が生成されるようになりました！ アメジストは「望遠鏡」や「遮光ガラス」、「アメジストブロック」などの材料になります。 LSSの遊んでいるワールドは、かなり以前に作ったワールドではありますが、「今までに足を踏み入れた事のない…

【CSS】突然ですが、クイズです！その2【コード改善しました】

どうも！LSSです！！ 昨日の記事、 【CSS】突然ですがクイズです！ - Little Strange Software ですが、コードの簡略化に成功しました^^ 問題の追加がやりやすく、文字数も少なくできるようになっています。 ついでに、選択肢の後に「説明文」をつける事もできるようになりました。 突然ですが、クイズです！その2 コード クイズ問題の追加の方法について はてなブログ限定の注意点 やっと自分で納得できるコードになりました^^ 突然ですが、クイズです！その2 問1 「iPhone」の名称、日本で商標登録しているのは？ Apple Google アイホン株式会社 問2 TVアニメ「…

【CSS】突然ですがクイズです！

どうも！LSSです！！ ふと、「JavaScriptを使わず、CSSだけでクイズシステムを作れないか？」と思いついてしまい、作ってみちゃいました^^ 選択肢をクリックすると〇か×がつく、というだけのものですが、とりあえず遊べますw 突然ですがクイズです！ コード コードについて説明 余談：問2の問題の内容について 突然ですがクイズです！ 問1 apple、日本語で言うと？ りんご みかん バナナ 問2 次のうち、王族は誰？ 魔法使いチャッピー 魔法使いサリー 魔女っ子メグちゃん コード <style><!--#q1a,#q1b,#q1c{display:none;}#q1a:checked~l…

【CSS】本をめくる、のページ追加方法について

どうも！LSSです！！ 先日の記事、 で既にめくる事ができる本を作っていただいており、そこから新たに読者登録していただいた方までおられます。 とってもとっても、ありがとうございます^^ www.421miyako.com non704.hatenablog.com で、その「本をめくる」CSSですが、もちっと詳しい説明が必要かと思ってまして、今回は「ページの追加方法」について書きます！ ページの追加方法 3つのidがセットになっている、とお考えください ちょっと注意が必要なところが2か所 ページの追加方法 例えば「6枚目の紙（＝表裏で2ページ分）」を追加する場合、下記コードのうち、オレンジ太字…

【CSS】GOLDEN BALL【小ネタ】

どうも！LSSです！！ 小ネタ、なんですが、CSSでちょっと思いついた簡単なネタがあって、やってみたらすんなりいけました^^ 簡単なコードですが、結構綺麗に描けていますね。 GOLDEN BALL ついでにSILVER BALL border-radius:50%;を使って円を描く 改変使用例 余談：ゴールデンボールって何？ GOLDEN BALL コード <p style="width: 130px; height: 130px; border-radius: 50%; background-color: gold; background-image: radial-gradient(cir…

【CSS】filter:drop-shadowなら、グラデーション文字にも影をつけられました^^

どうも！LSSです！！ 【CSS】グラデーション文字をアニメーションしてみました - Little Strange Software 【CSS】グラデーション文字 応用編 - Little Strange Software でサンプルとして使用していた「きんきらきんのきーん」ですが、背景がグレーの枠に入れた状態でお披露目していました。 それには理由があって、「グラデーションに白を使っているため、そのまま白背景の記事に配置するとどうにもしまらない」からでした。 かといって、text-shadowで影をつける、という方法はグラデーション文字に関しては使用できず、背景色つきの枠で出していたんですね。…

【つまづき】CSSの属性セレクタは状態変化まで感知してくれないらしい【Windows版Chromeでテスト】

どうも！LSSです！！ ちょっと思いついた事があって試してみたのですが…うまく行きませんでした^^; 変化しない例 期待した動作 でも、ひょっとしてひょっとすると？ 変化しない例 色は変化しない コード <style><!--#rng[value="1"]~#rng1{color:blue;}#rng[value="2"]~#rng1{color:yellow;}#rng[value="3"]~#rng1{color:red;}--></style><p><input id="rng" style="width: 50%;" max="3" min="1" type="range" value…

【自作小説？】黄金の筒

どうも！LSSです！！ 昨日の記事のために、即興でミニストーリーを作りましたが、その余波でもうひとつお話を思いついてしまいました。 が、これは「自作小説」といっていいのかどうか？w 黄金の筒 あとがき 黄金の筒 とあるラボに、奇妙な物体が持ち込まれた。 依頼者の亡くなった祖父の倉庫から出てきたもので、富裕だった祖父が若い頃にオークションで競り落としたものだそうだ。 その「黄金の筒」はとても古い物で、平安時代にはすでに存在していたと思われる。 古すぎてさすがにくすんではいるが、表面は金色で、かつてはまばゆく輝いていたのであろう事は想像に難くない。 調査を始めてすぐに判明した、「その物体は（金色の…

【CSS】本をめくる、という動作をCSSで表現してみました。

どうも！LSSです！！ 以前から「実現できそう、いつかやってみたい」と思っていたものが完成しました！ Webページ上に置いた本の「ページをめくる」動作を、JavaScriptを使わずにCSSで表現してみたんですね。 ぜひ、クリックして遊んでみてください^^ 本をめくるサンプル コード というわけで… 本をめくるサンプル ↓本をクリックするとページをめくる事ができます。 おおきなもも 昔々、あるところにおじいさんとおばあさんが住んでいました。 おじいさんは山へしばかりに、おばあさんは川へ洗濯に行きました。 おばあさんが川で洗濯をしていると、なんと！川上の方からとってもとっても大きな桃が どんぶら…

【短文記事】パフェっていくらぐらい？

どうも！LSSです！！ たまに、ソロパフェに挑んだりしています。 500円のパフェ pic.twitter.com/kwUPAdfYEw— LSS (@LSS0324) 2021年8月9日 突如として巻き起こるパフェ欲！w pic.twitter.com/F566pXIFG5— LSS (@LSS0324) 2021年7月27日 普通の喫茶店などでは800円ぐらいするかな？という認識ですが、500円以内で気軽に楽しめるものもありますね^^ 他にも全国どこでも味わえて安いパフェ、あるいは値段は張るけど「いっぺん食っとけ！」なパフェがありましたら、コメントで教えてくださいw ってなとこで、今回はこ…

非モテ男子の心に刺さるホラー漫画

どうも！LSSです！！ その昔…もうどんだけ昔だったかも覚えていないのですが…。 別に読みたい漫画があって、少女向けホラー漫画雑誌を手に取りました。 雑誌なもんで、お目当ての漫画以外にも色々と掲載されているのですが、そのなかにひときわ、グサァッと刺さる作品がありました。 だいぶ年月が経ってから、単行本化しているのを見つけ、買い揃えてしまいましたw 非モテ男子の心に刺さるホラー漫画「不気田くん」 彼に好かれた女性は不幸な運命をたどる 全3巻＋続編2巻＋α 非モテ男子の心に刺さるホラー漫画「不気田くん」 その作品の名は「不気田くん」。 また、その時に読んだ回はだいぶ初期の方の話だったと思います。 …

【CSSサンプル】八方に飛び散る星

どうも！LSSです！！ 【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software のコメント欄にて、 421miyako(id:m421miyako) いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。 とのコメントをいただきました^^ パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shadow効果をつけて、それをアニメーションで位置変化させれば出来るかな？と。 それって出来るんだっけ？？と思ったので、…

【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】

どうも！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークw】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!--@keyframes txtshda{0%{text-shadow:0px 0px 10px …

2021年8月6日現在のブログステータス

どうも！LSSです！！ なんとなく。 現在のブログステータスを公開してみたりします。 先日、700投稿を超えてた話をしたばかりですが、投稿日数はもうすぐ700。 読者登録してくださった方は450名様と、ちょっとキリが良い数字になっていますね^^ コメントが（自分の返信も含めてとはいえ）5938と、思えばかなりの数！ いつもありがとうございます^^ 合計アクセスがまもなく10万になろうかとしており、ブクマ数は4443！ゾロ番惜しい！www スターももうすぐ10万になりますね^^ いまだ、何がウケるか掴みきれていないところもありますが、ぼちぼち続けていきます！ ってなとこで、今回はこのへんで！ 次…

【駄文】昔のアドベンチャーゲーム

どうも！LSSです！！ ゲームのジャンルに「アドベンチャーゲーム」というのがあります。 プレイヤーの置かれている状況から、どんな行動をとるか？を選択し、ストーリーを進めていく。 コンピューターゲームの場合、ストーリーの展開する種類は有限ですが、選択の幅が広く、展開が多岐にわたると「自由度が高い」と言われたりしますね。 ファミコンから始まったTVゲームブームの中で、「ポートピア連続殺人事件」がアドベンチャーゲームの知名度をぐんと上げた、と認識しています。 「みる」とか「きく」とかいったコマンドを選択する事でストーリーを進め、事件の謎を解き解決に向かう、というゲームでしたね。 ところがこの「コマン…

もろもろジャスト！

どうも！LSSです！！ さて、何を書こうか…とふと、「ブログの概要」を見たところ…投稿記事数が「700」ちょうどになっていました！ （昨日の記事が700記事めで、この記事は701記事めって事になりますw） そして「こよみモード」で見るとちょうど一年前の記事は… この記事でした。 姪っこ、1st anniversaryです！！^^ まだ一度しかあってませんがw 最近は二本足で立ち上がったりしてるようで、その前には高速はいはいしていたので…走りまわるようになる日も近そうですね！ 次に会える日までには、赤さん向けの遊べるものを作ってみたいものですが…赤さんじゃなくなる日のほうが先にくる可能性もありま…

【覚え書き】はてなのお知らせ、について

どうも！LSSです！！ かなり以前…LSSがはてなブログを始めてまだ数か月？ぐらいの頃だったかに、 「はてなブログの通知機能、より多く見る事はできないか？」 という話題が近辺でありました。 GoogleChromeの拡張機能に、Chrome自体にはてなブログのお知らせを表示するというものがあったので↓ chrome.google.com そこを足掛かりに色々調べて…通知機能を提供しているURLをつきとめたんですね。 が、そこでも結局20件しかなかったため、おそらくは20件しか記録されない仕様なんだろう、という事で納得しましたw で。 最近になってまた、通知機能について話が出てるのを見かけたので…

【CSS】カタカタ自己主張する見出し・3Dバージョン！

どうも！LSSです！！ 【CSS】カタカタ自己主張する見出し（なのに照れ屋さん） - Little Strange Software の3Dバージョンを作ってみました。 カタカタ自己主張する見出し・3Dバージョン コード カタカタする動きを指定している部分 あとがき カタカタ自己主張する見出し・3Dバージョン こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！ そして、ボックスにマウスカーソルをのせると、一瞬、見出しから黄色のオーラがw コード <style><!--@keyframes katakata3d{0%{transform:perspective(100px…

8月になりました！

どうも！LSSです！！ 月日の経つのは早いもので、もう8月に入っちゃったんですね。 どうにも、夏は苦手です^^; 昔から、夏への対策としての先人の知恵で「気持ちだけでも涼しく」と、肝試しや怪談大会が開かれたりしていましたが…最近あまり怪談って聞かないような気も？ で、そうめっちゃ詳しいわけでもないのですが、ホラー漫画をいくらか好んで読んだりはしていました。 そんな時に（数年前）、書店で見かけた本。 怪奇まんが道 (ヤングジャンプコミックスDIGITAL) 作者:宮崎克,あだちつよし 集英社 Amazon この本自体はホラー漫画ではないのですが、ホラー漫画家の先生方のデビューから現在に至るまで、…