はてなブログで始める！JavaScript超入門！第四回 - Little Strange Software
どうも！LSSです！！ 適当に間をあけながらの「はてなブログで始める！JavaScript超入門！」、今回は第四回となります。 このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニッチな趣旨でお送りしておりますｗ なお、前回までは、 第一回 第一章 Hello World 第二章 変数を使ってみよう！ 第三章 計算ぐらいしておこうか 第二回 第四章 ifによる分岐 第五章 ifのもうひとつのしきたり 第三回 第六章 乱数で遊んでみよう！ という内容でお送りしました。 第七章 関数を作って、呼び出してみよう さて、早速ですが、この一行のコードを「関数」にしてみます。 という事で、今度はこの用意したsaikoroという関数を呼び出す部分を書き足します！ 関数にしなくても実行できてたのに、なんでわざわざ関数にするの？ 関数
【JavaScript】落ち物パズル制作 その５【コマ移動を滑らかに】 - Little Strange Software
どうも！LSSです！！ あまり大きくは変わっていませんが、落ち物パズルにちょっと手を加えました。 こんな感じ 変更点 ゲームオーバー時に、モード選択画面に戻れるようにしました コマの動きを滑らかにしました あと、消しの演出のためにコードを見直したんですが こんな感じ ↑こんな風に、「中心を、中心と異なる色で上下左右、揃った色で囲むと得点となって消滅する」落ち物パズルです^^ 変更点 ゲームオーバー時に、モード選択画面に戻れるようにしました この変更のほうが大きい…かな？ 記事編集中は「HTML編集」と「プレビュー」を切り替えるだけですが、公開記事を見ていると全部リロードしなきゃでした（お手数おかけしましたm(__)m） コマの動きを滑らかにしました わずかな変更で出来てしまいましたｗ これはJavaScriptではなくてCSS部分の修正です。 CSS追記部分 .km{ position:a
【CSS】裏表画像めくり【カードをめくる改変】 - Little Strange Software
どうも！LSSです！！ 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。 コードの簡略化、class名を１つにまで削減などを行っています。 参考記事: チェックボックスとラベルの話【HTML編】 チェックボックスとラベルの話【CSS編】 【CSS】本のページをめくるCSS【シンプルに改善版】 裏表画像めくり コード 縦横比が極端に違う画像を使うとどうなるか 裏表画像めくり 画像をクリックすると裏返ります！ コード <style><!-- /*画像が入る枠の設定*/ .imgreverse{ position:relative; display:inline-block; perspective:700px;/*この数字を小さくするとダイナミックな動きになります*/ wid
どうも！LSSです！！ 幼い頃に耳に入ったなんだか意味深な歌が、ずーっと、あるいは大人になってから、ずっと意識に残る事ってありません？ 例えば、アンパンマン主題歌。 「愛と勇気だけが友達さ」に対して「しょくぱんまんやかれーぱんまんの立場は？」とツッコミを入れつつも、「何のために生まれて、何をして生きるのか」と重い問いかけに始まっていたりとか。 自分の場合…父親が河島英五氏のファンで、ドライブの時にはカーステレオ（当時はカセットテープでした）で延々と流していたりしましたが、そのテープに入っていた曲で特に意識に引っかかるものがあります。 てんびんばかり 子どもの頃には特に印象的だったのが 大人になってからCD購入しました、が… てんびんばかり www.youtube.com 様々な疑問を、あまり脈絡なく（？）次々と並べた歌詞を歌いあげています。 何かを訴えているような、訴えていないような、もや
【JavaScript】青い空と白い雲【乱数背景】 - Little Strange Software
どうも！LSSです！！ JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード <script> bgtxt=''; for(i=0;i<50;i++){ cr=Math.floor(Math.random()*60+30); ct=Math.floor(Math.random()*50+cr); cx=Math.floor(Math.random()*400+ct*2); cy=Math.floor(Math.random()*400+ct*2); cpx=Math.floor(Math.random()*100); cpy=Math.floor(Math.random()*100); bgtxt+='radial-gradient('+cr+'px
どうも！LSSです！！ 昨日の記事にも書きましたが、近所の公園とかは人口密集地域になるので、ドローンの練習ができません^^; うちから近いところでいうと、新神戸駅から山に入ると解禁エリアで、ちょっと登ると練習できそうなポイント（展望台）や、撮影しがいのありそうな滝もあります。 んじゃ、そこ行こうかな、って考えてましたが…。 もうひとつ選択肢を見つけました！ おや？電車料金が… 谷上駅、駅前風景 ドローンを組み立てます 飛ばしてみました！ お昼は「北海道産帆立のバター醤油焼き丼」 腹ごしらえ完了！したところで、もちっと練習 帰宅後、動画のサイズを落としてTwitterに投稿！ 色々まとめ 録画について 操作について 公園について もうひとつ選択肢を見つけました！ もっかい、国土地理院のリンクはります。 http://maps.gsi.go.jp/#15/34.760442/135.17762
どうも！LSSです！！ CSSを色々いじっていると、こんなものが出来ました。 彗星の尾 コード なんだこりゃｗ 彗星の尾 こんな風に 取り囲まれた 中に文字が 入っています コード <style> @keyframes wa1a{ 0%{transform:rotate(0deg);} 100%{transform:rotate(-360deg);} } @keyframes wa2a{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .wa1{ box-sizing:border-box; width:250px;height:250px;/*外枠の大きさ 調整可*/ border-radius:50%; background-image: conic-gradient(from 300deg,#88ffaaff
どうも！LSSです！！ かなり前（約２年！？）なんですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。 「別バージョン」に苦戦している様子が見られますｗ そして最近になって、これを使って素敵なアニメーションに仕上げていただきました^^ mio20100501.hatenablog.com なるほど、「とことこ歩く」の揺れが蝶のはばたきのように見えますね！ アイデアで拙作のCSSを楽しく活用していただいているのがとても有難いです^^ と、これを見ているうちに「２枚の画像を別々に動かせば、よりリアルにはばたいてるような感じが作れるかも？」と意欲が湧き、挑戦してみました！ 蝶のはばたき コード コード中にコメントを入れてみました あとがき 蝶のはばたき コード <style> @k
どうも！LSSです！！ 昨日の記事ネタを書いていて、ふと思い出した曲があります。 「虹」をテーマにした曲…と聞いて、真っ先に連想する曲と言えば…古い洋楽で「Over the Rainbow」というのが有名ですね。 他に、街で有線で流れていたのをたまたま聞いて「かっこいい！」と惚れこんだ曲に、小林旭さんの「腕に虹だけ」があります。 が。 雨あがりの虹のような爽やかさを持った曲として自分が一番好きなのが、坂田おさむさん作詞作曲の「虹のむこうに」です！ 虹のむこうに 昔買ったCD 虹のむこうに www.youtube.com 坂田おさむさんは、NHK「おかあさんといっしょ」の７代目うたのおにいさん。 「にこにこぷん」の頃ですね。 うたのおにいさんになる前は、ロックシンガーだったという経歴の持ち主で、児童向けの楽曲の作詞作曲もこなし、多数の曲を「おかあさんといっしょ」に提供されています。 それが、
【CSS・はてなブログ】コメントボタンの文言をちょっと変えてみました【小ネタ】 - Little Strange Software
どうも！LSSです！！ 今回はCSS小ネタです。 「コメントを書く」ボタンの文言に付け足すCSS 一応、説明 はてなブログでＣＳＳを設定する方法 はてなブログの管理画面を開きます。 行番号つきの画面が入力欄です。 なお、この方法では これをやってみたきっかけ 追記！CSSで完全に別の文言にする方法 「コメントを書く」ボタンの文言に付け足すCSS デザインCSSに、この一行を書き足します。 .leave-comment-title:after{content:"なら、ここをクリックしてね^^";} すると、 となります^^ また、前後ともに文言を付け足す場合は .leave-comment-title:before{content:"この記事について、";} .leave-comment-title:after{content:"なら、ここをクリックしてね^^";} ↑こんな風に書けばOKで
【CSS】画像の下半分がマウスホバーで出現 - Little Strange Software
どうも！LSSです！！ 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください（スマホの場合はタップ） コード <style> .halfpic{ position:relative; width:280px; height:400px; transform-style: preserve-3d; perspective:500px; } .halfpic div{ position:absolute; left:0; width:100%; height:50%; background-image:url('画像ファイルのURL'); background-size:100% 200%; background-repeat:no-repeat; } .halfpic div:nth-chi
どうも！LSSです！！ 今回は、ちょっと久々？に、２０年近く前に書いた自作小説を晒してみます！！ まえがき 「嘘（長文注意）」 あとがき じゃ、もひとつの自作小説：「嘘」 あとあとがき まえがき 昔、自分がアクセスしていた草の根ネットの企画で「お題」に沿った小説を書く、というのがありました。 ある時「嘘」というお題が出た際に何作か書いており、このブログでも２作ほど紹介させていただいていましたが、今回もその時に書いたものです。 「嘘（長文注意）」 私の名前は 法螺 福蔵(ﾎﾗﾌｸｿﾞｳ)。 …こんな名前の私ですが、生まれてこのかた、一度も嘘をついた事がありません。 （終） あとがき こんなの、投稿するタイミングって言ったら今日ぐらいですよねｗｗｗ （いや、今日だからってそれでもあんまりなような…^^::::） いくらなんでも、これはないと思ったらここをクリック じゃ、もひとつの自作小説：「嘘
今週のお題「最近あったちょっといいこと」 どうも！LSSです！！ 「最近あったちょっといいこと」と言えば…あれですね。 最近あったちょっといいこと もっといいこと 最近あったちょっといいこと 「ちょっと嬉しい」 小銭入れのなかに、やけにピカピカな500円玉があるな？と思ったら「令和３年」との刻印が！— LSS (@LSS0324) 2021年11月25日 はい。先にツイートしていましたが、新しくて綺麗な500円玉をゲットしていました！ それ自体も「ちょっといいこと」ですが、そんな些細な事で喜べるのもまた「いいこと」ですねｗ もっといいこと hukunekox.hatenadiary.jp こちらは「ちょっと」どころじゃない いい事ですが、ハニーズに入団しました！ ２か月半ぐらい経ってますが、まぁ最近て事でｗ どういう事かというと、LSSが粘土で作られた埴輪となって、他にもたくさんのブロガー
【CSS/JavaScript】立体サイコロ、完成！ - Little Strange Software
どうも！LSSです！！ 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください コード コード解説（CSS部分） コード解説（JavaScript部分） 配列変数の設定 イベントリスナーの設定 あとがき サイコロをクリックまたはタップしてください ※以下、「コード」や「コード解説」が長々と続きます。 興味のない方は「あとがき」まで読み飛ばしてください^^; コード <style> .cb01{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s;
どうも！LSSです！！ えーと、この記事で200記事めになります！ ブログ日数は191日なので、１日２記事あげた日が９回ぐらいあった、という事ですね。 最近はだいぶギリギリながらも、なんとか毎日投稿を継続しています。 以前にも書いた事の繰り返しになりますが、「必ずしも毎日投稿にこだわらなくてもいい」と分かっていつつも、ここまでくると途切れさせたくなくなる不思議！ｗ そうそう、200記事を目前にして昨日の記事、 ブログで使える！BOX要素装飾ツールを作りました^^ が、はてなブックマークに載ったようで、日ごろの３倍近いアクセスを今日いただいております！ ブクマしてくださった方、読んでくださった方、誠にありがとうございます！！^^ ちょっと前に、 【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】 でも、はてなブックマークからの多量のアクセスを
超巨大迷宮 第四弾！「いつか来た道篇」！！ - Little Strange Software
どうも！LSSです！！ 最近、迷路ばかりになってきている気がしますが、いじっててつい、いい感じのものができると公開したくなる病…^^;;; ステータス ↑自の周囲の◆をクリックしてみてください。そのまま迷路で遊べます^^ 難易度について 今回の新機能！ 既に歩いた道の色が変わる 利用済みの階段と未使用の階段 マスの境目にあったグレーの線をなくしました 制作裏話 配列変数の利用例 indexOf超便利！！ 難易度について ゴールに関しては、第三弾よりは難しく、第二弾よりは簡単、そんな感じです。 後述する新機能によって遊びやすくなっているのもあるかなと思います^^ 今回の新機能！ 既に歩いた道の色が変わる これにより、未知のエリアか既に歩いたところかを判別しやすくなり、普通にゴールを目指すのも、よりディープな探索をするのもかなり遊びやすくなっているかと思います^^（自分は地下23階までいってみ
どうも！LSSです！！ これまで、仕事から帰宅後、２～３時間のうちにブログを書いてアップして…アップしてきたものの中には、 JavaScriptで作ったゲームなどもありますが、 「そんな短時間の間にゲーム作って記事にしてアップしていた事が自分で信じられない」ｗｗｗ ※必ずしも短時間で作っていたわけでもないですが。 そんなわけで、面白い面白くないは二の次として、「短時間ゲーム作成チャレンジ」してみました！！ もぐらたたき！ 遊び方 コード あとがき もぐらたたき！ ゲームスタート 遊び方 「ゲームスタート」をクリックすると始まります。 ３つある枠のどこかに「もぐら」が出現するので、それをクリック！ 「もぐら」が消えるまでにクリックできると、Scoreが１点増えます。 クリックできないうちに「もぐら」が消えるとMissが１増えます。 Missが３になったらゲームオーバー。 「ゲームオーバー」の
どうも！LSSです！！ なんとなーく知ってはいたんですが、使った事はなかった事のひとつ。 「CSSのclassをタグオプションで指定する際、半角スペース区切りで複数指定できる」 というのを試してみるとともに、それを利用して「色違いの吹き出し」を作ってみました！ まずはサンプルから コード コード解説 コピぺして使う際の手順 複数クラス指定による恩恵 まずはサンプルから 天満 玲子 あははは！何が魔女っ子よ。 マキなんてスティックがなけりゃ タダどんくさいだけの女じゃない。 立倉 麻希 返せーっ。ドロボーっ！ 天満 玲子 人聞きが悪いわね。 あなたがこれを持ってたってロクな事に使わないから 取り上げただけよ。 あなたがこれを使ったおかげで、私は…私は…。 立倉 麻希 何いってんの。 あんたなんてあぁでもしなきゃ、一生、男とヤレないじゃない。 感謝してよね。 天満 玲子 こ…殺してやる！ブッ殺
どうも！LSSです！！ little-strange.hatenablog.com の使い途…いろは歌作成以外にも何かあるかな？と考えていましたが、 tudumiyasiki.hatenablog.com まさかの、クロスワードパズルを作っていただきました！！ ゐ、ゑ、を 以外の全ての文字を、被りなく全て使って…と、普通にクロスワードパズルを作成するよりもとんでもない労力がかかってそうで凄いです！ 単語作成、という意味では、クロス部分のみ重複が許される…という事になりますが、記事中に書いておられる通り、そのクロス部分のために関連語句の文字が意味なく隣合わせになってはいけないという縛りも。 タコスカ (id:kefugahi)様、ありがとうございます^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【CSS】backgroundプロパティで描く棒グラフ - Little Strange Software
どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software 【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グラフもできますね」をやってみました。（また凡例無しバージョンです^^;） 棒グラフ コード コード解説 棒グラフの棒以外の部分について先に書きます。 ６本の棒グラフについて あとがき 棒グラフ コード <style> #bargraph{ width:300px; height:300px; background: linear-gradient(0deg,#888844 50%,transparent 50%) 20% 0%/8% 90% no-repeat ,linear-gradie
CSSでkeyframesのanimationをやってみた！ - Little Strange Software
どうも！LSSです！！ 今日は、CSSでアニメーションをやってみます！ 先日、transitionを使ったアニメーションをやりましたが、あの場合は 「なんらかのユーザー操作を受けてスタートする」 事になりますが、今回は何もしなくても最初から勝手に動いているものを作ります。 飛び出し注意！ ゆらゆら ぴょんぴょん 解説 おまけ：汎用性を無視してみる！ 飛び出し注意！ サンプル このお値段、目ン玉飛び出ますよね~ コード <style><!-- @keyframes sc3dk{ from{ transform:scale3d(1,1,1); } to{ transform:scale3d(1.5,1.5,1.5); } } .sc3d{ display:inline-block; animation:sc3dk 0.5s ease 0s infinite alternate; } --></
【ゲーム案】これは推理ゲームとして成立する？のテスト【実験段階】 - Little Strange Software
どうも！LSSです！！ １～５の数字を使ったパズルを、ふと思いつきました。 が、果たしてこれがパズルとして成立するのか？（つまり、ヒントから必ず答えが導き出せるのか）が判別できず、とりあえず実験的にJavaScriptでプロトタイプ版を作ってみました。 推理ゲーム…？ ルール説明 A～Eをクリックすると、隠された数字が明らかに ヒントのヒント（？） 実際にゲームとして作るなら… 追記 2022/4/7 推理ゲーム…？ 再シャッフル ルール説明 A・B・C・D・Eの５枚のカードがあります。 その裏には１～５のいずれかの数字がダブリなしで書かれています。 （A～Eのどれが１～５なのかはランダム） ヒントとして「A+C」「B-D」「C+E」の計算結果が提示されます。 このヒントから、Aはどの数字、Bはどの数字…と全てを推理できるでしょうか？ A～Eをクリックすると、隠された数字が明らかに [ A
どうも！LSSです！！ 【日記】ICOCA定期券２枚持ち問題、解決（？）しました！←退職して解約した体験談 に電車の定期券を解約した話を書いていましたが、その後結局、市バスの定期券も解約しました。 窓口で払い戻しについて聞いてみたのですが、計算がややこしいらしくて、日数に応じて日割り計算（１日ごとに払い戻し金額が異なる）とそうでない部分（〇日～〇日はいくら）とあるようでしたが、聞きに行った日はその日割りの方だったようでその場で解約。 で、やはり出不精になってきたところで、気分転換の散歩も兼ねて歩いてみましたｗ 三宮（神戸の繁華街）まで出ると色々あるので退屈せずに歩けるのですが、そこまで歩くのがちょっと距離があるんですね。 途中に桜のみどころがあったりもします…が、さすがにまだ早いｗ ただ、無心にてくてく歩き、少々汗ばむ程度で三宮に辿り着きました^^ 平日の昼間ですが、結構人いるんですね。
【JavaScript】自動生成迷路＋最短正解ルート表示 - Little Strange Software
どうも！LSSです！！ もう４か月も前になりますか。 【JavaScript】続・自動生成迷路 - Little Strange Software というスクリプトを書いていました。 タイトル通り、自動的に迷路を生成するスクリプトでしたが、生成して表示するだけのものでした。 で、今回はそれに「最短正解ルート」を自動的に割り出し、表示する機能をつけてみました！ 自動生成迷路 最短正解ルートの割り出しアルゴリズム コード あとがき 自動生成迷路 幅: 高さ: スライダーで幅と高さを調節するたびに、そのサイズに合った迷路が自動生成されます。 そして迷路の下にある「search」ボタンを押すと、最短正解ルートが瞬時に割り出されて表示されます！ 最短正解ルートの割り出しアルゴリズム 再帰呼び出しによる、かなりベタな方法を用いています。 スタート地点の位置情報を調査用配列変数に入れ、その位置の「上下左
どうも！LSSです！！ まもなく４連休に突入しますね！ LSSも暦通りなもんで、今日出勤したら４連休です^^ （その分、３日間がハードだったりもしますがｗ） さて、今回はちょっと久々に、２０年近く前に書いた小説を晒してみます。 「怪奇！蛙少女！！の巻」 あとがき 「怪奇！蛙少女！！の巻」 あれは小６の時、一学期の初日だった。 …三学期に一度も学校に来なかった啓子が登校してきたのだ。 「お！啓子じゃねーか！！」 「なんだよ、お前。トーコーキョヒかぁ？」 「トーミンしてたんじゃねーの？」 クラスの男子が一斉にひやかす。 啓子はボソッと答えた。 「うん、実はそうなの。」 「わー！ヘビ女だー！！楳図かずおだー！！！」 「…ううん、啓子…蛙少女よ…。」 さっきまで騒がしかった教室が一瞬で静まりかえったのを覚えている。 それは、異生物に対する恐怖などではなく、単にシラけただけだった。 その静寂を破った
【CSS】カードをめくる その３ idを使わない版 - Little Strange Software
どうも！LSSです！！ 「カードをめくる その３」、前回の「その２」は little-strange.hatenablog.com 一年前の記事でしたｗ その後、そのアレンジ版として、 little-strange.hatenablog.com というのも作りました。 補足説明記事→【CSS】本をめくる、のページ追加方法について この「その２」と「本をめくる」には、 「id指定を利用しているため、カードを２枚以上おく、ページ数を増やすのにCSS部分をも含めて多数の場所を書き換えないといけない」 という共通した問題点があります。 それでもコード利用に挑戦していただいた方がおられ、 whisky-coke.hatenablog.com ではなんと、縦めくりにされた上に、大幅なページ増でカレンダーを作られています！ のんべえ(id:whisky-coke)様、ありがとうございます^^（かなりお手
【妄想】もしも「鬼は外 福は内」をテーマにゲームを作るとしたら - Little Strange Software
今週のお題「鬼」 どうも！LSSです！！ もうすぐ節分ですね。今年の節分は2/3、恵方は北北西だとか。 北北西と聞くと思い出すのは… www.youtube.com ↑ 3:35 …それはさておき、ふと「鬼は外 福は内」をテーマに簡単なゲームを作るとしたら、というのを考えてみました。（作るとは言っていない） シューティング パズル あとがき シューティング 真っ先に連想するのはシューティングゲーム。 自機が「豆」を射出して「鬼」を撃ち、「福」を回収するというゲーム。 ブラウザゲームとして作るなら例えば画面内で自機はマウスカーソルに近づくように動き、クリックで豆弾を射出するような。 …スマホの場合どうしよう？という問題がありますが^^; パズル これもごく安直なものを思いつきました。 福 鬼 鬼 福 福 福 鬼 福 鬼 鬼 鬼 福 ↑こんな感じの盤面で、 どこか１カ所、外側と内側を入れ替える
直線グラデーションもやってみたら、よく見るCSSマーカーに行きついた話 - Little Strange Software
どうも！LSSです！！ 昨日、「【CSS】円形グラデーションってこうやるのかぁ」って記事を書きましたが、今回はもう一つのグラデ―ション、直線グラデーションをやってみます。 サンプル コード 解説 角度の指定 色の指定 角度の指定を省略した場合 色の幅（高さ）を指定した場合 色の指定に「透明」も指定できます^^ ここで、他の装飾を無くしてみます サンプル サンプル です コード <style><!-- .linegra{ position:relative; border-radius:8px; border:1px solid black; padding:1em; width:200px; background-image:linear-gradient(0deg,lightblue ,pink ); } --></style> <div class="linegra">サンプル<br
【CSS】マウスカーソルで枠線の太さが変わる演出！【outlineの有効活用！？】 - Little Strange Software
どうも！LSSです！！ 昨日の記事、 で、 border と outline の違いを試してみました。 記事にしておきながら、書いてる自分も試しながら書いていたので、ことさら 「読んでもよく分からない」内容だったかと思います^^; 一応、自分では理解したつもりで、outlineの有効活用方法を思いついたので、今回はそんな記事です！ せっかくなので「コピペで使えるCSSサンプル」記事として挙げてみます^^ マウスカーソルを乗せると枠が太くなります サンプル コード コード解説 ここから、またborderとoutlineの違いの話 あとがき マウスカーソルを乗せると枠が太くなります サンプル ↓のどれかに、マウスカーソルを乗せてみてください てすと てすと てすと てすと コード <style><!-- .o-waku{ display:inline-block; margin:10px; w
【CSS】目次を立体的にしてみるテスト - Little Strange Software
どうも！LSSです！！ はてなブログに記事を書く際に、 [:contents] と書くと、その部分が記事中に入れた「見出し」の一覧、「目次」になります。 今回は、その「目次」をCSS装飾で遊んでみました。 コード 作ってみたものの… また、１文字めの背景色が違うのも ちなみに、１文字めだけ背景色を指定するのは コード <style> ul.table-of-contents{ transform-style:preserve-3d; perspective:500px; background-color:transparent!important; box-shadow:0 0 0 0 transparent!important; border:0!important; } ul.table-of-contents li{ transform-origin:0% 50%; backgrou
どうも！LSSです！！ 【CSS】水滴【小ネタ】 【CSS】水滴・改変【小ネタ続編】 と続けた水滴ネタですが、実は元々作ろうとしていたものの派生でした。 今回、その元々作ろうとしていたものができたのでお披露目します^^ 透過ボタン コード 透過なので… ボタンの動きの是非 何も起こらないボタン 透過ボタン ボタン コード <style> .aquabtn{ position:relative; display:inline-block; width:150px;height:60px; } .aquabtn div{ position:absolute; width:100%;height:100%; top:0px;left:0px; border-radius:10px; display:flex; justify-content:center; align-items:center;
【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software
どうも！LSSです！！ 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、 little-strange.hatenablog.com で background-image になら当ててみた事がありました。 それを border-image に応用すると、gradientゆえに苦労する部分が緩和されるのでは？と思い、再び挑戦してみました。 雲型の枠 挑戦中 コード あとがき 雲型の枠 挑戦中 雲型の枠 その１。 ちょっとモクモク感が足りないかなぁ？ 元々のイメージから考える必要がありそう。 雲型の枠 その２。 こちらは半円がそのまま出ていますが、これだとちょっとモク
どうも！LSSです！！ 今回は特にテーマなく、まとまりの無い話をいくつか書いてみたりしてみますｗ 祝！はてなブログに定型文機能実装！！ ちょっとカテゴリいじりました ブラウザゲーム Twitter、あまりつぶやいていないけど面白い！ 最近、初めてアフィリエイト収益がありました 祝！はてなブログに定型文機能実装！！ ちょっと気づくのが遅れたかもですが、はてなブログに「定型文貼り付け」の機能が追加されましたね！ これ、実にありがたい機能だと思います^^ LSSの場合だと、例えば <style> #gamen{ position:relative; } </style> <div id="gamen"></div> <script> for(i=0;i<100;i++){ } gamen.innerHTML=''; </script> …なんてのを登録しておくと、スクリプトで何か作る時に取り掛か
どうも！LSSです！！ ちょうど１年半前、 little-strange.hatenablog.com こんな記事を書いていました。 何を「ミスった」かというと…「同じスマートウォッチを２台購入してた」という話なんですねｗ その後、書いていませんでしたがある日、使っていた１台が充電できなくなってしまい終了。もう１台を出して使っていました。 その２台めのほう、今日になって突然、液晶に縦縞のノイズが入るようになっちゃいまして^^;。 かろうじて視認はできますが、だいぶマズい状態ですね。 なお、自分の使い方はだいぶ荒いので、丁寧に使うともっと寿命は長いのかも知れませんが…「自分ぐらいの荒い使い方だと、平均して９か月程度の寿命」というデータという事になるのかもです。 さてどうしようかな…。 っと、実は以前購入した福袋に入っていた、未開封のスマートウォッチがまだ眠っているんでした。 そいつの目覚めの
【お題】わたしのコレクション をテーマにゲームを作ったら？【妄想】 - Little Strange Software
今週のお題「わたしのコレクション」 どうも！LSSです！！ コレクション、という事ですが、思えば昔は収集癖があったものの最近はめっきり…な自分だったりします。 それとは別に、「コレクション」という概念自体、ゲームになる要素があるな、とは昔から考えていました。 ポーカー、麻雀、ドンジャラなど、「コレクション」をゲームとしたと言えるのでは。 近年のスマホゲーでも、ガチャを回してキャラクターを集めるのも「コレクション要素」と言えそうです。ポケモンもそうかな？ そこで、今回は「簡易的なコレクションゲームを作るとしたら？」を妄想してみました。 仮の設定 ガチャ 合成でランクアップ 所持可能数制限 最終目標 …なんていうものを、 仮の設定 簡易的な、なので、種類は仮に「７種類」とします。 「７種類」それぞれに「ノーマル」「レア」「スーパーレア」のランクがあり、計２１種類。 ただし、レアが出る確率は1/
【CSS】水面の波紋アニメーション - Little Strange Software
どうも！LSSです！！ 梅雨ネタのCSSアニメをひとつ、考えてみました。 水面の波紋アニメーション コード radial-gradientが４つ並んでいますが 水面の波紋アニメーション コード <style> @keyframes suimena{ 0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;} 100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;} } .suimen{ height:100px; background-color:#8888aa; background-image: radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%), radial-gradient(f
どうも！LSSです！！ 今日、初めてコロナの「抗原検査」をやってみました。 新型コロナウイルス 抗原検査キット 抗原検査ペン型デバイス 唾液検査 自宅で検査 オミクロン株 唾液 変異株対応 8分で判定 精度99.3% PCR検査 研究用 (1) RABLISS Amazon ↑このキットを使用。 さぁて、結果は？ 検査するに至った経緯 一応説明は読んだ…のですが… 検査結果 検査するに至った経緯 先日、同居家族が感染してしまい（オミクロン・陽性・発熱症状あり）、自分も「濃厚接触者」というのになってしまったんですね^^; 自分や他の家族は無症状、だけど濃厚接触者なのでなるべく外出は控えるなどする事に。 家にトイレが２つあるので、感染した家族とそうでない家族とで分けて使い、家の中でエリア分けしたり。（そもそも同居していてもあまり接してなかったのも幸いしたかも） そんなわけで、注文していた検査キ
どうも！LSSです！！ かれこれもう長い間、ほとんどテレビを見ない生活を送っています。 子ども時代にはまぁ普通に見ていたのですが（あまり普通じゃない見方をしていた可能性も？）、テレビ番組にはCMがつきものですね。 意匠をこらし、TV局に膨大なスポンサー料を払って短時間放映されるTVCM。 視聴者としては邪魔に思う事も多いですが、とあるCMが特に強く印象に残っていました。 といっても、あまり長期的に放映されたCMでもなく、しばらく何度か遭遇しては見かけなくなるのがCMの常。 「あれはいったい、どのように作られたんだろう？作詞・作曲者は誰なんだろう？」 と気になって、昔 調べてみた事もありましたが、当時は情報が見つからず、諦めていました。 が、最近になってふと、ネットで検索してみると…あっさり見つかったんですねｗ ムシペール１２号 曲が！歌が！！ 久々に見ましたが 今、見つけられる情報はこのぐ
どうも！LSSです！！ 「結構前に買っては見たものの使ってない（開封もしていない）」ものがあります。 マイクロソフト ワイヤレス ディスプレイ アダプター P3Q-00009 : Wi-Fi不要/ Miracast/ パソコンやスマホの画面をミラーリング/ USB給電可/ 簡単接続/ Windows/ Surface ( ブラック ) マイクロソフト Amazon ↑これなんですけどね。 little-strange.hatenablog.com なんとなく、プロジェクターと相性いいかな？と買ってみたのでした。 …そろそろいい加減、試してみようかなｗ 他にも「買ったけど使ってないもの」にNAS（LAN接続のHDD）なんてのもあったりしますが、スマホとPCでのデータ共有に役立ちそうでもあります。 そちらは同居家族とのデータ共有にも使えますね。 …逆に言えば、家族に見られたくないデータは置かな
【おまけ】疑似３D、再生時間をずらすと…？ - Little Strange Software
どうも！LSSです！！ 【CSS】疑似３D【実験】 - Little Strange Software で、楕円（っぽい）動きで３D（っぽい）ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き＋サイズ変更」を指定する秒数を変えてみたらどうなるか？を試してみます。 2sと1.8s 2sと1s 2sと3s 2sと6s あとがき 2sと1.8s コード <style> @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{background-position-y:0%;background-size:20px 20px;} 100%{background-pos
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
てんびんばかり - Little Strange Software
屋外ドローンデビュー、してきました^^ - Little Strange Software
【CSS】彗星の尾【小ネタ】 - Little Strange Software
【CSS】蝶のはばたき - Little Strange Software
虹のむこうに - Little Strange Software
自作小説：「嘘（長文注意）」 - Little Strange Software
【お題】最近あったちょっといいこと - Little Strange Software
２００記事め！ - Little Strange Software
もぐらたたき！ - Little Strange Software
【CSS】色違い吹き出し - Little Strange Software
使い途 - Little Strange Software
【日記】三宮まで歩いてみた - Little Strange Software
自作小説：「怪奇！蛙少女！！の巻」 - Little Strange Software
【CSS】透過ボタン - Little Strange Software
いろいろ雑記 - Little Strange Software
スマートウォッチがそろそろ… - Little Strange Software
初めての抗原検査 - Little Strange Software
昔、好きだったTVCM - Little Strange Software
【駄文】買ったけど使ってないもの - Little Strange Software