Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

2021-11-01から1ヶ月間の記事一覧

【CSS小ネタ】conic-gradientで矢印を描いてみた

どうも!LSSです!! conic-gradientを使って、矢印を描いてみました。 2021/12/1 コードちょっと修正 左矢印 上矢印 あとがき 左矢印 .arrowl{ display:inline-block; background-image:conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff00000…

【お題】あったか~い

今週のお題「あったか~い」 どうも!LSSです!! すっかり寒くなりました。 はてなブログの今週のお題も「あったか~い」で、まさにこの時期に切望されるテーマとなっていますねw 暖を取るのに、セーター・ヒートテック・コートなどの衣類であったり、ウォ…

【はてなブログ】サイドバーに立体サイコロを配置しました!

どうも!LSSです!! このブログの、滅多に更新しないカテゴリのひとつに、「はてなブログサイドバーモジュール」というのがあります。 これまで、 little-strange.hatenablog.com little-strange.hatenablog.com の2記事書いていて、今回のが3記事め。 最…

【CSS/JavaScript】六角フォトギャラリー

ブロガーの皆様の中には、写真や絵などの画像をコンテンツのメインに据えられている方も多いかと思います。 普通に並べても素敵な写真、こんな見せ方はいかがでしょうか?

サイコロで思い出すのは…

どうも!LSSです!! 最近はサイコロネタ多めでしたが、またサイコロの話。 自分はめっきりTV見なくなったのですが、以前お昼時に「サイコロの各面に話題が書かれていて、出た目に従ってゲストにその話をさせる番組」がありましたね。 今どうなってるんだろ…

【CSS/JavaScript】立体サイコロ、完成!

どうも!LSSです!! 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください …

【お題】お気に入りの靴下

今週のお題「お気に入りの靴下」 どうも!LSSです!! さて、はてなブログ今週のお題「お気に入りの靴下」ですが…。 元々、衣類にあまり頓着しない性分なもので、まして個性の出づらい「靴下」にお気に入りも何もありません^^; (上着などなら、例えばポケッ…

【CSS】虹カード

radial-gradient(円形グラデーション)をやたらと並べて、リアリティのない迫ってくるような虹を作ってみました。

【CSS】彗星の尾【小ネタ】

どうも!LSSです!! CSSを色々いじっていると、こんなものが出来ました。 彗星の尾 コード なんだこりゃw 彗星の尾 @keyframes wa1a{ 0%{transform:rotate(0deg);} 100%{transform:rotate(-360deg);} } @keyframes wa2a{ 0%{transform:rotate(0deg);} 100%…

【つまづき】CSSで疑似的に乱数を実現しようとした【難アリ】

どうも!LSSです!! JavaScriptには Math.random() が用意されており、簡単に乱数を生成する事ができます。 一方、CSSには乱数がありません。 ので、乱数が必要ならJavaScriptを併用すれば良いのですが、「CSSのみで疑似的に乱数を作る方法」の案を練ってい…

【CSSお絵描き】サイコロの目を描いてみよう

どうも!LSSです!! CSSのbackground-image:radilgradientを駆使して、コードでサイコロの6つの目を描いてみます。 こういうのは一度作っておくと、色々使いまわせそうですね^^ 1の目 2の目 3の目 4の目 5の目 6の目 書き方は何通りか考えましたが… …

【CSS】10pxってどのぐらいのサイズ?方眼を描いてみました【小ネタ】

どうも!LSSです!! はい、いきなり背景がアレですが、お使いの端末は正常です(多分)。 10px方眼 コード解説 という冗談のような小ネタでした 10px方眼 article{ background-image: linear-gradient(#ffcccc00 90%,#ffccccff 100%) ,linear-gradient(90de…

【CSS】サイコロ回転【preserve-3d試してみた】

どうも!LSSです!! CSSのプロパティ&値に、transform-style:preserve-3d;というのがあります。 HTML上に置いた要素を変形(拡大縮小・回転など)させるtransformプロパティを3Dに対応させるための指定…らしいのですが、これがもうひとつよく分からない。 …

今週のお題「秋の歌」

今週のお題「秋の歌」 どうも!LSSです!! はてなブログ、今週のお題が「秋の歌」との事なんですが…ずっともやもやっと考えていました。 「何か、とっても秋らしいイメージの歌があったはずだけど…なんだっけ?」ってw 定番でいうと で、思い出しました! …

【CSS】グラデーション・超入門のさわりだけ その1

どうも!LSSです!! CSSのグラデーション、○○-gradient系は、できる事が多くて奥が深いです。 凝れば凝るほどコードが複雑になり、「分かりにくい」という印象を受けてしまう事も。 色々な事ができるがゆえに、色々やろうとすると難しい部分も出てきますが…

ゼルダの伝説 ゲーム&ウォッチ版

どうも!LSSです!! 予約注文したのは、もう数か月前になりますが、すっかり忘れた頃に発売日を迎え、届きました! little-strange.hatenablog.com とりあえず表ゼルダクリアしました! 2コンのマイクがない! リセットボタンがない! その他の仕様 まだた…

【CSS】今年のクリスマスは~【準備編】

どうも!LSSです!! またクリスマスが近づいてきていますね。 コンビニとかで、チキンやケーキの予約のPOPを見かけたりするようになりました。 このブログでは昨年、 【CSS】CSSでクリスマスツリーを描いてみる【第三弾】 - Little Strange Software といっ…

【CSS】conic-gradientでCSSお絵描き

conic-gradient を使って絵を描いてみました。 絵のほとんどは「conic-gradient」で完結しますが、最後の仕上げには「linear-gradient」と「radial-gradient」も参加してもらいます^^ 先に完成したものをお見せすると、こんな感じのものが出来上がりました!

【JavaScript】まるを大きくするゲーム未満のなにか【なんだこれ】

どうも!LSSです!! ふと思いついた動作があって、JavaScriptで作ってみました。 なにか…ゲームになりそうで、まだなってない、そんな謎の状態ですが公開してみます! まるを大きくするゲーム未満のなにか 遊びかた(?) このスクリプトのコード あとがき …

クリスマスプレゼントにいいかも?「フライングボール」

どうも!LSSです!! なにげなくAmazonを見ていると、ふと面白そうなおもちゃを見つけました。 フライングボール 対象年齢6歳以上 フライングボール FLYNOVA PRO ミニドローンおもちゃ 球状飛行ジャイロ フライングボール 360°回転 スピニング LEDライト 付…

【CSS/実験】陽光さす記事

どうも!LSSです!! ちょっとconic-gradientを使った実験です。 スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。 実用性は…結構邪魔かも?なので、現段階では「実験」扱いです^^; 消す時はここ…

突然ICOCAデビューした話

どうも!LSSです!! 現在、通勤のために、神戸市バスと阪神電車の通勤定期券を使用しています。 どちらも6カ月定期で、磁気定期券。 ただし、最初の購入時期が違うので、それぞれの期限には時間差があります。 そんな自分が、全く不意に交通系ICカード、IC…

【CSS/小ネタ】青い〇

どうも!LSSです!! 先日の記事、 にいただいたブクマで、 tn198403s ばってん。なるほど強調するのに良さそうです。これを応用すれば丸(楕円)とかもできるのでしょうか?あるいは、カーソルを載せたら×や〇が表示されるとか…。すみません、使い途をいろ…

はてなブログ10周年のお誕生日、おめでとうございます^^

どうも!LSSです!! 本日、11/7をもって、「はてなブログ」がサービス開始から10周年を迎えました!! おめでとうございます^^ それにかこつけて、昔作った曲を思い出して書いてみましたw hatenablog.com 10周年特別お題の期限はまだ残っています ふと、む…

【CSS/小ネタ】文中で使える赤いバッテン

今週のお題「赤いもの」 どうも!LSSです!! ちょっと使い勝手良さそうな?CSSネタを思いつきました。 赤いバッテン コード コード別例 あとがき 赤いバッテン ちょっと前に思いついたCSSネタを、今週のお題にも合うかも?と思い、お題に便乗公開してみます…

ブログタイトルの装飾をリニューアルしました!

どうも!LSSです!! 既にお気づきの方もおられると思いますが、今朝(2021/11/5 AM)、このブログのタイトル部分の装飾をリニューアルしました! 今回のリニューアルデザイン 一応、コード解説 さて、この対角線の黄緑と黒のデザインですが 今回のリニュー…

【CSS/実験】background-clipをカンマ区切りにしてみた

どうも!LSSです!! 今回の記事では、試験的に .bgtest{ display:inline-block; border-radius:50px; border:10px dotted black; padding:10px; color:transparent; font-size:50px; font-weight:bold; background-image: linear-gradient(135deg,white,gra…

【JavaScript】conic-gradient生成ツールのコード

どうも!LSSです!! 先日公開した little-strange.hatenablog.com の、ツール自体のコードです。 ざっくりした解説もつけてみました。 【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Software 【JavaScript】コード作成ツールの作り…

【短文記事】明日は祝日!

どうも!LSSです!! 明日は祝日ですね。 10月に祝日がなかった(唯一の祝日が別月に移動した)ので、11月に2回も祝日があるのがとても有難い気がします! 週のど真ん中なのも、土日祝が休日な身にとってはちょうどいい感じ^^ のんびりまったり、体を休める…

【ツール】conic-gradient生成ツール

「conic-gradient生成ツール」を作ってみました。2つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。2色だけでは物足りない、という場合は、「色追加」ボタ…