…けによって変わるところですが）、それを右クリック→プログラムから開く→メモ帳 と進むと、ちゃんとSVGのコードとして保存されている事が確認できました^^ WordやExcelの図形挿入を使って描いた絵をSVGで保存できるとなると…色々面白い事ができそう（CSSのkeyframesアニメーションや、JavaScriptから絵の中の一部要素を変化させるとか）ですが…サブスク365以外にも実装されないかなぁ？ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

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

…L部分 コード解説 CSS部分 コード解説 スクリプト部分 あとがき コード ^^) _旦~~ <style>#stalker{ position:absolute; pointer-events: none; transition:linear 0.1s;}</style><div id="stalker">^^) _旦~~</div><p><script>stkx=0;stky=0;pntx=0;pnty=0;stks=10;//速度調整document.addEvent…

…った棒グラフも、 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software ↓【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software と同様に文字を入れてみました。 棒グラフ 文字入り コード 円グラフの時とほぼ同じ 余録 棒グラフ 文字入り 栗田 曽根 花山 玄藤 敷島 根室 100 50 コード <style>#bargraph{position:relative;width:300px…

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

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

…多いかもですが、実はCSSでお手軽に作成する事ができます。 円グラフ コード コード解説 あとがき 円グラフ コード <div style="width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"> </div> わずかこれだけのコードで、円グラフが作れます^^ コード…

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

…冠したスナック菓子。30本ぐらい入っているので、お土産としては職場など大勢に分配するのに向いてそうですね^^ そして、猫の形の缶に入ったプチフィナンシェ（1000円）。こちらは中身は少量で、中身目当てというより後の缶を小物入れにするのに良さそうです^^ この２つを購入し、家路についたのでした。 【CSS】ちょっと扱いやすくした？罫線背景【はてなブログ向け】 - Little Strange Software ってなとこで、今回はこのへんで！次回もまた、よろしくお願いします^^

…nt; まず、今回のCSSを当てる対象は .entry-content p を対象にしています。 これは「entry-contentというクラス名を持つ要素の中の<p>タグ」を指定している事になります。 はてなブログにおいては「entry-content」というクラス名は記事の表示部分で、「編集 見たまま」画面で記事編集中にPCのエンターキーを押すと、 <p> </p><p> </p><p> </p><p> </p> のように<p>タグが量産されます。 …自分も、改行や行間を…

どうも！LSSです！！ ちょっと背景を罫線にしてみました。 line-height で、行の高さもあわせてみたのですが…さていかがなものか？ …これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^; 例えば…ちょっと文字を大きくしてみたりとか。あと、他の要素（見出しとか）が入る事でも、ズレてきたりしますね。←すでにズレてきていますｗ コード <style>.keisen{line-height:2.5em;background:linear-gra…

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

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

…re）、いつかこれもCSSだけで表現できる日が来るのでしょうか…？ そうそう、 little-strange.hatenablog.com の時にコメント欄でいただいたものの中に「青海波（せいがいは・せいかいは）」というものがあり、 little-strange.hatenablog.com のようなものと思っていましたが、これも一筋縄では行かなかったです^^; そちらもなんとか実現はできたので、いずれまたネタにする事にしようかと。 ってなとこで、今回はこのへんで！ 次回もま…

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

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

…ガ模様を実現しているCSS指定になります。 コード中の色指定について background:conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px,#eeeeee; ↑の色を付けた３か所、この「#ccaaaa」がレンガの色、「#…

…blog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^…

…を用いたのですが、「CSSのみでもなんとかできるんじゃないか？」と思い立ち、強引に試みてみた記録です。 強引にlinear-gradientでラインアートしてみた 無駄に長くなったコード 線を半分 間引いてみました あとがき 強引にlinear-gradientでラインアートしてみた やりようもあるとは思いますが…linear-gradientで強引に引いたため、線自体あまり綺麗なものではないものの、なんか「それっぽく」はなりましたね^^ 29本の線を引いていますが、１本あた…

…におみくじの見た目をCSSで指定している部分です。 最後の行、 user-select:none; は、何度もクリックしているうちに、文字選択状態になってしまう…という事を避けるための指定で、この１行を入れているとおみくじが文字選択の対象外となります。 次にスクリプト部分 <script>cnt=0;kuji=["大吉","吉","末吉","凶","大凶"];a=Math.floor(Math.random()*kuji.length);omikuji.addEventLis…

…ま」画面は「ページ内CSSは影響するが、JavaScriptは動作しない」という仕様になっています。 つまりどうなるかというと、編集画面が ↑こんな状態になり、記事冒頭部分の編集が困難になるんですね^^; 一応、他に、 width:100%;height:100%; この「100%」を一時的に0%に書き換えて、後でまた100%に戻す、という方法もあります。 恒例のアレ おみくじ 今年もまた、おみくじを用意しました！ 去年のに少しだけ手を加えたもので、何度でも引けます^^ って…

…一部解説 まず冒頭のCSSから。これはメーターの外観を設定している部分となります。 コード <style>#scrlm{position:fixed;bottom:50px;left:10px;border-radius:50%;width:50px;height:50px;}</style> position:fixed;画面スクロールに追従せず、常に一定位置に表示させるポジション指定です。 bottom:50px;left:10px;bottomは「画面下から」、left…

…見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 コード <div id="gamen">画面スクロールにあわせてCSS指定が変化します。</div><script>document.addEventListener('scroll',fscr,false);func…

どうも！LSSです！！ ちょうど一年前の記事、【Merry】聖なる夜に【Christmas】と同様、この記事限定の背景仕様でお送りします。 年に一度の特別な日。 今年はどんなネタで行こうかな、と考えていました。 クリスマスツリー（ブロック製） 以前の記事の追加改変です そんなクリスマスイブ クリスマスツリー（ブロック製） スライダーを左右に動かすと、違う角度から眺める事ができます^^ 以前の記事の追加改変です little-strange.hatenablog.com ↑の記…

…あとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…を考えていて、それをCSSで試してみる事にしました。 これを見た方が炎をイメージしてくれて、気持ち温まっていただければ^^…と、こじつけておきますｗ FireCard コード 「炎」に関わるのは一部分のみ まぁ、炎というよりは… FireCard Little Strange Software コード <style>.fire{width:300px;height:184px;padding:10px;font-size:120%;font-weight:bold;color…

…も！LSSです！！ CSSの立体表現を使って、3D迷路表示に挑戦してみました。 まだ改善点は多いですが^^; 3D迷路（作りかけ） コード やってる事 問題点 今後 3D迷路（作りかけ） 壁は適当にデザインしました。 ↑こういう位置から見た感じを表現した図、です。 コード <style>.waku{position:relative;background-color:#000000;width:300px;height:300px;transform-style:preser…

…です！！ 今回はまたCSS小ネタです。 キラキラ背景 コード うち、背景デザインに関わる記述は２行 その他の指定について キラキラシールのようなものを目指したのですが… キラキラ背景 こういうキラキラの背景を考えてみました。もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい？ コード <style>.kirakira{width:300px;height:300px;background-image:repeating-conic-gradient(from…

… 使い方は改訂前（【CSS/JavaScript】多角形フォトギャラリー）と同じで、コード全文をコピペした後、赤文字部分を見せたい画像のURLに置き換える事で使用でき、数を増やしたり減らしたりもできます。 また、改訂版ではtranslateZの値を調整する必要はありません^^ 改訂内容 多角形状に並んでいるサムネイルのサイズを、画像枚数に応じて自動的に変化させるよう、スクリプトを書き換えました。 ph3d.style.width=(Math.PI*300/ph3dimgs.l…

どうも！LSSです！！ 以前、公開した little-strange.hatenablog.com というフォトギャラリーの仕組みがあります。 「六角」の名の通り、見せたい画像が６枚ある場合にちょっと面白い見せ方ができる、というものでしたが、より多い・少ない場合には使えないという最大の欠点が！ 今回はその欠点を解消し、より多い枚数でも少ない枚数でも使えるようにしたものを「多角形フォトギャラリー」として公開します^^ 多角形フォトギャラリー コード 使い方 難点 多角形フォトギ…