【JavaScript】コード作成ツールの作り方【さわり】

どうも！LSSです！！ 今回は、「コード作成ツール」をどんな風に作っているか、の さわりの部分について書いていきます！ はじめに、基本形のコードを書きます JavaScriptのinnerHTMLを試してみます 上記2つを合わせてみると 画面を書き換えるコードを関数化する カラーパレットを呼び出すinputタグを追加！ タイトル 同じ要領でinputタグを増やせます！ はじめに、基本形のコードを書きます まず、ごくごく簡単にCSSを使ったコードを書いてみます。 コード <style>.waku{border:10px double #ffaaaa;}</style><span class="w…

【まいくらにっき】ぼくがかんがえたさいきょうのトロッコえき

どうも！LSSです！！ 久々に「まいくらにっき」ですw 「ぼくがかんがえた」といいつつ、考えたのはもうかなり前なんですが、自分でなかなか気に入ってます^^ マイクラのトロッコ駅に求められる条件 トロッコ駅制作の材料を用意します まずは4か所、穴を掘ります 発射装置を設置 発射装置に向かってホッパーを設置 最後の穴は、穴底にレッドストーンを設置 固形ブロックを設置 レッドストーンのたいまつを差します レバーを取り付けます 一か所、砂ブロックに置き換えます サボテンを植えます サボテンの上にブロックを置きます レールを敷きます 最後に、加速レールを設置します いよいよ試運転！！ マイクラのトロッコ…

【まだ作りかけ】<table>タグを書き出すツール【未完成】

どうも！LSSです！！ 昨日の記事に引き続き色々やってました。 だいぶ ノってきたんですが、ちょっと制作過程のものを晒してみたくなったので、ここで一旦お見せしちゃいます！ 作りかけサンプル 使い方で分かりにくそうなところがちらほら… そんな感じで作っていますが、最終的な着地点はどこになるんだろう？w 作りかけサンプル 列 行 行見出し背景色 列見出し背景色 stickeyを有効にする 枠線の重なりを共有 枠線色 枠線の幅 枠線のタイプ なし 実線 二重線 点線 破線 刻み 飛び出し 窪み 盛上 コード // \n\n'; for(i=0;i\n';} txt+='\n'; for(j=0;j'…

【作りかけ】単純に<table>タグを書き出すだけなら…

どうも！LSSです！！ tableタグの生成を、またinputタグ頼みでやってみました…が、見栄えがイマイチ^^; tableタグ生成 コードを生成するスクリプトのコード 問題点は、はてなブログのテーマ tableタグ生成 列 行 コード // '; for(i=0;i'; for(j=0;j'+j+'-'+i+''; } txt+=''; } txt+=''; gamen.innerHTML=txt; gamenc.innerHTML=txt.replace(//g,'>'); } // ]]> コードを生成するスクリプトのコード …は、こんな感じ↓なんですけどね <p>列<input id…

色々雑記。

どうも！LSSです！！ 色々雑記です。 昨日の記事 YouTubeで名前を連呼された話w まじめな記事なのに爆笑www 昨日の記事 昨日の記事、 <input>タグに頼ると割とラクにこういうツールが作れるんだなぁ、と実感しましたw 色、サイズ、位置の調整でしたが、他にもコード中で使用する、「アニメーションのタイミング」だったり、「直線グラデーションの角度」だとか、「変形（拡大縮小・傾き）」を調節するツールなんかも作れそうですね^^ 項目を増やしすぎても際限がないという事を踏まえつつ、次はどんなものを作ろうかな？って思ったり。 あ、昨日のはCSSを調節するものでしたが、SVGでもいけますね！ 「…

【ツール】色やサイズを調節して作るボックスのコードをお持ち帰りできるツール

「色やサイズを調節して作るボックスのコードをお持ち帰りできるツール」を作ってみました。 ↓このタブの中で色々設定を変更すると、その更に下にあるサンプルとコードの内容が変化します。気に入ったボックスが出来たら、コードをコピペして使用できます。 まずは色々遊んでみてください^^ 色設定サイズ光関連 ボックスの色 枠の色 文字の色 光の色 ボックス幅 ボックス高さ 枠幅 角の丸み 光の強さ 光の大きさ 光の位置（右） 光の位置（下） コード // これはテスト文章です。見た目はこんな感じになります。'; gamen.innerHTML=txt; cdview.innerHTML=txt.replac…

【駄文】最近やってる事

どうも！LSSです！！最近、ちょっとこういう「長方形をナナメに分けた背景」をCSSでスマートに表現するには？に挑戦してみたりしています。 …これがなかなか実は難しい^^; 「こういう、って、できてるじゃないか」と思われるかもですが、↑のは決してスマートとは言えない方法でやってますw コードはこんな感じ <div style="position: relative; width: 300px; height: 200px;"><div style="position: absolute; top: 0px; left: 0px; border-style: solid; border-color…

【HTML】HTMLタグにカラーピッカーが実装されてた！

どうも！LSSです！！ むかーし、HTML4.0時代に個人サイトを遊びで作ったりしていた身で、HTML5になってからだいぶ経った今、改めてCSSやJavaScriptを覚え直しているLSSです。 知らないうちに、色々な機能が追加されていてビックリする事も多々ありますが（※この場合の「知らないうち」＝およそ20年ですw）、CSSやJavaScriptだけじゃなくHTMLも新しいタグや、既存タグの機能拡張が見受けられます。 特に<input>タグ！ 昔は「基本的には一行の入力欄。ボタンなんかにも使ったりする。」程度の認識でしたが、 スマホ時代に合わせてなのか、こんなコントロールも追加されてたりする…

【はてなブログ】はてなブログに「下書きプレビュー共有」機能があったのを初めて知りましたw

どうも！LSSです！！ はてなブログに書き始めてから1年以上たちましたが、まだまだ知らない機能はあるものですね。 必要最低限の使い方が分かったら、あまりそれ以上追及しようとしないからなんですが、はてなの公式ブログにこんな記事が出ていました。 staff.hatenablog.com この記事の内容自体は新たに追加された新機能で、そもそも「固定ページ」というもの自体が はてなブログPro 専用の機能だったので、無料版の自分には縁がない機能という事になりますが…そのなかに、こんな過去記事のリンクがありました。 staff.hatenablog.com 2015年3月の機能追加…ほぼ6年前に実装され…

【CSSサンプル】タブ切り替え表示を2つ配置する場合

どうも！LSSです！！ 先日の記事、 を早速使ってくださった、421miyakoさん(id:m421miyako)から問い合わせがありました。 421miyako(id:m421miyako) このスライダーを何の意味もなく上下の仕切り線みたいに使って、数字を出しておくと読者が、なんじゃこれの感じで混乱して面白そうです。先日のタブですが同じページに二か所入れると干渉しますか？二つ目がうまくいかなかったのでどうかなって。 （ちなみに、使っていただいた記事はこちら） そういえば…IDを多用しているため、バリバリ干渉します！ 同ページ内で複数置く事を考えていなかったんですね^^; ラジオボタン・ラベ…

ぼ～く～は～ぞんびびびん！

どうも！LSSです！！ 今回は、「昔々、20そこそこの頃に作った曲をYouTubeデビューされたばかりのブロガーさんに演奏してもらっちゃった」話をしますw ぼ～く～は～ぞんびびびん！ 思い出話 曲を書く、といっても… かなり古い曲なのに、 おまけ：自分が作ったMIDIファイル ぼ～く～は～ぞんびびびん！ ↑曲名ですw 演奏してくださった、ギャクバリさん(id:minimalist-gyakubari)の記事はこちら！ minimalist-gyakubari.hatenablog.com 何記事か前のコメントで、…きわめて図々しいお願いかな？と思いつつも、「自分が昔作った曲」をリクエストしてし…

【HTML】初めてスライダー（<input type="range"/>）を使ってみました

どうも！LSSです！！ 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^; JavaScriptなら余裕！ というわけで「スライダー」の紹介でした こんなのです コード <input type="range" /> 最低限のコードでいうとこうなります。 めっちゃシンプルですねw 呼び名はたくさんありますね Androidにも、このコントロールはありました！ かなーり懐かしい記事ですが、Androidアプリ開発で…

【CSS・つまづき？】やはり…グラデーションはアニメできないのかな？

どうも！LSSです！！ 昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。 「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使える？そして、その方法だとすり抜けて（？）アニメーションしたりして！？」 …と。 と、いうわけで、試してみたのですが…結論から言うと失敗です^^; グラデーションがアニメーションしない 半分は成功…？ transitionが効いてない 他のプロパティなら、CSS変数を使っていてもアニメーションします！ グラデーション…

【CSS】試しに、CSS変数とラジオボタンを使ってみました【実験】

どうも！LSSです！！ 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数では？ CSS変数を変数的に扱えるかも！？ 実験！！ コード うまくいきました^^ CSS変数とは 基本的な使い方を簡潔に書くと、例えば width:100px; という指定をかけたりする際に、 --w1:100px;width:var(--w1); みたいな書き方でも、同じ結果になります。※「w1」は任意の変数名です。 --w1:100p…

【CSSサンプル】タブ切り替え表示【JavaScript不使用】

どうも！LSSです！！ 昨日の記事の実験、 を用いてサンプルを作ってみました。 まず最初は普遍的な（？）ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦！です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示・サンプル カンマチルダ文字数CSS #nkm1,#nkm2,#nkm3,#nkm4{display:none;}のように、カンマ区切りで複数のidに対して一括で指定する事ができます。…これ、知ってても忘れそうになりますね^^; #rdb1:checked~#nkm1{display:block;}この「~」は「兄弟要素」を指定する事ができ、この…

【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました！【実験】

どうも！LSSです！！ だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操作によるオン／オフ切り替えは、この「チェックが入ってるか否か」ぐらいしか方法がないようです。 ですが、「HTMLのフォームパーツ」で「チェック状態にできる」ものとしては、チェックボックスの他に「ラジオボタン」があります。 ラジオボタンってのは、 こんな風に、「いくつかの選択肢から一つを選んで、ひとつだけ有効になる」というパーツですね。 今回は…

【駄文】個人情報特定への備え「偽本名」

どうも！LSSです！！ 今回は、これまただいぶ前に考えたネタです。 ブログを書いたり、SNS投稿したりされている方には身近な問題ですが、この記事は「半分冗談、半分本気」ぐらいのていだと思ってくださいねw 世の中には凄い人がいるもので 偽本名 偽本名を考える上で、気をつけたい事 偽本名の使い方 と、考えた事をそのまま書きましたが 世の中には凄い人がいるもので 昔から、掲示板などでも「炎上」案件が発生すると、やらかした投稿者が公にしていないはずの情報（住所・本名など）を調査して晒す人がいたりしました。 どうやって調査してるか、みたいな話は置いておいてw それに対し、どう防衛するか、いかに匿名性を保…

余談：ハンバーガーメニューって

どうも！LSSです！！ 昨日の記事、 に関する、余談なんですが…。 なんとなく…ハンバーガーメニューについて考えているうちに、 【CSS】丸から四角に変形するボックス - Little Strange Software は、「ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。（ちなみにビッグマックが好きですw） スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですw 余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね！ 詳しくは、 note.com こんなノートを見つけました^^ …

【CSS】丸から四角に変形するボックス

どうも！LSSです！！ なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈？なんかに使えるかもですね。 丸から四角に変形するボックス コード 解説 あとがき 丸から四角に変形するボックス 右にある、ピンク色の丸にマウスカーソルをあわせてみてください^^（スマホの方はタップ） ここに適当に文章を書きます。brタグによる改行もできます。この部分の文章は好きに変更できます！ コード <style><!--.hamb{position:absolute;z-inde…

【CSS】position:sticky;による押し出し、結局こうなりました

どうも！LSSです！！ ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し1個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか気にしなくて良くなりました！ デザインCSSと定型文 デザインCSSの記載内容 .stk2{position: -webkit-sticky; position:sticky;top:30px;} 定型文に登録した内容（から抜粋） <div><h2 class="stk2">タイトル</h2><p> </p><p> </p><p> </p…

大掃除の途中に昔の本を見つけて読みふけってしまうような感覚

どうも！LSSです！！ 昨日買ってきた「IDE端子のHDDをUSB接続するケーブル」を使って、古いHDDを覗いてみました！ …が、結論からいうと…全然はかどりませんw 4台めでストップしています^^; 一台め 二台め 三台め 四台め 今日のところはここまで！ 一台め このケーブルを使用する際は、電源をとる必要があるためコンセントを一口使う必要があります。 とりあえず一つ開けて、接続完了！ で、繋いでみたんですが…認識しません。 なんでだ！？となりましたが、どうもそもそもHDDに通電していない模様。 たまってたHDDの中でも一番ホコリ被ってる汚い状態だったので、さもありなん、って感じです^^; …

【日記】過去資産の封印が解ける日！？

どうも！LSSです！！ 今日は3連休の中日でしたが、人と約束があったので、あまり普段出勤する時と変わらない時間に家を出ました。 大阪にGo！ 14時頃に用事完了！ んで、日本橋を18時頃まで徘徊していました 過去資産・IDE接続のHDDをUSB接続するケーブル 他に、とても気になるノートPCを見かけてしまいました 大阪にGo！ 大阪の中でも結構遠いほう（神戸から見て）になりますが、電車に乗ってからの時間で1時間ほどで到着できます^^ 数年前に、LSSの勤める職場を定年退職されたおっちゃんの家に行ってきました。 在職中から時折、遊びに誘ってくれたり飯くいにいったりしていましたが、退職後もたまに「…

【CSS】横長の写真を横スクロールするスイッチ

どうも！LSSです！！ 今回は、ちょっと役にたつかも知れない？？CSSを組んでみました。 最近ちょこちょこやってた事の合わせ技みたいな感じです。 横長の写真を横スクロールするスイッチ コード スイッチになる部分 スクロール速度 不要な文言 シンプルにしたコード 横長の写真を横スクロールするスイッチ ↓の画像の左上にある「←→」をクリックしてみてください^^ ← → ある夏の日のポートタワー コード <style><!--#bgscr{background-position:0px 0px;transition:10s linear 0s;}#cgscr:checked~#bgscr{backg…

【CSS】デザインCSS、ちょこっとだけ変更（見出しが画面上部に残る設定）

どうも！LSSです！！ だいぶ久々に？デザインCSSを触ってみました。 …微々たる変更なんですが^^; 実は以前からやってみたかった！ 書き足したコード、わずか2行 実際どうなるかは… 追記！見出しが複数行になった場合の対策 実は以前からやってみたかった！ ↑この「実は以前からやってみたかった！」っていう見出し。 LSSは<h2>タグで書いています。 （ちなみに、はてなブログの編集画面でいう「大見出し」は<h3>、「中見出し」は<h4>で、<h2>は大見出しよりも上位の見出しになります。） 購読中のブログの中に「画面をスクロールしても、元々定位置にあった見出しが上部に残る」という設定になってい…

【Amazon】アレクサ楽しい！www

どうも！LSSです！！ 先日買ったタブレットに搭載されているアレクサで遊んでみた話。 アレクサ面白い！！ 音楽をかけてもらう 聞き間違い・誤解もまた楽しいw アレクサ面白い！！ この間、タブレットのFire7を買った話を書きましたが、これ「アレクサ」搭載してるんですね。 何気に初アレクサで、色々遊んでみました！ 結構聞き取ってくれるんですが、自分の発音の悪さもあり、聞き間違いもまた楽しいですw （意識してハッキリ発音するようにするとたいがい正確に聞き取ってくれますが） ブログを読みながら、そこで見かけた言葉を調べてみました。（知ってたけど） アレクサに音声で「俯瞰」について聞いてみました。「物…

【CSS】CSSにカウンターの概念があったのを初めて知りました！

どうも！LSSです！！ 昨日の記事のあれ。 マリオに触発されて、とりあえず「クリックで動き出す」部分だけ作れて、入口に到達したつもりになっていましたが、「当たり判定」の方がCSSでは格別むずかしいですね^^; これまた見当もつかないwww で、ソースは見ない方針で、でも検索はかけてみると、 hackmd.io のページに行きあたりました。 なるほど…？ 自分はまだ十分理解したわけではありませんが、どうやらマリオでいうと、 「→を押した時点で、そのままだと〇秒後にクリボーに当たってやられるアニメーションがセットされ、ジャンプで回避するとやられるアニメーションをキャンセルする」 ような仕組みを作れ…

【CSS】ちょこっとチャレンジ！背景を動かしたり止めたりしてみる

どうも！LSSです！！ 今日、Twitterであるリツイートを見かけました。 きっかけとなったリツイート ボタンを押すとスクロールし始める背景 今回のコード、以前使ったものの改変です それにしても…すごい！ きっかけとなったリツイート htmlとcssだけjsなしマリオ！寝なきゃなのについ遊んでしまった。笑 https://t.co/nHcuvrZhQV— さじ (@conasaji) 2021年1月4日 いつもお世話になっている、さじさん(id:conasaji)が、HTML+CSSだけで凄い事をされている人のツイートをリツイートされていたものです。 いやもう、凄いというか凄まじいというか……

論理パズル「Bは嘘つきか？」

どうも！LSSです！！ ちょっと論理パズルの問題を考えたので、出題してみます！ （でも、もしかしたらどこかに同じ問題があったかも知れない^^;） この話に登場するA,B,Cは全て「本当の事しか言わない正直者」か「常に嘘をつく嘘つき」のどちらかです。 3人とも正直者かも知れませんし、3人とも嘘つきかも知れません。 2人は正直者で1人は嘘つきかも知れませんし、2人は嘘つきで1人は正直者かも知れません。 また、A,B,Cは3人とも、お互いに正直者か嘘つきかを知っていました。 質問者がA,B,Cの3人に 「Bは嘘つきか？」と尋ねてみました。 3人のうち2人は「いいえ」と答え、1人だけ「はい」と答えまし…

またタブレットをポチってしまいました（Fire7）

どうも！LSSです！！ またタブレットを購入してしまいました。 Fire7 16GB 自分的に初のアレクサ搭載端末 7インチ端末 最大の理由 安かったから あとがき Fire7 16GB Fire 7 タブレット (7インチディスプレイ) 16GB 発売日: 2019/06/06 メディア: エレクトロニクス 実際にポチったのは昨日1/2で、今日1/3に到着！早いですね^^ 自分的に初のアレクサ搭載端末 去年買ったタブレットは10インチ、こちらは7インチ 元々安めな端末が期間限定（1/4まで）で更に安く！！ 自分的に初のアレクサ搭載端末 これまでにも何台もタブレットを購入してきましたが、アレク…

新年早々、つまづいていますwww 福笑い作成失敗の巻

どうも！LSSです！！ 久々「つまづき」カテゴリの記事になります。 福笑い（未完成） 一応、遊べなくはないです PCの場合 スマホの場合 SVGでやろうとして撃沈 福笑い（未完成） じ へ の へ の も へ // 0) && (jx コード <svg id="svge" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" style="background-color: lightblue;"> <text x="0" y="95" style="font-size: 100px;">じ</text> <…

あけましておめでとうございます！

謹賀新年 あけましておめでとうございます^^ どうも！LSSです！！ 本年もよろしくお願いします！ ちょっと遅めの時間（夕方）初詣してきました！ 初詣は一社だけでしたが、 無料のおみくじを用意しました！ ちょっと遅めの時間（夕方）初詣してきました！ 場所は、去年最初に行ったのと同じところですね。 一応 人はいましたがそう多くはなく（一家族かな）、密を気にせずに参拝できました^^ が、 賽銭箱のところに、こんな注意書きが。 なるほど、こういう形での対応があるんですねぇ。 というわけでガランガランは無し！！ 初詣は一社だけでしたが、 その後、三宮に出かけました。 さんちか（三宮の地下街）、センター…