Little Strange Software

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

HTMLなど

【JavaScript】おみくじを作ってみる【入門向け記事】

どうも!LSSです!! 今回は、JavaScriptをちょっとやってみたい人向けに、「なるべく簡単なコードでちょっと遊べる」ものとして「おみくじ」を作り、その解説をしてみたいと思います^^ おみくじ コード コード詳細解説 <div id="gamen"></div> kuji=["大吉","吉","末吉","凶","大…

【CSS】他にもある「ごちゃごちゃした背景で文字を読みやすくする方法」

どうも!LSSです!! 昨日の記事では、文字を読みやすくするために使うtext-shadowの使い方を書きました。 今回はそれ以外にも考えられる方法をひとつ、提案してみます^^ 文字部分だけ別に塗りつぶす ついでに文字の中央寄せ せっかくの塗りつぶし背景をあえ…

【CSS】text-shadowを「文字の読みやすさ改善」のために使ってみるテスト

どうも!LSSです!! 背景つきのボックスに文字を入れた時、背景がごちゃごちゃしていて文字が読みづらくなった、という経験はありませんか? そんな時に、文字色を変えてみたり、文字サイズを大きくしたり、太字にしたり…で対処する事があるかと思いますが…

【CSS】多段text-shadow、試してみました【実験】

どうも!LSSです!! ちょっと先日来、考えていた「text-shadowを複数書き連ねてどんな効果が出るか?」を何通りか試してみました。 CSSサンプル、というよりは実験的な内容となります。 虹色の影 間に白を挟む 疑似グラデーション とりあえず解説 虹色の影 …

【CSSツール】水玉デザイナー【試作版2】

どうも!LSSです!! 以前作成した、水玉デザイナー、少しだけ機能追加しました。 水玉デザイナー 使い方 作成例 色を使えるようにはなりましたが 水玉デザイナー // 全体的な設定 水玉個別設定' txt0+='全体の幅:'+wkw+'px ' +(wkw-') +(wkw>999?'+':'+'…

【CSS】変わった水玉模様 4種!

どうも!LSSです!! 今回は例のやつを使って、水玉模様?を4種ほど作ってみました! コードもつけていますので、使いたいものがあったらご自由にコピペしてください^^ 改変も可です! ずっと見ていると不思議な感じになりませんか? 昨日の斜め格子をもう…

【CSSツール】水玉デザイナー 使い方一例!

どうも!LSSです!! 先日、公開したツール 試してみたいただいた方、ありがとうございます^^ 色々な模様が作れますが、今回は「使い方の一例」を書いてみます! 最初に普通に模様を作ります 水玉の数を「倍」にします 横位置・縦位置を+50 あくまで「一例」…

(もしかしたら)iPhoneだと4になるサイコロ!?←ならなかったぽい^^;

どうも!LSSです!! 一昨日の記事、 さじさん(id:conasaji)にご協力いただいて、なんとかiPhoneでも正しく見れるようになったみたいです^^ 解決策が見つかってよかった! ↑この記事のコメント欄にその経緯があります! ところで…水玉デザイナーはiPhoneに対…

【CSS】色指定 様々な方法(色名・RGB・HSLなど)

どうも!LSSです!! 今回は、CSSの様々な場面で出てくる「色の指定」について、書き方が何通りかあるものをまとめてみます。 1.色名(直感的にもっとも分かりやすい) メリット デメリット 2.RGB形式 #で指定(HSLより短く書ける) メリット デメリット…

【CSSツール】水玉デザイナー【試作版】

どうも!LSSです!! 今回はCSSの水玉模様をデザインするツールを作ってみました。 水玉デザイナー 使い方 作成例 制作のきっかけ 7/26追記! 7/27追記! 水玉デザイナー // 全体的な設定 水玉個別設定' txt0+='全体の幅:'+wkw+'px ' +(wkw-') +(wkw>999?'…

【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集

どうも!LSSです!! 【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集に続き、テキスト装飾関連のまとめ記事です! 最初は基本的なところから、後半だんだん特殊なものになっていきます^^ font-size 文字の大きさを指定します コード 書式 co…

【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集

どうも!LSSです!! CSS関連で色々と作ってきましたが、ここでちょっといったん、まとめ記事を書きます! ちょっと量が多かったので、今回は「ボックス装飾」関連のまとめ記事となります^^ border-radius ボックス(枠)の角を角丸にする指定です。 コード …

fontテスト用スクリプト【試作版】

どうも!LSSです!! 今回は「フォントの表示テスト」を行うだけのスクリプトを書いてみました。 fontテスト スクリプトのコード というのを取り急ぎ作ってみたのは fontテスト // '+fts[i]+'abcABC0123あいうえお柿句卦子\n'; } txt='\n'+txts+'.othr{font-…

【CSS】グラデーション文字 応用編

どうも!LSSです!! 昨日の記事、 に続き、さらなる応用編です^^ きんきらきんのきーん 戦慄! コード解説 きんきらきんのきーん 戦慄! 昨日の記事のコメント欄で きんきらきんのきーん Little Strange Software コード <p style="background-color: gray; border-radius: 15px; border: 15px inset #dddddd; text-align: center;"></p>

【CSS】グラデーション文字を作ってみました!

どうも!LSSです!! 結構前に、「CSSでグラデーションする文字」を「下書き供養祭」としてネタにしました。 あの時はまだ「どうしてそうなるのか」イマイチ分からないままだったので「下書き供養」としましたが、ちょっと分かった気がしたので、再度ネタに…

はてなブログで始める!JavaScript超入門!第四回

どうも!LSSです!! 適当に間をあけながらの「はてなブログで始める!JavaScript超入門!」、今回は第四回となります。 このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニ…

【JavaScript】落ち物パズル制作 その5【コマ移動を滑らかに】

どうも!LSSです!! あまり大きくは変わっていませんが、落ち物パズルにちょっと手を加えました。 こんな感じ 変更点 ゲームオーバー時に、モード選択画面に戻れるようにしました コマの動きを滑らかにしました あと、消しの演出のためにコードを見直したん…

【閑話休題】イカサマモード

どうも!LSSです!! 昔、「連鎖のある落ち物パズルは、連鎖のキマった時の爽快感も重要なウリだなぁ」と、ぼんやり考えていた事を思い出しました。 今、落ち物パズルを作っていますが、かつてそう考えていた事もあって、連鎖を意識した作りになっています。…

【JavaScript】落ち物パズル「泡」【さじさんver】

どうも!LSSです!! 落ち物パズルシリーズ、今回は番外編! 大幅に雰囲気の変わったゲームをお楽しみください^^ 落ち物パズル「泡」 ルール Designed by id:conasaji コード 消し判定について解説します 挙動の変更 謝辞 余談 7/14追記 落ち物パズル「泡」 …

【JavaScript】落ち物パズル制作? その4.5【コードと部分的な解説】

どうも!LSSです!! 作り始めてから一週間ほどで、ひとまずゲームとして遊べる形になりました^^ 今回はその時に省略したコードの紹介と部分的な解説になります。※つまり、わけわからん事を書きますwww コード全文 functionの役割 このコードで使っている…

【JavaScript】落ち物パズル制作? その4【消し実装!】

どうも!LSSです!! こんな感じ 遊び方 スコアについて 落とす 花の完成 花を2つ同時に完成 花完成、消滅後に、落ちてきたコマによって再度花が完成 イージーモードについて コードや解説は後ほど こんな感じ // '; txt+='スコア:'+scr+' 花:'+fws; g2.inn…

【JavaScript】落ち物パズル制作? その3

どうも!LSSです!! 完成まで作るのかどうだか未定だった「落ち物パズル」制作ですが、どうもここまで来たら完成させたくなってきた今日この頃ですw 第一回 第二回 に続き、今回で3回目となります! 今回もまだ「消し」の部分作成には至っていませんが、…

【CSS】半透明から透明色への円形グラデーション【小ネタ】

どうも!LSSです!! 今回は、円形グラデーションと、CSSの色指定を組み合わせた小ネタです。 サンプルとコード サンプル コード 今回のネタの趣旨 RGBでの色指定を半透明にする方法 円形グラデーションに話を戻すと そんな効果を、落ち物パズルの背景とコマ…

【JacaScript】落ち物パズル制作? その2

どうも!LSSです!! 昨日の記事、 の続き、「落ちたコマが積みあがる」ようにしてみました。 それに伴い、「落下判定で下にブロックがあれば、そこで落下停止して積む」判定、「左右移動時にブロックがあれば移動しない」判定、「一番上まで積みあがったら…

【JavaScript】落ち物パズルの落下部分だけ作ってみた話

どうも!LSSです!! 先日、いつもお世話になっている さじさん(id:conasaji)が、こんな記事を書かれていました。 さじさんプログラミングデビュー! これはめでたい!!^^ と、早速コメントしたのですが、「そういえば…LSSは落ち物パズルのプログラムを書い…

【CSS】色違い吹き出し

どうも!LSSです!! なんとなーく知ってはいたんですが、使った事はなかった事のひとつ。 「CSSのclassをタグオプションで指定する際、半角スペース区切りで複数指定できる」というのを試してみるとともに、それを利用して「色違いの吹き出し」を作ってみま…

【CSS】レスポンシブデザインに必須!な「メディアクエリ」…の、さわりだけ!

どうも!LSSです!! ついこないだまで「レスポンシブ?何それおいしいの?」だったLSSが、メディアクエリについて語ります!w レスポンシブデザインとは 画面のサイズごとに、使うCSSを切り替えるメディアクエリ メディアクエリ使用例 コード解説 共通の指…

【CSS】吹き出しCSSについて解説してみます!

どうも!LSSです!! 今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますw まずはコード コード解説 吹き出しの三角部分 吹き出し本体の指定 吹き出しを実際に運用する指定方法 改変ポイント 試しに、吹き出し本体に… 謝辞 まずはコード ↑で使…

【CSS・はてなブログ】コメント欄、中身のデザイン

どうも!LSSです!! コメント欄のCSSいじりシリーズ(?)、今度はコメント欄の中身にまで手を出しました。 コメント欄のクラス まとめ コメント欄の内側のデザインをいじってみた! コード ざっくりと断片的な解説 display:inline-block; content:"\A";whi…

はてなブログのコメント欄の構造

どうも!LSSです!! 今回は「はてなブログのコメント欄デザイン改造第四弾!」…の準備編といった感じの内容です。 こういうコメント欄 該当部分のコード class名 CSSで、このクラスに対する指定を書くと こういうコメント欄 ↑こういうコメント欄のソースを…