どうも！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル　第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル　第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。 そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。 なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね） 全ての選択肢が正しいものになり、「お手本」と「回

どうも！LSSです！！ 1000記事到達した時、３年経過した時にも考えていた事ですが… とりあえず更新頻度を変更（毎日更新終了）します！ 時間の使い方を諸々考え直して、これから始める事を考えてみます^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 最近、ブログ巡回しているとたまたまなんですが「神戸を含む関西方面への旅行」記事を、別々の３，４つのブログで見かけました。 それぞれ記事にされたタイミングが重なっているだけで、実際に来られたのは別々のタイミングのようですけどね。 little-strange.hatenablog.com ↑かなり前に、こんな記事を書いていたりもしましたが…やはり本当の旅行者目線になると、地元民の知らない新たな一面が色々あるものですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 最近、Amazonで古い漫画を購入しました。 吾妻ひでお作品集 1~最新巻 [マーケットプレイス コミックセット] 作者:吾妻 ひでお 奇想天外社 Amazon ↑これなんですけどね。 既に別の版で読んだ作品も多いのですが、未読のものも多々あり、良い買い物をしたな、と思っています。 が、今のAmazonの金額を見てびっくり！！ ちょっと怖い金額になっていたので、自分のメールを読み返すと、自分が購入した時点では￥2255でした。 やはり年数が経っている事と、おそらくは発行部数もあまり多くない？事からだいぶレアな本になってしまっているのかもですね。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

今週のお題「カバンの中身」 どうも！LSSです！！ 今週のお題「カバンの中身」…ちょうど最近どこかに（多分どこかのコメント欄）に書いたっけ…。 仕事に行く時用のカバンと、休日用のカバン、別々に用意しています。 仕事用のカバンが少々問題で…だいたい持ち歩く必要も仕事で使うわけでもないものが入ったままになっていたりしますねｗ 休日用のカバンの方は、縦長のショルダーバッグを愛用しています。 こちらはかなり以前に購入したものですが、近年になって「12.1インチ画面のノートPC、CF-SX3がすっぽり収まる」事に気づき、そのバッグの別のポケットに薄型マウスやモバイルWiFi、モバイルバッテリなどの薄いものを入れるのがマイブーム^^ MSOffice 2019/Win 10搭載 Panasonic CF-SX3/第四世代Core i5-4200U 1.6GHz/メモリー: 8GB/SSD:256GB/

どうも！LSSです！！ 昨日の記事に書いたこれ、ちょっとだけ試してみました。 little-strange.hatenablog.com USBから電源を取る必要があるのですが（逆に言えば、コンセントが要らない）、プロジェクタにUSB端子があり、そちらに差すと…そこから給電できました^^ そこで、ふと思ったのですが…USB電源で稼働するスティックPCがあれば、 エアマウス、Bluetooth 5.0リモートコントロールキーボード、6軸ジャイロスコープセンサー、バックライト付き、インテリジェンスラーニング、Android TVボックス、コンピューター用品、ラップトップ、スマートTV用 VEGBY1 Amazon プロジェクタ＋スティックPC＋↑みたいなエアマウス、で、 「ごろ寝PC環境」 ができるのでは？と。 そもそもプロジェクタの画面解像度も低めなので、スティックPCの低スペック、エアマウ

どうも！LSSです！！ 「結構前に買っては見たものの使ってない（開封もしていない）」ものがあります。 マイクロソフト ワイヤレス ディスプレイ アダプター P3Q-00009 : Wi-Fi不要/ Miracast/ パソコンやスマホの画面をミラーリング/ USB給電可/ 簡単接続/ Windows/ Surface ( ブラック ) マイクロソフト Amazon ↑これなんですけどね。 little-strange.hatenablog.com なんとなく、プロジェクターと相性いいかな？と買ってみたのでした。 …そろそろいい加減、試してみようかなｗ 他にも「買ったけど使ってないもの」にNAS（LAN接続のHDD）なんてのもあったりしますが、スマホとPCでのデータ共有に役立ちそうでもあります。 そちらは同居家族とのデータ共有にも使えますね。 …逆に言えば、家族に見られたくないデータは置かな

どうも！LSSです！！ 日記、としながらも、昨日の話なんですけどね。 10/10　スポーツの日、朝10：50頃。 元町駅近くの交差点で、南から北に向かうべく、信号待ちしていました。 南北の信号が赤なので、東西の信号はもちろん青。（東→西への一方通行） 多くの車やバイクが走り抜ける中で、目を疑うような光景が！ 「目の前を仮面ライダーが走り過ぎていきました」 走り過ぎていったので、一瞬の事でしたが、マスクも背中もしっかり仮面ライダーで、バイクはサイクロン号ではなかったですが…白昼夢を見ているような出来事でしたｗ まぁ、稀には、なんでもない街なかでコスプレをされている方を見かける事は無くもないですし、かくいう自分も数年前、コスプレじゃないですがやたらバカでかい傘をさして歩いて、呼び込みの人たちから「おっきい傘のお兄さ～ん」と声をかけられた事もあったりはしました。 が、仮面ライダーの姿でバイクに乗

どうも！LSSです！！ CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめくれたような表現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき ドッグイヤーもどき コード <style> .dogy{ width:280px; height:280px; padding:10px; background-image: conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg), radial-gradient(50% 30%,#eeeedd 99%,#eeeedd00 100%), ra

どうも！LSSです！！ little-strange.hatenablog.com little-strange.hatenablog.com に書いていた姪っ子ちゃんが来ています。（２歳になりました） 前回会ったのが昨年末かぁ。 その後も２度ほど来ていたようなのですが、自分とはすれ違いの瞬間帰省でした。 その間に凄い勢いで成長し、昨年末には全然だったのですが、かなりお喋りできるようになっています^^ …昨年末の時点では物凄く人見知りになっていて、慣れるまでだいぶ苦労したのですが果たして…？？ と思っていたところ、顔合わせから全く拒否のそぶりを見せず、愛想よく応じてくれました^^ この違い、どこからくるんでしょうね？ 姪っ子ちゃんの立場に立って考えてみると…自分が言語というコミュニケーション手段を持たずに、知らない人の前にきた時にどうリアクションを取っていいか分からなくてグズっていたのかな

今週のお題「最近おもしろかった本」 どうも！LSSです！！ 最近、近所の古本屋さんで「１冊１００円の本、３冊で２００円」で売られているところで、以前から「気にはなっていた」漫画（文庫版）を購入しました。 同棲時代　（1） 作者:上村一夫 eBookJapan Plus Amazon ひとつは「同棲時代」。 昭和の一時代をあらわす作品として、よく名前を聞きます。 忍者武芸帳（影丸伝）（１） 作者:白土三平 小学館 Amazon もうひとつは「忍者武芸帳」。 白土三平氏は忍者漫画の巨匠として知られていますが、実は今まで読んでこなかったりしました^^; 古い漫画が好きで、それも自分が生まれるより前の年代、戦後からの漫画史に興味を持っていましたが、ようやくにしてこれまで踏み込まなかった領域に手を出した感がありますｗ 同時代の作品として、つげ義春氏の本は色々読んでいましたが、いずれにも共通するところ

どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。 CSSとしてこの生成されたコードを使用する場合は、 background-image:linear-gradient(なん

どうも！LSSです！！ 明日休みで明後日出勤、なんですが…ちょうどその明日が職場で変化が重なる日。 明後日行くと、ちょっと取り残された感じになるかもですねｗ …いうほど大きな変化ってわけでもないのですが、中には自分の仕事に大きく関わりのある事もあり…それが遅れない事を願うばかりです^^; リモートで確認できるので見ておこうっと。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにｗ ドアの向こうに コード 向こうの風景 ドアの向こうに コード <style> @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku{ position:relative; width:280px; height:200px; background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%; } .waku>div{ position:relative; width:100%; height:100%; transform-style:preserve-3d;

どうも！LSSです！！ little-strange.hatenablog.com 先日、↑のような記事を書いていました。 要は「スーパーで割引シールが貼られたパック寿司を購入するにはどのタイミングで行くのが良いか？」という話で、もちろんスーパーによっても違うでしょうし、読み手に何のメリットもない記事ですｗ なんですが、その後、１８：３０頃に同スーパーに寄ったところ… ちょうど半額シールを貼ってまわってる場面に遭遇しました！ 実にあっさりと答えが出ましたねｗ その時点でもまだ数パック残っていたので、そのぐらいのタイミングで向かうのが良さそうです。 …一方、１０月に入って様々なものが値上がりしていて、例えば「700mlのコカ・コーラ（ペットボトル）」が確か77円だったものがいきなり108円になっていました（税別）。 うーん、これは特に顕著すぎる値上がり例かもですね^^; コカ・コーラに関して

どうも！LSSです！！ わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな？と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたｗ 画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな？と考えてみました。 姫のお辞儀 マウスホバーで「ごきげんよう」 ざっくり解説 姫のお辞儀 延々とお辞儀を繰り返す、腰の低いお姫様です^^ コード <style> @keyframes ozga{ 0%,30%{height:200px;} 90%,100%{height:100px;} } @keyframes ozgb{ 0%,30%{top:0px;} 90%,100%{top:100p

どうも！LSSです！！ なんとなく検索してみたんですが、WebAudioAPIってマイクからの入力も読み取れるみたいですね。 www.google.co.jp 検索したきっかけは、 arsinput.hatenablog.jp arsinput.hatenablog.jp アーシさんの記事で、音感トレーニングの話題があったので、 「ブラウザが発した音がどの音階か当てるゲーム」 なら作れそう、と思ったところから。 「絶対音感」を持つ人は、この音階当てができますが、ふと「音痴と呼ばれるのは、聴くほうじゃなくて発する音が外れている事に気づかない人の事を言うのでは？」と思ったところで、発した音（声）の判定なんてのもできるのかな？と思ったのです。 音階の周波数の算出方法は little-strange.hatenablog.com で既に分かっているので、「マイクから入力された音の周波数がどの音階の

どうも！LSSです！！ little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで２パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワット コード <style> @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relative; width:280px;

どうも！LSSです！！ little-strange.hatenablog.com は、「１枚の画像を別々に扱う」という試みでした。 元の発想は、「人物の画像の、下半分だけが縦に伸び縮みするアニメーションだったら、スクワット（または高位の女性のお辞儀）みたいになるかな？」というところでした。 今回は「下半分だけ伸び縮み」を、画像を伴わずにkeyframesで再現する事を試みてみました。 スクワットの動きを表現できるか試してみた、だけ コード 結局のところ、高さも縦位置も動作指定が必要？ スクワットの動きを表現できるか試してみた、だけ コード <style> @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ pos

どうも！LSSです！！ 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください（スマホの場合はタップ） コード <style> .halfpic{ position:relative; width:280px; height:400px; transform-style: preserve-3d; perspective:500px; } .halfpic div{ position:absolute; left:0; width:100%; height:50%; background-image:url('画像ファイルのURL'); background-size:100% 200%; background-repeat:no-repeat; } .halfpic div:nth-chi