Little Strange Software

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

2022-01-01から1ヶ月間の記事一覧

【CSS+SVG】枠装飾、border-imageによるバクダン2種と雲型

どうも!LSSです!! 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その1 バクダン その2 雲型の枠 その4 その他の調整について あとがき バクダン その1 '…

【CSS+SVG】雲型の枠を作れないか試み中…【実験】

どうも!LSSです!! 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インライン…

そうだ、もうすぐ節分

どうも!LSSです!! しばらく、border-imageプロパティと格闘していたら、頭が沸きましたw border-image の検索結果 - Little Strange Software …うん、いったん忘れる事にしますw(border-imageとradial-gradientの組み合わせについて考えていました) …

【CSS】filter:drop-shadowが面白い!【実験】

どうも!LSSです!! だいぶ古い記事ですが、 little-strange.hatenablog.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありまし…

ちょっとびっくり→Microsoft365に図形のSVG保存機能があったんですね

どうも!LSSです!! Microsoft365(旧称Office365)…WordやExcelなどのいわゆるOfficeソフトですね。 それに昔から「図形の挿入」機能があり、多角形や矢印、フキダシなど様々な図形を用意に挿入する機能がありました。(図形・図・オートシェイプなど色々…

【CSS】楕円形の吹き出し【小ネタ】

どうも!LSSです!! ふと思いつきで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます! - Little Strange Software 【CSS】色違い吹き出し - Littl…

昨日のマウスストーカー、ちょっと修正しました。

どうも!LSSです!! 昨日の記事、 little-strange.hatenablog.com ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。 公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動…

【JavaScript】ありきたりなマウスストーカーを作ってみました

どうも!LSSです!! 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 ※1/25追記。PC(Windows+Chrome)とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、…

【CSS】棒グラフも文字入れ

どうも!LSSです!! little-strange.hatenablog.com で作った棒グラフも、 【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software ↓【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software と同様に文字を入れてみまし…

【CSS】backgroundプロパティで描く棒グラフ

どうも!LSSです!! 【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software 【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グ…

今週のお題「現時点での今年の漢字」

今週のお題「現時点での今年の漢字」 どうも!LSSです!! はてなブログ「今週のお題」ですが…なんかすごく気の早いお題ですねw 今年が始まって21日めですが、まだこれからというところなので、期待したいものを考えると… 癒 「いやし」、としておきます。 …

【CSS】お手軽円グラフの文字入れ・その他

どうも!LSSです!! 【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software で、お手軽なコードで円グラフをWebページに入れる方法について書きました。 実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいう…

【CSS】お手軽(?)な円グラフの描き方【小ネタ】

どうも!LSSです!! ブログやWebサイトを構築されている皆様、ページ内に「円グラフ」を使いたくなった事はありますか? 自分は今のところありません。 が、もし必要となった場合… お絵描きソフトで描く Excelのグラフ機能を使って描く など、他のソフトを…

【つまづき】丸で囲む文字、を作ろうとしたらiPhoneでズレまくった話^^;

どうも!LSSです!! ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりw 解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。 丸で囲む文字 PC+Chromeではそこそこ正常 解決策は…

BENTO QUEST

どうも!LSSです!! 「日記」カテゴリですが、これは1/16の日曜日の事。購読中のブログのとある記事に触発され、探索の旅路に出たのでした。 hukunekox.hatenadiary.jp ↑全国の都道府県の名勝・名産を はにわのハニーズが紹介するシリーズ、山形編。の最後…

フルハウス・ナイツ

どうも!LSSです!! 昔、日本ではNHKで放送されていた海外ドラマの名作に「フルハウス」というのがありました。 全世界的に人気があったらしく、とても長く続いたドラマで、今はネットフリックス限定配信の「フラーハウス」という続編がありますね。 大のフ…

【CSS】ちょっと扱いやすくした?罫線背景【はてなブログ向け】

どうも!LSSです!! 昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。 little-strange.hatenablog.com ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模…

【CSS/実験】罫線背景

どうも!LSSです!! ちょっと背景を罫線にしてみました。 line-height で、行の高さもあわせてみたのですが…さていかがなものか? …これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^; 例えば…ちょっと文字を大きくしてみた…

【CSS】一応、スペードも描いてみました【小ネタ】

どうも!LSSです!! 【ツール】ハートマーク背景コード生成ツール - Little Strange Software で様々なハートマークを描けるようになりました。 ハートマークはバレンタインデーからの連想ですが、トランプのマークのひとつでもありますね。 とすれば、スペ…

【ツール】ハートマーク背景コード生成ツール

「ハートマーク背景コード生成ツール」を作ってみました。

【日記】はてなスターの仕様が急に変わりましたね

どうも!LSSです!! はてなブロガーの皆様には、今さら記事にするまでもない話ですが…今日、はてなスターの仕様ががらっと変わりましたね! staff.hatenablog.com 最初、その時読んでたブログの人がカスタマイズしたのかと思っちゃいましたw まだ変わった…

【和柄CSS】青海波(せいがいは)

どうも!LSSです!! 和柄CSSチャレンジ、今回は「青海波」です。 「あおうみなみ」と訓読みしたくなりましたが、「せいがいは」または「せいかいは」と読むようです。 画像検索してみると、そのパターンも必ずしも決まっているわけではなく、様々なバリエー…

【和柄CSS】千鳥格子

どうも!LSSです!! 最初に思った以上に手ごわかった模様「千鳥格子」。 また閃きがあり、試してみたところ、うまくいきました^^ 千鳥格子 コード 模様の構成 繰り返し模様が面白い^^ 千鳥格子 .chidori{ width:300px; height:200px; background: conic-gra…

【和柄CSS】分銅繋ぎ+α

どうも!LSSです!! CSSの背景模様、今回は「分銅繋ぎ」に挑戦してみました。 分銅繋ぎ コード コード解説 余録・千鳥格子に失敗したの巻 分銅繋ぎ .fundou{ width:300px; height:200px; background: radial-gradient(farthest-side circle at 100% 100%,tr…

【CSSサンプル】亀の甲羅のような模様

どうも!LSSです!! 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「…

【駄文】ふと、思いついたトランプゲーム

どうも!LSSです!! このブログに「ブラウザゲームそのままプレイ カテゴリーの記事一覧」というブラウザゲームカテゴリがありますが、「この正月中にすごろくゲームでも作りたかったな(仕様が固まらなくて作れず)」とか「神経衰弱をpreserved-3dを用いて…

【CSS】CSSオンリーでレンガ模様・改善版

どうも!LSSです!! little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コ…

【CSS】CSSオンリーでレンガ模様

どうも!LSSです!! もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事があり…

強引にlinear-gradientでラインアートしてみたところ…

どうも!LSSです!! 三が日最終日! 姪っ子(赤さん)もすっかり馴染んだところで、帰ってしまいました^^; また当人が忘れる前に来るように、と妹(ママ)には言っておきましたw さて、かなり以前に little-strange.hatenablog.com JavaScriptでcanvas要素…

おみくじのコード解説

どうも!LSSです!! 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style>#omikuji{width:280px;padding:10px;font-size:40…