Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

HTMLなど

【描画だけ】作りかけのスイッチ迷路・イメージ

どうも!LSSです!! 【実験】CSS、backgroundプロパティで迷路を描くテスト(の準備段階) - Little Strange Software 考えてる迷路案「スイッチ迷路」 - Little Strange Software と書いてきた「スイッチ迷路」、とりあえず「おおむねの描画」が出来たのを…

【実験】CSS、backgroundプロパティで迷路を描くテスト(の準備段階)

どうも!LSSです!! CSSのbackgroundプロパティを使って様々な絵を描くのを試みてきましたが、ここで「迷路の描画をbackgroundだけで出来るか?」をやろうと…し始めてみました。 まず格子状に壁を配置 壁を抜く まず格子状に壁を配置 .test{ width:300px;he…

【CSS】蝶のはばたき

どうも!LSSです!! かなり前(約2年!?)なんですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。「別バージョン」に苦戦している様子が見られますw そして最近にな…

【JavaScript】青い空と白い雲【乱数背景】

どうも!LSSです!! JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード article{background:transparent!important;}…

【CSS】CSSで「こいのぼり」を描いてみました

どうも!LSSです!! 5月5日「こどもの日」でしたね! もう、その日も終わろうという頃になって、何かそれっぽい事をこなしたくなりましたw 気の抜けた「こいのぼり」 .koinobori{ width:300px; height:450px; background: radial-gradient(15px 40px at …

【CSS】CSSでチョコレートケーキを描いてみました【backgroundプロパティ】

どうも!LSSです!! 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード

【CSS】3つのグラデーション【実験】

どうも!LSSです!! 朗報、と言うべきかどうなんだか?iOSのブラウザにあった、ある問題が解決していたようです。 3つのグラデーション コード 以前には iOS15.4で修正されたらしい 3つのグラデーション ↑「赤から黄色」に変化するグラデーションを3つ、…

【CSS】斜め市松模様の解説

「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^

【CSS】linear-gradientで描く「斜め市松模様」

どうも!LSSです!! 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で…

【CSSお絵描き】まるいの【ちょっとだけ動くよ】

どうも!LSSです!! あまり出番がないので ご存知ない方もおられるかも知れませんが、このブログにはマスコットキャラクター「まるいの」という謎の生物がいます。 little-strange.hatenablog.com 今回、無駄に労力を使って、CSSのbackgroundプロパティを使…

【CSS】角丸袋文字

どうも!LSSです!! もう2年以上前ですが、 little-strange.hatenablog.com というコード生成ツールを公開していました。 色々調整できて面白いツールではありましたが、「ぼかし」をかけておかないとフォントの尖った部分がそのまま尖った袋になる、とい…

【CSS】文中に付箋のような注釈【小ネタ】

どうも!LSSです!! 今回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな? サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかな…

【CSS】自動フォトギャラリー【3枚限定】

どうも!LSSです!! 【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れない…

【CSS】謎の背景模様『山』【小ネタ】

どうも!LSSです!! なんとなくCSSをいじっていると、謎の背景模様?ができました。 謎の背景模様『山』 コード styleオプションに書く場合 あとがき 謎の背景模様『山』 .yama{ background: repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddff…

はてなブログのコメント欄にHTMLタグを「コードとして」書く場合

どうも!LSSです!! はてなブログのコメント欄は(全てではないと思いますが)HTMLタグを書く事ができます。 例えば、 <img src="画像ファイルのURL"/> のように書くと画像を挿入できたり。 ところが、ですね。 タグが有効である、という事は逆に言えば「こういうタグを使うんですよ」って…

【CSS】縦スライダー【この方法に気づかなかった…】

どうも!LSSです!! これまで、コード生成ツール カテゴリーなどでよく「スライダー」を使ってきました。 ↑こういうやつ。 で、たびたび思っていたんですが…「縦のスライダーって出来ないのかな」と。 例えば「横位置」「縦位置」をスライダーで調整可能に…

【CSS】桜の花、開く季節に…【枠装飾】

どうも!LSSです!! 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました! サンプル コード CSSセレクタについて 文字に対する指定 サンプル .hnbr{ border-…

【CSS】透過ボタン

透明感のある、ぷにぷにしたボタン

【CSS】水滴・改変【小ネタ続編】

どうも!LSSです!! 【CSS】水滴【小ネタ】 - Little Strange Software のコメント欄に様々なアイデアをいただき、ありがとうございます^^ コメント欄で回答させていただいた分もありますが、他にもそれぞれコード修正を行って調整してみたので、記事にして…

【CSS】水滴【小ネタ】

どうも!LSSです!! 今日はCSS小ネタです。 水滴 コード CSSで水滴を描いてみました 水滴 .pichon{ width:150px; height:100px; background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000); bo…

【CSS】ブランコ【小ネタ】

どうも!LSSです!! 今回はまた、CSS小ネタです。 ブランコ コード あとがき ブランコ @keyframes swinga{ 0%{transform:rotateX(60deg);} 100%{transform:rotateX(-60deg);} } .swingwaku{ position:relative; float:left; width:100px; height:100px; tra…

【JavaScript】無限ガチャ【実験】

どうも!LSSです!! 昨日の妄想記事、 【お題】わたしのコレクション をテーマにゲームを作ったら?【妄想】 に書いたうち、「7種類」「1/10でレア」「1/100でスーパーレア」という確率だけを実験してみるものを作ってみました。 …つまり、まだゲームでもな…

【CSS】フラフープの動きを再現できるか挑戦してみました【実用性:???】

どうも!LSSです!! 先日の記事、 little-strange.hatenablog.com を応用して使っていただいた記事の中で、 mio20100501.hatenablog.com コメント欄にて「最初は女の子がフラフープをまわす・・・をやろうと思ったのですが、フラフープが上手くいきませんで…

【CSS】ぐるぐる回転して目立たせる物体

どうも!LSSです!! 今回はまたCSSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて サンプル @keyframes grgra{ 0%,30%{transform:rotateX(-5deg) rotateY(360deg);} 100%{transform:rotate…

【CSS】菱餅の区切り線【ギリギリの時節ネタ】

どうも!LSSです!! 今日は3/2。明日は ひなまつり ですね^^ それにちなんだ記事を用意されている方もおられるかと思いますが、このギリギリのタイミングで、ひなまつりネタのCSSです! 菱餅の区切り線 コード ひなまつり要素のうちで、CSSネタにしやすいの…

【CSS】鎖の区切り線【小ネタ】+α

どうも!LSSです!! またしても、区切り線CSSネタです。 鎖の区切り線 コード コードが2種ありますが、 【+α】区切り線ではなく背景にしてみると…? 終わりに 鎖の区切り線 .chain{ height:20px; background: radial-gradient(10px 10px at 50% 0%,#66666…

【CSS】赤と青の波線【小ネタの続き】

どうも!LSSです!! 昨日の記事、 little-strange.hatenablog.com で、ページ内の区切りとして使用できるような区切り線をデザインしました。 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaa…

【CSS】赤と青の区切り線【小ネタ】

どうも!LSSです!! CSS小ネタとして、区切り線を作ってみました。 赤と青の区切り線 コード 区切り線代わりに使用できますね 赤と青の線ですが、本当は… 赤と青の区切り線 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaa…

まだ知らないCSSプロパティと出会える方法

どうも!LSSです!! CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSS…

【CSS】リンクボタン

どうも!LSSです!! 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」…