かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ 今回は、「漫画のような雲型のフキダシをSVGで描いてみたけど下手すぎた」話と、「雲型のフキダシSVGを画像borderに使用してみたけど…」という話の2本立てでお送りします！！ SVGで描いてみたフキダシ かっこいいフキダシとは 以下、未解決案件^^; SVGで描いてみたフキダシ なんとか頑張って描いてみました（例によってコード手打ち） 中の四角は後で消しますが、文字を入れるスペースを確保するための目安です。 コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 20 12"> <re…
どうも！LSSです！！ 昨日の記事中で、 SVGはベクター形式の画像ですが、例えていえば「絵描き歌」みたいなもので、 「まーるかいてちょん、まーるかいてちょん」みたいな「描き方の指示」が書かれているというのが基本である以上、写真画像などを表示するのは不向きである、というのは常に ついて回ります。 インラインSVGについて、ぼーっと考えてみた - Little Strange Software てな事を書きました。 「絵描き歌」みないなもの、というのは我ながら大胆な比喩だったな、と思いつつ、要は「描き方の手順を順に文（テキスト）で表記したもの」という事が言いたかったんですね。 というわけで、今回…
どうも！LSSです！！ SVG、特にインラインSVGという「文字なのに自由に画像を表現できる」技法について、色々考えてました。 メリットとデメリット まぁ、それでもやっぱり SVGとCSSの比較（画像として考えた場合） メリットとデメリット まぁ、あの意味不明な文字の羅列を見た事がある人はまず、「めっちゃ面倒くさそう。画像を貼り付けたらいいだけの話でなんでこんな面倒な事すんの？」って思われるかな？とは、いつも思いますw デメリット：面倒くさい でも、それを上回るメリットもあります！ メリット：文字列なのでプログラムから加工しやすい ただし、これはこのメリットをどう活かすか？を考える方がちょっと…
【CSS+SVG】リスト li タグのマークも、SVGで自由に描ける！！【実験成功】
どうも！LSSです！！ 先日、 little-strange.hatenablog.com の記事にて「背景画像にインラインSVGを当てる」事ができました。 その時はbackground-imageプロパティにSVGを適用していました。が、CSSには background-imageと似た書式を利用する「border-image」や「list-style-image」があります。 そのうち、list-styleについては、 【CSS】箇条書きのドットに色をつける【list-style-image】 【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます 【CSS】ナンバリング…
どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ太字 影色 影位置・横影位置・縦影ぼかし コード // サンプルです。'; gamen.innerHTML=txt; code.innerHTML=txt.replace(//g,'>'); } // ]]> 使い方 「文字色 文字サイズ 太字」で、装飾対象となる文字の設定ができます。 「影色 影…
世界名作劇場シリーズ・牧場の少女カトリについて語ろう！【後編】
どうも！LSSです！！ 世界名作劇場シリーズ・牧場の少女カトリについて語ろう！【前編】 に続き、後編です！ カトリに翻弄される男たち マルティ ペッカ おおまかな舞台の変遷 ライッコラ屋敷 クウセラ屋敷 都会 残念（？）なところ 終盤の作画崩壊 原作の翻訳を読んでまたびっくり もっと最近になって、こんな本を買いました 話がだいぶそれましたが カトリに翻弄される男たち マルティ カトリと同年代の男の子。 カトリの家と遠縁の親戚（だけどお金持ち）の屋敷のぼっちゃん。 金持ちである事を鼻にかけない、気さくな男の子で、勉強が嫌い。 かなり早い段階でカトリと知り合い、働きたいカトリから「あなたの屋敷で雇…
世界名作劇場シリーズ・牧場の少女カトリについて語ろう！【前編】
どうも！LSSです！！ タイムボカンシリーズ・オタスケマンについて語ろう！と同じノリの記事タイトルですが、中身も同じノリですw 世界名作劇場シリーズは子どもの頃にリアルタイムで見ていて、フローネ・ルーシー・カトリ・セーラ・ポリアンナあたりが特に本放送を見ていた世代にあたります。 で、このシリーズ中でどれが一番好き？と問われると、自分は「牧場の少女カトリ」！！と躊躇なく答えますw …ただ、このシリーズ、年代や好みによってどれが一番かは大きく別れると思いますので、あくまで個人の好み、って事でw といっても、本放送時はそれほど印象に残らなかった だいぶ後になって、再放送で見た時に、かなり引き込まれま…
【JavaScript】DOM（DocumentObjectModel）を試してみます【実験】
どうも！LSSです！！ これまで、JavaScriptで画面を書き換えるのにもっぱらinnerHTMLを使用していました。 JavaScriptには他にDOMという方法があります。 Document Object Model の略で、HTMLドキュメント（ページ）をオブジェクト（モノ）として扱う、って事ですね。 テスト ちょっと作りたいものがあって テスト ボタンを押すたび、スライダーが増えます（意味はありませんがw） // コード <div id="gamen"><input id="apbt" type="button" value="追加" /></div><script>// <
どうも！LSSです！！ 以前、 little-strange.hatenablog.com の記事中で、 この、「HTMLコード中にSVGタグで描画」したものを、「背景画像として繰り返し配置して描画」するのは、実はとっても困難だったりします^^;;; 【SVG】紗綾型、なんか…できたっぽい - Little Strange Software てな事を書いていましたが…どうやら「それほど困難でもなさそう」です！ 今回はそのやり方を見つけたので、挑戦してみます^^ サンプル コード CSSのbackground-imageプロパティについて 同様に画像を扱うプロパティとして 色変更・サイズ調節など…
お題「#この1年の変化 」 どうも！LSSです！！ 今回はお題記事です。 「この1年の変化」…となると、自分の場合、やはりブログの話ですね。 一年前の記事 本来、Androidアプリ開発ブログのはずだった そうか、もう一年になるのか 一年前の記事 little-strange.hatenablog.com 散歩記事でしたw で、この記事の前日の記事が、はてなブログのテーマをレスポンシブ対応テーマに変えたのとその後の対応について書いていますね。 本来、Androidアプリ開発ブログのはずだった 今もなお、aboutページやTwitterのプロフもそのままなんですが、ここ一年ほど？すっかりCSS＋…
どうも！LSSです！！ はてな公式のお知らせで、新機能の追加の情報がでていましたね！ …といっても、いつも はてな公式からのお知らせはちょっと控えめで、気づかない方も多いんじゃないか？と思っているので、広報のお手伝いのつもりで記事にしてみますw アイキャッチ画像作成機能！？ はてなからのお知らせにどこで気づくかというと… ちょっとやられた感 アイキャッチ画像作成機能！？ staff.hatenablog.com テーマデザインの企画から、なんかcanvaと仲良くしてるな、って印象はありましたが（テーマデザインの賞品にcanvaの使用権が用意されています）、こんなコラボ機能も準備されていたんです…
「とにかくプログラミングをやってみたい！」という人に何をお勧めするべきか？
どうも！LSSです！！ 最近、職場の人と雑談していた折の事。 「中学生の息子と自分と、プログラミングを覚えたい」てな話がでました。 全くの未経験。 そんな時に、何をオススメするべきか？ちょっと考えてしまいました。 何をやりたいか？ スクラッチ 仕事でExcelとかを使ってる方はVBA！ ブログやサイトを運営されている方にはJavaScript！ スマホで自分のプログラムを動かしたい！ AIと親和性が高いPython あとがき 何をやりたいか？ 多分、上記のように言う方は「プログラミングを覚えて何かをしたい」がなくて、「なんとなくプログラミングできるようになりたい」だけが漠然とあるんでしょうね。…
どうも！LSSです！！ 「変わり種」が大好きです！ そりゃもう、ジャンルを問わず、どこか「変わったところ」があるモノにグッとくる習性（？）がありますw そんなLSSですが、だいぶ前に何かのきっかけで「気になるネットショップ」を見つけました！ サンコーレアモノショップ 以前にもブログのネタにさせていただいた、 Amazonに出ているものでいうと… 公式から最近ポチっちゃったモノ サンコーレアモノショップ どこかで広告を見たのがきっかけだと思いますが…ブログ活動を始めるよりちょっと前かな？ 早速リンクを張ってみます！ www.thanko.jp で、もちろんAmazonにも出店されています。 am…
どうも！LSSです！！ 今回は「それほど特別な知識じゃないけど、知ってるとちょっと嬉しいかも？」な部分について書いてみます。 Aタグについて 小技その1 別ウィンドウ（別タブ）で開くリンク 小技その2 同じページの一番上に戻るリンク 小技その3 サイトトップページに戻るリンク あとがき Aタグについて 世界中の情報が網のように繋がるインターネット。 そのサイトとサイト、ページとページを繋ぐ役割を担う、基本にして最重要とも言えるタグ、それがリンクを形成する「Aタグ」です。 基本的な書式（書き方）は次のようになります。 コード <a href="リンク先のURL">リンクがかかる文字</a> 赤と…
どうも！LSSです！！ バレンタインでしたねー ちょうど一年前の今日は、 こんな記事を書いていました。 試練の日である事も含めて、面白い風習だと思いますね。 ただ、今年は…そもそもコロナの影響下にある事、さらに直前になって東北で大変な地震があって、それどころじゃなくなった方も多数おられそうです。 自分はそもそもあまり関係のないイベントなんですけどねw ただ、バレンタインで思い出すのは…ここでも何作かあげてる「昔書いた小説」、まだあげていないものにバレンタインネタの作がありました。 何度かあげようか迷って読み返してみたりもするんですが…自分の昔のハンドルネームにちなんだネタが混ざっていたりして、…
どうも！LSSです！！ 今回はファイル読み込みの実験です。 テキストファイル読み込み、画像ファイル読み込みを行う処理を極力シンプルに書いてみます。 …実験段階で書いてるので、いつも以上に訳の分からない記事となっておりますw テキストファイル読み込みテスト サンプル コード コード解説 画像ファイル読み込みテスト サンプル コード コード解説 とりあえず、読み込み方だけ分かった感じ テキストファイル読み込みテスト サンプル // /g,'>').replace(/\n/g,''); gtxt.innerHTML=txt; } // ]]> コード <p><input id="ftxt" acce…
どうも！LSSです！！ まぁ、あれですね。 「好きなものについて語ろうとすると1記事では収まらない」悪い例がまた発動です。 以前の事例としては、 魔界塔士Sa・Ga - Little Strange Software まだ書き足りない！魔界塔士Sa・Ga - Little Strange Software がありましたがw おとといの記事、 どこがどう好きか、は書き尽くしたはずでしたが…。（最終回ね） 書いてなお蘇るモノ 2パターンある「アターシャの結婚式」 CDのほうの話 みどころ（聴きどころ？） ギャグだけど…アターシャかわいそう 先にちょっと書きましたが、「王道復古」について 書いてなお…
どうも！LSSです！！ 先日作った【ツール】アイキャッチ画像切り出しツールに、機能追加しました！ アイキャッチ画像切り出しツール改 新機能！ 使い方 画像を重ねられる事によってできる事 まだ実装していないアイデア アイキャッチ画像切り出しツール改 設定画像1画像2画像3 ベース色画像幅画像高 横位置 縦位置 拡大率 縦横比 回転角 透明度 横位置 縦位置 拡大率 縦横比 回転角 透明度 横位置 縦位置 拡大率 縦横比 回転角 透明度 // '; txt+='横位置 : '+dc.getElementById('ix'+j).value+' '; txt+='縦位置 : '+dc.getElem…
どうも！LSSです！！ タイムボカンシリーズ、数あれど、その中で一番「オタスケマン」が好きなLSSですw …と言っても、シリーズ中もっともメジャーなのは「ヤッターマン」でしょうし、シリーズ通してみていた方でもあまり「オタスケマン」は印象に残っていないかも知れません。 正直、自分も子どもの頃に本放送を見ていて、あまり印象に残った作品ではありませんでした^^; が、後に再放送で見た時に「ええええっ！？」となり、そこから一気に「シリーズ中一番好き」な作品になったのですw 今回はそんな「オタスケマン」について語っていきます！ 舞台設定 怪人トンマのマント オジャママンの正体 オタスケマンの正体 毎回の…
どうも！LSSです！！ LSSは40代後半にさしかかったおっさんですが、子どもの頃に見ていたTV番組、今とはだいぶ様相が変わってますよね。 様々な番組が思いおこされますが、今回はそのなかでも「シリーズ展開していたもの」について、「個人的な好み」でのマイベストについてつらつら書いてみます！ 世界名作劇場シリーズより「牧場の少女カトリ」 スーパー戦隊シリーズより「五星戦隊ダイレンジャー」 タイムボカンシリーズより「オタスケマン」 もちろん、もっとも、 世界名作劇場シリーズより「牧場の少女カトリ」 スポンサーによって、若干シリーズ名が変わったりもしましたが、 世界名作劇場 - Wikipedia 「…
どうも！LSSです！！ 記事タイトルの通り、 このブログを読者登録してくださっている方が400人になりました！！ 増えるペースはごくごくゆっくり 読者登録していただいた方のブログは、こちらも登録 …というような軽い内容の記事でも 増えるペースはごくごくゆっくり 以前に記事で読者数について触れたのは、 333人の時でした。 これが去年の7月の話なので、いかにゆっくりペースかが分かりますねw …実際のところ、今は積極的に増やそうと思ってはいないので（でも増えたら嬉しいw）、たまに読者登録していただいた通知を見ると「おおっ^^」ってなります。 読者登録していただいた方のブログは、こちらも登録 させて…
どうも！LSSです！！ 昨日の記事で最後に書いていた、 画像ファイルを選択 画面にそれを表示しながら、拡大縮小・回転・切り抜きなどの処理を行う 加工処理を終えたものをダウンロード保存 なんて事ができれば、たまに「448x252ピクセルにした画像をサムネイルとして使用」する手間がだいぶ省けそう！ 【HTML】またもinputタグ。今度はtype="file"を試してみます！ - Little Strange Software ですが、なんか出来たようです^^ アイキャッチ画像切り出しツール 使い方 参考までに このツールのコードを晒しておきます あとがき アイキャッチ画像切り出しツール 横位置 …
【HTML】またもinputタグ。今度はtype="file"を試してみます！
どうも！LSSです！！ 最近、 【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました！【実験】 - Little Strange Software 【HTML】初めてスライダー（<input type="range"/>）を使ってみました - Little Strange Software 【HTML】HTMLタグにカラーピッカーが実装されてた！ - Little Strange Software などの記事で、様々な<input>タグを試してきました。 今回は…とうとう？一番、扱いが面倒そう？な「type="file"」を試してみます！…
【決定！】LSSってこんな人！【いただいたコメントの集計から見た、皆さんの持たれているイメージ】
どうも！LSSです！！ 先日の記事、LSSってどんな人？ - Little Strange Softwareに、多数のコメントをいただき、誠にありがとうございます^^ コメント欄・はてなブックマークコメント・Twitterと様々な箇所でいただきましたので、「とりまとめてみると、どんなイメージを持たれているのが多いか？」を可視化すべく、数えてみました！ なお、言うまでもない事ではありますが、コメントひとつひとつがその方の持っておられる「LSSのイメージ」である事は間違いなく、「そう思ってる人が多い・少ない」だけの話であって、優劣を競うものではない事を、念のため、あらかじめお断りさせていただきます…
どうも！LSSです！！ 昨日は、ふと思いついた疑問に多数のコメント・はてブ・Twitterのリプでご回答をいただき、ありがとうございました^^ ちょっと予想を超えた反響でした！！ あと、わざわざ新たに描いてくださった方も2名おられ、めっちゃ嬉しいです！ がっつり保存しましたw これは…あれですね。 「集計記事」もあげる流れ？w （投票ルールを定めていませんでしたが、そこはまぁなんとか） ちょっと余裕を見つけて、まとめて記事にしてみますね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 先日の記事で、リトル・須藤蓮二氏の写真をネタで公開したところ、 「LSSのイメージと違う」 との声を多数いただきました！w あまりに多くの方から言われたので、思ったんですが、 「皆さんが持っているLSSのイメージってどんなのだろう？」と。 そしてそのイメージは共通してるのか、人それぞれなのか？も気になるところです。 そこで、はてなフォトライフからいくつかの画像を引っ張ってきてみました！ どの画像が一番、あなたの持ってるLSSのイメージに近いか、コメントで教えてください！！ エントリーNo 1 エントリーNo 2 エントリーNo 3 エントリーNo 4 エントリーNo 5…
【JavaScript】コード作成ツールの作り方【コード出力篇】
どうも！LSSです！！ 今回は一昨日の記事、【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Softwareの続きとなります！ 前回は、飾りの部分を操作できるようにするところまで書きましたが、「コード作成ツール」として必須である、「コードを画面上に表示する」ところまで至りませんでしたので、今回はその部分を書いていきます。 なお、今回も「普通にブログを書いたり飾りつけしたりする人」には向かず、「コピペ用のコードを配布する人」という狭い層に向けた内容となってしまっています^^; 前回のラスト まずは、コードを入れる箱を用意します HTMLタグを無効化す…
16:30～17:2016:30～17:20まるいのをSVG 化する仕組みと挑戦。基調講演株式会社Little Strange SoftwareCEO リトル・須藤 蓮二SVGが単にIllustratorで開けるデータと思っていたのはきっと自分だけではあるまい。CSSの本を読んでいると眠くなってくるのはかつて数学の授業で感じたあの感覚と同じなのではないだろうか。特別講演CSSをゼロから理解する。MARUINOfutureOnline eventCSSとSVGの未来2021.2/1 16:00startMARUINO future Online event運営事務局 問い合わせ 000-0000…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
