Little Strange Software

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

HTMLなど

【CSS】グラデーション文字アニメーション「戦慄!」

どうも!LSSです!! に続き、 の「戦慄!」もアニメーション化してみました。 サンプル コード あとがき サンプル 戦慄! コード <style>

【CSS】グラデーション文字をアニメーションしてみました

どうも!LSSです!! かなり前の記事のネタに、ちょっと思いついた事の追加を試してみました。 グラデーション文字のアニメーション コード 元ネタ とりあえず試してみただけですが グラデーション文字のアニメーション きんきらきんのきーん コード <style>

【CSSサンプル】ちょっと言いにくい話なんですけど…【小ネタ】

このブログでは「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。 今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^

【JavaScript】CSSプロパティタイピングゲームのコード公開!

どうも!LSSです!! この間、 というものを公開しました。 CSSのプロパティ、「使用頻度の高いもの」も「いつ使うんだ?」というようなものもひっくるめて出て来て、それをタイピングする、というものでした。 で、遅ればせながら今回はその拙作のコードを…

【JavaScript】画像サイズ取得実験!【小ネタ】

どうも!LSSです!! JavaScriptの小ネタで、なにげにやったこと無かった?事をやってみます。 ブログなどのWebページに画像ファイルを配置する事がよくありますね。 あれはまず、画像ファイルをアップロードしておき、ブログなどのWebページからそれを呼び…

JoeWars コード

どうも!LSSです!! 昨日公開したゲーム、 一応、コードも晒しておきます。 というだけの記事です^^; コード <style>

【CSS】続・写真画像のちょっと変わった見せ方【後から気づいたバージョン】

↑こうだったのが↓こうなります! どうも!LSSです!! 昨日、写真画像をCSSで「ちょっと変わった見せ方」をする方法を思いつき、記事にしていました。 昨日のコードを使用すると、 ↑こんな感じに、枠部分が透けて見えつつ、盛り上がったような形状で表示させ…

【CSS】写真画像のちょっと変わった見せ方

CSSのborder(枠線)を使って、写真画像を盛り上げたように見せる方法を考えました。 ↑の写真が↓こうなります。 どうも!LSSです!! ちょっと思いついた事があって試してみたところ、うまく出来ました^^ コード コード解説 盛り上げたように見せる、と言い…

【JavaScript】文字数カウンタ

a // どうも!LSSです!! なんとなく、「改行を考慮しない文字数カウンタ」を作ってみました。 ↑の入力欄に文字を入れると都度、その下に文字数が表示されます。 全角文字でも半角文字でもスペースでも、1文字としてカウントされます。 改行はカウントしま…

【CSS】黒地に金文字・改【小ネタのさらに小ネタ】

背景をさらにちょっと凝ってみました。 どうも!LSSです!! ↑この間 投稿した、 というCSS小ネタですが、さらにちょっと付け足してみました。 小ネタのさらに小改変? コード ちょっとゴージャスな感じ? コード

【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました

まさかこんな事が… CSSシェイプ…CSSで図形を定義できる!?吹き出しとか概念がガラッと変わりそう。 行数を増やすとその分 のびるのびるwこれ、なんか面白い事に使えるのかも?…と、とりあえずは吹き出しで試してみましたが。 どうも!LSSです!! CSSプロ…

【CSS】黒地に金文字【小ネタ】

どうも!LSSです!! ちょっとCSSでやってみたい事があったのですが、その過程で出来たものを晒してみます^^ 黒地に金文字 背景をちょっと凝ってみた版 やってみたかったのは、 黒地に金文字 黒地に金って映えるかな? コード

【JavaScript】もし、はてなブログ執筆中に電卓が必要になったら【ほぼ冗談】

どうも!LSSです!! あなたが はてなブログの記事編集中に、ちょっとした計算をする必要に迫られたとします。 PCでもスマホでも電卓アプリは入っていると思いますが、それを立ち上げるのも面倒くさい、リアル電卓を取り出すのも面倒くさい、そんな時にちょ…

シンプルすぎるHTMLファイルの骨組みテンプレートがダウンロードできます!

どうも!LSSです!! ちょっと手軽にHTMLやCSS、JavaScriptにSVGなどのテストをしたい時。 はてなブログにログインできる環境なら、下書きで試すのも手ですが、そうじゃない環境下でただしPCはある、という時。(かなり限定的ですね^^;) メモ帳などのテキス…

SVGで折れ線グラフを描いてみた

どうも!LSSです!! かなーり以前にですが、 JavaScriptと<canvas>タグを使って、ブログ記事上に折れ線グラフを表示させてみた事があります。 <canvas>タグを使うと、その中にJavaScriptから自由に線を引いて画像としての表現ができるので、それをただの折れ線グラフに使う</canvas></canvas>…

【ゲーム案】環状線制覇双六、なんてのを考えてみました【実験】

どうも!LSSです!! ふと、双六ゲームのアイデアが浮かびました。 「山手線みたいな環状線を、双六の出た目の数だけ移動し、止まった駅を”制覇”したとして、全駅制覇したらゴール」 というゲーム。 このままだと完全にただの運ゲーなので、実際にゲームとし…

【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました

どうも!LSSです!! 先日、このブログに という記事を書きました。 で、考えていたんですが、 「容易にシステムとなるスクリプトをコピペできて、誰でもカンタンに項目を増やせるようなWebゲームブックシステムを公開したら…誰かゲームブック作ってくれない…

【JavaScript】JSONをJavaScriptで試してみます【実験】

どうも!LSSです!! 昨日の記事… JSON→ジェイソン、から安易に「13日の金曜日」に繋ぎましたが、JSON自体が正体不明で怖かったですねw とりあえず「JSONってなんぞや」というのを自分は分かったつもりになったところですが、プログラミングを覚えるのには…

【JavaScript】なんとなく…ページ中に存在する、divタグとspanタグをスクリプトで洗い出してみた

どうも!LSSです!! はてなブログでは、記事として書いた内容の他に様々なHTML要素が使われています。 例えばブログテーマを作成する際などには、それらがどれだけ使用されていてどのように使われているかをある程度把握する必要が出てくるかと思います。 …

【SVG】波打つ文字に点線をつけてみました

どうも!LSSです!! 昨日の記事、【SVG】波打つ文字(文字変形)に少し手を加えてみました。 波打つ文字、点線バージョン 線を点線にする 昨日記事をあげてから、早速使ってくださった方が! 今回の点線は 波打つ文字、点線バージョン Little Strange Softw…

【SVG】波打つ文字(文字変形)

どうも!LSSです!!SVGならこんな事も! SVGで波打つ文字を「描いて」みる コード 半年ほど前に、さらっとやってたネタなんですけどねw SVGで波打つ文字を「描いて」みる 記事冒頭ですでにやっていますが、 あいうえおかきくけこさしすせそたちつてと って…

【HTML】Twitterに投稿するリンク

どうも!LSSです!! よくWeb上で見かける、Twitterに投稿するリンク。 診断メーカーなどでよくありますね。 あれってどうやってやってるんだろう? 難しいのかな? と思ってましたが、調べてみると思いのほか カンタンだったようです。 コード <a href="https://twitter.com/intent/tweet?text=ちょっと実験中…&url=https://little-strange.hatenablog.com/&hashtags=ハッシュタグ&via=LSS0324" target="_blank">ツイート</a> ↑の…

【JavaScript】乱数のテスト【実験】

// =255){flg=true;} }while(!flg); txt=''; for(i=0;i'+cnt[i]+''+(i%10==9?'':''); } txt+='最小値は '+Math.min.apply(null,cnt); gamen.innerHTML=txt; } // ]]> どうも!LSSです!! 乱数のテスト もし乱数が偏っていたら? テスト結果 今回のテストに…

【JavaScript】簡易テキストファイル書き換えスクリプト

→ // どうも!LSSです!! 今回は、使いどころのよく分からないツールを作ってみましたw 使い方 例えば… コード あとがき 使い方 テキストファイルの中の特定の文字を、違う文字に変換するツールです。 まず「変換元の文字列」「変換後の文字列」を入力しま…

【JavaScript】カウントダウンタイマーを作ってみました【Webアプリ】

JavaScriptで「カウントダウンタイマー」を作ってみました。 分・秒を設定して、「START」を押すとカウント開始し、指定時間経過後に音が鳴ります。 「STOP」ボタンで カウントダウンや音を停止できます。

【CSS+SVG】オリジナルなパターン背景の作り方を考えてみました【実験】

どうも!LSSです!! 【CSS+SVG】ヘリンボーン模様の背景 とか、 【CSS+SVG】インラインSVGを背景画像に指定 とかを作りながら、漠然と考えていたんですが、「パターン画像を繰り返して背景として繋がるようにするには…画像の上辺の点と、同じ位置に当たる下…

【JavaScript】続・自動生成迷路

幅: 高さ: // ax=xmax || ay=ymax?0:parseInt(mztxt.substr(ax+ay*xmax,1)); mzw=(ax,ay)=>{mztxt=mztxt.substr(0,ax+ay*xmax)+'0'+mztxt.substr(ax+ay*xmax+1);} makemaze(); rgx.addEventListener('input',makemaze,false); rgy.addEventListener('input',…

【JavaScript】自動生成迷路!

幅: 高さ: // '; for(j=0;j';} if(i==1 && j==1){txt+='';} if(i==xmax-2 && j==ymax-2){txt+='';} }} txt+=''; gamen.innerHTML=txt; } function dig(xd,yd){ vt=Math.floor(Math.random()*4); vy=Math.floor( (vt-1)/2); vx=(vt*2-3)-vy*3; if(mz(xd+vx*2,…

【CSS+SVG】ヘリンボーン模様の背景

どうも!LSSです!! 【CSS+SVG】れんが模様の背景 で、CSSにSVGを織り込むという手法で、背景を描くコードを作成しました。 そのコメント欄に、 さじ(id:conasaji) レンガの組み方でヘリボーンってのもあるんですけど、以前の彩綾型みたいに組まれた模様で…

【CSS+SVG】れんが模様の背景

どうも!LSSです!! CSSで描く背景について、色々と考えていました。 ふと「れんが模様の背景って描けないかな?」と思い立ったのですが…。 【CSS】うろこ模様 その他【小ネタ】 【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃい…