Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

HTMLなど

【HTML】初めてスライダー(<input type="range"/>)を使ってみました

どうも!LSSです!! 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^…

【CSS】試しに、CSS変数とラジオボタンを使ってみました【実験】

どうも!LSSです!! 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数で…

【CSSサンプル】タブ切り替え表示【JavaScript不使用】

どうも!LSSです!! 昨日の記事の実験、 を用いてサンプルを作ってみました。 まず最初は普遍的な(?)ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦!です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示…

【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました!【実験】

どうも!LSSです!! だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操…

【CSS】丸から四角に変形するボックス

どうも!LSSです!! なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈?なんかに使えるかもですね。 丸から…

【CSS】position:sticky;による押し出し、結局こうなりました

どうも!LSSです!! ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し1個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか</div>…

【CSS】横長の写真を横スクロールするスイッチ

どうも!LSSです!! 今回は、ちょっと役にたつかも知れない??CSSを組んでみました。 最近ちょこちょこやってた事の合わせ技みたいな感じです。 横長の写真を横スクロールするスイッチ コード スイッチになる部分 スクロール速度 不要な文言 シンプルにし…

【CSS】デザインCSS、ちょこっとだけ変更(見出しが画面上部に残る設定)

どうも!LSSです!! だいぶ久々に?デザインCSSを触ってみました。 …微々たる変更なんですが^^; 実は以前からやってみたかった! 書き足したコード、わずか2行 実際どうなるかは… 追記!見出しが複数行になった場合の対策 実は以前からやってみたかった! …

【CSS】CSSにカウンターの概念があったのを初めて知りました!

どうも!LSSです!! 昨日の記事のあれ。 マリオに触発されて、とりあえず「クリックで動き出す」部分だけ作れて、入口に到達したつもりになっていましたが、「当たり判定」の方がCSSでは格別むずかしいですね^^; これまた見当もつかないwww で、ソースは…

【CSS】ちょこっとチャレンジ!背景を動かしたり止めたりしてみる

どうも!LSSです!! 今日、Twitterであるリツイートを見かけました。 きっかけとなったリツイート ボタンを押すとスクロールし始める背景 今回のコード、以前使ったものの改変です それにしても…すごい! きっかけとなったリツイート htmlとcssだけjsなしマ…

【CSS】傍点

どうも!LSSです!! 今回はCSS小ネタです。 傍点のサンプル text-emphasis 傍点のサンプル こんな風に、目立たせたい部分の上部に点をつけられます!(dot) こんな風に、目立たせたい部分の上部に点をつけられます!(circle) こんな風に、目立たせたい部…

【CSS】鹿威し(ししおどし)のように揺れる見出し【カタカタ改変】

どうも!LSSです!! 以前に書いたCSSで、 が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^ で、今回はそれを改変したものを作ってみました! もうすぐ年が明けるので、お正月っぽい?和風テイストの「鹿威しししおどし」風に仕…

【JavaScript】スマホの画面タッチ(スワイプ)イベントも試してみました!

どうも!LSSです!! 昨日の記事、 スマホでは動作しませんでしたが、今後これを使ってブラウザゲームとか作る上ではやはり、スマホでも遊べるようにしたい!! というところで、スマホ対応を試みてみました! マウスドラッグかスマホスワイプで移動する「も…

【CSS】お正月記事向け・ブログの背景をその記事だけ紅白模様にするコードw

どうも!LSSです!! 先日、クリスマスの記事、 の中で、強引にブログ記事の背景などを書き換えていました。 次のイベントといえば「お正月」ですが、「1記事限定で正月らしい紅白模様にする」コードを公開してみますw サンプルとコード 使い方と解説 あと…

【Merry】聖なる夜に【Christmas】

どうも!LSSです!! この記事限定で、めっちゃ雪を降らせてみました。 …なお、そのままだと他のリンク等が操作不能になるため、画面内でクリックすると停止するようにしています。 // コード <style>

【CSS】背景多重アニメーションのテスト

どうも!LSSです!! ちょっと試みてみたい事ができたので、やってみました。 背景多重アニメーション コード解説 大きいものと小さいものを描いているのは、 また、それに動きを与えているのは、 「縦移動」の動きの内容の指定をしているのは、 「横移動」…

【CSS】CSSでクリスマスツリーを描いてみる【第三弾】

どうも!LSSです!! 今回は、昨日の記事、 の続きです!! クリスマスツリー 完成版? コード とりあえず完成? クリスマスツリー 完成版? ★ ● ● ● ● ● ● ● ● コード <style>

【CSS】CSSでクリスマスツリーを描いてみる【第二弾】

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

【SVG】インラインSVG、ふと思いついたんですが絵文字素材になるかも??

どうも!LSSです!! SVGのコードを書いたテキストファイル、拡張子を「.svg」で保存すると、SVG形式の画像ファイルとして使用できます。 それに対し、ここで自分がやってきたように「ページの中に<svg>タグを書く」という使い方を「インラインSVG」といいます。 </svg>…

【SVG・JavaScript】SVG内の要素をJavaScriptから制御してみるテスト

どうも!LSSです!! 今回はまたSVG。 ですが、SVGとJavaScriptの連携のごくごく基本的なところを試してみます! 真っ赤な太陽 コード コード解説 SVGコード中の太陽にあたる部分 太陽をクリックした時に処理を実行 関数 sunclk 内での処理 SVGの一部分をJav…

【SVG】SVGの練習?がてら、「もぐら」の絵を描いてみた!

どうも!LSSです!! この間、 即興で「もぐらたたき」を作りました。 即興ゆえ、画像などは用意せずに「もぐら」という字を叩く、という、ネタとしては滑りやすい物になりましたw で、もし、いずれ「画像版」を作るとしたら?「もぐらの絵」ぐらいは自分で…

【CSS】変わり種!アニメーションによる文字装飾 3種

どうも!LSSです!! またまた?変わり種のCSSネタを3種、作ってみました。 ちかちかアンダーライン 影分身! アニメーションマーカー 使い方 その他、テキスト装飾関連記事 ちかちかアンダーライン このように、文章の一部に時々アンダーラインがつきます…

【JavaScript】ちょっと歪んだ四角形【実験】

どうも!LSSです!! 今回は思いつきで、ちょっとした小ネタ。 「JavaScriptからSVGタグを書き出して、約300ピクセルの四角形を1~10ピクセルランダムにずらした頂点で描いてみる」というのをやってみます。 ちょっと歪んだ四角形 さじさんの記事から ちょっ…

【SVG】紗綾型、なんか…できたっぽい

どうも!LSSです!! この間から、なんとなく調整していた「紗綾型」。 なんかSVGで できたっぽいです。 SVGで描く紗綾型 実はひとつの図形が完成した時点でほぼ完成していた!? コピー・再利用するためにはまず、IDをつけます 右に20ずらした位置にコピー …

【CSS】outlineの鼓動【小ネタ】

どうも!LSSです!! 今回はCSS小ネタになります。 サンプル コード 使い方 キーフレームアニメーションの内容 サンプル 文章の途中に、例えばこんな感じで枠で囲んだ部分があり、その枠がたまに太く薄くなる、そんなサンプルです。 コード <style>

【CSS】カーソルの形状を指定【小ネタ】

どうも!LSSです!! 今回は「マウスカーソルが乗った時に、マウスカーソルの形状を変更する」CSSを試してみます。 カーソルの形状サンプル一覧 例えば あとがき カーソルの形状サンプル一覧 // '+ctxt[i]+''; } gamen.innerHTML=txt; // ]]> コード <div style="cursor:カーソルの形状;">適当な</div>…

【JavaScript】経過時間を扱うgetTime()

どうも!LSSです!! ゲームなどのプログラムを書く際、「あるタイミング」から「今現在」まで、どれだけの時間が経ったかを計算する必要が出てくるケースがあります。 「放置ゲー」と呼ばれるものや、スマホゲームによくある「スタミナ」システム、時間経過…

【SVG】SVGでアニメーションを指定してみる

どうも!LSSです!! に続き、今度はこの絵にアニメーションで動く「雲」を追加してみます! SVGアニメーションを追加した絵 コード 雲を楕円で描きます またも円形グラデーション ここからアニメーションの話 あとがき SVGアニメーションを追加した絵 コー…

【SVG】SVGもグラデーションを使って絵をかっこよくしてみる!

どうも!LSSです!! この間、 でSVGで初めて絵を描いてみました。 …といっても「全面を水色で塗りつぶす四角」「赤い丸」「下部を黄緑で塗る四角」を配置しただけのシンプルな絵でしたね。 で。 SVGもCSSと同様に「グラデーション」を使う事ができます。 名…

【CSS】repeating-radial-gradientを何気に初めて使ってみる

どうも!LSSです!! CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける! ので、結構多用してきました。 で。 その他に、repeating-linear-gradientrepeatin…