どうも！LSSです！！ ちょっと先日から、CSSサンプル関連のまとめ（昨年７月以降のもの）を書こうとしていて…なんだか苦戦していますｗ 意外と量が多いようなそうでもないような？ 以前は と に分けてましたが、そんな感じでカテゴリ分けするのがまとまりいいのかな？とも思いつつ…。 書きあげる前に色々考えるクセがまた出てきちゃってる気がしますね^^;;; どんな形になるか分かりませんが…とにかく書くかな！ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…のを公開しました。 CSSのプロパティ、「使用頻度の高いもの」も「いつ使うんだ？」というようなものもひっくるめて出て来て、それをタイピングする、というものでした。 で、遅ればせながら今回はその拙作のコードを公開してみます。 コード 赤文字部分が登場する単語を並べている部分 たいしてゲーム性があるわけでもないですが^^; コード <style><!--#gamen{border-radius: 15px;box-shadow: 2px 2px 20px 0px #ffff80 …

…ではないですがひとつCSSで作ってみましたｗ コード <p style="writing-mode: vertical-rl; font-size: 200%; padding: 1em; background-image: linear-gradient(105deg,#e0d0f0,#e8d8f8,#e0d0f0); background-size: 10px 20px; border: 3px solid #e0e0d0; text-align: right; font…

…ロガーに100問。 CSS装飾、ちょっといじりました はてなブロガーに100問。 1.ハンドルネームは？ A.ＬＳＳブログ名の略称そのままですｗ 2.ブログ名は？ A.Little Strange Software「少し奇妙なソフトウェア」を目指したくてつけました。 3.いつから始めた？ A.2019年9月 4.自分の記事で好きなジャンルは？ A.ブラウザゲーム 5.自分の記事で苦手なジャンルは？ A.時事 6.書き出しの定例文ある？ A.「どうも！LSSです！！」 7.しめ…

…きてしまいます。 （CSSまたはHTMLタグで自動ナンバリングもできますが…） そこで、試しに「100の質問用テンプレート」を出力するスクリプトを書いてみました！ サンプル このスクリプトのコード 見た目の調整 サンプル ↓のボタンを押すと、かなりの行数のものが出てきちゃいます。 このスクリプトのコード <p><input id="tbtn" type="button" value="サンプルとコードを表示" /></p><div id="gamen"> </div><scr…

…み取る関数を実行する」ように指定しています。 あとがき 今回の実験は、 ↑これでやろうとしていた事をスクリプトの力を借りて実現する…ための、まず計算材料となるデータをスクリプトで読み取るための実験でした^^ この２種類のサイズ×幅＆高さの４つの数字が取得できたので、計算に必要なデータは出そろった事になります。 あとはまた…この数値をCSSに当て込んで、期待通りの画像に仕上げられるか、を試さなきゃですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…12一句献上（縦書きCSS） はてなブログのお題記事、にCSSネタを絡めてみました^^ プロパティ１つで縦書きにできます。 逆に言えば、プロパティ１つで、というところであまり創造性がないので、お題記事と絡める事で書けた記事だったりします。 6/13【JavaScript】もし、はてなブログ執筆中に電卓が必要になったら【ほぼ冗談】 ジョーク記事ですｗと同時に「非常に簡単なJavaScriptの例」でもあり、これからJavaScriptを覚えてみたい方には一度書いてみてもいいんじ…

どうも！LSSです！！ 今日はなんだか、background-positionと格闘していて惨敗しました^^;;; ちなみに、やろうとしているのは こういうのなんですが、実は表示位置指定が失敗していて、ちゃんと分割されていない上に画像も端まで表示されてなかったりしますｗ 失敗しているコード <style><!--#gbox{display:inline-block;position:relative;margin:0px;padding:0px;}#m0,#m1,#m2,#m…

…発需要も…？ 最近はCSSやWebアプリに転向しているこのブログですが、今だ検索流入が最も多いのは このAndroidアプリ開発関連記事なので（この記事の検索需要が高いという事は、いかにテキストを改行表示させるのが分かり辛いかって事でもありますｗ）、考えちゃいますねぇｗ あとがき（オチ） 「互換性の確認」、チェックアプリを早速実行してみました！ 結果は… …ええええええええええええええ！？ ま、まぁだいぶ年季入ってるPCではありますし、BIOS設定などによっても違ってくるらし…

…！ 昨日、写真画像をCSSで「ちょっと変わった見せ方」をする方法を思いつき、記事にしていました。 昨日のコードを使用すると、 ↑こんな感じに、枠部分が透けて見えつつ、盛り上がったような形状で表示させる事ができます。 が、実は試していた時点からちょっと気になっていた部分はありました。 枠線（border）にoutsetを指定した場合 が、そうなると気になるのは…左上と右下！ 四辺の色を自分で指定してみました あとがき 枠線（border）にoutsetを指定した場合 borde…

CSSのborder（枠線）を使って、写真画像を盛り上げたように見せる方法を考えました。 ↑の写真が↓こうなります。 どうも！LSSです！！ ちょっと思いついた事があって試してみたところ、うまく出来ました^^ コード コード解説 盛り上げたように見せる、と言いつつ… コード <div style="width: 300px; height: 225px; background-size: 100% 100%; background-origin: border-box; bo…

…のですが、 のようにCSSで位置調整する事で、予め画像を切り分けなくても画像をパーツ分けする事はできます^^ また、 でやったように「ユーザーが手元のファイルを選択して使用できる」という事もできそうですし、 のエディット機能で使ったような「画像URLをURLの?以降につけて、それをスクリプトから読み込む」事で、他の人に指定画像で遊べるURLを生成して渡す、なんてことも。 （そうなると完全にユーザー任せなので、例えば版権画像だったり、ムフフ画像だったりになるかもｗ） よりゴージ…

…が、打つ単語が全て「CSSのプロパティ」ですｗ 遊び方 こういう方に特におすすめ！ あとがき 遊び方 「クリックで開始します」をクリックすると、CSSのプロパティがランダムでひとつ、出てきます。 キーボードでそれをタイプします。 大文字・小文字は区別しません。ハイフンも打つ必要があります。 一単語ごとに「最初の文字を打ってから、最後の文字を打つまでにかかった時間」が計測されます。 エンドレスです。気のすむまで遊べますｗ こういう方に特におすすめ！ 以下のどれかひとつでも該当す…

… 投稿した、 というCSS小ネタですが、さらにちょっと付け足してみました。 小ネタのさらに小改変？ コード ちょっとゴージャスな感じ？ コード <div style="border-radius: 15px; box-shadow: 2px 2px 20px 0px #ffff80 inset; background-image: linear-gradient(45deg,#040404,#141414); background-size: 7px 7px; border:…

まさかこんな事が… CSSシェイプ…CSSで図形を定義できる！？吹き出しとか概念がガラッと変わりそう。 行数を増やすとその分 のびるのびるｗこれ、なんか面白い事に使えるのかも？…と、とりあえずは吹き出しで試してみましたが。 どうも！LSSです！！ CSSプロパティの一覧を検索していると、たまたま見つけました。 CSSで↑のような特殊な形状を表現できるんだ！？と。 これまで、CSSで三角を表現しようと思ったら、 こんな感じでborderをいじって…というやり方でしたが、CSSシ…

…Sです！！ ちょっとCSSでやってみたい事があったのですが、その過程で出来たものを晒してみます^^ 黒地に金文字 背景をちょっと凝ってみた版 やってみたかったのは、 黒地に金文字 黒地に金って映えるかな？ コード <div style="border-radius: 15px; background-color: black; border: 6px gold ridge; font-size: 200%; font-weight: bold; padding: 0.6em;…

…！ 一句献上 縦書きCSS もうちょっとだけ凝ってみました テキトーな句ですが 一句献上 しとしとと都市をしっとりひたす雨 縦書きCSS …といった感じで、５７５となると縦書きで書きたくなりますよね！ CSSには文を縦書きにするプロパティが用意されています。 コード <p style="writing-mode: vertical-rl; font-size: 200%;">しとしとと<br />都市をしっとり<br />ひたす雨</p> もうちょっとだけ凝ってみました しと…

…っと手軽にHTMLやCSS、JavaScriptにSVGなどのテストをしたい時。 はてなブログにログインできる環境なら、下書きで試すのも手ですが、そうじゃない環境下でただしPCはある、という時。（かなり限定的ですね^^;） メモ帳などのテキストエディタを開き、最小限のHTML構成である、 <html><head></head><body></body></html> …という内容をささっと手打ちで打ち込み、保存してから、拡張子を「.html」に変更する、なんて事をしたりします…

…tであれSVGであれCSSもそうですが、コンピュータで表現する時のY座標は「↓がプラス」と、方向が逆なんですね^^; JavaScriptで扱う場合は、データとしてはそのままの数値で、スクリプト内でマイナス計算するだけで済みましたが、SVGの場合はそのままの数値となるため、「いっそそのまま負の数にして、描画領域を負の数値のエリアを出すようにしよう」としたのが今回の例となります。 ちなみに「描画領域」はコード一行目のviewbox="-40 -500 1040 540"のところ…

…てて初めて？見つけたCSSプロパティ 環状線制覇双六（試作） サイコロを振る 「サイコロを振る」をクリックすると、１～６の出目分、先に進みます。 右端と左端は繋がっています。 ２６の駅、最初は全て「0」で、止まったところは「1」に変わります。 全ての駅が「1」になったらゲームクリア！ ※あくまで試作品なので、見た目がしょぼいのはごめんなさいですｗ このテストスクリプトのコード <div id="gamen" style="border-radius: 15px; border…

どうも！LSSです！！ 先日、このブログに という記事を書きました。 で、考えていたんですが、 「容易にシステムとなるスクリプトをコピペできて、誰でもカンタンに項目を増やせるようなWebゲームブックシステムを公開したら…誰かゲームブック作ってくれないかな？」 とｗ で、とりあえず、作ってみました！ サンプル コード サンプルはあくまでサンプル と、作ってはみたものの… サンプル コード <style><!--#gamen{border:2px solid #aaccff;}.…

…」というのは、これがCSSではなくSVGによる描画であり、「画像」扱いとなるからだったりします。 が、そのくせ、文字をテキストとして選択できてしまう、という面白味もあります^^ コード はてなブログ用に、前後に[]を付与したコード []<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 1…

…読めないですよねｗ CSSフィルターを使用しました 未完の大作 あとがき 実物写真 文字が読めないですよねｗ 実物は読めるのですが、こう鉛筆書きのノートを写真で撮ると、文字が読みづらくなってしまう事があります。 画像加工で読みやすくする、という手もありますが、CSSでもっと手軽に改善する方法を見つけました！ ちょっとだけマシになったのがこちら！↓（画像ファイルは同じものです） CSSフィルターを使用しました 最初に貼り付けた画像は、はてなブログの「写真を投稿」機能から貼り付け…

…技術は進歩しつづけ、CSSもレベルが上がっていき、各ブラウザが新しい規定を取り込もうとしている中で、開発が停止したIEはWebサービス提供者にとって厄介の種だった事と思います。 ※今日調べて今更初めて知ったのですが「CSS3」の「3」は「バージョン」じゃなくて「レベル」なんだそうですね^^ なんせ、魅力的なCSSプロパティが規定され、多くのブラウザで実装されたからWeb制作で利用しよう！と思っても、仕事を請け負ってされている方は発注者がIEで正常表示されない事に難色を示すと、…

線の色 背景色 点の位置 線の太さ サイズ こんな模様になります^^ 使い方 「模様変更」ボタンを押すと、サンプルの模様が変化します。 「点の位置」の４つのスライダーを調節するか「ランダムに設定」ボタンを押す事でも模様が変化します。 ※「模様変更」ボタンは点の繋ぎ方を変更し、「点の位置」は繋ぐ対象である点の位置を変更するものです。 他に「線の太さ」や「サイズ」を変更する事もできます。 「線の色」「背景色」で配色を変更できるので、雰囲気を大きく変える事ができますね。 お気に入り…

どうも！LSSです！！ を、自動生成するようなものを作ろうと…していたのですが、途中でだいぶ手間取ってしまいました^^; 作りかけですが、今こんな感じ、という中間報告です。 作りかけ スクリプトコード 作りかけ 線の色 背景色 こんな模様になります^^ スクリプトコード <p>線の色<input id="icr" type="color" value="#888888" /> 背景色<input id="bcr" type="color" value="#ffffff" />…

…！LSSです！！ 【CSS+SVG】ヘリンボーン模様の背景 とか、 【CSS+SVG】インラインSVGを背景画像に指定 とかを作りながら、漠然と考えていたんですが、「パターン画像を繰り返して背景として繋がるようにするには…画像の上辺の点と、同じ位置に当たる下辺に点、左辺の点と同じ位置に当たる右辺に点、それらが繋がるように線を引いて模様を作れば、どんな繋げ方でも繰り返し模様になるんじゃないか？」と。（この文章で伝わる自信は あまりありませんが^^;;;。） と、いう事で、今回は…

…ンサー 英単語抽出 CSSサンプル 論理パズル ペンタブ 記事一覧ページ 2021-04-01から1ヶ月間の記事一覧 サイドバーの「月別アーカイブ」から、いつでも見る事ができますが、４月の記事一覧はこんな感じでした。 MMLプレイヤー あ、これ今月からだったんだ。 WebAudioAPI自体はもっと前から触れていましたが、それを使ってMMLを再生するものを作ってみよう、と取り掛かったのが今月の最初の記事でしたね。 エイプリルフールイベントに乗っかることもせずに…ｗ もっと前だ…

…！LSSです！！ 【CSS+SVG】れんが模様の背景 で、CSSにSVGを織り込むという手法で、背景を描くコードを作成しました。 そのコメント欄に、 さじ(id:conasaji) レンガの組み方でヘリボーンってのもあるんですけど、以前の彩綾型みたいに組まれた模様で面白いかもです。%23にしなくちゃいけません、って決まりなんですか？誰が決めたんでしょうね（笑） とのコメントをいただき、ヘリボーンについて調べてみると、いつも通ってる歩道で見かけるような模様でした。 さじ様、いつ…

…も！LSSです！！ CSSで描く背景について、色々と考えていました。 ふと「れんが模様の背景って描けないかな？」と思い立ったのですが…。 【CSS】うろこ模様 その他【小ネタ】 【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】 【CSS】repeating-radial-gradientを何気に初めて使ってみる 【CSS】CSS模写 再び！【格子模様】 ↑これらと同様の手段を用いて、描けないものかと…