どうも！LSSです！！ ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりｗ 解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。 丸で囲む文字 PC＋Chromeではそこそこ正常 解決策はありそうな気がするのですが… 丸で囲む文字 こんな風に、丸に光を入れてもオシャレ？かもですね。 コード こんな風に、<span style="letter-spacing: 0.2em; background: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#ffffff00 95%) -0.1em -0.1em/1.2em 1.2em repeat-x,radial-gradient(closest-side circle,#ffcc44 94%,tran

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

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

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

どうも！LSSです！！ 10/19に発売された「ウルトラジャンプ」という月刊漫画雑誌に、とんでもない作品が掲載されている、というのをTwitterで見かけ、早速買いに走りましたｗ 魔老紳士ビーティー 元ネタは荒木飛呂彦先生の初連載作 魔老紳士ビーティー ウルトラジャンプ 2021年11月号 表紙左上にどーんと載ってますね。 1982年に読み切り、1983年に連載作品が描かれた「魔少年ビーティー」の60年後を描いた作品です！ 魔少年ビーティー (少年ジャンプコミックス) 作者:荒木 飛呂彦 集英社 Amazon 元ネタは荒木飛呂彦先生の初連載作 ですが、今回描かれているのは、シナリオ・作画ともに別の方です。 多分本人だったらここまでやらないんじゃないか？と思われるほどの他荒木作品のネタをつめこみまくっています！ 表紙からも↑の「魔少年ビーティー」の表紙絵をそのまま老紳士に描きかえていますが、

どうも！LSSです！！ CSSのキーフレームアニメーションは、「要素」を滑らかに変化させる事ができます。 ※ここでいう「要素」はHTMLを構成する<div>などのタグによる領域を指します。 「要素」の変化の対象となるCSSプロパティはかなり多くのものが対応しています。 例えば「要素」のうちの「背景」についても、background-positionを変化させる事で表示位置を滑らかに移動させたり、background-sizeを変化させる事で大きさを滑らかに変化させる事ができます。 が、このbackground-系のプロパティに「角度」を指定するプロパティが無いんですね。 背景に画像ではなくグラデーションを指定する、 linear-gradient や conic-garadient という関数の中には 表示角度を指定する箇所がありますが、それらはアニメーションの「滑らかな変化」には対応して

どうも！LSSです！！ 昨日の「【JavaScript】アナログ時計を作ってみました 」、コード解説がスクリプト部分に触れていなかったので、その解説記事を書き始めていたのですが…わずか数行のコードなのにとても長くなりそう^^;;;;; で、とりあえず中断して下書きに置いておき、後で続きを書く事にしました。 どうも、文章を書くよりも、CSSやJavaScriptのコードを書くほうが楽なのでは？ という、自分の言語適性（？）に疑問を感じる今日この頃ですｗ （他に、手書きで文字を書くよりタイピングの方が楽だったりもしますね） ところで、もう９月も終わろうとしていますが、先週までなんやかやとあった祝日、１０月は全くないんですね。 祝日は休みですが、その分平日が忙しくなるタイプの仕事をしているもので、残念なような嬉しいような、こちらも妙な感覚ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしく

どうも！LSSです！！ CSS等の動作テスト用iPhoneが欲しいなーと思いながら、未だに入手していません。 iPhoneの標準ブラウザ「Safari」がいくつかのCSSの実装が間に合っていなかったり、解釈が違ったりするから、なんですが、また新たにこのブログで使っていたネタの不具合が見つかりました。 最近よくLSSのブログのネタを使っていただいている、noriko(id:non704)さんのところで分かったのですが、 non704.hatenablog.com こちらのコメントに、LSSのところにもよくコメントを下さっている421miyako(id:m421miyako)さんのコメントで、裏側が反転して見えてしまう、という現象が！ transform:rotateY(180deg); で裏返した要素は、デフォルトでは裏側からみたように反転してみえます。 こんな感じ <span style=

どうも！LSSです！！ 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。 コードの簡略化、class名を１つにまで削減などを行っています。 参考記事: チェックボックスとラベルの話【HTML編】 チェックボックスとラベルの話【CSS編】 【CSS】本のページをめくるCSS【シンプルに改善版】 裏表画像めくり コード 縦横比が極端に違う画像を使うとどうなるか 裏表画像めくり 画像をクリックすると裏返ります！ コード <style><!-- /*画像が入る枠の設定*/ .imgreverse{ position:relative; display:inline-block; perspective:700px;/*この数字を小さくするとダイナミックな動きになります*/ wid

どうも！LSSです！！ かれこれもう長い間、ほとんどテレビを見ない生活を送っています。 子ども時代にはまぁ普通に見ていたのですが（あまり普通じゃない見方をしていた可能性も？）、テレビ番組にはCMがつきものですね。 意匠をこらし、TV局に膨大なスポンサー料を払って短時間放映されるTVCM。 視聴者としては邪魔に思う事も多いですが、とあるCMが特に強く印象に残っていました。 といっても、あまり長期的に放映されたCMでもなく、しばらく何度か遭遇しては見かけなくなるのがCMの常。 「あれはいったい、どのように作られたんだろう？作詞・作曲者は誰なんだろう？」 と気になって、昔 調べてみた事もありましたが、当時は情報が見つからず、諦めていました。 が、最近になってふと、ネットで検索してみると…あっさり見つかったんですねｗ ムシペール１２号 曲が！歌が！！ 久々に見ましたが 今、見つけられる情報はこのぐ

どうも！LSSです！！ ふと思いついて、これまでに試した２つの小ネタを合体させてみました。 小ネタ＋小ネタ＝あわせても小ネタ、って感じですがｗ こんな枠、どうでしょう？ コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう？ と、単なる枠に対する装飾なので、使い方は自由自在！ スマホで見るとまたちょっと形の印象が違うかもです。 コード <p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; border-radius: 30%/10%; width: 100%; height: 400px; padding: 28px;">中に入れる文章</p> 元ネタ 上記２つの記事で使ったネタを併用して

どうも！LSSです！！ チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが２つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkbx2" type="checkbox" /> <label for="chkbx2">ここをクリック</label> この「チェックボックスにチェックが入った時」に、ラベルの文字の背景色がピンク色に変わるよ

どうも！LSSです！！ はてなブログには、キーワードリンクの機能があります。 普通に記事中に、どこかの誰かが登録したキーワードが入っていると、自動的にその意味を解説するページへのリンクになる機能ですね。 実際、この「はてなブログには、キーワードリンクの機能があります。」という一文にも「はてなブログ」と「キーワードリンク」の部分に自動的にリンクがかかっています。 ブログを読んでいる時に、ちょっと単語の意味が分からない時など、即座に見に行ける便利な機能ではありますが、時として邪魔になるケースもありますね。 そんな時に、「そこだけ無効化」する方法があります。 ※ブログ設定でキーワードリンク無効化を設定する事もできます。ただしその場合はそのブログ全体でキーワードリンクが動作しないという事になります。 キーワードリンクを無効化する書き方 他に、URL貼り付け時にも無効化できます！ おまけ：無効化の無

どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、 「勉強したいが、コードを見てもなんのことやら…」 という方向けに、仕組みの基本的な部分を解説してみます。 HTMLでの記述と、CSSでの記述の合わせ技となりますが、まずはHTML部分について。 CSSについ

今週のお題「爆発」 どうも！LSSです！！ はてなブログのお題「爆発」…にかこつけたCSS小ネタです^^ 爆発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ 爆発しますよ コード <style> @keyframes bkhta{ 0%,70%{text-shadow:none;} 71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;} 85%{text-shadow:0px 0px 30px orange,0px 0px 30px orange,0px 0px 60px red;} } .bkht{ font-size:200%; animation:bkhta 5s linear 0s infinite; } </style> <p>

どうも！LSSです！！ 先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。 コード <style><!-- @keyframes bfrnda1{ 0%,20%{transform:rotate(0deg) translateX(0px) scale(1);} 60%{transform:rotate(360deg) translateX(70px) scale(4);} 100%{transform:rotate(720deg) translateX(0px) scale(1);} } @keyframes bfrnda2{ 0%,30%{transfor

どうも！LSSです！！ 以前、Windows11が発表された時に、 little-strange.hatenablog.com って記事を書いていましたが、ついにリリース日決定のニュースが出ました！ pc.watch.impress.co.jp 10月5日リリース、無償アップグレードも同日開始！ あと、すっかり忘れていたんですがｗ その流れで、AmazonAppStoreについて調べてみました それじゃ、どうやって開発者はAmazonのほうに公開登録するんだろう？ 10月5日リリース、無償アップグレードも同日開始！ 「2021年後半」とされていたリリース日、気づけば後半に入ってましたがｗ、１０月５日と決定したそうです！ あと一ケ月ちょいですね^^ そして、おそらく多くのユーザーに絶望を与えたであろう「互換性のチェックツール」は… 新しい Windows 11 OS へのアップグレード |

どうも！LSSです！！ ちょっとした思いつきで作ったCSSアニメーションです。 渦巻きアニメーション コード コード解説 あとがき 渦巻きアニメーション 文の頭につけたマークが渦を巻いて回転するアニメーション コード <style><!-- @keyframes bfrnda{ 0%,30%{transform:rotate(0deg) translateX(0px);} 65%{transform:rotate(900deg) translateX(70px);} 100%{transform:rotate(1800deg) translateX(0px);} } .bfrnd:before{ content:"＊"; display:inline-block; transform-origin:0% 50%; animation:bfrnda 8s linear 0s infinite

どうも！LSSです！！ 以前に、 【CSS】本をめくる、という動作をCSSで表現してみました。 というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^; コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。 理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。 その後、色々試行錯誤していましたが、だいぶ楽にページ追加可能なものができました^^ ついでに、本のサイズも「縦横比を保ったまま、スマホ画面でもPC画面でも幅めいっぱい表示」するようにしています。 本のページをめくるCSS コード ページ追加について 本自体の設定 本のサイズ ページをめくる速度 本の見ため あとがき 本のページをめくるCSS あいう

どうも！LSSです！！ ８月ももうすぐ終わりですね。 今日は前髪がだいぶ伸びてきていたので、やっと散髪にいってきました！ 出かける時は、たいてい市バスを利用するんですが、 三宮に出る際によく使う市バスが２種類あります。 ９０系統と９２系統っていうんですが、９０系統は９２系統に比べて本数が極端に少なく、三宮までは同じようにたどり着くのであまり違いを気にしていませんでした。 で、今日乗ったのがたまたまレアな９０系統の方。 終点は「中突堤中央ターミナル」となっています。 中突堤ってなんだ？ｗ 行きたい散髪屋さんが三宮より更に先にあるところだったので、終点まで乗って行ってみました。 普段、終点まで乗らないバスに乗ったらこんなところまできたw pic.twitter.com/P8mq68yy5v— LSS (@LSS0324) 2021年8月29日 降りたところのすぐ近くで撮った写真が↑。 要するに