どうも！LSSです！！ 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^…
どうも！LSSです！！ 昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。 「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使え…
どうも！LSSです！！ 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数で…
どうも！LSSです！！ 昨日の記事の実験、 を用いてサンプルを作ってみました。 まず最初は普遍的な（？）ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦！です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示…
どうも！LSSです！！ だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操…
どうも！LSSです！！ 今回は、これまただいぶ前に考えたネタです。 ブログを書いたり、SNS投稿したりされている方には身近な問題ですが、この記事は「半分冗談、半分本気」ぐらいのていだと思ってくださいねｗ 世の中には凄い人がいるもので 偽本名 偽本名を…
どうも！LSSです！！ 昨日の記事、 に関する、余談なんですが…。 なんとなく…ハンバーガーメニューについて考えているうちに、 【CSS】丸から四角に変形するボックス - Little Strange Software は、「ビッグマックにしようか、てりやきバーガーにしようか」…
どうも！LSSです！！ なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈？なんかに使えるかもですね。 丸から…
どうも！LSSです！！ ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し１個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか</div>…
どうも！LSSです！！ 昨日買ってきた「IDE端子のHDDをUSB接続するケーブル」を使って、古いHDDを覗いてみました！ …が、結論からいうと…全然はかどりませんｗ ４台めでストップしています^^; 一台め 二台め 三台め 四台め 今日のところはここまで！ 一台め …
どうも！LSSです！！ 今日は３連休の中日でしたが、人と約束があったので、あまり普段出勤する時と変わらない時間に家を出ました。 大阪にGo！ 14時頃に用事完了！ んで、日本橋を１８時頃まで徘徊していました 過去資産・IDE接続のHDDをUSB接続するケーブル…
どうも！LSSです！！ 今回は、ちょっと役にたつかも知れない？？CSSを組んでみました。 最近ちょこちょこやってた事の合わせ技みたいな感じです。 横長の写真を横スクロールするスイッチ コード スイッチになる部分 スクロール速度 不要な文言 シンプルにし…
どうも！LSSです！！ だいぶ久々に？デザインCSSを触ってみました。 …微々たる変更なんですが^^; 実は以前からやってみたかった！ 書き足したコード、わずか２行 実際どうなるかは… 追記！見出しが複数行になった場合の対策 実は以前からやってみたかった！ …
どうも！LSSです！！ 先日買ったタブレットに搭載されているアレクサで遊んでみた話。 アレクサ面白い！！ 音楽をかけてもらう 聞き間違い・誤解もまた楽しいｗ アレクサ面白い！！ この間、タブレットのFire7を買った話を書きましたが、これ「アレクサ」搭…
どうも！LSSです！！ 昨日の記事のあれ。 マリオに触発されて、とりあえず「クリックで動き出す」部分だけ作れて、入口に到達したつもりになっていましたが、「当たり判定」の方がCSSでは格別むずかしいですね^^; これまた見当もつかないｗｗｗ で、ソースは…
どうも！LSSです！！ 今日、Twitterであるリツイートを見かけました。 きっかけとなったリツイート ボタンを押すとスクロールし始める背景 今回のコード、以前使ったものの改変です それにしても…すごい！ きっかけとなったリツイート htmlとcssだけjsなしマ…
どうも！LSSです！！ ちょっと論理パズルの問題を考えたので、出題してみます！ （でも、もしかしたらどこかに同じ問題があったかも知れない^^;） この話に登場するA,B,Cは全て「本当の事しか言わない正直者」か「常に嘘をつく嘘つき」のどちらかです。 ３人…
どうも！LSSです！！ またタブレットを購入してしまいました。 Fire7 16GB 自分的に初のアレクサ搭載端末 7インチ端末 最大の理由 安かったから あとがき Fire7 16GB Fire 7 タブレット (7インチディスプレイ) 16GB 発売日: 2019/06/06 メディア: エレクトロ…
どうも！LSSです！！ 久々「つまづき」カテゴリの記事になります。 福笑い（未完成） 一応、遊べなくはないです ＰＣの場合 スマホの場合 SVGでやろうとして撃沈 福笑い（未完成） じ へ の へ の も へ // 0) && (jx コード <svg id="svge" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" style="background-color: lightblue;"> <text x="0" y="95" style="font-size: 100px;">じ</text> <…</svg>
謹賀新年 あけましておめでとうございます^^ どうも！LSSです！！ 本年もよろしくお願いします！ ちょっと遅めの時間（夕方）初詣してきました！ 初詣は一社だけでしたが、 無料のおみくじを用意しました！ ちょっと遅めの時間（夕方）初詣してきました！ 場…
どうも！LSSです！！ ２０２０年もまもなく終わりを迎える今、「振り返り記事」をがっつり書いてみようと思います^^ 2020年1月 2020年2月 2020年3月 2020年4月 2020年5月 2020年6月 2020年7月 2020年8月 2020年9月 2020年10月 2020年11月 2020年12月 皆様、…
どうも！LSSです！！ 今回はCSS小ネタです。 傍点のサンプル text-emphasis 傍点のサンプル こんな風に、目立たせたい部分の上部に点をつけられます！（dot） こんな風に、目立たせたい部分の上部に点をつけられます！（circle） こんな風に、目立たせたい部…
どうも！LSSです！！ 以前に書いたCSSで、 が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^ で、今回はそれを改変したものを作ってみました！ もうすぐ年が明けるので、お正月っぽい？和風テイストの「鹿威しししおどし」風に仕…
どうも！LSSです！！ 昨日の記事、 スマホでは動作しませんでしたが、今後これを使ってブラウザゲームとか作る上ではやはり、スマホでも遊べるようにしたい！！ というところで、スマホ対応を試みてみました！ マウスドラッグかスマホスワイプで移動する「も…
どうも！LSSです！！ JavaScriptに「マウスドラッグイベント」というものがあります。 Webページ内の要素に対して、マウスドラッグを行おうとした時に発生するイベントで、これを仕込んでおくと ドラッグが開始された時 ドラッグが終了した時 ドラッグ中 な…
どうも！LSSです！！ 先日、クリスマスの記事、 の中で、強引にブログ記事の背景などを書き換えていました。 次のイベントといえば「お正月」ですが、「１記事限定で正月らしい紅白模様にする」コードを公開してみますｗ サンプルとコード 使い方と解説 あと…
どうも！LSSです！！ 今日が、今年最後の出勤でした。 「今年最後の出勤」であって、「仕事納め」ではないのが、コロナに翻弄された2020年らしいところで、月曜の在宅勤務が仕事納めですｗ 昨日の記事、 に多数のコメント・ブクマありがとうございました^^ …
どうも！LSSです！！ この記事限定で、めっちゃ雪を降らせてみました。 …なお、そのままだと他のリンク等が操作不能になるため、画面内でクリックすると停止するようにしています。 // コード <style>
どうも！LSSです！！ 今、こうして記事を書いている「はてなブログ」もSNSの一種ですが、SNSっていうと他にfacebook、Twitter、YouTube、インスタグラムなどがありますね。 各種SNS、それぞれに特徴があって、ユーザーの方がおられます。 我らが（？）はてな…
どうも！LSSです！！ ちょっと試みてみたい事ができたので、やってみました。 背景多重アニメーション コード解説 大きいものと小さいものを描いているのは、 また、それに動きを与えているのは、 「縦移動」の動きの内容の指定をしているのは、 「横移動」…
