…ンデュラムウェーブ（CSS） コード 長いけど実は単純なコードです あとがき ペンデュラムウェーブ（動画） www.youtube.com バズった動画はこれとは別のものだそうですが、自分が最初に見たのはこちら！ 振り子運動は紐の長さによって往復速度が変化しますが、その紐の長さをある規則に応じて決める事で、こうした不思議な動きになるみたいですね。 ペンデュラムウェーブ（CSS） というわけで、このブログらしくCSSでの再現を試みてみましたｗ いくらか試行錯誤しましたが、結局は…

どうも！LSSです！！ この間、このブログで「冗談でしかないレイアウト」として、思いついたはいいけど何のメリットがあるか分からない「卍レイアウト」について書きました。 「何のメリットがあるか」は分かりませんが、背景について「卍レイアウトならでは」のデザインを思いつき、その実現に向けて色々考えていたところで、「縦横比がどうであろうと常に対角線を描く方法」が必要となり、見つけたのが↓の記事となります。 …その過程で ↑また面白いものを見つけてしまい、脱線もしつつｗ 今回ようやく「…

…も！LSSです！！ CSSにはアニメーションやグラデーション、HTML要素を傾けたりするtransformなど、派手な効果を持つ物が多数あります。 が、本来、Webページは「文書」を記述するものであって、その「文書」を見やすく調節するためのCSSプロパティも用意されています。 今回はそんなCSSプロパティのひとつ、「letter-spacing」をご紹介しつつ、最後にはやっぱりアニメーションで遊んでみましたｗ 字間のサイズを調節する、letter-spacing 書式 アニメ…

…てだったりしますｗ CSSで↓のような対角線を扱うのが、予めサイズが決まっているとborderやlinear-gradient+角度指定でも可能なところ、サイズが可変（例えば画面サイズの幅100%とか）の時には極端に難しかったりします。 これが、↓のように、linear-gradientに「to bottom right」のようにつけると、何故か出来てしまったりします。 コード <div style="width: 300px;height: 200px; backgroun…

…gradient系はCSSでは「関数」という扱いで、 background-image:〇〇-gradient(グラデーションの内容); の ( ) 内はアニメーションに入れても途中を補完してくれないのですが、 background-position や background-size は滑らかにアニメーションしてくれますね^^ 今回の例でいうと、 0%,20%{background-position:0px 0px;}最初のbackground-position:0px 0…

…です！！ これまで、CSSのグラデーション（linear-gradient radial-gradient）で遊んできましたが…今日初めて知ってびっくり！ CSSのグラデーションは「もう１種類」あったようです！！ conic-gradientのテスト repeating-conic-gradient という事は、こんな事もCSSで出来ちゃいますね！ あとがき conic-gradientのテスト conic-gradient コード <style>.conictest{bac…

…criptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。 CSSで作るフォトギャラリー コード 使い方 あとがき CSSで作るフォトギャラリー 小さい画像をクリックすると中央に大きく表示されます。中央に表示されている画像よりも前の画像は左列に、後の画像は右列に並べられます。 コード <style>.cglry{ display:grid; /*gridレイアウト*/ grid-template:repeat(8,1fr)/1fr 6fr 1fr; /*縦8行…

…なとき？ 何か（主にCSSやJavaScriptでの仕組み）を発見した・思いつき、うまく形になって見せびらかしたくなった時ですね^^ 下書きに保存された記事は何記事？ あるならどんなテーマの記事？ 数えたら57記事ありました。 テーマもバラバラなら、永遠に下書きに置いておくつもりの記事、何も書かないままとりあえず下書き保存した記事、後から別に書き始めて公開したかしてないかも覚えてないような記事が大半を占めます^^; 自分の記事を読み返すことはある？ 備忘録として書いて更に続編…

…のブログでは、色々なCSSサンプルを考えては公開してきていますが、見せられる物になるまでには「このやり方で仕組みが作れそうかな？」と簡単なサンプルでテストして、うまく行きそうなら見栄えを調整して完成！としたりしています。 すると中には「一見うまく行きそうな気がしたけど、それを発展させる上で超えられない壁があり、完成に至らない」ものもあったりします^^; これ何かに使えないかな？ ラベルにすると途端にうまくいかなくなるｗ どうしてもラベルを使いたかったらこう、だけども… もうち…

…SSです！！ 以前、CSS+JavaScriptネタで、 という記事を公開しました。 「ブログレイアウトを無視して画面いっぱいに表示を呼び出す」というもので、この時はJavaScriptを使用して実現していましたが、 に書いたような「checkboxとlabelを使う」方法だと、CSSだけですっきり実現できるなじゃないかな？と思い、やってみました。 ついでに、 閉じる時は画面のどこを押しても閉じる 表示したい内容の中央寄せ も実装しています^^ フルスクリーン表示 コード 使…

…SSです！！ 今回はCSS小ネタとして、CSSアニメーションで「ぐるんっ、と回転して出てくる文字」を作ってみました。 ぐるんっ、と回転して出てくる文字 コード 使い方 コード解説 あとがき ぐるんっ、と回転して出てくる文字 CSS面白いです^^ overflow:hidden; で、こんな効果も！ コード <style>@keyframes rtxta{0%,30%{transform:rotate(180deg);}40%,60%{transform:rotate(0deg…

…Sです！！ 昨日は、CSSのフィルターをネタにするために、メリケンパークに出向きました。 CSSフィルターって画像じゃなくても効果はのりますが、やはり写真を対象にするのが分かりやすい効果が多いですね。 普段あまり撮影はしないのですが、ネタのために、と結構撮ってきましたｗ 入口にだけ花壇 涼しげ！ タワーは仰角で 出石そばのいただきかた トワイライト（黄昏時） 入口にだけ花壇 バスで向かったのですが、降りて入ったすぐのところに、コンセプトがわからない謎オブジェと花壇がありました…

…も！LSSです！！ CSSには、様々な「フィルター」が用意されています。 以前にも、 little-strange.hatenablog.com で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^ 白トビ→通常の写真に変化 セピア色の思い出がよみがえる transitionについて にじんだ景色も目を凝らすと… コントラストの鼓動 …

…。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード（script部分のみ） コード解説（JavaScript部分） setInterval 時刻を秒で取得 Date.now() getTimezoneOffset() 時針の角度計算 分針、秒針も同様に。 って、かなり長くなってしまいましたが… あとがき コード（script部分のみ） <script>tokeitm=setInterva…

…！ だいぶ以前から、CSSのkeyframesを使ったアニメーションを色々試していましたが、最近になって「え、こんなの出来るんだ！？」と知ったものがありますｗ カチコチ動くアニメーション コード animation-timing-functionの「steps」 ちなみに… カチコチ動くアニメーション 60秒で一周します。 コード <style>@keyframes anmstpa{0%{transform:rotate(0deg);}100%{transform:rotat…

…、文章を書くよりも、CSSやJavaScriptのコードを書くほうが楽なのでは？という、自分の言語適性（？）に疑問を感じる今日この頃ですｗ（他に、手書きで文字を書くよりタイピングの方が楽だったりもしますね） ところで、もう９月も終わろうとしていますが、先週までなんやかやとあった祝日、１０月は全くないんですね。 祝日は休みですが、その分平日が忙しくなるタイプの仕事をしているもので、残念なような嬉しいような、こちらも妙な感覚ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろし…

…vaScript（とCSS）で「アナログ時計」を作る事に挑戦してみました！ アナログ時計 コード きっかけ コード解説（CSS部分） 追記：一部コード修正（2021/9/28） アナログ時計 コード <style>#tokei{position:relative;width:300px;height:300px;background-color:#eeeedd;}#tokeih,#tokeim,#tokeis{position:absolute;transform-origi…

…せる感じですね。 【CSS】レスポンシブデザインに必須！な「メディアクエリ」…の、さわりだけ！ - Little Strange Software 【CSS】gridレイアウトをやってみた - Little Strange Software で、PCで表示した時のレイアウトはいいとして、スマホで表示した場合…そのまま縦に並べるでもいいですが、ハンバーガーメニューとかでパーツを呼び出すようにしようと考えだすと、その他様々な事が必要になりそうです。 で、そういうのを１から作る過程…

…ニメーションを書いたCSSコードも同時に出てきていますが、コードのほとんどが「一見、でたらめに見える数字と%がいっぱい」入っていますね。 実はこれ、「一見、でたらめ」どころか「でたらめそのもの」。ページを開くごとに、JavaScriptで乱数を生成してコードを作成しています。（このコード自体は生成された時のものなので、コピペすると生成された時に決まった動きで動く事になります。） で行ったような設定を、ランダムに色々割り当てたらどうなるか？っていう実験ですね。 とりあえず、こう…

…！ ふと思いついた、CSS小ネタです。 アニメーション飾り罫 コード 使い方と仕組み アニメーション飾り罫 コード <style>@keyframes dotkeia{0%,80%{background-position:20px 0px,60px 0px;}85%{background-position:20px 0px,20px -10px;}90%{background-position:20px 0px,-20px 0px;}95%{background-positi…

… 先日の記事、 は、CSSを用いた枠線（囲み枠）のコードを生成するツールでした。 そのツール自体のコードはJavaScriptで書いていましたが、今回はそのコードの公開です。 ついでに、その中で冗長的（無駄）と思われた部分があったのが気になっていたのですが、簡略化に成功したので覚え書き。 なお、スクリプト自体は で解説した方法と同じ作り方で作成しています。 しましま枠線メーカー コード 冗長と思った部分 １行で出来ました^^ あとがき しましま枠線メーカー コード <p>サン…

どうも！LSSです！！ 久々に「コード生成ツール」を作ってみました。 この記事の画面上で色を選んだりスライダーで角度やサイズを調整する事で、しましまの囲み枠のコードを生成する事ができます！ しましま枠線メーカー 使い方 あとがき しましま枠線メーカー サンプル 角度: 太さ: シマ: コード 使い方 色を選択できるカラーピッカーが２つと、スライダーが３つあります。 これらを触って変更する事で、その上にある縞々枠線の「サンプル」と、その下にある「コード」がリアルタイムに変化しま…

…ript・HTML・CSSが分割され、HTMLからJavaScriptとCSSを呼び出すという体のものから作り始める事ができます。 アプリ以前の問題 その１ さて、作り始めると… 「ソフトウェアキーボードから記号が探しにくい！」 「CSS・JavaScriptで多用するセミコロン（ ; ）がない！」 「せみころん、で変換しようとしても出てこず、きごう、で変換すると全角記号^^;」 という、アプリ以前の問題にぶつかりましたが、キーボードを変更するとあっさり解決しましたｗ やっぱ…

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

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

どうも！LSSです！！ 今日は、ちょっと目的があって三宮をぶらついてきました。 まずは腹ごしらえ！ 続いて向かうは さんセンタープラザ 調査開始！ 初iPhone！ 触ってみた感想 ブログの動作確認 まずは腹ごしらえ！ まずは昼食です。 ランチメニュー「大盛焼肉定食」！と、写真の撮り方が下手で伝わらないかもですが、結構ボリュームあります。なお、写真右に見切れていますがポテサラがついていますｗ ランチタイム以外は食べ放題がメインのお店ですが、ランチ時のこれもボリュームは十分あっ…

…も！LSSです！！ CSS等の動作テスト用iPhoneが欲しいなーと思いながら、未だに入手していません。 iPhoneの標準ブラウザ「Safari」がいくつかのCSSの実装が間に合っていなかったり、解釈が違ったりするから、なんですが、また新たにこのブログで使っていたネタの不具合が見つかりました。 最近よくLSSのブログのネタを使っていただいている、noriko(id:non704)さんのところで分かったのですが、 non704.hatenablog.com こちらのコメントに…

…！LSSです！！ 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。 コードの簡略化、class名を１つにまで削減などを行っています。 参考記事:チェックボックスとラベルの話【HTML編】チェックボックスとラベルの話【CSS編】【CSS】本のページをめくるCSS【シンプルに改善版】 裏表画像めくり コード 縦横比が極端に違う画像を使うとどうなるか 裏表画像めく…

…？ コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう？ と、単なる枠に対する装飾なので、使い方は自由自在！スマホで見るとまたちょっと形の印象が違うかもです。 コード <p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; border-radius: 30%/10%; wi…

…ころで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが２つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkb…