どうも！LSSです！！ 昨日の「【JavaScript】アナログ時計を作ってみました 」、コード解説がスクリプト部分に触れていなかったので、その解説記事を書き始めていたのですが…わずか数行のコードなのにとても長くなりそう^^;;;;; で、とりあえず中断して下書きに置いておき、後で続きを書く事にしました。 どうも、文章を書くよりも、CSSやJavaScriptのコードを書くほうが楽なのでは？ という、自分の言語適性（？）に疑問を感じる今日この頃ですｗ （他に、手書きで文字を書くよりタイピングの方が楽だったりもしますね） ところで、もう９月も終わろうとしていますが、先週までなんやかやとあった祝日、１０月は全くないんですね。 祝日は休みですが、その分平日が忙しくなるタイプの仕事をしているもので、残念なような嬉しいような、こちらも妙な感覚ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしく

どうも！LSSです！！ 最近、ぼーっと考えてる事について。 gridレイアウトとレスポンシブデザイン あまり、はてなブログに関係のない話（テーマ作るなら密接に関係してきそうですが）ですが、レスポンシブ対応のWebサイトを作るなら？ みたいな事を考えています。 メディアクエリとgridレイアウトで作る事になり、それぞれ過去に記事で取り扱った事はありますが、この２つをあわせる感じですね。 【CSS】レスポンシブデザインに必須！な「メディアクエリ」…の、さわりだけ！ - Little Strange Software 【CSS】gridレイアウトをやってみた - Little Strange Software で、PCで表示した時のレイアウトはいいとして、スマホで表示した場合…そのまま縦に並べるでもいいですが、ハンバーガーメニューとかでパーツを呼び出すようにしようと考えだすと、その他様々な事が必

今週のお題「眠れないときにすること」 どうも！LSSです！！ 今回はお題記事です。 読書 BGMとしてYouTubeを流す グッズや書籍の知恵に頼る！ 本当のところ、まともな対応方法は 読書 とりあえず、枕元に置いてある本を読んだりしますね。 この場合、何度も読んだ漫画本がよいかと思われます。 …未読の本だと面白くて先が気になり、眠るどころじゃなくなっちゃう可能性がありますからｗ BGMとしてYouTubeを流す YouTubeには様々な動画がありますが、中には www.youtube.com といった、眠りに誘うためのBGMとして作られたものも多数ありますね。 その手のものも試してみて、「それでも眠れない」なんて事は今のところまだないのですが…自分の場合、それ以上に効果的なのが、 www.youtube.com このMVだったりしますｗ（短いのでループ再生で） ※この曲は睡眠導入用に作ら

コード どうも！LSSです！！ ブログの下書きには、「書き始めたけどうまくまとめられなかった記事」や「作ってみたけど説明が困難な記事」、「書いたけど意味が分からないもの」などが残りがちですよね？ｗ そんな下書きの中から、ひとつ拾いあげてきました。 …謎の物体（？）がうにょうにょと うごめいていますｗ そしてそのアニメーションを書いたCSSコードも同時に出てきていますが、コードのほとんどが「一見、でたらめに見える数字と%がいっぱい」入っていますね。 実はこれ、「一見、でたらめ」どころか「でたらめそのもの」。 ページを開くごとに、JavaScriptで乱数を生成してコードを作成しています。 （このコード自体は生成された時のものなので、コピペすると生成された時に決まった動きで動く事になります。） で行ったような設定を、ランダムに色々割り当てたらどうなるか？ っていう実験ですね。 とりあえず、こう

どうも！LSSです！！ ふと思いついた、CSS小ネタです。 アニメーション飾り罫 コード 使い方と仕組み アニメーション飾り罫 コード <style> @keyframes dotkeia{ 0%,80%{background-position:20px 0px,60px 0px;} 85%{background-position:20px 0px,20px -10px;} 90%{background-position:20px 0px,-20px 0px;} 95%{background-position:60px 10px,-20px 0px;} 100%{background-position:100px 0px,-20px 0px;} } .dotkei{ width:100%; height:40px; background-image:radial-gradient(circ

どうも！LSSです！！ もう４か月も前になりますか。 【JavaScript】続・自動生成迷路 - Little Strange Software というスクリプトを書いていました。 タイトル通り、自動的に迷路を生成するスクリプトでしたが、生成して表示するだけのものでした。 で、今回はそれに「最短正解ルート」を自動的に割り出し、表示する機能をつけてみました！ 自動生成迷路 最短正解ルートの割り出しアルゴリズム コード あとがき 自動生成迷路 幅: 高さ: スライダーで幅と高さを調節するたびに、そのサイズに合った迷路が自動生成されます。 そして迷路の下にある「search」ボタンを押すと、最短正解ルートが瞬時に割り出されて表示されます！ 最短正解ルートの割り出しアルゴリズム 再帰呼び出しによる、かなりベタな方法を用いています。 スタート地点の位置情報を調査用配列変数に入れ、その位置の「上下左

どうも！LSSです！！ この記事は、JavaScript初学者向けの記事となります。 先日の記事、 は、CSSを用いた枠線（囲み枠）のコードを生成するツールでした。 そのツール自体のコードはJavaScriptで書いていましたが、今回はそのコードの公開です。 ついでに、その中で冗長的（無駄）と思われた部分があったのが気になっていたのですが、簡略化に成功したので覚え書き。 なお、スクリプト自体は で解説した方法と同じ作り方で作成しています。 しましま枠線メーカー コード 冗長と思った部分 １行で出来ました^^ あとがき しましま枠線メーカー コード <p>サンプル</p> <div id="gamen"></div> <p> </p> <p><input id="col1" type="color" value="#000000" /> <input id="col2" type="colo

どうも！LSSです！！ 久々に「コード生成ツール」を作ってみました。 この記事の画面上で色を選んだりスライダーで角度やサイズを調整する事で、しましまの囲み枠のコードを生成する事ができます！ しましま枠線メーカー 使い方 あとがき しましま枠線メーカー サンプル 角度: 太さ: シマ: コード 使い方 色を選択できるカラーピッカーが２つと、スライダーが３つあります。 これらを触って変更する事で、その上にある縞々枠線の「サンプル」と、その下にある「コード」がリアルタイムに変化します。 調節した結果、あなたが「自分のWebページ上やブログ記事で使いたい！」と思う しましま枠線ができたら、その時の「コード」の内容をコピー＆ペーストしてお使いいただけます。 あとがき border-imageを利用した囲み枠は以前にも試みて記事にしていましたが、今回は２色縞模様限定でのコード生成ツールに仕立ててみまし

どうも！LSSです！！ 先日の記事で、 を試した際に、double（二重線）で指定した枠線部分も奇妙に歪んだりしていました。 枠線の種類は solid double dotted dashed inset outset ridge groove と多数ありますが、この変わったborder-radiusと組み合わせた場合にそれぞれどんな風に表示されるのか？を試してみる記事となります。 あまり奇妙にならないものが囲み枠として使いやすいかと思いますが、果たして…？ solidの場合 doubleの場合 dottedの場合 dashedの場合 insetの場合 outsetの場合 ridgeの場合 grooveの場合 あとがき solidの場合 変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。 border-styleの種類は solid dou

どうも！LSSです！！ このブログを開設したのが、2019/9/14。 早いもので、丸二年が経過しました^^ こよみモード ブログの概要 この1年で得たWeb周りの知識で最大のもの んで、３年目に突入です！ こよみモード はてなブログの「こよみモード」はどうなるのかな？と思っていましたが、こんな風に去年のも一昨年のも出るんですね！ 二年前の、一番最初の記事は、 律儀に（？）「初めまして」から始まっています。 去年の記事は、 花火をあげてましたねｗ 別にこれは祝砲というわけではなく、その前日に １年目のラストとして記念記事を書いていたのでした。 あ、ブログの概要とか挙げてますね。 あれから一年、どうなったかというと… ブログの概要 こうなりました！ ん、なんだか「ブログの概要」ページの仕様がいつの間にか変わってる？ それより、目立って変わったのは、ブログアイコンでしょうかｗ ブログアイコンを

どうも！LSSです！！ 今日は、ちょっと目的があって三宮をぶらついてきました。 まずは腹ごしらえ！ 続いて向かうは さんセンタープラザ 調査開始！ 初iPhone！ 触ってみた感想 ブログの動作確認 まずは腹ごしらえ！ まずは昼食です。 ランチメニュー「大盛焼肉定食」！ と、写真の撮り方が下手で伝わらないかもですが、結構ボリュームあります。 なお、写真右に見切れていますがポテサラがついていますｗ ランチタイム以外は食べ放題がメインのお店ですが、ランチ時のこれもボリュームは十分あって「これでいいや」って気になりますね^^ ライスとわかめスープはおかわり自由、これで1060円（税込1166円） 焼肉六甲 生田新道店〒650-0012 兵庫県神戸市中央区北長狭通1-2-13 ニューリッチビル2F2,500円（平均）078-391-1320地図や店舗情報を見るPowered by ぐるなびr.gn

どうも！LSSです！！ かれこれもう長い間、ほとんどテレビを見ない生活を送っています。 子ども時代にはまぁ普通に見ていたのですが（あまり普通じゃない見方をしていた可能性も？）、テレビ番組にはCMがつきものですね。 意匠をこらし、TV局に膨大なスポンサー料を払って短時間放映されるTVCM。 視聴者としては邪魔に思う事も多いですが、とあるCMが特に強く印象に残っていました。 といっても、あまり長期的に放映されたCMでもなく、しばらく何度か遭遇しては見かけなくなるのがCMの常。 「あれはいったい、どのように作られたんだろう？作詞・作曲者は誰なんだろう？」 と気になって、昔 調べてみた事もありましたが、当時は情報が見つからず、諦めていました。 が、最近になってふと、ネットで検索してみると…あっさり見つかったんですねｗ ムシペール１２号 曲が！歌が！！ 久々に見ましたが 今、見つけられる情報はこのぐ

どうも！LSSです！！ ふと思いついて、これまでに試した２つの小ネタを合体させてみました。 小ネタ＋小ネタ＝あわせても小ネタ、って感じですがｗ こんな枠、どうでしょう？ コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう？ と、単なる枠に対する装飾なので、使い方は自由自在！ スマホで見るとまたちょっと形の印象が違うかもです。 コード <p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; border-radius: 30%/10%; width: 100%; height: 400px; padding: 28px;">中に入れる文章</p> 元ネタ 上記２つの記事で使ったネタを併用して

どうも！LSSです！！ 今までさんざんborder-radiusを使っていましたが、今さらになって新たに見つけた事がありました！！ ほんと今更ｗｗｗ サンプル コード その他サンプル サンプル かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！ そうすると、こんな変わった形状の枠も作れます^^ コード <p style="background-color: #eedddd; border-radius: 35%/20px; padding: 25px;"> かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！<br /><br /> そうすると、こんな変わった形状の枠も作れます^^ </p> border-radiusの指定の中に「/」（スラッシュ）を入れると、「角丸の横半径/角丸の縦半径」を別々に指定で

今週のお題「爆発」 どうも！LSSです！！ はてなブログのお題「爆発」…にかこつけたCSS小ネタです^^ 爆発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ 爆発しますよ コード <style> @keyframes bkhta{ 0%,70%{text-shadow:none;} 71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;} 85%{text-shadow:0px 0px 30px orange,0px 0px 30px orange,0px 0px 60px red;} } .bkht{ font-size:200%; animation:bkhta 5s linear 0s infinite; } </style> <p>

どうも！LSSです！！ 以前、Windows11が発表された時に、 little-strange.hatenablog.com って記事を書いていましたが、ついにリリース日決定のニュースが出ました！ pc.watch.impress.co.jp 10月5日リリース、無償アップグレードも同日開始！ あと、すっかり忘れていたんですがｗ その流れで、AmazonAppStoreについて調べてみました それじゃ、どうやって開発者はAmazonのほうに公開登録するんだろう？ 10月5日リリース、無償アップグレードも同日開始！ 「2021年後半」とされていたリリース日、気づけば後半に入ってましたがｗ、１０月５日と決定したそうです！ あと一ケ月ちょいですね^^ そして、おそらく多くのユーザーに絶望を与えたであろう「互換性のチェックツール」は… 新しい Windows 11 OS へのアップグレード |

どうも！LSSです！！ ８月ももうすぐ終わりですね。 今日は前髪がだいぶ伸びてきていたので、やっと散髪にいってきました！ 出かける時は、たいてい市バスを利用するんですが、 三宮に出る際によく使う市バスが２種類あります。 ９０系統と９２系統っていうんですが、９０系統は９２系統に比べて本数が極端に少なく、三宮までは同じようにたどり着くのであまり違いを気にしていませんでした。 で、今日乗ったのがたまたまレアな９０系統の方。 終点は「中突堤中央ターミナル」となっています。 中突堤ってなんだ？ｗ 行きたい散髪屋さんが三宮より更に先にあるところだったので、終点まで乗って行ってみました。 普段、終点まで乗らないバスに乗ったらこんなところまできたw pic.twitter.com/P8mq68yy5v— LSS (@LSS0324) 2021年8月29日 降りたところのすぐ近くで撮った写真が↑。 要するに

どうも！LSSです！！ ちょっと何がしたいのか、LSSにも分からないシリーズ（？） little-strange.hatenablog.com の続き、です。 2021/8/29追記 Windows＋GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで文字のほうが正常に動作しないようです^^; サンプル コード CSSにはアニメーションの同期をとる指定はないようですが… サンプル だいぶ前の写真を 引っ張り出してきました！ｗ コード <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%{top:5

どうも！LSSです！！ 「カードをめくる　その３」、前回の「その２」は little-strange.hatenablog.com 一年前の記事でしたｗ その後、そのアレンジ版として、 little-strange.hatenablog.com というのも作りました。 補足説明記事→【CSS】本をめくる、のページ追加方法について この「その２」と「本をめくる」には、 「id指定を利用しているため、カードを２枚以上おく、ページ数を増やすのにCSS部分をも含めて多数の場所を書き換えないといけない」 という共通した問題点があります。 それでもコード利用に挑戦していただいた方がおられ、 whisky-coke.hatenablog.com ではなんと、縦めくりにされた上に、大幅なページ増でカレンダーを作られています！ のんべえ(id:whisky-coke)様、ありがとうございます^^（かなりお手

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