【CSS】水滴落下、からの透過波紋 - Little Strange Software
どうも！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
【CSS】跳ね続けるボールとfloat:left;【小ネタ】 - Little Strange Software
どうも！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、 「着地して跳ね返る時に横長にひしゃげる」 という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; ボールが跳ね続けます。 そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。 float:left;の一行を削除すると、横に文章が並ぶ事がなくなります。 コード <style> @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50
【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software
どうも！LSSです！！ CSSのbackground-image:radilgradientを駆使して、コードでサイコロの６つの目を描いてみます。 こういうのは一度作っておくと、色々使いまわせそうですね^^ １の目 ２の目 ３の目 ４の目 ５の目 ６の目 書き方は何通りか考えましたが… 早速、サイコロを転がしてみよう！ 色付きスケルトンダイス １の目 コード <style> .sai1{ width:150px; height:150px; border-radius:5px; border:1px solid black; background-color:#ffffff; background-image: radial-gradient(circle at 50% 50%,#ff0000ff 19%,#ff000000 20%); } </style> <div class="sai
どうも！LSSです！！ radial-gradient（円形グラデーション）をやたらと並べて、リアリティのない迫ってくるような虹を作ってみました。 コード <style> .bgrbw{ width:300px; height:185px; border-radius:10px; background-color:#000000; background-image: radial-gradient(closest-side circle,#000000ff 99%,#00000000 100%), radial-gradient(closest-side circle,#800080ff 99%,#80008000 100%), radial-gradient(closest-side circle,#0000ffff 99%,#0000ff00 100%), radial-gradien
【CSS】グラデーション文字をアニメーションしてみました - Little Strange Software
どうも！LSSです！！ かなり前の記事のネタに、ちょっと思いついた事の追加を試してみました。 グラデーション文字のアニメーション コード 元ネタ とりあえず試してみただけですが グラデーション文字のアニメーション きんきらきんのきーん コード <style><!-- @keyframes goldanm{ 0%{background-position:0px 0px;} 100%{background-position:2000px 0px;} } .golda{ font-size: 50px; font-weight: bold; color: gold; background-image: linear-gradient(90deg, brown,yellow,white,yellow,brown); -webkit-background-clip: text; -webkit-te
どうも！LSSです！！ に続き、第二問目を作ってみました！ いくつかの選択肢から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^ なお、全ての選択肢が正解になった時、「正解です！！」と赤い文字が出てきます。 CSSパズル 第二問！ 第二問です 左が見本です。 下記コードの選択項目を選んで、右が見本と同じになるようにしてください。 コード <div style=" display: inline-block;box-sizing:border-box;width: 140px;height: 80px; : 10px; border:; border-color:; background: linear-gradient(,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000);
【CSSツール】水玉デザイナー 使い方一例！ - Little Strange Software
どうも！LSSです！！ 先日、公開したツール 試してみたいただいた方、ありがとうございます^^ 色々な模様が作れますが、今回は「使い方の一例」を書いてみます！ 最初に普通に模様を作ります 水玉の数を「倍」にします 横位置・縦位置を+50 あくまで「一例」ですが 最初に普通に模様を作ります 作り始める前に、まず、 「水玉の数」をテキトーに決めます。（後から変更もできます） 今回は「最初は5」でいきます。 上部の「水玉個別設定」をクリックして、５つの水玉のサイズ・配置を決めます。 ※ここでちょっとこだわり。 今回は「横位置」「縦位置」がそれぞれ「50%を超えないように」するやり方でいきます！ ↑例えば、こんな風に配置してみたとします。 水玉の数を「倍」にします 配置が決まったら、上部の「全体的な設定」に戻り、 「水玉の数」を、さっきの倍の「10」にします！ そしてまた、「水玉個別設定」に切り替
どうも！LSSです！！ ちょっと前に初めて、証券取引を始めました。 購読しているブログの中に株に関するブログもいくつかあり、試してみたくなった＆確認したい部分があった＆前から興味があった、という感じで、まだまだ分からない事だらけの初心者ですｗ 今日までの履歴 もっと前に考えていた事 投資信託 分散投資、を最重要視していたのですが… 損切り未経験 今日までの履歴 4/11 開始。キャンペーンで「3000円程度の株を数種類の候補の中から選んでもらえる」ので、2,843円分（3株合計）ゲット。 4/13 10,000円入金。ここから、ちょこまかと１株単位で買ったり売ったり。 4/15 S&P500に3,000円投資。 4/19 ブログに株を始めた事を書く。初めてｘ3 - Little Strange Software 5/23 30,000円入金。 5/24 S&P500に7,000円投資。 6
【ツール】色やサイズを調節して作るボックスのコードをお持ち帰りできるツール - Little Strange Software
「色やサイズを調節して作るボックスのコードをお持ち帰りできるツール」 を作ってみました。 ↓このタブの中で色々設定を変更すると、その更に下にあるサンプルとコードの内容が変化します。 気に入ったボックスが出来たら、コードをコピペして使用できます。 まずは色々遊んでみてください^^ 色設定サイズ光関連 ボックスの色 枠の色 文字の色 光の色 ボックス幅 ボックス高さ 枠幅 角の丸み 光の強さ 光の大きさ 光の位置（右） 光の位置（下） コード はてなブログの場合は「コード」の中に書かれたものをコピーして、「HTML編集」画面に貼り付ける事で使用できます。 中の文章（これはテスト文章です～という部分）は自由に書き換えできます。
【CSS】CSSオンリーでレンガ模様 - Little Strange Software
どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^ 以前に試みた時には「繰り返しを考慮するとCSSだけでは無理そう…」と、SVGとの合わせ技でやったものでしたが、今回はCSSonly！ …まぁちょっと無理やりに解決しているところもあり、よーく見ると突き抜けてたり窪んでた
【つまづき】わー、スクリプトで悩んでいるうちに23:46！！ - Little Strange Software
どうも！LSSです！！ この時間まで、スイッチ迷路を触っていました。 キャラはできていないまま、テストプレイ（移動できてスイッチを変えられる）できるところまで行ったものの…スマホ対応がどうかな？とか試しているうちに、PCでも動かなくなり^^;;; 気づけばこの時間ですｗ ちと集中しすぎましたね^^;;;;; スクリプトの問題が解決してもキャラもまだなので、やはりちょっと先になりそうな感じです。 追記！なんだか解決しました…ので晒してしまおう ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 今日は、かなり久々に「びっくりドンキー」に行ってきました。 久々のびっくりドンキー パインカレーバーグディッシュ pic.twitter.com/nvjM7kNnuu— LSS (@LSS0324) 2021年10月10日 はい、 whisky-coke.hatenablog.com の記事の影響ですｗ 以前に一度だけ、弟に付き合って行った事がありましたが…何年前だったかｗ ふと、自分がほとんど「ある時期以降の新しい飲食チェーンにあまり行ってない」事に気づきました。 例えば「いきなりステーキ」も店舗はあるのですが、こちらは一回も行った事がありません^^; どうもやはり、自分は「新しいものに飛びつく」感性に乏しいようです。 他に、飲食店の話から外れますが、Slack、GitHubなどのWebサービス、交通系ICカードやおサイフケータイなどの電子マネーにも未だに手を出さ
【CSS】border-image-sliceをkeyframesアニメーション【実験】 - Little Strange Software
どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 呼吸してるみたい コード <style> @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-source:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alterna
チェックボックスとラベルの話【CSS編】 - Little Strange Software
どうも！LSSです！！ チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが２つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkbx2" type="checkbox" /> <label for="chkbx2">ここをクリック</label> この「チェックボックスにチェックが入った時」に、ラベルの文字の背景色がピンク色に変わるよ
【ツール】ちぎり絵風枠ジェネレータ【プレビュー版】 - Little Strange Software
どうも！LSSです！！ ちょっとまた変わったツールを作ってみました。 このツールを用いて作成・ダウンロードされた画像はご自由にお使いいただけます^^ ちぎり絵風枠ジェネレータ（プレビュー版） 使い方 注意点（改良の余地^^;） 今回、プレビュー版とします ちぎり絵風枠ジェネレータ（プレビュー版） 幅 : 高さ : 内側の幅（比率） : % 内側の高さ（比率） : % 破片サイズ : 数 : 色味 : 使い方 スライダーで各パラメータを調節する事で、ちぎり絵風の枠画像を作成する事ができます。 ＋－ボタンで微調整も可能です。 「数」は破片の最大表示数で、実際の表示数は指定した数より少なくなる場合があります。 最後の「色味」ですが、これはデフォルトの黒の状態の時は全ての色がランダムで出現しますが、変更する事で色に偏りを持たせる事ができます。 （この記事の一番上のアイキャッチ画像は、色味を黄緑に指
Google日本語入力、公式サイトにこんなページが… - Little Strange Software
どうも！LSSです！！ ふと、Google 日本語入力のサイトの下のほうにこんなものを見つけました。 「モールス信号で日本語入力」 「反射光式ディスプレイを採用したフラップパネルで日本語入力」 「スマホ・タブレットのフリック入力をタッチパネルに触れずに行えるマジックハンド」 「手を使わない、口にくわえたピロピロ笛で日本語入力」 「スプーン曲げで日本語入力」 などなど、画期的な日本語入力デバイスが紹介されています！ と、まぁ冗談のような話ですが…実際これ、Googleさんの過去のエイプリルフールネタですねｗ それぞれ手の込んだ紹介動画まで作られていて、見ていて楽しいです^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【CSS】ブログで使える、でっかい下向き矢印！【小ネタ】 - Little Strange Software
どうも！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
「とにかくプログラミングをやってみたい！」という人に何をお勧めするべきか？ - Little Strange Software
どうも！LSSです！！ 最近、職場の人と雑談していた折の事。 「中学生の息子と自分と、プログラミングを覚えたい」てな話がでました。 全くの未経験。 そんな時に、何をオススメするべきか？ちょっと考えてしまいました。 何をやりたいか？ スクラッチ 仕事でExcelとかを使ってる方はVBA！ ブログやサイトを運営されている方にはJavaScript！ スマホで自分のプログラムを動かしたい！ AIと親和性が高いPython あとがき 何をやりたいか？ 多分、上記のように言う方は「プログラミングを覚えて何かをしたい」がなくて、「なんとなくプログラミングできるようになりたい」だけが漠然とあるんでしょうね。 プログラミング言語・環境は物凄く膨大な種類がありますが、「何を覚えても基本的な考え方は一緒」と言ってしまう事もできます。 （おそろしくクセのある一部（SQLとか）を除くｗ） ただ、「やりがい」がない
【はてなブログ】機能紹介記事・CSSカスタマイズ記事 まとめ - Little Strange Software
どうも！LSSです！！ 結構、間があいてしまったのですが、 に続く「まとめ記事 第三弾」！！ はてなブログの機能の使い方やCSSカスタマイズについて、これまで書いた記事をまとめてみました。 なお、この「まとめシリーズ」は にいただいたコメントが発端となっています^^ はてなブログで出来る事紹介編 はてなブログCSSカスタマイズ編 コメント欄CSSカスタマイズ編 あとがき はてなブログで出来る事紹介編 はてなブログの機能を紹介したり、ちょっとした「こうすればできる」を紹介した記事です。 予想外のつまづき（動画について） はてなブログに動画を貼ろうとして（YouTubeやTwitterなど、はてな以外のアップローダーを使わず）苦戦した記事ですｗ 写真はいつも、はてなフォトを使っていますが、そこに音声ナシ動画を上げるには？という内容の記事ですね。 AviUtlというフリーソフトをつかってアニメG
【ツール】雨降りCSSコード生成ツール - Little Strange Software
どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間） 雨の色: 雨の太さ:px 雨の角度:deg 雨の横位置:px（雨の長さにも影響） 雨枠の幅:px 雨枠の高さpx 雨２の横ズレ:px 雨２の縦ズレ:px 雨３の横ズレ:px 雨３の縦ズレ:px 背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。（アニメーション速度、雨の角度など） 色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。（こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます） 気に入
Microsoft open sources its software bill of materials (SBOM) generation tool - Engineering@Microsoft
Microsoft open sources its software bill of materials (SBOM) generation tool We are excited and proud to open source our software bill of materials (SBOM) generation tool. A key requirement of the Executive Order on Improving the Nation’s Cybersecurity, SBOMs are lists of ingredients that make up software components, providing software transparency so organizations have insight into their supply c
最近、Amazonで古い漫画を買ったのですが… - Little Strange Software
どうも！LSSです！！ 最近、Amazonで古い漫画を購入しました。 吾妻ひでお作品集 1~最新巻 [マーケットプレイス コミックセット] 作者:吾妻 ひでお 奇想天外社 Amazon ↑これなんですけどね。 既に別の版で読んだ作品も多いのですが、未読のものも多々あり、良い買い物をしたな、と思っています。 が、今のAmazonの金額を見てびっくり！！ ちょっと怖い金額になっていたので、自分のメールを読み返すと、自分が購入した時点では￥2255でした。 やはり年数が経っている事と、おそらくは発行部数もあまり多くない？事からだいぶレアな本になってしまっているのかもですね。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【CSS】色々なマーカーを考えてみました - Little Strange Software
どうも！LSSです！！ 先日の記事で、グラデーションをグラデーションしないようにしたら、よくあるマーカーになった話を書きましたが（←日本語大丈夫か？ｗ）、今回はそこからちょっとひねったようなマーカーをいくつか考えてみました。 マーカー色々（マーカーと言えないようなものもｗ） 上部が薄いマーカー マーカーというより筒のような？ ふちどりマーカー 上下薄くして淡い感じのマーカー ラジアルなマーカー 使い方 マーカー色々（マーカーと言えないようなものもｗ） 上部が薄いマーカー 例えば、こんな感じのサンプルみたいなの。 <span style="background-image: linear-gradient(transparent 40%,orange 95%);">こんな感じのサンプル</span> マーカーというより筒のような？ 例えば、こんな感じのサンプルみたいなの。 <span sty
どうも！LSSです！！ 最近、ブログ巡回しているとたまたまなんですが「神戸を含む関西方面への旅行」記事を、別々の３，４つのブログで見かけました。 それぞれ記事にされたタイミングが重なっているだけで、実際に来られたのは別々のタイミングのようですけどね。 little-strange.hatenablog.com ↑かなり前に、こんな記事を書いていたりもしましたが…やはり本当の旅行者目線になると、地元民の知らない新たな一面が色々あるものですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【CSS】（トリッキーな方法で）透過波紋！ - Little Strange Software
どうも！LSSです！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを２種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。 ただ…そもそもこのアニメーション、「radial-gradientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色（透過度含む）もま
どうも！LSSです！！ 本日、12/28から休暇に入りました！ とりあえずダラダラと過ごしましたｗ お昼には近所の たこ焼き屋さんへ。 うちのおかんぐらいの年代の女性が長年一人でされている店で、６時には店じまいするので休日でないと行けないようなところです。 と、行ってみると年内営業が今日まで！ギリギリでしたねｗ だしどんぶり（たこ焼き１０個入り ３００円）を店内でいただき、２０個持ち帰り（５００円） なかなか良心的な価格だと思います^^ で、帰宅後、例のプロジェクターでスイッチのYouTubeを起動し、「AKIRA」を観ました。 古いアニメの名作で、名前はあちこちで聞きますが…実は見たの初めてだったりしますｗ それがYouTubeで無料公開…されてたのが実は今日12/28までで、これまたギリギリの視聴ｗ ２時間もある長い動画を見たのも凄い久しぶりかも？ 「AKIRA」は先日、同じ作者さんの
【ゲーム？】鬼はそと福はうち【節分】 - Little Strange Software
どうも！LSSです！！ 節分にちなんだパズルゲームを作ってみました。 …これをパズルと言っていいかどうか疑問もありますがｗ 鬼はそと福はうち 突貫で作りましたが 鬼はそと福はうち ↑↓ ↓↑ 「◆」をクリックすると、内側と外側が入れ替わります。 「↑↓」をクリックすると、外側が時計回りに60度回転移動し、「↓↑」をクリックすると、外側が反時計回りに60度回転移動します。 「鬼」を全て外側に、「福」を全て内側に移動させるとクリア！ クリア判定で画面がピンク色になります。 突貫で作りましたが ゲーム性という点ではだいぶ疑問がｗｗｗ 「ただ『内側が鬼・外側が福』になるように回転させて、入れ替えするだけ」のものになりましたね。 イベントのちょっとしたお遊びには、この程度の方がいいのかもですが、もう少しなんらかの「やりにくさ」があるとパズルになるかも？ ってなとこで、今回はこのへんで！ 次回もまた、
どうも！LSSです！！ ちょうど一ケ月前。 little-strange.hatenablog.com それまで、Androidスマホ２台（YモバSIM＋格安SIM）＋iPhone１台（SIMなし）と３台も持ち歩いていたのをどうにかしたくて、新規でAndroidスマホのスペックちょっといいやつを中古購入してからの移行について書いていました。 「完全移行後は、特に理由はないけど２台の旧Android端末を完全リセットしようかな、と思っていたのですが、こうして後から気づく問題もあるとなると…今しばし残しておいた方が良さそうでもありますねｗ」 と書いていましたが、その「２台の完全リセット」を今日になってようやく実行しました！ …完全移行からこっち、まったく電源入れる事もなかったのでもういいかな、と。 さて、これで無事ミッション完了なのですが…この２台のスマホをどうしようかな。 一応、ググってみる
どうも！LSSです！！ ネッククーラー、持っていたのを動作確認したところ…線が千切れかかっていて、電源を入れても断線のためかすぐオフになる、という状況でした^^; 千切れかかっているのを繋いだら正常動作するのかもですが…この際、新たに買っちゃったんですね。 今日はそれを初めて装着して出かけてきました^^ バッテリ同梱型のネッククーラー ケーブルレスってこんなに快適だったのか！ バッテリ同梱型のネッククーラー ネッククーラー 冷却プレート Evo サンコー 扇風機 ヴィッセル神戸 モデル 熱中症対策 グッズ ペルチェ素子 専用バッテリー同梱モデル 軽量 THANKO TK-NEMB3-VX 首掛け スポーツ観戦 応援グッズ 2021年 携帯扇風機 アウトドア サンコー(Sanko) Amazon それがこちら↑ …って、今はりつけて気づいたんですが、今半額になってる！！（自分が買ったのはその
【CSS】フラフープの動きを再現できるか挑戦してみました【実用性：？？？】 - Little Strange Software
どうも！LSSです！！ 先日の記事、 little-strange.hatenablog.com を応用して使っていただいた記事の中で、 mio20100501.hatenablog.com コメント欄にて「最初は女の子がフラフープをまわす・・・をやろうと思ったのですが、フラフープが上手くいきませんでした。」と書いておられるのを見かけました。 フラフープ…だと奥行きを考慮する必要があり、輪が人を囲んで、人の後ろに隠れた部分の輪を見えないようにしながら動かす…という表現が必要になってきます。 それをCSSの3D表現でやってみたらどうなるかな？と思い、挑戦してみました！ フラフープ コード 人…？ と、作ってはみたものの… 追記 フラフープ コード <style> @keyframes hula{ 0%{transform:translateY(30px) rotateX(80deg) rot
どうも！LSSです！！ 最近、公式の「週刊はてなブログ」を読者登録したのですが、今日、 ↑こんな記事が出ていましたね！ はてなブックマーク、はてなブログにはデフォルトで、 はてなスター コメント はてなブックマーク と手厚く交流用の手段が用意されています。 公式からこういったアナウンスが出た事で、使われ方も変わってくるのかもですね。 そしてやっぱり、はてブ新着や人気に掲載される方法はナゾとの事ｗ アルゴリズムが変わった可能性もなんとなく感じています。 さーて、このブログが再び はてブに載る日は来るのかなぁｗｗｗ
【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software
どうも！LSSです！！ conic-gradientを使って、矢印を描いてみました。 2021/12/1 コードちょっと修正 左矢印 上矢印 あとがき 左矢印 ここ見て！ コード <style> .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff000000 30deg); background-size:50% 100%,100% 100%; background-repeat:no-repeat; width:1em;height:1em; } </style> <p>ここ見て！<s
どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要 なので、作り方としては リンクボタン CSS版 クリックするのはこちらです！ コード <style> .linkbtn{ border:1px solid black; border-radius:
謹賀新年 あけましておめでとうございます^^ どうも！LSSです！！ 本年もよろしくお願いします！ ちょっと遅めの時間（夕方）初詣してきました！ 初詣は一社だけでしたが、 無料のおみくじを用意しました！ ちょっと遅めの時間（夕方）初詣してきました！ 場所は、去年最初に行ったのと同じところですね。 一応 人はいましたがそう多くはなく（一家族かな）、密を気にせずに参拝できました^^ が、 賽銭箱のところに、こんな注意書きが。 なるほど、こういう形での対応があるんですねぇ。 というわけでガランガランは無し！！ 初詣は一社だけでしたが、 その後、三宮に出かけました。 さんちか（三宮の地下街）、センタープラザ（三宮商店街）、人は歩いていましたが店はほとんど閉まってて、センタープラザに至っては通路からシャッター・ロープで封鎖されている、という滅多に見かけない光景でした。 で、初詣するつもりはないながら
【CSS】linear-gradientで描く「斜め市松模様」 - Little Strange Software
どうも！LSSです！！ 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。 が、今回ふと、「 linear-gradient でも、斜め市松模様なら描けるのでは？」と思いつき、試してみました。 斜め市松模様 コード 斜め市松模様 応用 あとがき 斜め市松模様 斜め市松模様です。 コード <style> .chkptn{ height:3
はてなブログで始める！JavaScript超入門！ - Little Strange Software
どうも！LSSです！！ 今回は、 「はてなブログで始める！JavaScript超入門！」 と題して、 「プログラミング？やったことねー」 って人向けにさわりだけ書いてみます！！ 第一章 Hello World 第二章 変数を使ってみよう！ 第三章 計算ぐらいしておこうか 第一章 Hello World 大抵のプログラミング講座で最初の第一歩として書かされる「Hello World」をやってみます。 これは単に画面に「Hello World」と出力するだけのプログラムです。 まずは、はてなブログの「記事を書く」画面を開いてください。 ↑開いたら、「HTML編集」をクリックします。 HTML編集画面が開いたら、まず日本語変換をオフにして、そこに <div id=" と打ちます。 ↑すると、勝手に"がもう一つ付けられます。 （これは、はてなブログのHTML編集画面が持つ機能） カーソルは""の間
今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題ですが、まず記事編集画面に出てきたのが 「古今東西の「ＳＦ」を語りませんか？」 この「古今東西」にまず目が行き、まっさきに連想したのは…「竹取物語」ですね。 ＳＦの概念が無かった時代の、不思議を含んだおとぎ話のひとつでしたが、これほどもろに「宇宙人」が出てくる話もなかなかないかと。 「不思議を含んだおとぎ話」でいうと、他に妖怪・化け猫の話や隠れ里、異種婚姻譚など様々ありますが…さて、どこからがＳＦかな？って考え始めると、ＳＦってなんだろう、というところがよく分からなくなってきましたｗ ＳＦの概念のない時代に作られた話なので、「竹取物語」は「ＳＦとして解釈できるorしやすい話」というべきでしょうね。 それで行くと、他にＳＦっぽい日本昔話といえば…「浦島太郎」の話が浮かびます。 こちらは時間ＳＦで、後にアインシュタイン氏の特殊相対性
どうも！LSSです！！ 今週のお題「最近あった3つのいいこと」 いやぁ、びっくり！ はてなブログさんが公式にバトンイベントやるとは！ で、早速ながらバトンをいただいちゃいました^^ n-hikari.hatenablog.com hikariさん、ありがとうございます！ 追記。その後、 waqwork.hatenablog.com 義さんからもバトンをいただきました^^ありがとうございます！ 最近あった3つのいいこと 会社辞める、って言ったら即オファーがきて、雇用ではなく業務委託ではあるけれど凄い好条件で契約を結べた事^^ それにより、段階的に金銭的余裕が出来るので、株式投資を始めてみたところが、初心者らしい無茶もしてる割りに今のところかろうじてプラス収支である事（明日にはどうなってるやらｗ） 久々に更新されたブロガーさんがとてもおめでたい近況報告を伴ってこられたり、はてなを退会されていた
どうも！LSSです！！ 今回は「駄文中の駄文」カテゴリ。 いつにも増して訳分からない記事となっておりますｗ 「換字暗号」という暗号があります。 文字を別のもの（記号だったり別の文字だったり）に置き換えて意味を分からなくします。 文字ごとに、何に置き換えるかを決めておけば、そのルールを分かっている人同士の間だけで意味が通じる、という物ですね。 例えば、元の言葉が「こんばんは」だったとします。 こ→※、ん→？、ば→！、は→＄、と置き換えるルールだとしたら、「こんばんは」は「※？！？＄」となり、元の「こんばんは」という言葉を知らないと全く意味が分かりませんが、「置き換えルール」を取り決めた人同士であれば「※？！？＄」で伝わるわけです。 とりあえず暗号として使えるのは使えるのですが、「特定の文字を特定の記号に置き換える」という単純なルールのため、あまり多くの文例があると「凄い人」が解析に成功してし
どうも！LSSです！！ このブログに、 little-strange.hatenablog.com というカテゴリがあります。 HTML、CSS、JavaScriptなどの「さわりはじめ」だけを軽く説明するような内容で、はてなブログでも試せるような内容であるところからWeb関連の話のみになっています。 が、仕事のほうで「SQL超入門のさわりだけ」みたいな感じのものを今日ちょっと書いてみました。 タイトルはもちろん異なりますｗ が、「難しそう、と極力思わせないように」というのと「業務なのである程度の硬さ」のバランス…とか考えだすと、なかなか迷うところがあります。 とりあえず「１回２ページ」のを３回分書けたのは、ここで書いていた経験も役立ってるのかな、とか、逆に仕事で書いてる経験がブログの方にも活かせたりするかも？とか思う今日この頃です。 ってなとこで、今回はこのへんで！ 次回もまた、よろしく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】虹カード - Little Strange Software
CSSパズル 第二問！ - Little Strange Software
投資初心者 - Little Strange Software
【日記】久々のびっくりドンキー - Little Strange Software
【短文】おいでませ神戸 - Little Strange Software
【日記】年末年始休暇 初日 - Little Strange Software
【日記】スマホ２台初期化 - Little Strange Software
結局、ネッククーラーを新たに買いました - Little Strange Software
はてなブックマークの話 - Little Strange Software
【CSS】リンクボタン - Little Strange Software
あけましておめでとうございます！ - Little Strange Software
今週のお題「SFといえば」 - Little Strange Software
【お題】最近あった３つのいいこと - Little Strange Software
換字暗号 - Little Strange Software
【短文日記】超入門シリーズの話 - Little Strange Software