…！ 昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。 「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使える？そして、その方法だとすり抜けて（？）アニメーションしたりして！？」 …と。 と、いうわけで、試してみたのですが…結論から言うと失敗です^^; グラデーションがアニメーションしない 半分は成功…？ transiti…

…SSです！！ 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数では？ CSS変数を変数的に扱えるかも！？ 実験！！ コード うまくいきました^^ CSS変数とは 基本的な使い方を簡潔に書くと、例えば width:100px; という指定をかけたりする際に、 --w1:100px;width:v…

…みよう、と「タブ」をCSSで実現するのに挑戦！です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示・サンプル カンマチルダ文字数CSS #nkm1,#nkm2,#nkm3,#nkm4{display:none;}のように、カンマ区切りで複数のidに対して一括で指定する事ができます。…これ、知ってても忘れそうになりますね^^; #rdb1:checked~#nkm1{display:block;}この「~」は「兄弟要素」を指定する事ができ、…

…クボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操作によるオン／オフ切り替えは、この「チェックが入ってるか否か」ぐらいしか方法がないようです。 ですが、「HTMLのフォームパーツ」で「チェック状態にできる」ものとしては、チェックボックスの他に「ラジオボタン」があります。 ラジオボタンってのは、 こんな風に、「いくつかの選択肢から一つを選んで、ひとつだけ有効になる」というパーツですね。 今回はこの、「ラジオボタン」でも「Ja…

…えているうちに、 【CSS】丸から四角に変形するボックス - Little Strange Software は、「ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。（ちなみにビッグマックが好きですｗ） スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですｗ 余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね！ 詳しくは、 note.com こんなノートを見つけま…

どうも！LSSです！！ なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈？なんかに使えるかもですね。 丸から四角に変形するボックス コード 解説 あとがき 丸から四角に変形するボックス 右にある、ピンク色の丸にマウスカーソルをあわせてみてください^^（スマホの方はタップ） ここに適当に文章を書きます。brタグによる改行もできます。この部分…

…てみます。 デザインCSSと定型文 要するに、見出し１個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか気にしなくて良くなりました！ デザインCSSと定型文 デザインCSSの記載内容 .stk2{position: -webkit-sticky; position:sticky;top:30px;} 定型文に登録した内容（から抜粋） <div><h2 class="stk2">タイトル</h2><p> </p><p> </p><p> </p><p> </p…

…たつかも知れない？？CSSを組んでみました。 最近ちょこちょこやってた事の合わせ技みたいな感じです。 横長の写真を横スクロールするスイッチ コード スイッチになる部分 スクロール速度 不要な文言 シンプルにしたコード 2021/1/15追記！面白い使い方を考えていただきました 横長の写真を横スクロールするスイッチ ↓の画像の左上にある「←→」をクリックしてみてください^^ ← → ある夏の日のポートタワー コード <style><!--#bgscr{background-po…

…いぶ久々に？デザインCSSを触ってみました。 …微々たる変更なんですが^^; 実は以前からやってみたかった！ 書き足したコード、わずか２行 実際どうなるかは… 追記！見出しが複数行になった場合の対策 実は以前からやってみたかった！ ↑この「実は以前からやってみたかった！」っていう見出し。 LSSは<h2>タグで書いています。 （ちなみに、はてなブログの編集画面でいう「大見出し」は<h3>、「中見出し」は<h4>で、<h2>は大見出しよりも上位の見出しになります。） 購読中のブ…

…「当たり判定」の方がCSSでは格別むずかしいですね^^; これまた見当もつかないｗｗｗ で、ソースは見ない方針で、でも検索はかけてみると、 hackmd.io のページに行きあたりました。 なるほど…？ 自分はまだ十分理解したわけではありませんが、どうやらマリオでいうと、 「→を押した時点で、そのままだと〇秒後にクリボーに当たってやられるアニメーションがセットされ、ジャンプで回避するとやられるアニメーションをキャンセルする」 ような仕組みを作れば可能、という事のようです…？ …

…ツイート htmlとcssだけjsなしマリオ！寝なきゃなのについ遊んでしまった。笑 https://t.co/nHcuvrZhQV— さじ (@conasaji) 2021年1月4日 いつもお世話になっている、さじさん(id:conasaji)が、HTML+CSSだけで凄い事をされている人のツイートをリツイートされていたものです。 いやもう、凄いというか凄まじいというか…何をどうやったらこんな事になるのか想像もつかず。 作成された根気も凄いですが、JavaScript不使用で…

…付与した時、「e.srcElement.parentNode」のように「parentNode」をつける必要がある（文字以外ならここはidで） スマホのtouchイベントを扱う際、offsetX、offsetYが使えない などなど…色々「気づき」はあったものの、完成には至りませんでした^^; まぁ…文字でやるならSVGにする必要がなく、普通にCSSでやるべきでしたねｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^ *1:jx>0) && (jx<100

…点ではまだ「がっつりCSSを覚え直す」つもりは無かったんですね。 テーマを変えた事で思いっきり見た目が変わったのを、以前のものに近づけるのに苦戦していますｗ そして月末。 はてなブログの記事内でJavaScriptが書ける事に気づきました！ ブログの方向性が大きく変わる転換点、ここにあったかーｗ 2020年3月 月初にはもう、ブラウザゲームを発表してますね。 「超巨大迷宮」は間をおかず第四弾まで続けて公開していました。 ゲーム以外に、ツール制作にもJavaScriptが使えま…

…SSです！！ 今回はCSS小ネタです。 傍点のサンプル text-emphasis 傍点のサンプル こんな風に、目立たせたい部分の上部に点をつけられます！（dot） こんな風に、目立たせたい部分の上部に点をつけられます！（circle） こんな風に、目立たせたい部分の上部に点をつけられます！（double-circle） こんな風に、目立たせたい部分の上部に点をつけられます！（triangle） こんな風に、目立たせたい部分の上部に点をつけられます！（sesame） こんな風…

…す！！ 以前に書いたCSSで、 が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^ で、今回はそれを改変したものを作ってみました！ もうすぐ年が明けるので、お正月っぽい？和風テイストの「鹿威しししおどし」風に仕上げました。 鹿威しのように揺れる見出し コード 見た目に関する部分 ボックス本体に関する指定 見出し部分に関する設定 今回、主にいじったのはkeyframesの内容 鹿威しのように揺れる見出し こんな風に、ボックス要素につけた見出しが鹿威ししし…

…olute'; は、CSSの「position:absolute;」を指定したのと同じもので、今回最初の状態では<div id="g1" style="position: relative;" draggable="true">relativeを指定していたのを変更しています。（最初からabsolute指定していれば不要なコードですが、もぐらの初期位置を決めるのにやむを得ずこうしています^^;。もっとうまいやり方がありそうな気が…） あとの２行、g1.style.top=(e…

… あと、もうひとつのCSS指定、 #title a{text-shadow:2px 2px 0px black;} これはブログタイトル文字（うちでいうと画面上部のLittle Strange Software）の部分が、白色だった場合に読めなくなってしまうので、影つき文字にする指定です。 元々問題ない配色だった場合はこの一行は削ってしまっても構いません^^ あとがき クリスマスネタの副産物、ですねｗ ただ、スマホから見た時にはレスポンシブ対応ブログでもあまり変わらない（変化…

どうも！LSSです！！ 今日が、今年最後の出勤でした。 「今年最後の出勤」であって、「仕事納め」ではないのが、コロナに翻弄された2020年らしいところで、月曜の在宅勤務が仕事納めですｗ 昨日の記事、 に多数のコメント・ブクマありがとうございました^^ ちなみに、あれは３つの「radial-gradientで描いた水玉セットを全画面表示」に、それぞれ横方向・縦方向のアニメーション設定をつけたもので、 これらの記事でやってきた事の集大成になります。 「複数のradial-grad…

…らせているのは純粋にCSSで書いています^^ この記事は、さじさん(id:conasaji)の、 はてなで雪が降るブログ、誰か実装しないかなあ？（期待期待期待）簡単らしいです！ https://t.co/TJsJKxKCtC— さじ (@conasaji) 2020年12月23日 への回答として書きましたｗ なお、手法は異なりますが www.heavy-peat.com あトんさんの記事を参考にさせていただいているフシがあります。 （あトんさんの雪のほうが余程凄いです！） っ…

どうも！LSSです！！ ちょっと試みてみたい事ができたので、やってみました。 背景多重アニメーション コード解説 大きいものと小さいものを描いているのは、 また、それに動きを与えているのは、 「縦移動」の動きの内容の指定をしているのは、 「横移動」の動きの内容の指定をしているのは、 あとがき 背景多重アニメーション なんか白くてぼんやりしたもの、大きいのと小さいのが並んでいます。 大きいグループと小さいグループ、それぞれ左右にサインカーブ状に揺れながら、異なる速度で落下すると…

どうも！LSSです！！ 今回は、昨日の記事、 の続きです！！ クリスマスツリー 完成版？ コード とりあえず完成？ クリスマスツリー 完成版？ ★ ● ● ● ● ● ● ● ● コード <style><!--@keyframes redblnk{0%{color:#ff000000;}100%{color:#ff0000ff;}}@keyframes yellowblnk{0%{color:#ffff0000;}100%{color:#ffff00ff;}}@keyfram…

どうも！LSSです！！ 以前の記事、の続きです！ クリスマスツリー 点滅する飾りをつけてみました クリスマスツリー ★ ● ● ● ● 追加したコード @keyframes redblnk{0%{color:#ff000000;}100%{color:#ff0000ff;}}@keyframes yellowblnk{0%{color:#ffff0000;}100%{color:#ffff00ff;}}<div style="position: absolute; anima…

…ました！ HTML＋CSSには「インライン要素」と「ブロック要素」があり、ざっくり言えば「インライン要素は一文の中でも部分的に装飾可能な要素」、「ブロック要素は 改段を伴う 装飾可能な要素」って感じですが、「インラインSVG」ってのも、もしかしたら前者のように「一文の中で部分的に使える」ものなんじゃないか？と。 で、試してみました！ 例えば、このように絵文字っぽく使う事もできますね^^ コード 例えば、このように<svg xmlns="http://www.w3.org/20…

…呼んでいました。 【CSS】グラデーション文字 応用編 - Little Strange Software なので、「良かった！今年は通勤電車で地獄を見ずに済む！！」と、不謹慎にも内心喜んでもいたんですが…。 無くなったら無くなったで、ちょっと…ちょっとだけ、寂しいような気もしますｗ と、いうわけで、今年のまいくらクリスマスは ルミナリエの「光のアーチ」 っぽいものを作ってみる事にしました！！ 同じものを、角度を変えて３枚スクショしてみました 場所は、最近仲間が発見したキノコ…

…が完成し、「クリックするたびに太陽は下がっていく」事になります^^ SVGの一部分をJavaScriptから変化させられる、って事は 今後、JavaScriptでゲームを作る時、もう「ゲーム画面全体をひとつのSVG」にしてしまえば、 表現の自由度が高くなる CSSに頼らずに済む 画面全体のサイズが容易に拡大縮小できるので、PC・スマホのサイズ差をあまり考慮しなくて良くなる などのメリットがありそうです^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…またまた？変わり種のCSSネタを３種、作ってみました。 ちかちかアンダーライン 影分身！ アニメーションマーカー 使い方 その他、テキスト装飾関連記事 ちかちかアンダーライン このように、文章の一部に時々アンダーラインがつきます。 コード <style><!--@keyframes uwavea{0%{text-decoration-line:none;}69%{text-decoration-line:none;}70%{text-decoration-line:under…

…形が描画されます。 「きちっとした四角形」に比べ、どこか愛着のある四角形になるかも知れませんね^^ …とは言えSVG。 ブログ記事とかに使用するには少々使いづらく、やるとしたら、「CSSで微妙にtransformによる変形」を施した枠、なんてのを用意すべきなのかも。 生命世界の非対称性 自然はなぜアンバランスが好きか (中公新書) 作者:黒田玲子 発売日: 2014/07/11 メディア: Kindle版 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…」を見極め、画像化（CSSだったりSVGだったり）すればできそうです。 不思議な模様【紗綾形（さやがた）】 - Little Strange Software なんですが、今回の「幅 40 高さ 20」の画像（viewbox="0 0 40 20"）でもループできそうな気がします。 ですが、実はもしかしたら、「幅 20 高さ 20」でもいけたり「幅 20 高さ 10」でもいけたりするのかも！？ 実際に並べてみないと脳内での解決は無理そうｗ 並べて配置してみたら、一発なんですが…

…に利用できるんじゃないかな？ その場合、縦横にループさせる「最小構成」を見極め、画像化（CSSだったりSVGだったり）すればできそうです。 ナナメになっているのと、組み合わせ方が独特なので、まずそこを理解すべく、ナナメじゃないバージョンを考えてみるか…。 ちょっと頭つかいそうですｗ ↑SVGで描いてみようとして、力尽きたところｗ 「卍」、左右反転してるのと交互に出てくるんですね！ うーん、やっぱ難しい…。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…いですね^^ スターを見るだけでも、懐かしい方も。 それ以前に、自分のブログの方向性自体もだいぶ変わってしまいましたが、この次の2019/12/2の記事が今、検索流入トップな記事だったりします。 （「最近のアクセス傾向」で49%のGoogleからのうち19%ほどでトップ） かろうじてAndroid記事ですが、今検索流入でその次にいるのが が11%で、「とうとうCSSが上位に入ってきたか」って感じがしますｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^