【CSS】outlineの鼓動【小ネタ】

どうも！LSSです！！ 今回はCSS小ネタになります。 サンプル コード 使い方 キーフレームアニメーションの内容 サンプル 文章の途中に、例えばこんな感じで枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。 コード <style><!--@keyframes buwa{0%{outline-width:4px;outline-color:#0000ff80;}60%{outline-width:4px;outline-color:#0000ff80;}90%{outline-width:20px;outline-color:#ddddff40;}100%{outline-…

たんけん ぼくのまち

どうも！LSSです！！ 唐突なんですが…「たんけん ぼくのまち」というTV番組があったのをご存知でしょうか？？ NHK教育テレビ ジャンルとしては社会科？ 8年も続いた人気番組！ 最終回 8年も続いたので NHK教育テレビ 今はETVっていうんでしょうか。 「できるかな」や「さわやか3組」など、主に小学生向けの学習を補助するような番組が多々、制作されていました。 で、その中で「たんけん ぼくのまち」という番組が放送されていたんですね。 ジャンルとしては社会科？ 両親が商売している家に生まれ、成人したチョーさん。 家を継ぐ前に、他の商店で働いて、社会や商売について勉強するように！と言われ、小さい…

【CSS】カーソルの形状を指定【小ネタ】

どうも！LSSです！！ 今回は「マウスカーソルが乗った時に、マウスカーソルの形状を変更する」CSSを試してみます。 カーソルの形状サンプル一覧 例えば あとがき カーソルの形状サンプル一覧 // '+ctxt[i]+''; } gamen.innerHTML=txt; // ]]> コード <div style="cursor:カーソルの形状;">適当な文章</div> 例えば <div>タグに限らず、どんなタグでもいいんですが、例えば コード <span style="cursor:help;">本当だろうか？</span> のようなコードを書くと、 本当だろうか？ のように、マウスカーソル…

「AWS障害」と「冬の蝶」

どうも！LSSです！！ 今回は珍しく？時事ネタ記事を書いてみます。 AWS障害 Twitterに「AWS障害」がトレンド入り 近未来と言えばSF。SFと言えば… 技術の進歩、メリットとデメリット AWS障害 AWS、と言えば、Amazonが運営しているクラウドサービスで、信頼性も高く、安価から始められて、必要に応じてグレードアップも容易である、として有名なサービスです。 自分もいずれ将来的に？リアルタイムなオンラインサービスを提供する側になったとしたら、使う事になるのかな？と思いつつ、まだまったく手を出していないのですがw で、そのAWSが2020/11/25に大規模な障害が発生しちゃったそう…

【季節ハズレの怪談】倒産した会社の社長の話

どうも！LSSです！！ 今回は、久々に？お話の回。 …といっても、LSSが考えたお話じゃないので、自作小説カテゴリではなく、駄文カテゴリでお送りします。 はじめに 「倒産した会社の社長の話」 ピクニック 家の住人 再び倒産 家から出てきた住人 あとがき はじめに この話は、自分が小学生の頃に聞いた話です。 本来は「文章で読む」ものではなく、対面で、口頭で伝えるべきタイプの話なんですが…それをブログネタにしようという無謀な試みw あと、もし「この話知ってる！」って方がおられましたら、是非コメント欄にお願いします^^ 一応「怪談」なので、怖い話が苦手な方はスルー…というほど怖くはないんですけどw …

【JavaScript】経過時間を扱うgetTime()

どうも！LSSです！！ ゲームなどのプログラムを書く際、「あるタイミング」から「今現在」まで、どれだけの時間が経ったかを計算する必要が出てくるケースがあります。 「放置ゲー」と呼ばれるものや、スマホゲームによくある「スタミナ」システム、時間経過で作物が育つ農場系ゲームなどが特にそうですね。 計算するには「時間（時刻）」を数値に変換する事ができれば、あとは足し算引き算するだけで済みます。 また、最初の「あるタイミング」を記録するのも「数値」として記録するのがやりやすそうです。 という事で、今回はJavaScriptで時間を扱う方法について試してみる事にします。 1970年1月1日 午前0時からの…

【雑記】PC・スマホ・タブレットなど、それぞれが持つ接続端子の話

どうも！LSSです！！ 今日は雑記です。 昔のパソコンの端子事情 USBの登場 スマホ・タブレットにもUSBの恩恵 USBのように汎用的に使えて、しかも無線接続のBluetooth 無線接続はスマホ・タブレットと相性抜群！ でも、Bluetoothは音楽だけじゃない あとがき 昔のパソコンの端子事情 昔のパソコンには、様々な端子がありました。 シリアルポート…主にデータのやり取りに使う パラレルポート…主にプリンタの接続に使う D-sub15ピン…モニタを接続する PS/2ポート…マウス・キーボードを接続する LAN端子…LANケーブルを接続するのに使う マイク端子…マイクを接続 スピーカー端…

【SVG】SVGでアニメーションを指定してみる

どうも！LSSです！！ に続き、今度はこの絵にアニメーションで動く「雲」を追加してみます！ SVGアニメーションを追加した絵 コード 雲を楕円で描きます またも円形グラデーション ここからアニメーションの話 あとがき SVGアニメーションを追加した絵 コード <p>[] <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> <defs> <radialgradient id="rg" cx="75%" cy="20%" r="20%"> <stop offset="30%" stop-color="white"></…

【SVG】SVGもグラデーションを使って絵をかっこよくしてみる！

どうも！LSSです！！ この間、 でSVGで初めて絵を描いてみました。 …といっても「全面を水色で塗りつぶす四角」「赤い丸」「下部を黄緑で塗る四角」を配置しただけのシンプルな絵でしたね。 で。 SVGもCSSと同様に「グラデーション」を使う事ができます。 名前もよく似ています。 直線グラデーションCSS「linear-gradient」 SVG「linearGradient」 円形グラデーションCSS「radial-gradient」 SVG「radialGradient」 といった具合。 今回はその、SVGのグラデーション機能を試して「初めてのSVGお絵描き」をパワーアップさせてみます^^ …

【CSS】repeating-radial-gradientを何気に初めて使ってみる

どうも！LSSです！！ CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける！ ので、結構多用してきました。 で。 その他に、repeating-linear-gradientrepeating-radial-gradientというのもある、と知ってはいたのですが、「リピート？背景画像はデフォルトで繰り返し表示で、repeatプロパティで制御できるのに、なぜ別に用意されているんだろう？」って思っていたんですね。ずっとw これが、実は大きな誤解で、思ってい…

【ブログ】言及感謝祭！

どうも！LSSです！！ ブロガーをしばらくやってて、交流とかも増えてくると「言及」をいただく機会も増えてきます。 はてなブログでいうところの「言及」とは…端的にいうと「自分の記事・ブログ」に、他の方のはてなブログ記事からリンクしていただく事。 つまり紹介ですね^^ なお、「言及」していただけると、通知が来るほか、「アクセス解析」画面の下のほうに言及していただいた履歴が確認できます（PC版のみ） なお、スマホでも確認する方法はあります。 詳しくは以前、記事にしましたので、興味のある方は ↑をご確認ください^^ というわけで、今回は最近いただいた言及についての謝辞 カタカタ自己主張する見出し 雪の…

【UMPC】とっっっっっても気になる商品が発表されましたね【GPD WIN 3】

どうも！LSSです！！ かなーり気になるガジェットが、発売はまだですが発表されましたね！ その名はGPDWIN3 これまでのシリーズ といっても、未発売で仕様も確定ではないんですけどねw その名はGPDWIN3 www.google.co.jp ガジェット、というか、UMPC（ウルトラモバイルPC）なんですが。 daily-gadget.net tonchikiroku.com GPDシリーズの中でも「Windowsパソコンでありながら、まるでゲーム機のようにジョイパッドを本体に備えた筐体」であるGPDWINシリーズの新作ですね^^ これまでのシリーズ GPD Win2 発売日: 2018/1…

【CSS】text-shadow【彫文字】

どうも！LSSです！！ 以前にも少し、 の中で書いたような話になりますが、も少し汎用性を持たせた小ネタを思いつきました。 彫文字 コードの中で重要なのは赤文字3行 background-color: pink; color: white; text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40; あとがき 彫文字 彫りこんだような、くぼんで見える文字のサンプルです。 サンプルの文章 コード <div style="background-color: pink; font-weight: bold; font-size: 30px; …

座標計算

どうも！LSSです！！ 今日は唐突に数学的な話をしてみます。 問1。まんなかはどこ？ 問1の解き方 問1の答え 問2。10分の1の地点 問2の解き方 問2の答え あとがき 問1。まんなかはどこ？ とある小学校に、A君とB君が通っていました。 二人はとても仲良し。 ある日、A君はB君に「学校から家に帰ってから、B君ちに遊びにいくね！」と約束しました。 A君の家は学校からみて「北に500m、東に100m」のところにあります。 B君の家は学校から見て「北に100m、東に300m」のところにあります。 また、A君の家とB君の家は直線移動可能な道路があります。 さて、B君は帰宅後、少ししてからA君のスマ…

【CSS】うろこ模様 その他【小ネタ】

どうも！LSSです！！ 先日の記事、 の続きです。 サンプル コード 背景色で雰囲気が変わります！ おまけ：もこもこ模様 あとがき サンプル うろこ模様の背景 うろこ、横に並んだ感じのほうがまだ使いがっていいかな？と。 コード <div style="width: 100%; height: 150px; border: 1px solid black; padding: 0.5em; font-size: 30px; font-weight: bold; text-shadow: 0px 0px 5px #ffffff; background-color: #8888ff; backgrou…

【ドローン】須磨浦公園～塩屋間で飛ばせるかな？と行ってみた話【飛ばせなかった】

どうも！LSSです！！ 地理院地図 / GSI Maps｜国土地理院 ↑このサイトにて「人口密集地域」を確認する事ができます。 で。 神戸市の南側はだいたい不可。 ただし、新幹線より北側（＝山）や、山を越えた向こう側（北区。谷上など）はOKで、 など、これまでちょっと足を伸ばしてドローンを飛ばしてきました。 狙うは須磨浦公園～塩屋間！ いきなり電車降り間違える だっれもいない海♪…いや、そうでもない 波 とりあえず西へ 本物（？）の須磨浦公園駅 非人口密集地域 あとがき 狙うは須磨浦公園～塩屋間！ 地理院地図 / GSI Maps｜国土地理院 もうひとつ、狙っていた候補地があって、それが↑。 …

【CSS】うろこ模様の背景【小ネタ】

どうも！LSSです！！ なんとなく「作れるかな？」と思いつきでやってみました。 CSSで「うろこ」のような模様を、背景画像用に描画してみたものとなります。 需要があるかどうかは知らないw うろこ模様の背景 コード 解説 で、その3つを重ねるのに あとがき 追記！ うろこ模様の背景 うろこ模様の背景 コード <div style="width: 300px; height: 400px; border: 1px solid black; padding: 0.5em; font-size: 30px; background-image: radial-gradient(circle 25px a…

ベジェ曲線、がどういう曲線なのか、分かった気がします

概念が分かり辛いベジェ曲線。 どうやら、どういうものか理屈が分かってきた気がします。 どうも！LSSです！！ SVGを触りだしてから出てきた「ベジェ曲線」。 SVGに限らず、お絵描きソフトでもその名前を見かける事はあり、「なんかよく分からないけど綺麗な曲線を描いてくれる」程度の認識でしたが、その理屈がちょっと分かった気がするので、改めて記事ネタにしてみます！ まず参考にさせていただいたページ まず、直線の話 曲線の話。点Cを追加。 全く同じ話を、物語仕立てで書いてみます お話 あとがき まず参考にさせていただいたページ postd.cc ↑ベジェ曲線について、アニメーションまで用いて分かりやす…

【SVG】イマイチよく分からないベジェ曲線とお近づきになりたいツール

どうも！LSSです！！ 先日、 の記事で「ベジェ曲線」というモノに触れましたが、これがやはり、文章で説明しづらい・感覚的につかみづらい！ というわけで、LSS自身もちょっとベジェ曲線にお近づきになるべく、JavaScriptの力を借りてベジェれるものを作って遊んでみる事にしました！ ベジェ曲線とお近づきになりたいツール 一応、ツールのコードも載せておきます。 あとがき ベジェ曲線とお近づきになりたいツール // '; gamen.innerHTML=txt; txt='<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400…

鳥居甲斐守耀蔵

どうも！LSSです！！ 今回は、このブログの色と全く違う話になりますw 出会いは時代劇 名奉行遠山の金さん 実在の人物でした この世に悪は栄えない 興味を持って調べてみると 出会いは時代劇 子どもの頃から（特に小学校高学年頃から）TVの時代劇が好きでした。 入口は暴れん坊将軍、そこから水戸黄門・大岡越前といったシリーズものにハマったり、三匹が斬る！や隠密奥の細道も好んで観てました。（なぜか仕事人シリーズはほとんど見ていませんが） で、ここからかなりうろ覚えな話になるんですが、確か暴れん坊将軍パート2とパート3の間に一年間、「若大将天下御免」というのをやってたんですね。 主役を演じるのは橋爪淳 …

【CSSサンプル】回転しながら降る、雪の結晶

どうも！LSSです！！ 今回は、さくっと、サンプルとコードだけ。 コード こんだけのコードですが、苦戦しました^^; ￥ ￥ ￥ ￥ ￥ ￥ コード <style><!--@keyframes kaiten{0%{transform:rotate(0deg);top:-300px;}100%{transform:rotate(720deg);top:2000px;}}.waku{position: absolute;display:inline-block;transform-origin:70px 70px;animation: kaiten 30s linear 0s infinite;l…

【CSS】雪の結晶！？

どうも！LSSです！！ 昨日の記事、 に、たくさんのコメントをいただき、ありがとうございました^^ まだクリスマスまでは間があるので、参考にさせていただきたいと思います！ で、そのいただいたコメントのうち。 421miyako(id:m421miyako) クリスマス記事にツリーを使いたくて思案中です。チカチカの飾りほしいですね。雪の結晶が下りてくる感じも。進化系楽しみにしています。 とのコメントをいただきました！ チカチカは考えていましたが…雪の結晶！ 冬っぽくてクリスマスっぽくていいですね^^ でも…あの形、CSSで表現できるのかな？ まず「雪の結晶」の形状ってどんなだったか、 CSSで描…

【CSS】CSSでクリスマスツリーを描いてみる【第一弾】

どうも！LSSです！！ ハロウィンも終わり、次の大型イベントはクリスマスですね^^ ちょっと気が早いかと思いますが、物によってはもう準備に取り掛かる必要があるのかも？ little-strange.hatenablog.com ↑去年の記事ですが、たまたまルミナリエの建設してるのを見かけたのもこのぐらいの時期。 で、とりあえずブログ的には「CSSでクリスマスツリーを描いてみよう！」と思ったわけですw クリスマスツリー ごく部分的な解説 よりクリスマスツリーとして完成度を上げるには そういえば… お子様向けクリスマスプレゼント、イチオシ！ クリスマスツリー ★ コード <style><!--.w…

【SVG】続・ちょっとだけSVGを試してみる【文字入れ】

どうも！LSSです！！ 先日の記事、 が色々と興味を持っていただけたようで^^ tn198403s.hatenablog.jp カメさん(id:tn198403s)は早々にコードコピペを試していただいた上に、色を変えたり記載順を変えたりして、絵本仕立てにまでなりました！ arsinput.hatenablog.jp アーシさん(id:arshii)はググって他のSVG要素も試みておられます。先を越された！！www カメさん、アーシさん、言及ありがとうございます^^ というわけで、LSSも続きをやってみる事にしました！ まず、こないだ作った画像 文字を入れてみました 試しにCSSプロパティを足し…

いつかちゃんとした記事にしたいけど…JavaScriptはこんな事もできます、という例

どうも！LSSです！！ JavaScriptで出来る事、を色々調べていくうちに「これは凄い！」とびっくりするようなものを見つけました（結構 前に、ですがw） ちゃんと自分で咀嚼し、飲み込んでから、解説記事など書きたいと思っていますが、いったん「JavaScriptはこんな事もできる！！」というのをシェアしたいと思います^^ ダウンロードリンク これだけでは何が凄いのか分からないですよね^^; 何が凄いか、って 汎用性 ダウンロードリンク // \n\n\n\n'; blob = new Blob([txt], { "type" : "text/plain" }); if (window.nav…

【SVG】SVGファイルの作り方

どうも！LSSです！！ 先日の記事、 の、コメント欄にて toto(id:totochn) 別ファイルにして呼び出し。のやり方が気になります。是非、書いて欲しいです。 と、いただきました。 toto様、ありがとうございます！ SVGファイルをテキストファイルから作成 残念な事に、はてなフォトはSVG未対応 あとがき SVGファイルをテキストファイルから作成 まず、テキストファイルを作成します。 テキストファイルをメモ帳で開きます。 テキストファイルに、<svg>タグを「まるごと」コピーします。 SVGタグコード例 <svg xmlns="http://www.w3.org/2000/svg" …

【駄文】Windowsの、一番気に入らないところw

どうも！LSSです！！ 今回は駄文です。 かなーり前から思っていた事なんですが…元々MS-DOSを触っていて、そこから時代の流れでWindowsを使うようになった一人として「めっちゃ気に入らないところ」が一点あります。 今に始まった事ではなく… 拡張子の役割 アイコンで分かるんだから、拡張子は見せなくていいじゃん 拡張子非表示のデメリット 今に始まった事ではなく… 昔のWindowsから、現行のWindows10に至るまで、ずっとそうなんですが、「デフォルトで拡張子が非表示」なところwww まぁ…もちろん理由があってそうしている、という事も、その理由も想像がつくのですが…どうにも もやもやしま…

【SVG】ちょっとだけ、SVGを試してみる【はてなブログで出来ないかと思ったけど出来たw】

どうも！LSSです！！ このブログの「HTMLなど」カテゴリでは、HTML・CSS・JavaScriptについて色々試したり書いたりしてきました。 PHPなどサーバ側で使われる技術は別として、ブラウザ上で処理される技術としてはこの3つが三本柱だと認識しています。 ですが、それ以外にもブラウザ上で表現できる（かつテキストベースの）技術は他にも「SVG」や「WebGL」などがあります。 今回は、そのうち「SVG」にちょっとだけ手を出してみました。 初めて描いたSVG コード このコードを、はてなブログのHTML編集画面に コード解説 まず一行目。 次に2行目。 で、3行目。 ラスト、4行目。 まと…

【CSS】CSSサンプルができるまで（後編）【困難は分割して考える】

どうも！LSSです！！ 前回、前編では、 例えばこんなボタンっぽいの ↑こういう感じのCSSサンプルを作るのに、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: whi…

【CSS】CSSサンプルができるまで（前編）【困難は分割して考える】

どうも！LSSです！！ 例えばこんなボタンっぽいの 例えば、なんですが、LSSが↑こんなCSSサンプルを作ってみました。 そして、「↓これがコードです」と言って、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font…