かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです!
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
---|
どうも!LSSです!! 朗報、と言うべきかどうなんだか?iOSのブラウザにあった、ある問題が解決していたようです。 3つのグラデーション コード 以前には iOS15.4で修正されたらしい 3つのグラデーション ↑「赤から黄色」に変化するグラデーションを3つ、置いてみました。 この3つが違うグラデーションに見える方はおられますか? ちなみに、LSSの環境では、「Windows+GoogleChrome」「Androidのはてなアプリ」「iPhoneのはてなアプリ」で「3つとも同じように」見えます。 コード <div style="background-color: #ffff00; backg…
どうも!LSSです!! 今日、ちょっとお出かけしてきましたが…夕方、とんでもなく風が強い! 台風の時でもここまで風強くないんじゃないか?ってほどの勢い。 …念のため、今、tenki.jpも見てみましたが、 うーん、あの風はなんだったんでしょうね?? ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^
どうも!LSSです!! 本日(4/28)が三回目の出社でした。(週3程度) まさかの家族がオミクロン陽性で出社開始がちょっと遅れたりもしましたが、なんとか始まったって感じですね^^ で、長い休み(3月頭から有給消化開始、4/5付退職なので実際一ケ月半ほど)の後だったので、朝起きられるかなど心配でしたが、なんとか…というところで、「すっかり存在を忘れていた!」のですが… 明日からGW! 離職票と健康保険の喪失証明書 離職票がまだだった件 そして今日、 GWだってば! 明日からGW! なんですね! 前職の時は「連休前は特に仕事がハードになる」タイプの仕事だったので、GWなんてその最たるもの。 忘れ…
「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^
【CSS】linear-gradientで描く「斜め市松模様」
どうも!LSSです!! 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。 が、今回ふと、「 linear-gradient でも、斜め市…
どうも!LSSです!! 今、楽しみにしている事のひとつに、5/13に劇場公開される「シン・ウルトラマン」があります! 予告映像も公開され、その中でも気になる場面が色々ありますね。 シン・ウルトラマン予告 初代シリーズに出てきた怪獣・宇宙人も! 「ウルトラゾーン」…? シン・ウルトラマン予告 www.youtube.com 初代シリーズに出てきた怪獣・宇宙人も! 予告の中で複数登場していて、初代ファンとしては期待しちゃいます!(今回の映画では禍威獣・外星人という表現ですが) 中でも気になる外星人は…そのまんまの姿で出てくる「ザラブ星人」と、地球人のような見た目ですが差し出された名刺の名前「メフィ…
どうも!LSSです!! 日曜の終わりですね。 初出社を火曜日に控えた自分、あまり曜日関係ない生活が続いていますがw 先日あげた記事の、 little-strange.hatenablog.com 「3枚限定」なのが弱かったネタですが、このやたら長いkeyframes定義、どうやらもうちょっと短くは出来るようです。(余計に分かりにくくなりそうでもあるのが難) 枚数を増やした設定をコード生成ツール化しようかなと思っていましたが…時間が足りなさそうでした^^; とりあえず、そのうち作る事にします。 ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^
どうも!LSSです!! 今日、Youtubeを見ていると、東映特撮チャンネルが懐かしい番組を公開していました。(元々、懐かしいものをたくさん話数限定で公開されていますが) じゃあまん探偵団 魔隣組 印象に残るエピソード と言ってるわりに じゃあまん探偵団 魔隣組 www.youtube.com 印象に残るエピソード 「印象に残る」と言いつつ、本放送時に一度見たきりなのでかなりうろ覚えなのですが…。 「食通」を自称する成金親子、希少価値の高い食べ物に目が無い。 そんな親子の前で、普通の町の寿司屋の寿司を見せるジゴマ。 成金親子は最初は小馬鹿にするも、ジゴマは「この町の他の寿司屋を全て買収して今日…
今週のお題「好きな公園」 どうも!LSSです!! 今週の はてなブログのお題、「好きな公園」だそうで。 神戸在住のLSSですが、「好きな公園」を挙げると…はるか遠い地「横浜」の「臨港パーク」になります。 臨港パーク 近くにはこんなのも 五星戦隊ダイレンジャー 臨港パーク …といっても、最後に訪れたのもはるか昔の話。 スマホデータを代々引き継いでいるので、割と古い写真も残っていたりしますが、こちら「2013年8月13日」の写真ですw 神戸と横浜にはよく似たところがあって…臨港パーク、神戸でいうとメリケンパークでしょうか。 何故か、臨港パークのほうが好きです。 近くにはこんなのも 「ぷかりさん橋」…
どうも!LSSです!! あまり出番がないので ご存知ない方もおられるかも知れませんが、このブログにはマスコットキャラクター「まるいの」という謎の生物がいます。 little-strange.hatenablog.com 今回、無駄に労力を使って、CSSのbackgroundプロパティを使って「まるいの」を描いてみました。 ついでに、ちょっとだけ動きます(動かす方は全然簡単でした)。 まるいの 一応、コード まるいの @keyframes maruinoa{ 0%,70%{ background-position: 18% 40%,40% 42%,16% 35%,40% 34%, 30% 55%…
どうも!LSSです!! この間、スマホを買い替えました。 little-strange.hatenablog.com au Xperia XZ2 Premium SOV38 Chrome Black ソニー(SONY) Amazon ↑この機種ですね。 で、それに合わせて、2つほど購入したものがあります。 純正カバー ワイヤレス充電器 純正カバー SONY Xperia XZ2 Premium ソニー エクスペリア プレミアム 純正ケース 手帳型 カバー スマホケース フルウィンドウ付き スタイルカバータッチ ブラック 黒 Black Style Cover Touch SCTH30JP/B …
どうも!LSSです!! だいぶ長く生きてきましたが(そのうち半世紀になりそう)、今まで「やった事がない」事がたくさんあります。 身近に感じるIT技術の進歩によるサービスも、あまり手を出さずにきましたが、ちょっと守備的すぎた?と感じるところもあり、簡単な事はちょこちょこやっていきたい気持ちもある今日この頃です。 とりあえず直近でやった事を3つ、意味もなく書き記してみます。 PCR検査 ネットプリント LINE証券 PCR検査 早いものでもう、同居家族も療養解除日を迎えました。 自分がフリーランスとして業務委託を始める会社からは「4/20以降にPCR検査か抗原検査を受けて、陰性であれば一週間後に初…
どうも!LSSです!! 今回はお題記事です。 「もしも英語が使えたら」 日本発の面白い娯楽も多々あって見切れないほどですが、海外作品にもまた面白いものがたくさんあります。 もちろん、吹き替えや字幕で日本でも楽しめるようにされているものもありますが、中には未だそうなっていないものもあって… 日本語字幕のない洋画DVD SMOSH #もしも英語が使えたら by クリムゾンインタラクティブ・ジャパン 日本語字幕のない洋画DVD も観れちゃいますね^^ 「そんなので見たいのがあるの?」と言われると…まずこの一本。 WITHOUT A CLUE Michael Caine Amazon 以前、記事ネタに…
どうも!LSSです!! もう2年以上前ですが、 little-strange.hatenablog.com というコード生成ツールを公開していました。 色々調整できて面白いツールではありましたが、「ぼかし」をかけておかないとフォントの尖った部分がそのまま尖った袋になる、という仕様だったんですね。 今回は、text-shadowの位置のずらし方をちょっと工夫する事で、角丸袋文字のコードを考えてみました。 角丸袋文字 コード その他、変更を加えられる箇所 文字サイズや画数の多い漢字など とても古いネタの焼き直しをしてしまいました 角丸袋文字 角丸袋文字 コード <span style="--c1:…
どうも!LSSです!! 4/5に退職してから、やや日があきましたが…ようやく仕事を始められそうです^^ 明後日月曜に、リモート業務用の端末と契約書を受け取り、請書はまた後日。 契約書に印鑑を押して端末を持って帰ると業務を始められる…というところまできました! いやぁ…やっと話がまとまりそうなところで、濃厚接触者になってしまったりとかありましたが^^;それもあって、こちらまで持ってきていただけるとの事。 色々と間に立ってくださった方にはご尽力いただきましたが…この借りは仕事で返すとしましょうか^^ それにしても…未だに離職票と健康保険の喪失証明書が届かないのですが、さすがに「大丈夫か?」と思って…
どうも!LSSです!! 今回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな? サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかないと上の行と重なってしまいます。 コード ただし<span style="display: inline-block; transform-origin: 0% 50%; transform: rotate(-25deg); padding: 0 0.5em 0 1em; background-image: conic-gradient(fr…
どうも!LSSです!! はてなブログ無料版では、1つのアカウントでブログを3つ開設する事ができます。 用途に応じてブログを分けている方、すでに読者登録してくださっている方がいるメインブログではできないようなテスト用ブログとして使っている方などおられるかと思いますが、「なんらかの理由で、メインブログを切り替えたい」時に、はてなのヘルプページ、マイブログとメインブログ - はてなブログ ヘルプを読んでもイマイチ分からなかった方向けに、画像つきで解説してみます。 まず、ダッシュボードから ダッシュボードに「マイブログ」というのがあります というのを… まず、ダッシュボードから 普段、ダッシュボードの…
どうも!LSSです!! 今日、初めてコロナの「抗原検査」をやってみました。 新型コロナウイルス 抗原検査キット 抗原検査ペン型デバイス 唾液検査 自宅で検査 オミクロン株 唾液 変異株対応 8分で判定 精度99.3% PCR検査 研究用 (1) RABLISS Amazon ↑このキットを使用。 さぁて、結果は? 検査するに至った経緯 一応説明は読んだ…のですが… 検査結果 検査するに至った経緯 先日、同居家族が感染してしまい(オミクロン・陽性・発熱症状あり)、自分も「濃厚接触者」というのになってしまったんですね^^; 自分や他の家族は無症状、だけど濃厚接触者なのでなるべく外出は控えるなどする…
どうも!LSSです!! なんとなく、ポイ活アプリを入れてみました。 そして、アプリが勧めるゲームも入れてみたりしたのですが、「ゲームをある程度進めると、ポイ活アプリで認識されてポイントが貰える」のとは別に、「ゲーム自体ある程度進めた時点でそっちはそっちでAmazonギフトカード(コード)が貰える」なんてのがあるんですね。 何かにつけ課金させようとしてくるゲームではありますが…無課金で進めていても数百円程度もらえてしまったので、ちょっと不安を覚えつつあります^^; それだけ、課金してる人がいて儲かってるという事なのか…ポイ活アプリに広告を出す事を思えば、その程度は出しても良いという事なのか、それ…
どうも!LSSです!! 【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れないかな?と思いついたのが今回のネタになります。 自動フォトギャラリー コード ただし、ちょっと難点が… 難点その1 縦横比 難点その2 汎用性 一応、その「ややこしい」keyframesの内容について説明 自動フォトギャラリー @keyframes photoboxa{ 0%{background-size…
【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】
どうも!LSSです!! CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。 …なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ??」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますw なんだかよく分からないもの コード 当初やろうとしていた事 あっ! なんだかよく分からないもの @keyframes cbig{ 0%{background-size:0% 0%;background-position:50% 50%;} 50%{background-size:100…
どうも!LSSです!! この春はずっと、桜をチェックしていましたが、それもそろそろ終わりかな…。 今日の桜 本日のいちソ また別の桜 今日の桜 生田川の橋から、すぐそばにせり出してきている桜を(ほぼ)定点観測していた写真シリーズ、今日はこんな感じ。 だいぶ花びらが落ちて、残っているもののほうが少なくなっていますね。 そろそろ…桜のシーズンも終わりか。 日本の北のほうではまだこれからというところもあるでしょうから、これからはそちらの方のお住まいの方の報告で楽しませていただく感じですね^^ 本日のいちソ こちらは退職前から、なんですが、三宮近辺で「安くてコスパの良いパフェ」を探す趣味が始まりました…
どうも!LSSです!! 今日は午前中に、オファーをいただいている会社との打ち合わせに行ってきました。これまでも2度ほど、打ち合わせにいっていましたがいずれも昼。今回は珍しく朝なので『絶対、遅刻しちゃダメなやつ』ですねw←当たり前(長期の休みで自分のだらけっぷりを恐れているもので^^;) 久々に目覚ましをONにしたりしていましたが、逆にゆっくり眠れずにだいぶ早い時間に起きちゃったので、朝ものんびりしてから出かけました。 打ち合わせにいってみると 帰り途中、ハロワに寄ったのですが… 次に、区役所 そして郵便局へ そんな一日でした 打ち合わせにいってみると 契約がまだなので不安を覚えていましたが、先…
どうも!LSSです!! 昨日のゲーム案、 little-strange.hatenablog.com ですが、記事投稿した後で「推理不能パターン」が有り得るのかどうかを判断する方法に気づきました! 「推理不能」となるのは、「A~Eに入る1~5の並びが異なるのに、ヒントとなる3つの数値が全く同一である」という事が発生した場合。 ただ、このシャッフルパターンって、全部で「5x4x3x2x1=120」の120通りなんですね。 チェックできない数ではない…ですが、面倒臭がりな自分は手動でチェックするより、スクリプトで判定するものを作っちゃいました!(←実際どっちが面倒か怪しいですがw) ヒント重複パタ…
【ゲーム案】これは推理ゲームとして成立する?のテスト【実験段階】
どうも!LSSです!! 1~5の数字を使ったパズルを、ふと思いつきました。 が、果たしてこれがパズルとして成立するのか?(つまり、ヒントから必ず答えが導き出せるのか)が判別できず、とりあえず実験的にJavaScriptでプロトタイプ版を作ってみました。 推理ゲーム…? ルール説明 A~Eをクリックすると、隠された数字が明らかに ヒントのヒント(?) 実際にゲームとして作るなら… 推理ゲーム…? 再シャッフル cards=[1,2,3,4,5]; initbtn.addEventListener('click',init,false); init(); function init(){ for(…
元の一枚の画像を、縦3つ横3つの9分割したコマが8個あります。 ※元画像の一番右下に当たる部分が欠品となっています。 そしてコマの無い「空きマス」には、元画像がモノクロで薄暗く見えています。 「空きマスと縦か横に並ぶコマ」をクリックする事で、コマをスライドさせられます。 空きマスに見える元画像をヒントに、全てのコマを正しい位置に配置する事を目指すパズルゲームです。
どうも!LSSです!! 半分忘れかけていましたが…残有給消化もあと1日。 明日付けで20年勤めた職場も退職となります。 といっても別に行く必要もないし、後は保険証を返却するだけ(郵送でもOK)なんですけどねw ただ、今オファーをいただいている会社が「同じ敷地内」にあるので、契約書に捺印する時や実際に通い出すと…結局そこに行く事になりますwww さて…これから諸々「退職後にやろうとしていた準備」をやりますか。 とりあえずハロワ(相談)、銀行(口座開設)、税務署(開業届)…かな? ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^
どうも!LSSです!! いよいよ、神戸では桜が満開になりました^^ 桜満開! スマホのSIM差し替え あと、kindleで漫画をポチりました 桜満開! また、生田川の桜です^^もうこれ以上ないというほどに咲き誇っていますね! article h2{ border-radius:10px; padding:10px; border:6px groove #ffcccc; background-image: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90% 5…
どうも!LSSです!! なんとなくCSSをいじっていると、謎の背景模様?ができました。 謎の背景模様『山』 コード styleオプションに書く場合 あとがき 謎の背景模様『山』 .yama{ background: repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddffdd 61deg 120deg) 0 0/50px 50px; } なんだか、CSSを色々いじっているうちに、謎の背景模様ができましたwrepeating-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな?と。薄い緑の『山…
どうも!LSSです!! 【日記】新スマホきました! - Little Strange Software で、何も問題なく移行できたかのように書いていましたが…根本的な問題が残っていました。 この記事は、「それまで使っていたY!mobileのSIMを、買ってきたSIMフリースマホに移行しようとした人が、うっかり見落としてアタフタしたけどなんとか解決した」、という記事となります。 ネット設定(APN)が出来ていなかった MMSが設定できなかった MMSが移行できていなかった ついでに…丸亀製麺アプリも正常にスキャンできるように! 他に残る問題…どうしようかな という感じで、 ネット設定(APN)が…
「ブログリーダー」を活用して、LSSさんをフォローしませんか?
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。