chevron_left

メインカテゴリーを選択しなおす

cancel
LittleStrangeSoftware https://little-strange.hatenablog.com/

かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです!

当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。

LSS
フォロー
住所
未設定
出身
未設定
ブログ村参加

2019/10/18

arrow_drop_down
  • 【しつこい?】昨日に続き中古ノートPCの話【どうにも気になる一品】

    どうも!LSSです!! 昨日、 でAmazonアソシエイト(いわゆるアフィリエイト)バリバリの記事を書きましたが、そのもう少し先に、気になる一品を見かけました。 タッチパネル搭載機種 タッチパネル搭載機種が気になる理由 で、PCでAndroidの起動も当時試してみたんですが それは未だ未確認なのですが^^; タッチパネル搭載機種 【Microsoft Office 2016搭載】【SSD256GB】【Win 10搭載】Panasonic Let'snote CF-AX2 ■ Core i5-3437U/8GB/SSD 256GB/タッチパネル/Windows10Pro64bit搭載 メディア:…

  • 【Amazon】独自基準でお安い中古ノートPCを探してみる【買わないけどw】

    どうも!LSSです!! 最近(ここ数年)スマホユーザーが爆発的に増えていると同時に、パソコン離れが加速している、とも言われていますね。 ブログを書くなら、絶対的にPCの方が書きやすいと思うのですが、パソコンを使った事がない人はもしかすると「パソコンって10~20万ぐらいするもので、なかなか手が出せない(からスマホで十分)」と思ってる方も多いんじゃないかな?と。 というわけで、今回は「中古だけどそこそこ使えそうで、かなり安く手に入るPC」をAmazonから探してみました!! 独自基準 検索時点での最安値はこちら! 次に安かったのがこちら! 3つめ やっとSSD搭載機種! 4つめ Microsof…

  • 【JavaScript】効果があるかどうか未確認ですがコピペサイト対策スクリプト

    どうも!LSSです!! Twitterで「ブログ記事をまるっとコピーして、独自の広告をつける」悪質コピペサイトの話を見かけました。 恐らくは自動的にURLを収集して、膨大な数のページを作ってるんでしょうね。 と、いう事で、「対策になるかならないか分からないけど、JavaScriptで仕掛けを施してみる」事にしましたw はてなブログ、デザイン画面から 記事上、にスクリプトを仕込みます 忘れずに「変更を保存する」をクリック 説明 欠点 はてなブログ、デザイン画面から スパナマークのアイコンをクリックして、「記事」をクリックします。 記事上、にスクリプトを仕込みます 「ヘッダ」「フッタ」「記事上」「…

  • 友人のブログを紹介します!

    どうも!LSSです!! 一ケ月ちょっと前の記事ですが、 にて、リアル友人(高校の時の同級生)が、はてなブログデビューした話を書きました。 「漢方」というあまり馴染みのない方の多い分野(自分もそうですw)で、難しいと感じた方も多かったのでは?と思います。 あれから一ケ月ちょい…記事数・内容ともになかなか凄い事になっているので、ちょっと紹介させてください! ポケモンGOに中医学 北斗の拳に中医学 と、「やわめ」の記事を中心に紹介させていただきました ポケモンGOに中医学 中医学の視点でポケモンを見るとどうなるか!?という斬新な(?)試み! ②のほうのネタはどうも元々、陰陽の考え方をポケモン開発陣が…

  • まさかのサガ復活!?

    どうも!LSSです!! 今日、びっくりするようなニュースが飛び込んできました! サガシリーズ1~3がNintendo Switchで復活!? リメイク、ではないっぽいですね ちなみに…LSSはNintendoSwitch持っていません^^; ところで、サガ3といえば… サガシリーズ1~3がNintendo Switchで復活!? . . . . . . . . . . . . . . . . . . . . . . . . かなり驚きました! サガシリーズの後継、ロマサガシリーズのほうが今では有名かもですが、元のサガシリーズ、それも初代の「魔界塔士SaGa」が好き過ぎて、 ↑こんな記事を書いて…

  • 【CSS】とことこ歩く(はためく改変)【おまけ:異様に苦労した別バージョン】

    どうも!LSSです!! 今回は、先日の記事、 の改変で、「左右に とことこ歩きまわる」ように見えるサンプルに挑戦してみました。 事の発端 とことこ歩く 別バージョン つまづきの記録 事の発端 冒頭に書いた、以前の記事 を見て、だるころ9216さん(id:darucoro9216kun)が予想外のアレンジをしてくださいました! ↑の記事の終盤、「歩くスナフキン」です! なるほど、「はためく」で揺れる様子を歩いているように見立てて、マーキータグで左右移動しているようです。 こりゃすごい!!と感激し、コメント欄に「もうちょっと工夫すると、右端で画像反転もできそう^^」と書いてきたのですが、さてその「…

  • 【CSS】しつこく花火3【linear-gradientとrotateZ版】

    どうも!LSSです!! と2回、borderとborder-radiusを使用しての花火に挑戦してきましたが、3度目となる今回は「全く別の方法」で花火に挑戦してみます! 花火その3 コード 解説その1:linear-gradient 解説その2:rotateZ 解説その3:keyframeアニメーション あとがき 追記 花火その3 . . . . . . . . . . . . コード <style><!--@keyframes hnb{0%{top:300px;width:5px;height:2px;}60%{top:0px;width:5px;height:2px;}80%{top:0p…

  • 【CSS】画像にフィルターをかけてみる【IE非対応】

    どうも!LSSです!! 今回は、手元にあるCSSの本の一番最後に載っている「filter」を試してみます。 元画像とフィルター やり方はとても簡単^^ セピア ぼかし 色反転 他にも何種類かのフィルターがありますが 元画像とフィルター 元画像(今日の昼に作ったチャーハン←またかいっ!w) セピア ぼかし 色反転 やり方はとても簡単^^ 普通に、はてなブログの機能で画像をアップロード、記事に貼り付けると、HTML編集画面ではこんなコードになります。 <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_stran…

  • 近況

    どうも!LSSです!! 土日が終わりましたね。 明日から月曜日。 仕事行くのだっる!となるところですが… 月曜・火曜と出勤しなくていい、ひゃっほう!w 今日の昼、またしてもチャーハンに挑戦しました 最近、CSSネタが続きましたが そんな感じで生きてます 月曜・火曜と出勤しなくていい、ひゃっほう!w 月曜は2回目の在宅勤務です^^ 出勤しなくていい、っていいですねw 1回目の在宅勤務の記事はこちら! そして火曜日は年次有給休暇です。 こっちは完全にフリーですね^^ 今日の昼、またしてもチャーハンに挑戦しました 紅生姜がないのが悔やまれるチャーハン完成!(玉ねぎ、ベーコンはわざと大きめカット) p…

  • 【CSS】花火のアニメーション その2【多重化】

    どうも!LSSです!! 先日の記事、 を「なるべくコードを増やさずに」多重化してみました。 (コレジャナイ感ありありかもw) 花火のアニメーション その2 コード 前回からの改変点 animationプロパティは複合プロパティです 省略したanimation-delayは別に指定しています 前回 書かなかった、花火風のドットについて おわりに 花火のアニメーション その2 . . . . . コード <style><!--@keyframes hnb{0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darky…

  • 【CSS】カードをめくる その2

    どうも!LSSです!! 先日の記事、 の内容をちょっと扱いやすく?しました^^ サンプル(カードをクリックしてみてください) コード コード解説(デザイン変更について) カードサイズ指定部分 カード背面デザイン部分 カード表面デザイン部分 JavaScriptを使用せずに、カードの表裏を管理するのは ちょっとつまづいたところ サンプル(カードをクリックしてみてください) 当ブログにご訪問いただき誠にありがとうございます^^LSS コード <style><!--.card{position:relative;perspective:500px;}.fuda{position:absolute;d…

  • 【CSS】花火のアニメ―ション【挑戦途中】

    どうも!LSSです!! 今年の夏は、あちこちで花火大会が中止になってるようですね。 今日は、ちょっと気分だけでも?と、「CSSでの花火作り」に挑戦してみました! 花火 コード 数日前から考えてましたが 花火 コード <style><!--@keyframes hnb{0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;left:150px;}50%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotte…

  • 【CSS】カードをめくる【挑戦途中】

    どうも!LSSです!! 先日の記事、「【CSS】はためく【実用性ある??】」の応用ですが、「カードをめくる」という動作を、実は以前からやってみたいと思っていました。 実際に作れる事は知っていましたが、今回ちょっと挑戦してみたのです。 カードをめくるサンプル コード 解説…とまでいかないですが、とりあえず理屈だけ とりあえず、めくる動作は出来ていますが カードをめくるサンプル // 割とリアルな動きでしょ^^ めくる ↑「めくる」をクリックしてみてください^^ コード <style><!--.card{position:relative;width:150px;height:200px;}.a{…

  • 【駄文】こんな推理小説が書きたい!【と思っているけど多分書けない】

    どうも!LSSです!! 読書量はそう多くないですが、一応、推理小説好きのつもりでいますw かなり以前から「トリックは出尽くした」と書かれていた文献も目にしましたが、今なお新しい試みに挑戦しつづけるジャンル。 の、ちょっと思うところを書いてみます。 自分では書いた事がない、わけでもないのですが こんな推理小説が書きたい! タイトル「へっぽこ探偵の事件簿(仮題)」 回が進むにつれてじょじょに、ずさんさが目立ってくる推理 違和感を感じた読者がよくよく読み返してみると… …と改めて書き出してみると 自分では書いた事がない、わけでもないのですが このブログに、「自作小説」カテゴリを設けており、主にかなり…

  • 【CSS】はためく【実用性ある??】

    どうも!LSSです!! 昨日の記事、「【CSS】transformを使って、要素を立体的に傾けてみる」の応用で、ちょっと遊んでみました。 サンプル コード 見出しもはためきます 画像もはためきます! サンプル はためく コード <style><!--@keyframes htmk{from{transform:perspective(150px) rotateY(-15deg) rotateX(15deg);}to{transform:perspective(150px) rotateY(15deg) rotateX(-15deg);}} .nbr{display:inline-block;t…

  • 【CSS】transformを使って、要素を立体的に傾けてみる

    どうも!LSSです!! 以前にもtransformプロパティを試してみた事はありましたが、「最低限、何が必要なのか」イマイチ掴めていないところがあったので、色々実験してみました。 rotateYのサンプル コード 最低限、必要なのは divをspanにしても、うまくいかなくなる divとspanの違いは、ブロック要素かインライン要素 では、インラインブロック要素では? 再度、widthを削除してみます 角度指定を正の値にしてみる transform-origin:0% 50% 0px; ちょっとだけrotateX 応用~他の装飾をした要素に併せて指定できます まとめ rotateYのサンプル …

  • 今週のお題「怖い話」:ラーメンズのコント

    今週のお題「怖い話」 どうも!LSSです!! 今回は「お題」記事を書いてみます! 「ラーメンズ」というコントコンビが大好きなんですが、不思議な笑いのコントになかに「怖い話」がいくつかあります。 コントなので、笑いに溢れているんですが、とても怖いオチが待っていたりして感情を揺さぶられる感じですね。 以下、そんな「怖い」コントをYouTubeの「ラーメンズ公式」チャンネルからいくつか。 「小説家らしき存在」 小説家「常居 次人」と原稿の完成を待つ編集者。眠くてたまらない編集者に、小説家は眠気覚ましに不気味な話を始めますが…。 「採集」 田舎で理科の教師になった男と、都会から里帰りしてきた男。学校の…

  • 【考察】2分の1の確率で、賭けた得点が2倍になるか没収となるか、というゲームの攻略法?

    どうも!LSSです!! ふと、学生時代に同級生から聞いた話を思い出したので、書いてみます。 確率2分の1 必勝法?? 注意点 2進数にある程度関わった人ならおなじみの話ですが 今になって初めて、試してみます! いかがでしたでしょうか? 確率2分の1 プレイヤーはあらかじめ、一定数の得点を持っています。 この中から、1ゲームにいくら得点を賭けるか、都度自由に選ぶ事ができるものとします。 2分の1の確率で、勝てば賭けた得点が2倍になって戻ってきます。 負ければ、賭けた得点は没収となります。 2分の1の確率は完全なる運ゲー。 また、ゲーム回数に制限はなく、プレイヤーの意思で継続・終了するものとします…

  • 【ジョーク】吉しか出ないおみくじ!【小ネタ】

    どうも!LSSです!! 今日はさっぱりとした小ネタでいきますw 昨日のおみくじのジョーク改変になりますw // 吉しか出ないおみくじを引く 一応、コード <div id="gamen" style="height: 60px; font-size: 30px; font-weight: bold; border: 1px solid black; background-image: radial-gradient(circle at 65% 35%,#ffffff 0%,#ddddbb 100%); text-align: center;"> </div><script>kuji=["大吉",…

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

    どうも!LSSです!! 今回は、JavaScriptをちょっとやってみたい人向けに、「なるべく簡単なコードでちょっと遊べる」ものとして「おみくじ」を作り、その解説をしてみたいと思います^^ おみくじ コード コード詳細解説 <div id="gamen"></div> kuji=["大吉","吉","末吉","凶","大凶"]; function gamen_w(){ a=Math.floor(Math.random()*kuji.length); gamen.innerHTML=kuji[a]; <a href="#" onclick="gamen_w();return false;">おみ…

  • 旅行者になったつもりで神戸を練り歩いた日

    どうも!LSSです!! 今回の記事は、昨日、チャーハンリベンジした後、「旅行者になったつもりで神戸を練り歩いた」話です。 新神戸駅 新神戸駅から南に歩き、バス道から西南方向に向かう 神戸の観光名所のひとつ「中華街」 肉まん買ってみた ポートタワーとメリケンパーク ハーバーランドに到着! あとがき 新神戸駅 恐らく、遠くから来られた方の大半が「新幹線」を利用されるのではないでしょうか。という事で、新幹線の玄関口である「新神戸駅」を振り返った(という設定)の写真からスタートです^^ 新神戸駅は「生田川」の上に建てられており、新神戸駅の南側の生田川は放水によって水量がかさましされています(写真左側参…

  • チャーハン リベンジ!

    どうも!LSSです!! だいぶ前の記事になりますが、 にて、チャーハン作りに挑戦しました。 あれからだいぶ間が空きましたが、今日の昼、ようやくリベンジする事になりました! だけど前の記事を読み返さずに開始!w まずは材料をどんぶりにあけていきます! まぜまぜ~♪ フライパン篇 油をひきます、今回は。 いざ、投入! この段階で思ったのは そろそろいいかな? 先に材料を混ぜていたどんぶりを洗い、盛り付け まとめ だけど前の記事を読み返さずに開始!w リベンジでありながら、前回記事を読まずに作り始めますw まずは材料をどんぶりにあけていきます! 1杯分のご飯、卵1個、しょうゆ、と「卵かけご飯(TKG…

  • 【特に記憶に残ったFLASH作品】なつみSTEP!を語ってみる

    どうも!LSSです!! 今日までにネットを彩ってきた技術の中に、Adobe FLASHというものがあります。 PDFやPhotoshop同様、Adobe社が提供する技術ですね。 Adobe FLASHって? なつみSTEP! 一見、なにやら明るく楽しげなムービー 他にも様々なFLASH作品がありますが Adobe FLASHって? Adobe FLASHがどういうものかというと、アニメーションや音楽、スクリプトで動的なコンテンツを制作でき、また各種インターネットブラウザがそのままページ上で再生可能なプラグインを組み込めた、というものです。 それにより、「Webで手軽に動的コンテンツを楽しめる」…

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

    どうも!LSSです!! 昨日の記事では、文字を読みやすくするために使うtext-shadowの使い方を書きました。 今回はそれ以外にも考えられる方法をひとつ、提案してみます^^ 文字部分だけ別に塗りつぶす ついでに文字の中央寄せ せっかくの塗りつぶし背景をあえて半透過させてみる あとがき 文字部分だけ別に塗りつぶす 元 text-shadow以外にも、例えば「文字部分だけ、塗りつぶし背景を使う」という手が考えられます。 文字部分だけ別に塗りつぶす text-shadow以外にも、例えば「文字部分だけ、塗りつぶし背景を使う」という手が考えられます。 コード <div style="backgro…

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

    どうも!LSSです!! 背景つきのボックスに文字を入れた時、背景がごちゃごちゃしていて文字が読みづらくなった、という経験はありませんか? そんな時に、文字色を変えてみたり、文字サイズを大きくしたり、太字にしたり…で対処する事があるかと思いますが、それでもどうにもならない時に「text-shadowを使う」という、もうひとつの手段があります!という内容の記事です^^ なお、今回のサンプルとして、「白と黒を使用しているために極端に文字が読み難くなる」、水玉デザイナーの「ぱんだちゃんコード」を使用しています!※width、heightの指定を削除し、他にボックス装飾要素を加えて使用しています。 普通…

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

    どうも!LSSです!! ちょっと先日来、考えていた「text-shadowを複数書き連ねてどんな効果が出るか?」を何通りか試してみました。 CSSサンプル、というよりは実験的な内容となります。 虹色の影 間に白を挟む 疑似グラデーション とりあえず解説 虹色の影 虹色の影! コード <span style="font-size: 40px; font-weight: bold; color: #f00; text-shadow: 2px 2px 0 #f80,4px 4px 0 #dd0,6px 6px 0 #0d0,8px 8px 0 #0dd,10px 10px 0 #00f,12px 1…

  • はてなブックマークの話

    どうも!LSSです!! 最近、公式の「週刊はてなブログ」を読者登録したのですが、今日、 ↑こんな記事が出ていましたね! はてなブックマーク、はてなブログにはデフォルトで、 はてなスター コメント はてなブックマーク と手厚く交流用の手段が用意されています。 公式からこういったアナウンスが出た事で、使われ方も変わってくるのかもですね。 そしてやっぱり、はてブ新着や人気に掲載される方法はナゾとの事w アルゴリズムが変わった可能性もなんとなく感じています。 さーて、このブログが再び はてブに載る日は来るのかなぁwww

  • リモートの話とイモートの話(…無理があるなぁw)

    どうも!LSSです!! 今回は今日の話。 つまり日記ですが、なんか二本立てになってしまいました! LSSにとっての初めての話と、妹にとっての初めての話が今日に重なったものでw 初めてのリモートワーク イモートにとっての初めての… 初めてのリモートワーク コロナによる緊急事態宣言が出ていた頃、世間のあちこちの会社で急遽、テレワークを導入されましたね。 うちの職場も、テレワークに切り替えられる人は切り替えて、交代で出てきたりテレワークだったり。 あ、テレワークっていうのが一般的っぽいですが、うちの職場では「在宅勤務」と言ってます。 もしかすると実態はほぼ「自宅待機」かもですが。 で、それが「切り替…

  • 暑い夏を乗り切るためのグッズ まだまだ!

    どうも!LSSです!! 梅雨も明け、8月に入りました! いよいよ…夏の暑さとのバトルも白熱してきますね^^;;; エアコンのない部屋で毎年死にかけていた時期もありましたが、エアコンはやはり必須です。 必須ですが、それ以外にも暑気対策に使えそうなグッズを模索しています。 これまでにブログネタにした事のあるグッズ 首掛け扇風機 ネッククーラー 他にもあるある こんなグッズ! 空調服 ベルトファン 冷風扇 扇風機 グッズに頼らない暑気対策も書いてみます! 水シャワー 氷水バケツに足をつっこむ グッズ使用をメインに暑気対策について書いてみました これまでにブログネタにした事のあるグッズ 首掛け扇風機 …

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

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

  • 昨日、どこパレサービス終了!思い出を語る(後編)

    どうも!LSSです!! 記事を書こうとして、はたと気が付きました。 昨日の記事のタイトルが「本日、どこパレサービス終了!思い出を語る(前編)」で、「本日」とつけていながら「前編」って…。 日付変わってから書く「後編」のタイトルどうするんだ!?www といいつつ、このようなタイトルになりました! 前編のあらすじ 熱血くん、リーダーを口説く! 一応、ここで自分の考えを 行動開始!(熱血くんが) 破滅?を見る前に自ら脱退 結局「自分でチームを立てるしかない」 さすらい人の底辺酒場 サービス終了まで、そのまま続けさせていただきました すごく有難いことには 前編のあらすじ スマホゲー「ドラゴンクエスト …

arrow_drop_down

ブログリーダー」を活用して、LSSさんをフォローしませんか?

ハンドル名
LSSさん
ブログタイトル
LittleStrangeSoftware
フォロー
LittleStrangeSoftware

にほんブログ村 カテゴリー一覧

商用