どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^ 以前に試みた時には「繰り返しを考慮するとCSSだけでは無理そう…」と、SVGとの合わせ技でやったものでしたが、今回はCSSonly！ …まぁちょっと無理やりに解決しているところもあり、よーく見ると突き抜けてたり窪んでた

どうも！LSSです！！ 以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。 気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！ …と言いつつ、見てみると結構作ってるものがバラバラで^^; 書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から 「アニメーションするボックス（枠）」 のまとめ記事とします^^ マウスカーソルに反応するタイプ カードをめくる　その２ 光が斜めに横切るバー たたっ斬る！ マウスカーソルで枠線の太さが変わる演出 丸から四角に変形するボックス カーソルを乗せると動くグラデーションバー 勝手に動いてるタイプ カタカタ自己主張する見出し 背景多重アニメーション 鹿威し（ししおどし）のように揺れる見出し ２つの四

どうも！LSSです！！ なんか最近、ブログ書こうとするとSVGネタばかりになります。 今も、SVGに関連する新たな実験をやって、なんとかうまくいったのでそれを書きかけていましたが、ちょっと後日にまわそう^^; HTML+CSS は、綺麗にレイアウト・装飾されたWebページを構築でき、HTML+JavaScript は、動的なコンテンツ（ブラウザゲームとか）を作る事ができます。 HTML+CSS+JavaScript で綺麗かつ動的なWebページが作れるようになりますが、CSSが苦手とするタイプの描画を埋められるのがSVGで HTML+SVG+JavaScriptでもコンテンツとして良さげなものができそう^^ …でも、絵心は欲しいですｗ ただ、お絵描きって意味では、SVGがなくてもJavaScriptには「canvas」という概念があって、枠内に簡易かつ自由に絵を描ける（感覚的にはSVGに似

どうも！LSSです！！ 「変わり種」が大好きです！ そりゃもう、ジャンルを問わず、どこか「変わったところ」があるモノにグッとくる習性（？）がありますｗ そんなLSSですが、だいぶ前に何かのきっかけで「気になるネットショップ」を見つけました！ サンコーレアモノショップ 以前にもブログのネタにさせていただいた、 Amazonに出ているものでいうと… 公式から最近ポチっちゃったモノ サンコーレアモノショップ どこかで広告を見たのがきっかけだと思いますが…ブログ活動を始めるよりちょっと前かな？ 早速リンクを張ってみます！ www.thanko.jp で、もちろんAmazonにも出店されています。 amzn.to 以前にもブログのネタにさせていただいた、 ネッククーラーなんかもここの商品ですね。 夏場には異様に？値上がりをしたりもしていましたが、今ならだいぶ安く買えるようです。（このまだまだ寒い時期

どうも！LSSです！！ バレンタインでしたねー ちょうど一年前の今日は、 こんな記事を書いていました。 試練の日である事も含めて、面白い風習だと思いますね。 ただ、今年は…そもそもコロナの影響下にある事、さらに直前になって東北で大変な地震があって、それどころじゃなくなった方も多数おられそうです。 自分はそもそもあまり関係のないイベントなんですけどねｗ ただ、バレンタインで思い出すのは…ここでも何作かあげてる「昔書いた小説」、まだあげていないものにバレンタインネタの作がありました。 何度かあげようか迷って読み返してみたりもするんですが…自分の昔のハンドルネームにちなんだネタが混ざっていたりして、おおむね訳が分からなくなるだろうなｗと、揚げずにいます^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 先日作った【ツール】アイキャッチ画像切り出しツールに、機能追加しました！ アイキャッチ画像切り出しツール改 新機能！ 使い方 画像を重ねられる事によってできる事 まだ実装していないアイデア アイキャッチ画像切り出しツール改 設定画像１画像２画像３ ベース色 画像幅画像高 横位置 縦位置 拡大率 縦横比 回転角 透明度 横位置 縦位置 拡大率 縦横比 回転角 透明度 横位置 縦位置 拡大率 縦横比 回転角 透明度 新機能！ ベース色を指定できるようになりました 画像のサイズ448x252を0～500の間で変更可能になりました 画像の回転角・透明度を変更できます 画像を３枚まで重ねる事ができるようになりました 使い方 まず、「設定」タブで、背景色や画像サイズを変更できます。 変更の必要が無ければそのままでもOKです^^ そしてタブを「画像１」に切り替え、「ファイルを選択

どうも！LSSです！！ 昨日の記事に引き続き色々やってました。 だいぶ ノってきたんですが、ちょっと制作過程のものを晒してみたくなったので、ここで一旦お見せしちゃいます！ 作りかけサンプル 使い方で分かりにくそうなところがちらほら… そんな感じで作っていますが、最終的な着地点はどこになるんだろう？ｗ 作りかけサンプル 列　行 行見出し背景色 列見出し背景色 stickeyを有効にする 枠線の重なりを共有 枠線色 枠線の幅 枠線のタイプ コード 使い方で分かりにくそうなところがちらほら… まず「stickeyを有効にする」のチェックボックス。 これをONにすると、縦横ともに画面表示領域よりも大きいテーブルになった時に、見出し部分が表示されたまま、テーブル内でスクロールできるようになります。 （例えるなら、Microsoft Excelの「ウインドウ枠の固定」みたいな状態になります） あと「枠

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

どうも！LSSです！！ 昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。 「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使える？ そして、その方法だとすり抜けて（？）アニメーションしたりして！？」 …と。 と、いうわけで、試してみたのですが…結論から言うと失敗です^^; グラデーションがアニメーションしない 半分は成功…？ transitionが効いてない 他のプロパティなら、CSS変数を使っていてもアニメーションします！ グラデーションがアニメーションしない グラデーションが アニメーション…しない！ ↑マウスカーソルを乗せると、光の大きさが変わります。 コード <style><!-- .radgra{ --rd1:5%; bac

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

どうも！LSSです！！ 今日が、今年最後の出勤でした。 「今年最後の出勤」であって、「仕事納め」ではないのが、コロナに翻弄された2020年らしいところで、月曜の在宅勤務が仕事納めですｗ 昨日の記事、 に多数のコメント・ブクマありがとうございました^^ ちなみに、あれは３つの「radial-gradientで描いた水玉セットを全画面表示」に、それぞれ横方向・縦方向のアニメーション設定をつけたもので、 これらの記事でやってきた事の集大成になります。 「複数のradial-gradientで模様を作る」「縦と横を別々のアニメーション指定で動作させる」「background-positionの指定で背景画像をアニメーションする」の合わせ技ですね。 次の大きなイベントは…お正月！ ちょっと余裕を持ってブログネタを考えていきたいと思います^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願

どうも！LSSです！！ 今、こうして記事を書いている「はてなブログ」もSNSの一種ですが、SNSっていうと他にfacebook、Twitter、YouTube、インスタグラムなどがありますね。 各種SNS、それぞれに特徴があって、ユーザーの方がおられます。 我らが（？）はてなブログは、読者間の連携機能が手厚く、活用するとあまりＳＥＯとか気にしなくてもある程度読んでもらえたりしますが、他のSNSとの連携をとる事によって更に間口を広くとれたりします^^ 手軽なところでは、Twitterでしょうね。 短文しか投稿できず（裏を返せば長い文章を書く必要がない）、ブロガーじゃない人にまでも「何これ面白そう」と思わせられる、ブログサムネイル・記事タイトルをツイートすれば見てもらえるかも？バズるかも！？ 手間を惜しまなければ、YouTubeがかなり強いんじゃないか？って思ってます。 ユーザー登録しなくても

どうも！LSSです！！ SVGのコードを書いたテキストファイル、拡張子を「.svg」で保存すると、SVG形式の画像ファイルとして使用できます。 それに対し、ここで自分がやってきたように「ページの中に<svg>タグを書く」という使い方を「インラインSVG」といいます。 この「インラインSVG」という名称から、ふと思いつきました！ HTML＋CSSには「インライン要素」と「ブロック要素」があり、ざっくり言えば 「インライン要素は一文の中でも部分的に装飾可能な要素」、 「ブロック要素は 改段を伴う 装飾可能な要素」 って感じですが、「インラインSVG」ってのも、もしかしたら前者のように 「一文の中で部分的に使える」 ものなんじゃないか？と。 で、試してみました！ 例えば、このように絵文字っぽく使う事もできますね^^ コード 例えば、このように<svg xmlns="http://www.w3.o

どうも！LSSです！！ 今週のお題「もう一度見たいドラマ」 というのを見て、かなり以前に見たもののうち、強烈に印象に残っているある番組を思い出しました。 「ムイミダス」ドラマ？コント？ 長男・タケシ 次男・サンスケ 三男・アラタ 長女・アキ という設定で展開されるドラマっぽいコント ４兄妹を演じていた俳優さんたち 「ムイミダス」ドラマ？コント？ 関西ローカルの深夜番組で「ムイミダス」という番組があったんですね。 １年間放送されたうち、前半と後半で番組内容が全く変わってしまいましたが、印象に残っているのは前半の方。 マンションの一室に住む、４人兄妹の話です。 外のシーンは全くなく、常に室内だけで話が進行します 。 長男・タケシ 全く売れない小説家。 なのに家計は彼が持っているという謎をはらんだ存在です。 性格は兄妹のうちで一番まとも、なのに、途中で全く同じ姿のタケシ２号との交代劇があったり、

どうも！LSSです！！ この間から、なんとなく調整していた「紗綾型」。 なんかSVGで できたっぽいです。 SVGで描く紗綾型 実はひとつの図形が完成した時点でほぼ完成していた！？ コピー・再利用するためにはまず、IDをつけます 右に20ずらした位置にコピー 同様に、左にもコピーしてみます さらに、上に３つ配置！ 下にも３つ配置 ループの最小単位 実際に並べてみないと脳内での解決は無理そうｗ SVGで描く紗綾型 コード <p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20"> <path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1

どうも！LSSです！！ 「時代劇が好きだった」って話をたまに書いていますが、その中でも「大岡越前」や「遠山の金さん」に共通して出てくる、ある模様が気になっていました。 そんな以前から気になっていたにも関わらず、今日になってやっとググって答えを見つけましたｗ 奉行所、お白洲の場面でのフスマの模様 紗綾形、っていうらしいです 同じ形のループである事から 奉行所、お白洲の場面でのフスマの模様 ↑久々に、はてなブログの「絵を描く」機能を使ってみました。 かなり下手ですが「なんかこんな模様あったな」って思ってもらえるかもらえないか、ギリギリのラインかなとｗ 紗綾形、っていうらしいです さあやがた、って読んじゃいそうになりますが「さやがた」と読みます。 この模様のモチーフになっているのが「卍」 卍の形を元に、手を加えたものがこの模様になります。 不思議な感じがするのは「複雑そうに見える模様だけど、実は

どうも！LSSです！！ 唐突なんですが…「たんけん　ぼくのまち」というTV番組があったのをご存知でしょうか？？ ＮＨＫ教育テレビ ジャンルとしては社会科？ ８年も続いた人気番組！ 最終回 ８年も続いたので ＮＨＫ教育テレビ 今はＥＴＶっていうんでしょうか。 「できるかな」や「さわやか３組」など、主に小学生向けの学習を補助するような番組が多々、制作されていました。 で、その中で「たんけん　ぼくのまち」という番組が放送されていたんですね。 ジャンルとしては社会科？ 両親が商売している家に生まれ、成人したチョーさん。 家を継ぐ前に、他の商店で働いて、社会や商売について勉強するように！と言われ、小さい個人商店に住み込みで働くようになります。 配達などで街を移動していると、なんとも興味深いものにでくわし、それについて調べだして、帰ってから大きな紙にマジックで「たんけんちず」として、調査した内容を描き

どうも！LSSです！！ CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける！ ので、結構多用してきました。 で。 その他に、 repeating-linear-gradient repeating-radial-gradient というのもある、と知ってはいたのですが、 「リピート？背景画像はデフォルトで繰り返し表示で、repeatプロパティで制御できるのに、なぜ別に用意されているんだろう？」 って思っていたんですね。ずっとｗ これが、実は大きな誤解で、思っていたものと全く違うものだった、という話です。 普通のradial-gradientとrepeating-radial-gradient つまり、繰り返されるのは画像じゃなくて ついでに、失敗例

どうも！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;">例えばこんなボタンっぽいの</div> ↑こういうコードを書