どうも！LSSです！！ CSSをいじっているうちに、また謎のアニメーションができました。 光の龍…？ コード 仕組み どうしてこうなった 光の龍…？ コード <style> @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } .stardragon{ position:relative; height:200px; background-color:black; } .stardragon div{ position:absolute; top:0;left:0; width:100%;

どうも！LSSです！！ little-strange.hatenablog.com に使用した、「h2見出しを透過波紋にするコード」を公開します。 コード と、なにげなく仕込んだコードを晒してみましたｗ コード <style> @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 30%,100%{background-size:2000% 2000%,100% 100%;} } article h2{ background-image: radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#888

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

どうも！LSSです！！ CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradientによる背景模様生成ツール 開始角度： 中心位置（横）： 中心位置（縦）： 繰り返し： 色1：　色2： 幅： 高さ： ランダム設定 コード 使い方 最初は、白と黒の格子模様、オレンジ色

どうも！LSSです！！ 今回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな？ サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかないと上の行と重なってしまいます。 コード ただし<span style="display: inline-block; transform-origin: 0% 50%; transform: rotate(-25deg); padding: 0 0.5em 0 1em; background-image: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg); color: #ffffff;">重要</span>適宜、改行を入れるなどしておかないと上の

どうも！LSSです！！ はてなブログのコメント欄は（全てではないと思いますが）HTMLタグを書く事ができます。 例えば、 <img src="画像ファイルのURL"/> のように書くと画像を挿入できたり。 ところが、ですね。 タグが有効である、という事は逆に言えば「こういうタグを使うんですよ」って伝えたい場合にもタグが有効になってしまい、「コードとして」書くのに困難を生じます。 今回はそんな場合の解決策を２つ、書いてみます。 解決策　その１「全角で書く」 解決策　その２「HTMLエンコード」 解決策　その２を手軽にする方法 解決策　その１「全角で書く」 HTMLタグは「<」と「>」で囲んで記述します。 この２つの記号さえなんとかすれば、問題は解決します。 なので、 「＜img src="画像ファイルのURL"/＞」のように「<」と「>」だけを「全角記号」で書き直して、「＜と＞は半角に直して

どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル 桜の花、開く季節に… コード <style> .hnbr{ border-radius:10px; padding:10px; border:6px groove #ffcccc; background-image: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg); color:#ffffff; font-size:27

どうも！LSSです！！ 【CSS】水滴【小ネタ】 【CSS】水滴・改変【小ネタ続編】 と続けた水滴ネタですが、実は元々作ろうとしていたものの派生でした。 今回、その元々作ろうとしていたものができたのでお披露目します^^ 透過ボタン コード 透過なので… ボタンの動きの是非 何も起こらないボタン 透過ボタン ボタン コード <style> .aquabtn{ position:relative; display:inline-block; width:150px;height:60px; } .aquabtn div{ position:absolute; width:100%;height:100%; top:0px;left:0px; border-radius:10px; display:flex; justify-content:center; align-items:center;

どうも！LSSです！！ やたら２が多い日、2022年2月22日、皆様いかがお過ごしでしょうか？ LSSはですね…このただでさえ２が多い日に、ICOCA定期券２枚持ちがいつかやるだろうと警戒していた事をついにやっちゃいました^^; まず、現状確認から ICOCA定期券２枚持ちのリスク 前置きが長くなりましたが、今日のやらかしの話 すぐに気づけたからいいけど という事で、同様の不安を持たれている方、 まず、現状確認から little-strange.hatenablog.com 通勤に、神戸市バスと阪神電車を利用していたLSS。 当初はどちらも磁気定期券だったのですが、神戸市バスが磁気定期券撤廃するとの事でやむなく市バス定期券をICOCAに。 市バスはICOCAの場合、乗る時と降りる時に２回タッチが必要、磁気定期券なら降りる時に見せるだけで良かったので、圧倒的に不便になります。 一方、阪神電車

どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要 なので、作り方としては リンクボタン CSS版 クリックするのはこちらです！ コード <style> .linkbtn{ border:1px solid black; border-radius:

チョコの色： フチ： 幅　： 高さ： ↑の「チョコの色」「フチ（３種）」「幅」「高さ」の内容を変更できます。 変更するとリアルタイムに↓のサンプルと「コード」の内容が変化します。 サンプルを見ながら↑の項目を調節して、その時点での「コード」をコピーして、あなたのブログやWebサイトのHTMLに挿入する事で使用できます^^ コード というものを作ってみたのですが バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたｗ と、そもそもCSSで板チョコを作ろうと思ったのが、 non704.hatenablog.com norikoさん(id:non704)の↑の今日の記事を見たからだったりします。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ だいぶ前から「なんとなく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。 その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけｗ 「動」と「静」の組み合わせでメカっぽい動き…ですね。 どんな見た目にするかアイデアが浮かびませんが、なんとなく雰囲気だけ、お伝えしてみようと試みる記事です。 ウィーン、ガシャン。 コード 概要 ウィーン、ガシャン。 なんだかよくわからないものを作ってみました。 いやぁ、以前からなんとなく 「ウィーン、ガシャンって感じのCSSを作ってみたい」 と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？ コード <style> @keyframes wga{ 0%,23%{background-position:0px 0px,0px 0px;

サイズ調整 どうも！LSSです！！ 【完成版】１５パズル、作りました！！ - Little Strange Software から、かなり経過しましたが、15パズル画像版の完成です！！ 遊び方 Special Option ファイルを選択 サイズ調整 遊び方 元の一枚の画像を、縦４つ横４つの１６分割したコマが１５個あります。 ※元画像の一番右下に当たる部分が欠品となっています。 そしてコマの無い「空きマス」には、元画像がモノクロで薄暗く見えています。 「空きマスと縦か横に並ぶコマ」をクリックする事で、コマをスライドさせられます。 空きマスに見える元画像をヒントに、全てのコマを正しい位置に配置する事を目指すパズルゲームです。 Special Option 盤面の下に、 ファイルを選択 サイズ調整 があります。 ファイルを選択 これが、今回の「15パズル画像版」の超目玉機能です！！ ここから、

どうも！LSSです！！ 15パズル画像版に手をつけはじめて、ほぼほぼ出来かけているのですが…謎の10pxぐらいのズレに気づき、marginやらpaddingやら設定しても治らず。 と、すっごく単純なコードで試しても再現する事に気づき、初めて「imgタグそのものにそういう仕様がある」事を知りました^^; 現象の再現 解決策 あとがき 現象の再現 わずか、これだけのコード↓で現象を確認できます。 <div style="border: 1px solid black;"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220117/20220117221539.jpg" /> </div> divタグの範囲が分かるように、border: 1px solid black;を指定する事によって

どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン　その１ バクダン　その２ 雲型の枠　その４ その他の調整について あとがき バクダン　その１ バクダン　その１ ちなみに、このトゲの数は幅・高さに応じて変化します。 サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!-- .bakudan1{ border:30px solid transparent; border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%

どうも！LSSです！！ 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、 little-strange.hatenablog.com で background-image になら当ててみた事がありました。 それを border-image に応用すると、gradientゆえに苦労する部分が緩和されるのでは？と思い、再び挑戦してみました。 雲型の枠 挑戦中 コード あとがき 雲型の枠 挑戦中 雲型の枠　その１。 ちょっとモクモク感が足りないかなぁ？ 元々のイメージから考える必要がありそう。 雲型の枠　その２。 こちらは半円がそのまま出ていますが、これだとちょっとモク

どうも！LSSです！！ 昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。 little-strange.hatenablog.com ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模様にあわせる、というもので、文章中に高さが変わる要素…例えば文字を一部大きくするとか、画像を入れるとか、見出しをまたぐなどであっさり崩れてしまいます^^; それらの問題をクリアできるわけではないのですが、都度 <div class="keisen">中の文章</div> を入れるのも使い勝手が悪いな…と思い、「ブログ１記事全文を罫線表示する」際に扱いやすいコードに書き換えてみました。 ※はてなブログ向けです。 なお、今回は過去記事にコードを突っ込み、表示例としています。 コード その１ コード

どうも！LSSです！！ little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コード コード中の色指定について ２つのconic-gradientでレンガ模様を作る仕組み conic-gradient凄い！ あとがき レンガ模様 conic-gradient を使うと、実にスッキリ、かつ強引さもなく、綺麗にレンガ模様が描けてしまいました！ コード <style> .conicrenga{ height:150px; font:120% bold; padding:0.6em; background: conic-gradient(at 5% 45%,#ccaaaa 90deg,transparen

どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。 実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。 コード <style> .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,

どうも！LSSです！！ 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style> #omikuji{ width:280px; padding:10px; font-size:40px; font-weight:bold; background-color:#eeeeee; border:1px solid black; background-image:radial-gradient(circle 80px at 70% 30%,white,#eeeeee); user-select:none; } </style> <div id="omikuji">おみくじ</div> <script> cnt=0; kuji=