どうも！LSSです！！ CSSには、様々な「フィルター」が用意されています。 以前にも、 little-strange.hatenablog.com で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^ 白トビ→通常の写真に変化 セピア色の思い出がよみがえる transitionについて にじんだ景色も目を凝らすと… コントラストの鼓動 あとがき 白トビ→通常の写真に変化 謎のお魚オブジェ 最初に、とんでもなく白トビした状態で表示しますが、マウスカーソルを乗せる（スマホの場合一度タップする）と、通常の写真に変化します。 コード <style> .anmfb1{transition:1s;filter:brightness(1000%);} .anm

どうも！LSSです！！ 今回は「コード生成ツール」として「conic-gradient生成ツール」を作ってみました。 conic-gradient生成ツール 使い方 あとがき conic-gradient生成ツール 繰り返し回数 コード 使い方 上から順に、 「繰り返し回数」のスライダー 「色追加」ボタン 「カラーパレット（最初は２つ）」 「表示サンプル」 「コード」 が並んでいます。 ２つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。 ２色だけでは物足りない、という場合は、「色追加」ボタンを押すたびに無制限に色が増えていきます。 また、「繰り返し回数」のスライダーで繰り返し回数を調整できます。 お好みのグラデーションができあがったら、「コード」のグレーの枠に表示されているコードをコピーして、あなたの

どうも！LSSです！！ かなり前に、 little-strange.hatenablog.com という記事を出し、その後も何度かそれに似たものを出していました。 これはチェックボックスを使用した、単一のメニューの開閉を実現するものでしたが、今回はラジオボタンを使用して「複数のうちからひとつを開く」開閉メニューを作ってみました。 ラジオボタンによる開閉サンプル コード 使い方 あとがき ラジオボタンによる開閉サンプル 塀 「隣の家に塀が出来たんだってね」 「へ～え」 囲い 「隣の家に囲いが出来たんだって」 「カッコイー！」 Wall "There was a wall in the next house" "Wow...LL" 見栄っ張り 「お隣の奥さん、すごい見栄っ張りなのよ」 「そうなのかい？」 「ママ友が服を新調したからって、ご主人におねだりして高い服を買わせたんですって。…もちろん

どうも！LSSです！！ 自分が はてなブログ でこのブログを開設して２年ちょい、ですが、はてなブログさんは「11/7で10周年」を迎えられるそうですね。 特別お題キャンペーン お題は４つ、どれでも可 特別お題キャンペーン blog.hatenablog.com そして10周年記念に、特別お題キャンペーンが始まっています！ 期間は10/14～11/24とちょっと長め。 でも忘れずに参加しておきたいところですね。 なんせ参加するだけでもれなくレッドスター10個が配布されます^^ …その他抽選でインク＋万年筆がもらえるそうですが…３０名。貰える気がしませんｗ っと。詳しくは公式の告知をご確認ください^^ お題は４つ、どれでも可 「１０」にちなんだお題が４つ用意されていて、どれで書いてもレッドスター配布の対象になるとの事。 どれにするかな…期間はたっぷりあるので、のんびり考えますか（と言ってる間に

どうも！LSSです！！ このブログでは、色々なCSSサンプルを考えては公開してきていますが、見せられる物になるまでには「このやり方で仕組みが作れそうかな？」と簡単なサンプルでテストして、うまく行きそうなら見栄えを調整して完成！としたりしています。 すると中には「一見うまく行きそうな気がしたけど、それを発展させる上で超えられない壁があり、完成に至らない」ものもあったりします^^; これ何かに使えないかな？ ラベルにすると途端にうまくいかなくなるｗ どうしてもラベルを使いたかったらこう、だけども… もうちょっとうまい書き方があれば… これ何かに使えないかな？ ■ ■ ■ ■ ■ ■ ■ ■ 試験的に↑こんなものを考えてみました。 ラジオボタン（丸）をクリックすると、脇の■が選択したラジオボタン以降全て青くなります。 コード <style> .testr{color:red;font-size:

どうも！LSSです！！ 以前、CSS+JavaScriptネタで、 という記事を公開しました。 「ブログレイアウトを無視して画面いっぱいに表示を呼び出す」というもので、この時はJavaScriptを使用して実現していましたが、 に書いたような「checkboxとlabelを使う」方法だと、CSSだけですっきり実現できるなじゃないかな？と思い、やってみました。 ついでに、 閉じる時は画面のどこを押しても閉じる 表示したい内容の中央寄せ も実装しています^^ フルスクリーン表示 コード 使い方 フルスクリーン表示 ここをクリック わっ！ びっくりさせちゃいました？ どこでもクリックすると元に戻ります。 コード <style> #fullscrchk{display:none;}/*管理用チェックボックスを非表示にする*/ #fullscrlbl{/*フルスクリーン表示させる枠。*/ displ

どうも！LSSです！！ もう半月ほど前の事ですが、9/19。 Amazonで異様に安いものを見かけて、ポチってみました。 空調服 だってほら、 でも実はまだ着てないという… 空調服 空調服 作業服 夏用 エアコン服 綿100% ファンファン 4本 10000MAH容量バッテリーセット ワークウェア 熱中症対策冷風服 現場工事 通勤 紫外線防止 3段階調節できる 充電式 日本語説明書付き SARAHE Amazon はい、こちらです。 夏向きの商品ですが『空調服』！！ 何年か前に、こういうものがあると知った頃には数万円という結構いいお値段していましたが、最近ではだいぶ安くなってきているな…と感じていました。 が、↑の商品の内容と値段にびっくり！！ 「モバイルバッテリつき…だよなぁ」と何度も確認する事になりましたｗ だってほら、 モバイルバッテリだけでもこのぐらいのお値段のものがありますし、最

どうも！LSSです！！ 昨日は、CSSのフィルターをネタにするために、メリケンパークに出向きました。 CSSフィルターって画像じゃなくても効果はのりますが、やはり写真を対象にするのが分かりやすい効果が多いですね。 普段あまり撮影はしないのですが、ネタのために、と結構撮ってきましたｗ 入口にだけ花壇 涼しげ！ タワーは仰角で 出石そばのいただきかた トワイライト（黄昏時） 入口にだけ花壇 バスで向かったのですが、降りて入ったすぐのところに、コンセプトがわからない謎オブジェと花壇がありました^^ 涼しげ！ 別のところでは見たことがありましたが、メリケンパークにも遊べる噴水がありました。 さすがにカメラを向けはしませんでしたが、全裸男子の姿もｗｗｗ タワーは仰角で ただなんとなく、タワーは仰角で撮るべきか？と撮ってみただけの写真ですｗ 出石そばのいただきかた けっこう中途半端な時間に、出石そばの

どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました - Little Strange Software で使用していたコードのうち、スクリプト部分についての解説を、 little-strange.hatenablog.com に書きました。 そのスクリプトでは、現在時刻の取得を「Date.now()」によって「国際標準時のミリ秒」で行っていたため、時差の修正やミリ秒から時分秒への変換を行っていました。 …で、JavaScriptで現在時刻を取得する方法は複数あり、実はそのまま「現地時間での時・分・秒」を取り出す方法もあるんですね。 ミリ秒から計算する方法を採択しましたが、後者の方法を使った場合とどちらがコードが効率的か？ ちょっと比較のために書いてみる事にしました。 コード比較 おまけ：時計の精度アップ？ コード比較 Date.now()を利用したコード（元） <

どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました で、即興でアナログ時計を作ってみました。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード（script部分のみ） コード解説（JavaScript部分） setInterval 時刻を秒で取得 Date.now() getTimezoneOffset() 時針の角度計算 分針、秒針も同様に。 って、かなり長くなってしまいましたが… あとがき コード（script部分のみ） <script> tokeitm=setInterval(function(){ tokein=((Date.now()-(new Date()).getTimezoneOffset()*60000)%86400000)/1000; tokeih.styl

どうも！LSSです！！ 最近、ぼーっと考えてる事について。 gridレイアウトとレスポンシブデザイン あまり、はてなブログに関係のない話（テーマ作るなら密接に関係してきそうですが）ですが、レスポンシブ対応のWebサイトを作るなら？ みたいな事を考えています。 メディアクエリとgridレイアウトで作る事になり、それぞれ過去に記事で取り扱った事はありますが、この２つをあわせる感じですね。 【CSS】レスポンシブデザインに必須！な「メディアクエリ」…の、さわりだけ！ - Little Strange Software 【CSS】gridレイアウトをやってみた - Little Strange Software で、PCで表示した時のレイアウトはいいとして、スマホで表示した場合…そのまま縦に並べるでもいいですが、ハンバーガーメニューとかでパーツを呼び出すようにしようと考えだすと、その他様々な事が必

どうも！LSSです！！ もう４か月も前になりますか。 【JavaScript】続・自動生成迷路 - Little Strange Software というスクリプトを書いていました。 タイトル通り、自動的に迷路を生成するスクリプトでしたが、生成して表示するだけのものでした。 で、今回はそれに「最短正解ルート」を自動的に割り出し、表示する機能をつけてみました！ 自動生成迷路 最短正解ルートの割り出しアルゴリズム コード あとがき 自動生成迷路 幅: 高さ: スライダーで幅と高さを調節するたびに、そのサイズに合った迷路が自動生成されます。 そして迷路の下にある「search」ボタンを押すと、最短正解ルートが瞬時に割り出されて表示されます！ 最短正解ルートの割り出しアルゴリズム 再帰呼び出しによる、かなりベタな方法を用いています。 スタート地点の位置情報を調査用配列変数に入れ、その位置の「上下左

どうも！LSSです！！ 先日の記事で、 を試した際に、double（二重線）で指定した枠線部分も奇妙に歪んだりしていました。 枠線の種類は solid double dotted dashed inset outset ridge groove と多数ありますが、この変わったborder-radiusと組み合わせた場合にそれぞれどんな風に表示されるのか？を試してみる記事となります。 あまり奇妙にならないものが囲み枠として使いやすいかと思いますが、果たして…？ solidの場合 doubleの場合 dottedの場合 dashedの場合 insetの場合 outsetの場合 ridgeの場合 grooveの場合 あとがき solidの場合 変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。 border-styleの種類は solid dou

どうも！LSSです！！ このブログを開設したのが、2019/9/14。 早いもので、丸二年が経過しました^^ こよみモード ブログの概要 この1年で得たWeb周りの知識で最大のもの んで、３年目に突入です！ こよみモード はてなブログの「こよみモード」はどうなるのかな？と思っていましたが、こんな風に去年のも一昨年のも出るんですね！ 二年前の、一番最初の記事は、 律儀に（？）「初めまして」から始まっています。 去年の記事は、 花火をあげてましたねｗ 別にこれは祝砲というわけではなく、その前日に １年目のラストとして記念記事を書いていたのでした。 あ、ブログの概要とか挙げてますね。 あれから一年、どうなったかというと… ブログの概要 こうなりました！ ん、なんだか「ブログの概要」ページの仕様がいつの間にか変わってる？ それより、目立って変わったのは、ブログアイコンでしょうかｗ ブログアイコンを

どうも！LSSです！！ 今までさんざんborder-radiusを使っていましたが、今さらになって新たに見つけた事がありました！！ ほんと今更ｗｗｗ サンプル コード その他サンプル サンプル かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！ そうすると、こんな変わった形状の枠も作れます^^ コード <p style="background-color: #eedddd; border-radius: 35%/20px; padding: 25px;"> かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！<br /><br /> そうすると、こんな変わった形状の枠も作れます^^ </p> border-radiusの指定の中に「/」（スラッシュ）を入れると、「角丸の横半径/角丸の縦半径」を別々に指定で

どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、 「勉強したいが、コードを見てもなんのことやら…」 という方向けに、仕組みの基本的な部分を解説してみます。 HTMLでの記述と、CSSでの記述の合わせ技となりますが、まずはHTML部分について。 CSSについ

今週のお題「爆発」 どうも！LSSです！！ はてなブログのお題「爆発」…にかこつけたCSS小ネタです^^ 爆発しますよ コード keyframesアニメーションも慣れてくると はてなブログのお題が… 爆発しますよ 爆発しますよ コード <style> @keyframes bkhta{ 0%,70%{text-shadow:none;} 71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;} 85%{text-shadow:0px 0px 30px orange,0px 0px 30px orange,0px 0px 60px red;} } .bkht{ font-size:200%; animation:bkhta 5s linear 0s infinite; } </style> <p>

どうも！LSSです！！ 先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。 コード <style><!-- @keyframes bfrnda1{ 0%,20%{transform:rotate(0deg) translateX(0px) scale(1);} 60%{transform:rotate(360deg) translateX(70px) scale(4);} 100%{transform:rotate(720deg) translateX(0px) scale(1);} } @keyframes bfrnda2{ 0%,30%{transfor

どうも！LSSです！！ 今回は、だいぶ前の記事、 の続きとなります！（だいぶ前すぎるｗ） 今回は実践編です！ HTML編集画面を開きます まず手始めに、<div>タグを書いてみます divタグにstyleオプションをつけたします style=""の中に色々、追加していきます！ CSSの指定って 四角い枠を角丸にしてみます 緑が濃くて、黒い「てすと」の文字が見えづらいな 枠の端っこにくっついてるのがいただけない 枠に縁取りもつけちゃえ！ こんな感じに作っていきます 今回は実践編です！ 前回の記事の内容は 「:と;でプロパティと値を指定する」事と、 「CSSは３つの指定方法がある」事ぐらいしか書いていませんでしたね。 今回は、実際に「はてなブログのHTML編集画面」で、CSSを書いていく様子を語る記事となります^^ HTML編集画面を開きます ↑こんな感じの画面ですね。 ここにコードを書きこん

どうも！LSSです！！ 以前に、 【CSS】本をめくる、という動作をCSSで表現してみました。 というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^; コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。 理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。 その後、色々試行錯誤していましたが、だいぶ楽にページ追加可能なものができました^^ ついでに、本のサイズも「縦横比を保ったまま、スマホ画面でもPC画面でも幅めいっぱい表示」するようにしています。 本のページをめくるCSS コード ページ追加について 本自体の設定 本のサイズ ページをめくる速度 本の見ため あとがき 本のページをめくるCSS あいう