【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,#ff000000 90deg),conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff000000 30deg); background-size:50% 100%,100…

【お題】あったか～い

今週のお題「あったか～い」 どうも！LSSです！！ すっかり寒くなりました。 はてなブログの今週のお題も「あったか～い」で、まさにこの時期に切望されるテーマとなっていますねw 暖を取るのに、セーター・ヒートテック・コートなどの衣類であったり、ウォーキングなどの運動で温まるのも健康的ですが、まず「食べ物」で温かいものが欲しくなります。 特に、「鍋」や「うどん」などの汁物系！ と、ここで最近思うようになったのですが、温かい汁物にあわせて、薬味というか調味料もとても重要だな、と。 七味唐辛子のようなもののみならず、わさび・しょうが・柚子胡椒…といった刺激の強い調味料をたっぷり使うと、思いのほか温まり…

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

どうも！LSSです！！ このブログの、滅多に更新しないカテゴリのひとつに、「はてなブログサイドバーモジュール」というのがあります。 これまで、 little-strange.hatenablog.com little-strange.hatenablog.com の2記事書いていて、今回のが3記事め。 最初に設置した「サイコロ」を「立体サイコロ」に置き換えてみました^^ サイドバーの一番下に ちょっとだけ違うところ 方法はナイショ サイドバーの一番下に ↑こんな風なものを設置しました。 内容的には、このあいだの記事の little-strange.hatenablog.com とほぼ同じものと…

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

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

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

どうも！LSSです！！ 最近はサイコロネタ多めでしたが、またサイコロの話。 自分はめっきりTV見なくなったのですが、以前お昼時に「サイコロの各面に話題が書かれていて、出た目に従ってゲストにその話をさせる番組」がありましたね。 今どうなってるんだろう？とググってみたら、 ja.wikipedia.org これでした。 えーと…さすがに終了していましたね。 結構な長寿番組だったようで。 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software からのCSSでの3Dについては、フォトギャラリーへの転用とかも考えているところですが、ブログ的には「話…

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

どうも！LSSです！！ 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください コード コード解説（CSS部分） コード解説（JavaScript部分） 配列変数の設定 イベントリスナーの設定 あとがき サイコロをクリックまたはタップしてください .cb01{ position:relative; transform-style:preserve-3d; width:150px; height:15…

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

今週のお題「お気に入りの靴下」 どうも！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%{transform:rotate(360deg);} } .wa1{ box-sizing:border-box; width:250px;height:250px;/*外枠の大きさ 調整可*/ border-radi…

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

どうも！LSSです！！ JavaScriptには Math.random() が用意されており、簡単に乱数を生成する事ができます。 一方、CSSには乱数がありません。 ので、乱数が必要ならJavaScriptを併用すれば良いのですが、「CSSのみで疑似的に乱数を作る方法」の案を練っていたので、今回実際に作ってみました。（が、記事タイトル通り難アリです^^;） CSSで疑似乱数 コード 疑似乱数になる仕組み 問題点 結論：JavaScriptを使おうw CSSで疑似乱数 @keyframes rndma{ 0%{left:0px;} 100%{left:-600px;} } .rndm{ pos…

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

どうも！LSSです！！ CSSのbackground-image:radilgradientを駆使して、コードでサイコロの6つの目を描いてみます。 こういうのは一度作っておくと、色々使いまわせそうですね^^ 1の目 2の目 3の目 4の目 5の目 6の目 書き方は何通りか考えましたが… 早速、サイコロを転がしてみよう！ 色付きスケルトンダイス 1の目 .sai1{ width:150px; height:150px; border-radius:5px; border:1px solid black; background-color:#ffffff; background-image: ra…

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

どうも！LSSです！！ はい、いきなり背景がアレですが、お使いの端末は正常です（多分）。 10px方眼 コード解説 という冗談のような小ネタでした 10px方眼 article{ background-image: linear-gradient(#ffcccc00 90%,#ffccccff 100%) ,linear-gradient(90deg,#ffcccc00 90%,#ffccccff 100%)!important; background-size:10px 10px!important; } この記事の記事部分の背景に、「10pxの方眼」を描いてみました。 記事のHTML編集画…

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

どうも！LSSです！！ CSSのプロパティ＆値に、transform-style:preserve-3d;というのがあります。 HTML上に置いた要素を変形（拡大縮小・回転など）させるtransformプロパティを3Dに対応させるための指定…らしいのですが、これがもうひとつよく分からない。 【CSS】裏表画像めくり【カードをめくる改変】 - Little Strange Software のように、preserve-3dを指定しなくても「立体っぽい動き」にはなるので、指定した場合としない場合の違いが飲み込めずにいたんですね。 そして色々調べてみてたのですが、どうもこのpreserve-3d、使…

今週のお題「秋の歌」

今週のお題「秋の歌」 どうも！LSSです！！ はてなブログ、今週のお題が「秋の歌」との事なんですが…ずっともやもやっと考えていました。 「何か、とっても秋らしいイメージの歌があったはずだけど…なんだっけ？」ってw 定番でいうと で、思い出しました！ この曲を聴きたいばかりに 定番でいうと 「ちいさい秋みつけた」や「赤とんぼ」あたりがパッと浮かびます。 歌謡曲にも秋を歌ったものは多数あります。 が、個人的にそれら以上に秋っぽい歌があったんだけどなぁ… で、思い出しました！ www.youtube.com 「元祖天才バカボン」の後期エンディングテーマ、「元祖天才バカボンの春」です！ …タイトルに「…

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

どうも！LSSです！！ CSSのグラデーション、○○-gradient系は、できる事が多くて奥が深いです。 凝れば凝るほどコードが複雑になり、「分かりにくい」という印象を受けてしまう事も。 色々な事ができるがゆえに、色々やろうとすると難しい部分も出てきますが、「もっとも簡単なグラデーション」はとってもシンプルだったりします。 ごくシンプルなグラデーション例 色を付け足してみましょう 今回のまとめ ごくシンプルなグラデーション例 分かりやすい色で、「青→黄→赤」の順に変化するグラデーションを例に挙げてみます。 信号機の色ですね。 例えば「linear-gradient」なら、 backgroun…

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

どうも！LSSです！！ 予約注文したのは、もう数か月前になりますが、すっかり忘れた頃に発売日を迎え、届きました！ little-strange.hatenablog.com とりあえず表ゼルダクリアしました！ 2コンのマイクがない！ リセットボタンがない！ その他の仕様 まだたっぷり楽しめそう^^ とりあえず表ゼルダクリアしました！ ゲーム&ウオッチ ゼルダの伝説 (【Amazon.co.jp限定】オリジナルアクリルスマホスタンド 同梱) 任天堂 Amazon このゲーム＆ウォッチ、初代の「ゼルダの伝説」、二作目の「リンクの冒険」、GB版「夢をみる島」と、ゲーム＆ウォッチ「バーミン」のキャラを…

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

どうも！LSSです！！ またクリスマスが近づいてきていますね。 コンビニとかで、チキンやケーキの予約のPOPを見かけたりするようになりました。 このブログでは昨年、 【CSS】CSSでクリスマスツリーを描いてみる【第三弾】 - Little Strange Software といった感じでCSSお絵描きでクリスマスツリーを描いたりしていましたが、ツリーを構成する三角をborderで表現していたんでした。 【CSS・border】borderで三角形が作れる！？という事に今更びっくりした話 - Little Strange Software が、今年は「conic-gradient」が使えます！…

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

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

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

どうも！LSSです！！ ふと思いついた動作があって、JavaScriptで作ってみました。 なにか…ゲームになりそうで、まだなってない、そんな謎の状態ですが公開してみます！ まるを大きくするゲーム未満のなにか 遊びかた（？） このスクリプトのコード あとがき まるを大きくするゲーム未満のなにか #gamen{ position:relative; height:330px; overflow:hidden; } #maru{ position:absolute; width:100px; height:100px; } 下の〇をクリックしてスタート！ g=false;//ゲーム開始フラグ s=…

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

どうも！LSSです！！ なにげなくAmazonを見ていると、ふと面白そうなおもちゃを見つけました。 フライングボール 対象年齢6歳以上 フライングボール FLYNOVA PRO ミニドローンおもちゃ 球状飛行ジャイロ フライングボール 360°回転 スピニング LEDライト 付き自動回避機能 超軽量 子供/大人向けギフト 誕生日ブーメランスピナーおもちゃプレゼント アップグレード - 青 FLYNOVA Amazon ボールのようでもあり、ドローンのようでもあり？ 中にプロペラが入っていて、空中で不思議な動きをするおもちゃのようです。 なにより価格がお手頃w 類似商品が多数あるようで、知らない…

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

どうも！LSSです！！ ちょっとconic-gradientを使った実験です。 スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。 実用性は…結構邪魔かも？なので、現段階では「実験」扱いです^^; 消す時はここから コード 消す方のコード あとがき 消す時はここから #ray{ position:fixed; top:0px; left:0px; width:100%; height:100%; pointer-events: none; background-image:conic-gradient(at 100% -10%,#fffff…

突然ICOCAデビューした話

どうも！LSSです！！ 現在、通勤のために、神戸市バスと阪神電車の通勤定期券を使用しています。 どちらも6カ月定期で、磁気定期券。 ただし、最初の購入時期が違うので、それぞれの期限には時間差があります。 そんな自分が、全く不意に交通系ICカード、ICOCAデビューする事になったお話です。 市バスの定期更新 便利なはずのICカード、ですが… なんにせよ、慣れていかなきゃですね 市バスの定期更新 去る11/3、期限が迫っていた神戸市バスの定期券の更新をしようと出かけたんですね。 半年に一度のペースとはいえ、もう何度も行ってるので、あの分かりにくい場所にある販売所（三宮）に行くのも、申し込み用紙の記…

【CSS／小ネタ】青い〇

どうも！LSSです！！ 先日の記事、 にいただいたブクマで、 tn198403s ばってん。なるほど強調するのに良さそうです。これを応用すれば丸（楕円）とかもできるのでしょうか？あるいは、カーソルを載せたら×や〇が表示されるとか…。すみません、使い途をいろいろ想像しちゃいました。 2021/11/07 とのコメントをいただきました。 なるほど、対になる「〇」があれば、簡単なクイズとか作れそうですね^^ という事で、作ってみました。 青い〇 コード クイズ みたいなクイズのコード あとがき 青い〇 あいうえお かきくけこ さしすせそ コード あいうえお <span style="backgrou…

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

どうも！LSSです！！ 本日、11/7をもって、「はてなブログ」がサービス開始から10周年を迎えました！！ おめでとうございます^^ それにかこつけて、昔作った曲を思い出して書いてみましたw hatenablog.com 10周年特別お題の期限はまだ残っています ふと、むかーし作った曲を思い出して書いてみたり ちょっと調べてみて知った意外な話 10周年特別お題の期限はまだ残っています blog.hatenablog.com 参加するともれなくレッドスター10個がもらえちゃうお題キャンペーンの期限は11/24までですので、まだ遅くはないですね^^ ふと、むかーし作った曲を思い出して書いてみたり …

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

今週のお題「赤いもの」 どうも！LSSです！！ ちょっと使い勝手良さそうな？CSSネタを思いつきました。 赤いバッテン コード コード別例 あとがき 赤いバッテン ちょっと前に思いついたCSSネタを、今週のお題にも合うかも？と思い、お題に便乗公開してみます。 コード <span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff0000…

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

どうも！LSSです！！ 既にお気づきの方もおられると思いますが、今朝（2021/11/5 AM）、このブログのタイトル部分の装飾をリニューアルしました！ 今回のリニューアルデザイン 一応、コード解説 さて、この対角線の黄緑と黒のデザインですが 今回のリニューアルデザイン ↑スクリーンショット はてなブログの「デザインCSS」に、下記のコードを追加しました。 コード #blog-title-content{display:inline-block;background-image:linear-gradient(to bottom right,#aed58180 50%,#00000080 51…

【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,gray,white), linear-gradient(blue,lightblue), linear-gradient(white,lightgreen,white…

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

どうも！LSSです！！ 先日公開した little-strange.hatenablog.com の、ツール自体のコードです。 ざっくりした解説もつけてみました。 【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Software 【JavaScript】コード作成ツールの作り方【コード出力篇】 - Little Strange Software を基本とした、ちょっとややこしくなった（カラーパレットを増やせる部分）感じですね。 コード ツールを構成するHTML 初期設定 fctradd関数 「色追加」ボタンが押された時の処理 fctr関数「カラーパ…

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

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

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

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