コード生成ツール
どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ #gamen{width:280px;…
どうも！LSSです！！ little-strange.hatenablog.com にて、リズミカルに動くkeyframesアニメーションを作ってみました。 ただ、手順が結構煩雑で、 【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】 - Little Strange Software によって%の割…
どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間）雨の色:雨の太さ:px雨の角度:deg雨の横位置:px（雨の長さにも影響）雨枠…
スライダーや色を変更すると、白と黒の格子模様だった部分がリアルタイムに変化します。 この模様はCSSで描いたもので、「自分のWebサイトやブログで使いたい」模様が出来た場合、下の「コード」のグレーの枠内のコードをコピペして自由に使う事ができます^^
どうも！LSSです！！ CSSの3D表現とkeyframesによるアニメーション。組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分…
バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたｗ
「ハートマーク背景コード生成ツール」を作ってみました。
CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました
「conic-gradient生成ツール」を作ってみました。２つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。２色だけでは物足りない、という場合は、「色追加」ボタ…
どうも！LSSです！！ 久々に「コード生成ツール」を作ってみました。 この記事の画面上で色を選んだりスライダーで角度やサイズを調整する事で、しましまの囲み枠のコードを生成する事ができます！ しましま枠線メーカー 使い方 あとがき しましま枠線メーカ…
100の質問を作成する際に見栄えを整えようとすると、 「最初に１問分だけ作って、あとはコピペ」 で行けそうですが、それでもナンバリングを修正する手間は出てきてしまいます。 （CSSまたはHTMLタグで自動ナンバリングもできますが…） そこで、試しに「100…
// ))\n/g,''); smpl.innerHTML='表示例'+t2.value; t2.select(); } // ]]> どうも！LSSです！！ 突然のテキスト入力欄で失礼^^; はてなブロガー向けに、「改段落削除ツール」を試しに作ってみました。 なお、HTML編集画面を開く必要があるため、PC専用とな…
線の色 背景色 点の位置 線の太さ サイズ こんな模様になります^^ // (Math.floor(a/2)%2)*20; zhmj=a=>(a>3?ichi[a%2+2]+','+zhmj0(a):zhmj0(a)+','+ichi[a%2]); icr.addEventListener('input',gw,false); bcr.addEventListener('input',gw,false); btn.add…
どうも！LSSです！！ を、自動生成するようなものを作ろうと…していたのですが、途中でだいぶ手間取ってしまいました^^; 作りかけですが、今こんな感じ、という中間報告です。 作りかけ スクリプトコード 作りかけ 線の色 背景色 // (a>3?ichi[a%4]+','+((Ma…
SVGコードを取得する // ';} } class Svgell{ constructor(cx,cy,rx,ry,sw,sc,fl){this.cx=cx;this.cy=cy;this.rx=rx;this.ry=ry;this.sw=sw;this.sc=sc;this.fl=fl;this.name='楕円'+objs.length;this.nameid='ell';} get svgtxt(){return '';} } class Svg…
どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール…
どうも！LSSです！！ 今回は一昨日の記事、【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Softwareの続きとなります！ 前回は、飾りの部分を操作できるようにするところまで書きましたが、「コード作成ツール」として必須である、「コ…
どうも！LSSです！！ 今回は、「コード作成ツール」をどんな風に作っているか、の さわりの部分について書いていきます！ はじめに、基本形のコードを書きます JavaScriptのinnerHTMLを試してみます 上記２つを合わせてみると 画面を書き換えるコードを関数…
どうも！LSSです！！ 昨日の記事に引き続き色々やってました。 だいぶ ノってきたんですが、ちょっと制作過程のものを晒してみたくなったので、ここで一旦お見せしちゃいます！ 作りかけサンプル 使い方で分かりにくそうなところがちらほら… そんな感じで作…
どうも！LSSです！！ tableタグの生成を、またinputタグ頼みでやってみました…が、見栄えがイマイチ^^; tableタグ生成 コードを生成するスクリプトのコード 問題点は、はてなブログのテーマ tableタグ生成 列 行 コード // '; for(i=0;i'; for(j=0;j'+j+'-'+…
「色やサイズを調節して作るボックスのコードをお持ち帰りできるツール」を作ってみました。 ↓このタブの中で色々設定を変更すると、その更に下にあるサンプルとコードの内容が変化します。気に入ったボックスが出来たら、コードをコピペして使用できます。 …
どうも！LSSです！！ 以前作成した、水玉デザイナー、少しだけ機能追加しました。 水玉デザイナー 使い方 作成例 色を使えるようにはなりましたが 水玉デザイナー // 全体的な設定 水玉個別設定' txt0+='全体の幅:'+wkw+'px ' +(wkw－') +(wkw>999?'＋':'＋'…
どうも！LSSです！！ 今回はCSSの水玉模様をデザインするツールを作ってみました。 ※追記：【CSSツール】水玉デザイナー【試作版２】に改良版があります。 水玉デザイナー 使い方 作成例 制作のきっかけ 7/26追記！ 7/27追記！ 水玉デザイナー // 全体的な設…
