【CSS+SVG】枠装飾、border-imageによるバクダン2種と雲型

どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その1 バクダン その2 雲型の枠 その4 その他の調整について あとがき バクダン その1 ') 30 fill/30px round; } --> バクダン その1ちなみに、このトゲの数は幅・高さに応じて変化します。サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!--.bakudan1{border:30px solid transparent;border-imag…

【CSS+SVG】雲型の枠を作れないか試み中…【実験】

どうも！LSSです！！ 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インラインSVGを用いる方法があり、 little-strange.hatenablog.com で background-image になら当ててみた事がありました。 それを border-image に応用すると、gradientゆえに苦労する部分が緩和されるのでは？と思い、再び挑戦してみました。 雲型の枠 挑戦中 コード あと…

そうだ、もうすぐ節分

どうも！LSSです！！ しばらく、border-imageプロパティと格闘していたら、頭が沸きましたw border-image の検索結果 - Little Strange Software …うん、いったん忘れる事にしますw（border-imageとradial-gradientの組み合わせについて考えていました） ところで、もう1月が終わろうとしていますね。 犬、逃げる、猿、なんていいますが、1・2・3月は何故か過ぎるのが早く感じます。 という事は、もうすぐ春ですね^^※犬じゃない、去ぬ、でしたwそして去る、ねw 2月のイベントとしては、節分・バレンタインがありますが、はてなの今週のお…

【CSS】filter:drop-shadowが面白い！【実験】

どうも！LSSです！！ だいぶ古い記事ですが、 little-strange.hatenablog.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありました。 今回はまたdrop-shadowを使い、他のshadow関連プロパティであるtext-shadowやbox-shadowとはまた違った影効果を試してみます。 影つき吹き出し コード 例えばbox-shadowでやると、こうなります 例えばtext-shadowでやると、…

ちょっとびっくり→Microsoft365に図形のSVG保存機能があったんですね

どうも！LSSです！！ Microsoft365（旧称Office365）…WordやExcelなどのいわゆるOfficeソフトですね。 それに昔から「図形の挿入」機能があり、多角形や矢印、フキダシなど様々な図形を用意に挿入する機能がありました。（図形・図・オートシェイプなど色々な呼び名があります） が、それにいつの間にか「図形をSVGとして保存する」機能がついていたようです！（実は結構 前かららしいですw） …ただし、サブスクのMicrosoft365のみで、無料Web版のものや、手元にある2016ではできませんでした^^; 職場のPCに入っているのはサブスクのMicrosoft365でした…

【CSS】楕円形の吹き出し【小ネタ】

どうも！LSSです！！ ふと思いつきで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます！ - Little Strange Software 【CSS】色違い吹き出し - Little Strange Software 【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました - Little Strange Software でも試みていましたが、「楕円形」となると…見た目がナチュラルな反面、文字が飛び出してしまわないか？という心配もでてきたりしま…

昨日のマウスストーカー、ちょっと修正しました。

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。 公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動作してAndroidで動作しない」とは^^;※iPhoneのほうがなにかにつけてウルサイ、と思い込んでいますw 何故動作しないか、については心当たりがあったので、修正はさくっとでき、コード・コード解説も修正済です。 ちなみに変更点 要するに、「.touches[0]」をサボってました^^; あとが…

【JavaScript】ありきたりなマウスストーカーを作ってみました

どうも！LSSです！！ 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 コード コード解説 HTML部分 コード解説 CSS部分 コード解説 スクリプト部分 あとがき コード #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; } ^^) _旦~~ stkx=0;stky=0; pntx=0;pnty=0; stks=10;//速度調整 document.addEventListener('mousemove',mv,fa…

【CSS】棒グラフも文字入れ

どうも！LSSです！！ little-strange.hatenablog.com で作った棒グラフも、 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software ↓【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software と同様に文字を入れてみました。 棒グラフ 文字入り コード 円グラフの時とほぼ同じ 余録 棒グラフ 文字入り #bargraph{ position:relative; width:300px; height:300px; background: linear-gradient(0deg,#…

【CSS】backgroundプロパティで描く棒グラフ

どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software 【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グラフもできますね」をやってみました。（また凡例無しバージョンです^^;） 棒グラフ コード コード解説 棒グラフの棒以外の部分について先に書きます。 6本の棒グラフについて あとがき 棒グラフ #bargraph{ width:300px; height:300px; background: …

今週のお題「現時点での今年の漢字」

今週のお題「現時点での今年の漢字」 どうも！LSSです！！ はてなブログ「今週のお題」ですが…なんかすごく気の早いお題ですねw 今年が始まって21日めですが、まだこれからというところなので、期待したいものを考えると… 癒 「いやし」、としておきます。 なにかとストレスのたまりやすい昨今、冷静な判断力を失わないためにも、いやしを求めていきたいですね。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

【CSS】お手軽円グラフの文字入れ・その他

どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software で、お手軽なコードで円グラフをWebページに入れる方法について書きました。 実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいうとどのぐらいなのか」を別途記載する必要があるかと思います。 書き方は色々あるかと思いますが、その例を2つほど。 それと、ちょっと気取った変形例を1つ、試してみました。 文字入れ例 凡例 斜めの円グラフ あとがき 文字入れ例 情熱 43% 冷静 23% 狂気 19% その他 15% 円グラフの中に、それぞれの内容を数値%で入…

【CSS】お手軽（？）な円グラフの描き方【小ネタ】

どうも！LSSです！！ ブログやWebサイトを構築されている皆様、ページ内に「円グラフ」を使いたくなった事はありますか？ 自分は今のところありません。 が、もし必要となった場合… お絵描きソフトで描く Excelのグラフ機能を使って描く など、他のソフトを使って描いて貼り付ける事が多いかもですが、実はCSSでお手軽に作成する事ができます。 円グラフ コード コード解説 あとがき 円グラフ コード <div style="width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,b…

【つまづき】丸で囲む文字、を作ろうとしたらiPhoneでズレまくった話^^;

どうも！LSSです！！ ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりw 解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。 丸で囲む文字 PC＋Chromeではそこそこ正常 解決策はありそうな気がするのですが… 丸で囲む文字 こんな風に、丸に光を入れてもオシャレ？かもですね。 コード こんな風に、<span style="letter-spacing: 0.2em; background: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#f…

BENTO QUEST

どうも！LSSです！！ 「日記」カテゴリですが、これは1/16の日曜日の事。購読中のブログのとある記事に触発され、探索の旅路に出たのでした。 hukunekox.hatenadiary.jp ↑全国の都道府県の名勝・名産を はにわのハニーズが紹介するシリーズ、山形編。の最後に登場する「牛肉どまん中」という駅弁に心惹かれ、「全国の駅弁を取り寄せてる店があったはず…もしかしたら見つけられるかも？」という野心にかられた勇者（？）の物語です。 まず向かったのは「駅弁市場」 次に向かったのは百貨店の地下食料品売り場 神戸の玄関口「新神戸駅」 神戸土産を買うジモティ まず向かったのは「駅弁市場」 www.…

フルハウス・ナイツ

どうも！LSSです！！ 昔、日本ではNHKで放送されていた海外ドラマの名作に「フルハウス」というのがありました。 全世界的に人気があったらしく、とても長く続いたドラマで、今はネットフリックス限定配信の「フラーハウス」という続編がありますね。 大のフルハウスファンですが、フラーハウスのためにネトフリに加入しようとまでは思わない自分ですw 主題歌が好き フルハウスナイツ 追悼 主題歌が好き 「フルハウス」はとても好きで、よく見ていたのですが、主題歌が特に好き！ で、CD売ってないか探したりもしたのですが、当時歌手名も分からず、ドラマサントラコーナーを見ては見つけられずにいたんですね。 なんとなく聞…

【CSS】ちょっと扱いやすくした？罫線背景【はてなブログ向け】

どうも！LSSです！！ 昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。 little-strange.hatenablog.com ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模様にあわせる、というもので、文章中に高さが変わる要素…例えば文字を一部大きくするとか、画像を入れるとか、見出しをまたぐなどであっさり崩れてしまいます^^; それらの問題をクリアできるわけではないのですが、都度<div class="keisen">中の文章</div>を入れるのも使い勝手が悪いな…と…

【CSS/実験】罫線背景

どうも！LSSです！！ ちょっと背景を罫線にしてみました。 line-height で、行の高さもあわせてみたのですが…さていかがなものか？ …これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^; 例えば…ちょっと文字を大きくしてみたりとか。あと、他の要素（見出しとか）が入る事でも、ズレてきたりしますね。←すでにズレてきていますw .keisen{ line-height:2.5em; background:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2…

【CSS】一応、スペードも描いてみました【小ネタ】

どうも！LSSです！！ 【ツール】ハートマーク背景コード生成ツール - Little Strange Software で様々なハートマークを描けるようになりました。 ハートマークはバレンタインデーからの連想ですが、トランプのマークのひとつでもありますね。 とすれば、スペードやダイヤ、クローバーもあってもいいんじゃないか？と、とりあえずハートマークからの改変で作りやすいスペードを描いてみました。 スペード コード 実際のところ… クローバー あとがき スペード .spade{ height:300px; background: radial-gradient(closest-corner ci…

【ツール】ハートマーク背景コード生成ツール

「ハートマーク背景コード生成ツール」を作ってみました。

【日記】はてなスターの仕様が急に変わりましたね

どうも！LSSです！！ はてなブロガーの皆様には、今さら記事にするまでもない話ですが…今日、はてなスターの仕様ががらっと変わりましたね！ staff.hatenablog.com 最初、その時読んでたブログの人がカスタマイズしたのかと思っちゃいましたw まだ変わったばかりで実感があまりないですが、表示されるまで待たされたり、場合によっては表示されなかったり、といった事が改善されるのかな？ …と、スターを押す際のアクションの変化やエフェクトの変化にまず目がいきますが…自分の場合、今回の仕様変更で「アイコン作成時に仕込んだ事」が大幅に変わってしまう変更となりましたw スターアイコン LSSのアイコ…

【和柄CSS】青海波（せいがいは）

どうも！LSSです！！ 和柄CSSチャレンジ、今回は「青海波」です。 「あおうみなみ」と訓読みしたくなりましたが、「せいがいは」または「せいかいは」と読むようです。 画像検索してみると、そのパターンも必ずしも決まっているわけではなく、様々なバリエーションがあるようで。 青海波 - Google 検索 青海波 コード 模様の構造 青海波って iPhone対策 あとがき＋背景適用について 青海波 .seigai{ width:300px; height:200px; background: radial-gradient(20px circle at 50% 150%,#ffffff 0% 12.…

【和柄CSS】千鳥格子

どうも！LSSです！！ 最初に思った以上に手ごわかった模様「千鳥格子」。 また閃きがあり、試してみたところ、うまくいきました^^ 千鳥格子 コード 模様の構成 繰り返し模様が面白い^^ 千鳥格子 .chidori{ width:300px; height:200px; background: conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px ,linear-gradient(45deg,#fff…

【和柄CSS】分銅繋ぎ＋α

どうも！LSSです！！ CSSの背景模様、今回は「分銅繋ぎ」に挑戦してみました。 分銅繋ぎ コード コード解説 余録・千鳥格子に失敗したの巻 分銅繋ぎ .fundou{ width:300px; height:200px; background: radial-gradient(farthest-side circle at 100% 100%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px ,radial-gradient(farthest-side circle at 0% 0%,transparent …

【CSSサンプル】亀の甲羅のような模様

どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,…

【駄文】ふと、思いついたトランプゲーム

どうも！LSSです！！ このブログに「ブラウザゲームそのままプレイ カテゴリーの記事一覧」というブラウザゲームカテゴリがありますが、「この正月中にすごろくゲームでも作りたかったな（仕様が固まらなくて作れず）」とか「神経衰弱をpreserved-3dを用いてよりリアルに回転するようなものを作りたい」といったような事をちょこちょこ考えていたりします。 …と、考えているうちにふと、ちょっと奇妙なゲーム案が浮かびました。 とりあえずPCゲームではなく、リアルなトランプで複数人で遊ぶゲームなのですが…。 まず、ジョーカーを除いた52枚のトランプをよく切ります。 うち1枚を、数字が見えないまま伏せて横によ…

【CSS】CSSオンリーでレンガ模様・改善版

どうも！LSSです！！ little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コード コード中の色指定について 2つのconic-gradientでレンガ模様を作る仕組み conic-gradient凄い！ あとがき レンガ模様 .conicrenga{ height:150px; font:120% bold; padding:0.6em; background: conic-gradient(at…

【CSS】CSSオンリーでレンガ模様

どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？w）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 .renga{ padding:0.6em; font:120% bold; co…

強引にlinear-gradientでラインアートしてみたところ…

どうも！LSSです！！ 三が日最終日！ 姪っ子（赤さん）もすっかり馴染んだところで、帰ってしまいました^^; また当人が忘れる前に来るように、と妹（ママ）には言っておきましたw さて、かなり以前に little-strange.hatenablog.com JavaScriptでcanvas要素を使って、はるか昔にやった「ラインアート」を試みた事がありました。 何本もの直線を、始点のY座標・終点のX座標を一定量づつずらしながら描くと、全て直線なのに曲線のように見える、というものでした。 それを実現するには「斜めの線を明確に指定した座標で何本も引く」必要があり、canvas要素を用いたのですが、…

おみくじのコード解説

どうも！LSSです！！ 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style>#omikuji{width:280px;padding:10px;font-size:40px;font-weight:bold;background-color:#eeeeee;border:1px solid black;background-image:radial-gradient(circle 80px at 70% 30%,whi…

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

#maku{ position:absolute; width:100%;height:100%; top:0%;left:0%; z-index:999; background-image:repeating-linear-gradient(90deg,#ffffff 0% 12%,#ff0000 12% 24%); } #moji{ position:relative; margin:0 auto; padding:2em; -ms-writing-mode: tb-rl; writing-mode:vertical-rl; font-size:180%; font-family: ser…