【JavaScript】アナログ時計、現在時刻を取得するもう一つの方法＋より正確な時計を目指して（？）

どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました - Little Strange Software で使用していたコードのうち、スクリプト部分についての解説を、 little-strange.hatenablog.com に書きました。 そのスクリプトでは、現在時刻の取得を「Date.now()」によって「国際標準時のミリ秒」で行っていたため、時差の修正やミリ秒から時分秒への変換を行っていました。 …で、JavaScriptで現在時刻を取得する方法は複数あり、実はそのまま「現地時間での時・分・秒」を取り出す方法もあるんですね。 ミリ秒から計算する方法を採択しました…

【JavaScript】アナログ時計、JavaScript部分のコード解説

どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました で、即興でアナログ時計を作ってみました。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード（script部分のみ） コード解説（JavaScript部分） setInterval 時刻を秒で取得 Date.now() getTimezoneOffset() 時針の角度計算 分針、秒針も同様に。 って、かなり長くなってしまいましたが… あとがき コード（script部分のみ） <script>tokeitm=setInterval(…

【CSS小ネタ】カチコチ動くアニメーション

どうも！LSSです！！ だいぶ以前から、CSSのkeyframesを使ったアニメーションを色々試していましたが、最近になって「え、こんなの出来るんだ！？」と知ったものがありますw カチコチ動くアニメーション コード animation-timing-functionの「steps」 ちなみに… カチコチ動くアニメーション @keyframes anmstpa{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .anmstp{ display:inline-block; transform-origin:100% 50%…

【駄文】書きかけた文章を下書きにしまいこみ

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

【JavaScript】アナログ時計を作ってみました

どうも！LSSです！！ ちょっときっかけがあり、急遽、JavaScript（とCSS）で「アナログ時計」を作る事に挑戦してみました！ アナログ時計 コード きっかけ コード解説 アナログ時計 #tokei{ position:relative; width:300px; height:300px; background-color:#eeeedd; } #tokeih,#tokeim,#tokeis{position:absolute;transform-origin:10px 50%;left:140px;} #tokeih{background-color:black;width:70px…

最近の考え事

どうも！LSSです！！ 最近、ぼーっと考えてる事について。 gridレイアウトとレスポンシブデザイン あまり、はてなブログに関係のない話（テーマ作るなら密接に関係してきそうですが）ですが、レスポンシブ対応のWebサイトを作るなら？みたいな事を考えています。 メディアクエリとgridレイアウトで作る事になり、それぞれ過去に記事で取り扱った事はありますが、この2つをあわせる感じですね。 【CSS】レスポンシブデザインに必須！な「メディアクエリ」…の、さわりだけ！ - Little Strange Software 【CSS】gridレイアウトをやってみた - Little Strange Soft…

【お題】眠れないときにすること

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

下書きに眠る謎のオブジェ

…謎の物体（？）がうにょうにょと うごめいていますw そしてそのアニメーションを書いたCSSコードも同時に出てきていますが、コードのほとんどが「一見、でたらめに見える数字と%がいっぱい」入っていますね。 実はこれ、「一見、でたらめ」どころか「でたらめそのもの」。 ページを開くごとに、JavaScriptで乱数を生成してコードを作成しています。

【CSS小ネタ】アニメーション飾り罫

どうも！LSSです！！ ふと思いついた、CSS小ネタです。 アニメーション飾り罫 コード 使い方と仕組み アニメーション飾り罫 @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 0…

アリナミンエスカップオロナインパンビタン♪

どうも！LSSです！！ マスクが手放せない日々が続いていますね。 うっかり風邪も引けない昨今、ワクチン打ったら副反応で発熱やだるさに見舞われますが、ふと、昔聞いたこの曲を思い出しました。 クスリルンバ 効能（※個人の感想ですw） 今日ググってみて驚いたのですが その1 驚いた事 その2 クスリルンバ www.youtube.com アリナミン エスカップ オロナイン パンビタン♪ で始まる、コーヒールンバの替え歌です。 自分は、20代の時にCDショップで出会った、 珍盤・名盤コレクション 河内のオッサンの唄 アーティスト:オムニバス,牧伸二,平野レミ,小沢昭一,野坂昭如,港のヨーコを守る会一同…

【JavaScript】自動生成迷路＋最短正解ルート表示

どうも！LSSです！！ もう4か月も前になりますか。 【JavaScript】続・自動生成迷路 - Little Strange Software というスクリプトを書いていました。 タイトル通り、自動的に迷路を生成するスクリプトでしたが、生成して表示するだけのものでした。 で、今回はそれに「最短正解ルート」を自動的に割り出し、表示する機能をつけてみました！ 自動生成迷路 最短正解ルートの割り出しアルゴリズム コード あとがき 自動生成迷路 幅: 高さ: // ax=xmax ay=ymax?0:parseInt(mztxt.substr(ax+ay*xmax,1)); mzw=(ax,…

【JavaScript】しましま枠線メーカーのコード、と、その簡略化【使い捨て配列】

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

【日記】三連休初日

どうも！LSSです！！ 三連休初日でしたが、皆様いかがお過ごされましたでしょうか？←日本語大丈夫か？w 自分は、というと、職場関連でなんやかやハードな週だった事もあってか、がっつりAM11時まで寝てましたw それでもまだ疲れが残ってるようで、日中も休み休みブログ巡りで一日終わった感じですね。 まだあと2日ある！と、思いながら、取り急ぎ10分ほどでこの記事を書いていますw JavaScriptでやりたい事が2，3、HTMLでやりたい事が1つありますが…記事ネタにはならないかも？ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

【CSS】しましま枠線メーカー【コード生成ツール】

どうも！LSSです！！ 久々に「コード生成ツール」を作ってみました。 この記事の画面上で色を選んだりスライダーで角度やサイズを調整する事で、しましまの囲み枠のコードを生成する事ができます！ しましま枠線メーカー 使い方 あとがき しましま枠線メーカー サンプル 角度: 太さ: シマ: コード col1.addEventListener('input',chgpp,false); col2.addEventListener('input',chgpp,false); rg1.addEventListener('input',chgpp,false); rg2.addEventListener('…

iPhone7上でHTMLを試し書きできるアプリを入れてみました

どうも！LSSです！！ この間、中古のiPhone7を購入しました。 購入目的としては、iPhoneのブラウザに独特のクセがあるところから、このブログで書いてきたコードが一部見え方が違ったり動作に支障があったりするので動作確認用に…と。 さて、買ったはいいものの、コードをテストするとなると、 「下書き記事をPCで書いて保存、iPhoneで確認してから、またPCでちょっと修正してiPhoneで…（以下ループ）」 するより、ちょっとした修正ならiPhone上で行ってそのまま確認できたほうが圧倒的に手間が減りますよね。 となると、iPhone上で動作するHTMLエディタ（容易にプレビューも行えるもの…

【CSS】変形border-radiusに各種border-styleを組み合わせてみました【実験】

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

【ブログ】そんなこんなで2年たちました。

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

造園系ファイナルパワー なお吉

どうも！LSSです！！ 自分がブログを始めてから、もうすぐ二年が経とうとしています。 その間、色々なブロガーさんと知り合い、たくさんの記事を読ませていただいています。 そんな中、割と初期の頃に知り合った方で「なお吉」さんという方がおられ、DIYで机や椅子やベッドを自作したり、かと思えば詩を書いたりしているブロガーさんなんですが、この男、どこか「底知れない」ものを持ってたりします。 そんな彼が、また凄い事をやってくれました！ n157.hatenablog.com FP3級 合格！ ファイナンシャルプランナー、お金の仕組みの知識を問う試験ですね。 その方面の試験のなかでは合格率は高い方…だそうで…

【日記】とうとう買っちゃいました

どうも！LSSです！！ 今日は、ちょっと目的があって三宮をぶらついてきました。 まずは腹ごしらえ！ 続いて向かうは さんセンタープラザ 調査開始！ 初iPhone！ 触ってみた感想 ブログの動作確認 まずは腹ごしらえ！ まずは昼食です。 ランチメニュー「大盛焼肉定食」！と、写真の撮り方が下手で伝わらないかもですが、結構ボリュームあります。なお、写真右に見切れていますがポテサラがついていますw ランチタイム以外は食べ放題がメインのお店ですが、ランチ時のこれもボリュームは十分あって「これでいいや」って気になりますね^^ ライスとわかめスープはおかわり自由、これで1060円（税込1166円） 焼肉六…

【つまづき】Safariがbackface-visibilityに正式対応してないんですね^^;

どうも！LSSです！！ CSS等の動作テスト用iPhoneが欲しいなーと思いながら、未だに入手していません。 iPhoneの標準ブラウザ「Safari」がいくつかのCSSの実装が間に合っていなかったり、解釈が違ったりするから、なんですが、また新たにこのブログで使っていたネタの不具合が見つかりました。 最近よくLSSのブログのネタを使っていただいている、noriko(id:non704)さんのところで分かったのですが、 non704.hatenablog.com こちらのコメントに、LSSのところにもよくコメントを下さっている421miyako(id:m421miyako)さんのコメントで、裏側…

【CSS】裏表画像めくり【カードをめくる改変】

どうも！LSSです！！ 【CSS】カードをめくる その3 idを使わない版 - Little Strange Software の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。 コードの簡略化、class名を1つにまで削減などを行っています。 参考記事:チェックボックスとラベルの話【HTML編】チェックボックスとラベルの話【CSS編】【CSS】本のページをめくるCSS【シンプルに改善版】 裏表画像めくり コード 縦横比が極端に違う画像を使うとどうなるか 裏表画像めくり 画像をクリックすると裏返ります！ コード <style><!--/*画像が入る枠の設定*/.imgrevers…

昔、好きだったTVCM

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

【CSS】変なborder-radiusとbox-shadowを合わせてみました【小ネタ】

どうも！LSSです！！ ふと思いついて、これまでに試した2つの小ネタを合体させてみました。 小ネタ＋小ネタ＝あわせても小ネタ、って感じですがw こんな枠、どうでしょう？ コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう？ と、単なる枠に対する装飾なので、使い方は自由自在！スマホで見るとまたちょっと形の印象が違うかもです。 コード <p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; bor…

チェックボックスとラベルの話【CSS編】

どうも！LSSです！！ チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが2つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkbx2"…

【はてなブログ】キーワードリンクの無効化と、URLリンクの無効化と、無効化の無効化（！？）【小ネタ】

どうも！LSSです！！ はてなブログには、キーワードリンクの機能があります。 普通に記事中に、どこかの誰かが登録したキーワードが入っていると、自動的にその意味を解説するページへのリンクになる機能ですね。 実際、この「はてなブログには、キーワードリンクの機能があります。」という一文にも「はてなブログ」と「キーワードリンク」の部分に自動的にリンクがかかっています。 ブログを読んでいる時に、ちょっと単語の意味が分からない時など、即座に見に行ける便利な機能ではありますが、時として邪魔になるケースもありますね。 そんな時に、「そこだけ無効化」する方法があります。 ※ブログ設定でキーワードリンク無効化を設…

【CSS】border-radius（角丸）ってこんな事もできたんだ！【今更】

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

チェックボックスとラベルの話【HTML編】

どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その3 idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、「勉強し…

【お題】にかこつけたCSS小ネタ「爆発」

今週のお題「爆発」 どうも！LSSです！！ はてなブログのお題「爆発」…にかこつけたCSS小ネタです^^ 爆発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ @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…

【CSS】渦巻き・改【いただいたアイデア】

どうも！LSSです！！ 先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。 コード <style><!--@keyframes bfrnda1{0%,20%{transform:rotate(0deg) translateX(0px) scale(1);}60%{transform:rotate(360deg) translateX(70px) scale(4)…

【時事】Windows11リリース日決定！

どうも！LSSです！！ 以前、Windows11が発表された時に、 little-strange.hatenablog.com って記事を書いていましたが、ついにリリース日決定のニュースが出ました！ pc.watch.impress.co.jp 10月5日リリース、無償アップグレードも同日開始！ あと、すっかり忘れていたんですがw その流れで、AmazonAppStoreについて調べてみました それじゃ、どうやって開発者はAmazonのほうに公開登録するんだろう？ 10月5日リリース、無償アップグレードも同日開始！ 「2021年後半」とされていたリリース日、気づけば後半に入ってましたがw、10…