どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ 太字 影色 影位置・横 影位置・縦 影ぼかし コード 使い方 「文字色　文字サイズ　太字」で、装飾対象となる文字の設定ができます。 「影色　影位置・横　影位置・縦　影ぼかし」でtext-shadow部分の設定ができます。 お好みの設定ができましたら、「コード」内の文字列をコピペして、文章部分を書き換えてご利用ください^^ …という小ネタなんですが 自分でtext-shadowを使う際には、コード上の数値を調節しては、表示を確認して、また調整…という事をやっていたので、text-shadowを

どうも！LSSです！！ 世界名作劇場シリーズ・牧場の少女カトリについて語ろう！【前編】 に続き、後編です！ カトリに翻弄される男たち マルティ ペッカ おおまかな舞台の変遷 ライッコラ屋敷 クウセラ屋敷 都会 残念（？）なところ 終盤の作画崩壊 原作の翻訳を読んでまたびっくり もっと最近になって、こんな本を買いました 話がだいぶそれましたが カトリに翻弄される男たち マルティ カトリと同年代の男の子。 カトリの家と遠縁の親戚（だけどお金持ち）の屋敷のぼっちゃん。 金持ちである事を鼻にかけない、気さくな男の子で、勉強が嫌い。 かなり早い段階でカトリと知り合い、働きたいカトリから「あなたの屋敷で雇ってくれるよう頼んでもらいない？」と頼まれた際に、「僕と友達になってくれるんなら、頼んでみるよ」なんて答える一面も。 ペッカ カトリが最初の奉公先「ライッコラ屋敷」で家畜番をしていた際、別の屋敷の家畜

どうも！LSSです！！ 実は昨日と今日、年休をいただいておりました。 昨日はブログテーマやCSSをいじり倒してましたが、今日は脱ひきこもり！ 全国規模で展開されているらしく、いくつかのブログで紹介されていたドーナツ屋さんの神戸の店に行く第一部と、近日知人を連れ歩く予定の大阪日本橋を下見にいく第二部、という構成でお送りします。 そうです。チラ裏です！！！ｗ 第一部　ジャックインザドーナッツ ハーバーランドの外れの方だよね、と思っていたら… ふと空を見ると不思議なカタチの雲 イオンモールに到着！ 初ジャックインザドーナッツ！ 第二部　大阪・日本橋へ！ 45分ほどで「なんば駅」へ 日本橋を歩いていると時間がいくらあっても足りない件 はんだごてとかは使わないLSSでも憧れるお店・千石通商 第一部　ジャックインザドーナッツ ポンデリング、といえばミスタードーナッツですが、そのポンデリングによく似たド

どうも！LSSです！！ はてな公式のお知らせで、新機能の追加の情報がでていましたね！ …といっても、いつも はてな公式からのお知らせはちょっと控えめで、気づかない方も多いんじゃないか？と思っているので、広報のお手伝いのつもりで記事にしてみますｗ アイキャッチ画像作成機能！？ はてなからのお知らせにどこで気づくかというと… ちょっとやられた感 アイキャッチ画像作成機能！？ staff.hatenablog.com テーマデザインの企画から、なんかcanvaと仲良くしてるな、って印象はありましたが（テーマデザインの賞品にcanvaの使用権が用意されています）、こんなコラボ機能も準備されていたんですね^^ ↑ちょっと試しに作ってみましたｗ はてなからのお知らせにどこで気づくかというと… PCで「購読中のブログ」を開いた時、１ページめの上部にさりげなーく、こんな風に表示されています。 ぶっちゃけ、

どうも！LSSです！！ 最近、職場の人と雑談していた折の事。 「中学生の息子と自分と、プログラミングを覚えたい」てな話がでました。 全くの未経験。 そんな時に、何をオススメするべきか？ちょっと考えてしまいました。 何をやりたいか？ スクラッチ 仕事でExcelとかを使ってる方はVBA！ ブログやサイトを運営されている方にはJavaScript！ スマホで自分のプログラムを動かしたい！ AIと親和性が高いPython あとがき 何をやりたいか？ 多分、上記のように言う方は「プログラミングを覚えて何かをしたい」がなくて、「なんとなくプログラミングできるようになりたい」だけが漠然とあるんでしょうね。 プログラミング言語・環境は物凄く膨大な種類がありますが、「何を覚えても基本的な考え方は一緒」と言ってしまう事もできます。 （おそろしくクセのある一部（SQLとか）を除くｗ） ただ、「やりがい」がない

どうも！LSSです！！ 昨日の記事で最後に書いていた、 画像ファイルを選択 画面にそれを表示しながら、拡大縮小・回転・切り抜きなどの処理を行う 加工処理を終えたものをダウンロード保存 なんて事ができれば、たまに「448x252ピクセルにした画像をサムネイルとして使用」する手間がだいぶ省けそう！ 【HTML】またもinputタグ。今度はtype="file"を試してみます！ - Little Strange Software ですが、なんか出来たようです^^ アイキャッチ画像切り出しツール 使い方 参考までに このツールのコードを晒しておきます あとがき アイキャッチ画像切り出しツール 横位置 縦位置 拡大率 縦横比 使い方 まず、「ファイルを選択」で元となる画像ファイルを選択します。 四角い枠内に、選択した画像ファイルが表示されるので、「横位置」「縦位置」「拡大率」「縦横比」のスライダーを

どうも！LSSです！！ tableタグの生成を、またinputタグ頼みでやってみました…が、見栄えがイマイチ^^; tableタグ生成 コードを生成するスクリプトのコード 問題点は、はてなブログのテーマ tableタグ生成 列　行 コード コードを生成するスクリプトのコード …は、こんな感じ↓なんですけどね <p>列<input id="n1" style="width: 3em;" max="10" min="2" type="number" value="2" />　行<input id="n2" style="width: 3em;" max="30" min="2" type="number" value="2" /></p> <div id="gamen"> </div> <script>// <![CDATA[ txt=''; n1.addEventListener('inpu

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

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

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

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

どうも！LSSです！！ 先日、クリスマスの記事、 の中で、強引にブログ記事の背景などを書き換えていました。 次のイベントといえば「お正月」ですが、「１記事限定で正月らしい紅白模様にする」コードを公開してみますｗ サンプルとコード 使い方と解説 あとがき サンプルとコード と言っても、「この記事」を最初から紅白模様にするのはさすがに気が早すぎるかなぁｗ と思ったので、↓のボタンをクリックする事で、コード導入した時のイメージを見ていただければ、という事にしておきます^^ このブログの背景を紅白模様にしてみる コード <style><!-- body{ background-image:linear-gradient(90deg,#ffcccc 50%,white 51%); background-size:200px 200px; } #title a{text-shadow:2px 2px

どうも！LSSです！！ に続き、今度はこの絵にアニメーションで動く「雲」を追加してみます！ SVGアニメーションを追加した絵 コード 雲を楕円で描きます またも円形グラデーション ここからアニメーションの話 あとがき SVGアニメーションを追加した絵 コード <p>[] <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> <defs> <radialgradient id="rg" cx="75%" cy="20%" r="20%"> <stop offset="30%" stop-color="white"></stop> <stop offset="100%" stop-color="lightblue"></stop> </radialgradient> <radialgradient id="rgc"

どうも！LSSです！！ 例えばこんなボタンっぽいの 例えば、なんですが、LSSが↑こんなCSSサンプルを作ってみました。 そして、「↓これがコードです」と言って、 コード <div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこん

どうも！LSSです！！ 昨日の記事は、左右に配置した黒が分れていく、というものでしたが、ちょっと色を変えて試してみます。 フランス国旗風サンプル フランス国旗風　グラデなし 失敗例 あとがき フランス国旗風サンプル フランス国旗風 コード <style><!-- .fr1{ border:5px inset gray; background-color:white; background-repeat:no-repeat; background-image:linear-gradient(150deg,blue 50%,transparent 60%),linear-gradient(150deg,transparent 40%,red 50%); background-position:0px 0px,0px 0px; } .fr1:hover{ transition:2s ease-i

どうも！LSSです！！ 今回はまた、古い話を引っ張りだしてきますｗ 今はここでCSSとかネタにしてブログ書いてますが ２ｃｈのツクールスレに入り浸っていた頃 ブライアンと二人の勇者 まぁ、その、あれだ 今はここでCSSとかネタにしてブログ書いてますが 「自由に使ってください」って体でコピペ用にコードをつけていて、使っていただいてる記事を見て、にまにましている昨今ですｗ 思えば昔から似たような感じの事で楽しんでいたように思います。 ２ｃｈの「意味がわかると怖い話」スレにいくつか創作を投下したところ、ひとつだけ何故かいまだにコピペされてたりして、たまに検索をかけてはにまにましたりｗ で、今回のネタの話なんですが。 「RPGツクール2000」というPC用市販ソフトがありました。 後に2003とかVXとかMVとか続編も出た息の長いソフトですが、名前の通り 「プログラミング知識がなくてもRPGが手軽

どうも！LSSです！！ 昨日の記事、 のコメント欄に、 なる(id:narutabi) ドットを箇条書きの前に色でつくるとかも勿論可能ですかね？ LSSさんの記事をみてると想像力が膨らみます(#^^#) とのコメントをいただきました。 なる様、ありがとうございます^^ というわけで、今回は「箇条書きのドットに色をつける」方法を試してみたいと思います！！ まず、「箇条書き」とは 箇条書きのHTMLコード CSSで色をつけてみます！ list-style-image について マークを色付きの丸にするには？ とても残念なことに… 応用篇 45degの角度で２色使ってみた例 謎のマーク 円の中心位置をずらして半円 あとがき まず、「箇条書き」とは はてなブログの場合、「記事を書く」の「編集　見たまま」画面に こう、適当に数行、文章を入力したとします。 で、 「見出し　▼」の右あたりにある、 ↑こ

どうも！LSSです！！ 最近（ここ数年）スマホユーザーが爆発的に増えていると同時に、パソコン離れが加速している、とも言われていますね。 ブログを書くなら、絶対的にPCの方が書きやすいと思うのですが、パソコンを使った事がない人はもしかすると 「パソコンって１０～２０万ぐらいするもので、なかなか手が出せない（からスマホで十分）」 と思ってる方も多いんじゃないかな？と。 というわけで、今回は「中古だけどそこそこ使えそうで、かなり安く手に入るPC」をAmazonから探してみました！！ 独自基準 検索時点での最安値はこちら！ 次に安かったのがこちら！ ３つめ　やっとSSD搭載機種！ ４つめ　MicrosoftOffice2019きた！！ ここまで安い順に載せてきましたが、 独自基準 Windows10搭載 CPU　i5またはi7 メモリ　8GB以上 …という条件で「価格が安い順」で検索してみます。

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

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