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

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

どうも！LSSです！！ デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。 スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例：楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"><img style="display: block;" src="http

どうも！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 ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 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です！！ 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください（スマホの場合はタップ） コード <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

どうも！LSSです！！ 今回はブラウザゲーム…なんですが、これをゲームと言っていいのやら、どうなのやらｗ まったく考える余地のない、「完全なる運ゲー」です。 ＡかＢか？x5 というものを作ってみました ＡかＢか？x5 下にある「Ａ」または「Ｂ」。 どちらかが正解でどちらかがハズレです。 直感でどちらかをクリックすると結果が出て、次の「Ａ」「Ｂ」が現れます。 ５回出題され、正解率と その正解率に辿り着く確率が表示されます。 どちらが正解か？は完全に運任せ。完全なる運ゲーです。 本日の貴方の『直観力』を測ってみましょう^^ というものを作ってみました 「プレイヤーによる選択」があるにも関わらず、正解かハズレかは完全に運。 ちなみに、ＡＢどちらが正解かはページを開いた時点でランダムで決められていますが、２種類×５回なのでパターン数でいうと32通り（2の5乗）。 「全て正解」あるいは「全てハズレ」

どうも！LSSです！！ 以前に、様々な「ページ（記事）内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素（画像・段落など）はページ記述者が指定したサイズ（指定していなければデフォルトのサイズ）で固定されて表示されますが、CSSには 「ユーザー（読者）が自由にサイズ変更できるようにする」 という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記！スマホだと操作しづらかったり、出来なかったりする場合もあるようです。 試してみた範囲では、「Androidスマホ＋はてなアプリ→右下角を捉えにくいがなんとか」「iPhone＋はてなアプリ or Chrome or Safari→いずれも試みるもできず」 【JavaScript】iPhoneでも要素のリサイズ -

どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software に少し機能追加したバージョンです。 簡易お絵描きアプリ 使い方 試作品＋ゆえの謎仕様 ファイルとして保存、について現在判明している事 履歴機能の実装 簡易お絵描きアプリ 幅 : px 高 : px 使い方 グレーの格子模様の四角形がキャンバスです。 キャンバス上で、マウスの左ボタンを押しながらマウスを動かすか、スマホ・タブレット等のタッチ操作可能な端末では指またはペンで、線を描く事ができます。 タッチ操作の場合、筆圧によって線の太さを調整できます（筆圧感知対応端末の場合）。 キャンバスの↑にあるスライダー及び「-」「+」のボタンで、キャンバスの幅・高さを変更する事ができます。（ボタンは微調整用で、１ピクセル単位で変更できます。） キャンバスの↓にあるもののうち、一番最初にある

どうも！LSSです！！ JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。 簡易お絵描きアプリ 使い方 コード イケてないところ だいぶ悩んだところ 簡易お絵描きアプリ 使い方 マウスドラッグ、またはタッチ（ペンでも指でも）で枠内に絵を描けます。 タッチ操作の場合、筆圧感知に対応しています（お使いの端末が対応していた場合）。 枠下のメニューは左から「色変更」「全て消す」「ファイルとして保存」です。 「全て消す」は描いた絵が消えますが、一応確認ダイアログが出ます。 「ファイルとして保存」をクリックすると、日付・時刻をファイル名としたpngファイルとしてお使いの端末に保存されます。 ※追記：動作確認報告。WindowsPC＋Chrome…問題無し。Androidスマホ＋Chrome…問題無し。iPhone7（iOS15.6.1）はSafariやChro

どうも！LSSです！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 でっかい下向き矢印！ コード コードを見やすく整形するとこんな感じ 画面幅に合わせて伸縮 でっかい下向き矢印！ コード <div style="height: 200px; background:linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gr

どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 コード <style> @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);} 24%{background-position-x:0,calc(50% - 20px),50%

どうも！LSSです！！ 昨日の記事で、激安PCをポチった話を書きましたが、 little-strange.hatenablog.com 同時にもうひとつ、購入したものがあります。 薄型マウス 折り曲げると電源ON ちょっと珍しい？特徴が決め手 薄型マウス イーサプライ 薄型マウス Bluetoothマウス マルチペアリング対応 USB充電式 IRセンサー 折りたたみ式 5ボタン EZ4-MABT1205W イーサプライ Amazon 薄型のBluetoothマウスは１つ所持しており（かなり以前に安く購入したもの）、久々に喫茶店にノートPCを持って行って使ってみたりしたのですが、左クリックに違和感。 （久々すぎて、前からそうだったのかどうか分かりませんが、クリックする位置が限定されている感じ） だもんで、小型のPCを購入するにあたり、こちらも新調しようと探していました。 折り曲げると電源ON

どうも！LSSです！！ little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とすると、重なると３Dではない事が露呈してしまうという欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが（そちらには球や曲面の表示が苦手という弱点もありますが）なんとか「疑似３D」のままで誤魔化せないか？試みてみました。 疑似３D 前後関係 コード HTML部分 外枠のCSS 他、３つのセレクタ keyframes内にz-indexの指定を追加 疑似３D 前後関係 地球（？）が太陽（？）の向こう側を回る時には隠れ、手前側を回る時には太陽を隠しています。 コード <style

今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題ですが、まず記事編集画面に出てきたのが 「古今東西の「ＳＦ」を語りませんか？」 この「古今東西」にまず目が行き、まっさきに連想したのは…「竹取物語」ですね。 ＳＦの概念が無かった時代の、不思議を含んだおとぎ話のひとつでしたが、これほどもろに「宇宙人」が出てくる話もなかなかないかと。 「不思議を含んだおとぎ話」でいうと、他に妖怪・化け猫の話や隠れ里、異種婚姻譚など様々ありますが…さて、どこからがＳＦかな？って考え始めると、ＳＦってなんだろう、というところがよく分からなくなってきましたｗ ＳＦの概念のない時代に作られた話なので、「竹取物語」は「ＳＦとして解釈できるorしやすい話」というべきでしょうね。 それで行くと、他にＳＦっぽい日本昔話といえば…「浦島太郎」の話が浮かびます。 こちらは時間ＳＦで、後にアインシュタイン氏の特殊相対性

どうも！LSSです！！ ５月の終わり頃、こんな記事を投稿していました。 little-strange.hatenablog.com サンパル自体が停止する前に、多くの店が撤退していたのですが、中でも結構ギリギリまで残っていて、お気に入りのメニューがあった喫茶店、モッキンバード！ お気に入りのチョコパ提供店が…。 移転してもメニューと属性が変わらないといいな。 pic.twitter.com/q0rbwunQBh— LSS (@LSS0324) 2022年5月30日 「７月初旬に移転オープン」と告知されていました。 場所・ビル名まで明記されているので、しっかりと準備されていた事と思います。 で、「そういえばどうなったかな？」と調べてみると…どうも７月７日に移転オープンされていたようです！…というのを知ったのが７月１４日ｗ 知って早速、行ってきました！ 外観 お目当てはチョコソ一択！ 実食 調

どうも！LSSです！！ little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コード改変の流れ あとがき おまけ：波紋の色変更 水滴落下、からの透過波紋 コード <style> @keyframes trwavea{ 0%{background-size:20px 10px,100% 100%,100% 100%;} 95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;} 0%{background-position:50% -100%,50% 50%,0 0;} 100%{background-position:50% 50%,5

どうも！LSSです！！ はてなブログには、Twitterとの連携機能があります。 自分もTwitterとは連携していて、記事を書き上げて投稿した後は、その画面からTwitterにも投稿のお知らせを投げています^^ と、その他に、はてなブログにはアイキャッチ画像を指定したり、Canvaの機能と提携してアイキャッチ画像を作る機能もあります。 特に指定しないで、記事中に画像を使っているとそれがアイキャッチ画像になったりもしますね。 と、そこで…ブログ投稿＆ツイートした後で、「ああ！アイキャッチ画像これにするつもりじゃなかったのに！！」とか、画像自体の内容にとんでもない間違いを見つけて訂正したくなる事も出てきますｗ ブログのアイキャッチ画像は普通に訂正できます ツイート上のアイキャッチ画像も変えるには という事例を最近ちらほら見かけるので、 ブログのアイキャッチ画像は普通に訂正できます 投稿済みの