Little Strange Software

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

HTMLなど

【CSS】卍レイアウトと対角線グラデーション【実験】

この間、このブログで「冗談でしかないレイアウト」として、思いついたはいいけど何のメリットがあるか分からない「卍レイアウト」について書きました。「何のメリットがあるか」は分かりませんが、背景について「卍レイアウトならでは」のデザインを思いつ…

【CSS】字間のサイズを調節するletter-spacingで遊んでみます

Webページは「文書」を記述するものであって、その「文書」を見やすく調節するためのCSSプロパティも用意されています。今回はそんなCSSプロパティのひとつ、「letter-spacing」をご紹介しつつ、最後にはやっぱりアニメーションで遊んでみましたw

【CSS】対角線を描くのが難しいけど、解決した話

どうも!LSSです!! 一昨日~昨日と、 続けざまにconic-gradientネタを書いていました。 が、このconic-gradient、調べものをしていた時に偶然見つけたもので、元々調べていたのはlinear-gradientについてだったりしますw CSSで↓のような対角線を扱うのが…

【CSS】conic-gradientのアニメーション【実験】

conic-gradientをアニメーション化してみました。 linear-gradient、radial-gradientもそうでしたが、gradient系はCSSでは「関数」という扱いで、 background-image:〇〇-gradient(グラデーションの内容); の ( ) 内はアニメーションに入れても途中を補完し…

【CSS】今さら!?知らなかった第三のグラデーション、conic-gradient

linear-gradientは一直線に、radial-gradientは円形で中央から外に向かってグラデーションしますが、この conic-gradient は扇形に展開します。 円グラフのような感じですね。

【CSSサンプル】CSSで作るフォトギャラリー

JavaScriptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。

【CSS】フルスクリーン表示

画面いっぱいに表示、「checkboxとlabelを使う」方法だと、CSSだけですっきり実現できるなじゃないかな?と思い、やってみました。 ついでに「閉じる時は画面のどこを押しても閉じる」「表示したい内容の中央寄せ」も実装しています^^

【CSS小ネタ】ぐるんっ、と回転して出てくる文字

どうも!LSSです!! 今回はCSS小ネタとして、CSSアニメーションで「ぐるんっ、と回転して出てくる文字」を作ってみました。 ぐるんっ、と回転して出てくる文字 コード 使い方 コード解説 あとがき ぐるんっ、と回転して出てくる文字 @keyframes rtxta{ 0%,3…

【CSS】CSSフィルターとCSSアニメーションを組み合わせて

CSSには、様々な「フィルター」が用意されています。 このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^

【JavaScript】アナログ時計、現在時刻を取得するもう一つの方法+より正確な時計を目指して(?)

どうも!LSSです!! 【JavaScript】アナログ時計を作ってみました - Little Strange Software で使用していたコードのうち、スクリプト部分についての解説を、 little-strange.hatenablog.com に書きました。 そのスクリプトでは、現在時刻の取得を「Date.n…

【JavaScript】アナログ時計、JavaScript部分のコード解説

どうも!LSSです!! 【JavaScript】アナログ時計を作ってみました で、即興でアナログ時計を作ってみました。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード(script部分…

【CSS小ネタ】カチコチ動くアニメーション

どうも!LSSです!! だいぶ以前から、CSSのkeyframesを使ったアニメーションを色々試していましたが、最近になって「え、こんなの出来るんだ!?」と知ったものがありますw カチコチ動くアニメーション コード animation-timing-functionの「steps」 ちな…

【JavaScript】アナログ時計を作ってみました

どうも!LSSです!! ちょっときっかけがあり、急遽、JavaScript(とCSS)で「アナログ時計」を作る事に挑戦してみました! アナログ時計 コード きっかけ コード解説(CSS部分) 追記:一部コード修正(2021/9/28) アナログ時計 #tokei{ position:relative…

【CSS小ネタ】アニメーション飾り罫

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

【JavaScript】自動生成迷路+最短正解ルート表示

どうも!LSSです!! もう4か月も前になりますか。 【JavaScript】続・自動生成迷路 - Little Strange Software というスクリプトを書いていました。 タイトル通り、自動的に迷路を生成するスクリプトでしたが、生成して表示するだけのものでした。 で、今…

【JavaScript】しましま枠線メーカーのコード、と、その簡略化【使い捨て配列】

どうも!LSSです!! この記事は、JavaScript初学者向けの記事となります。 先日の記事、 は、CSSを用いた枠線(囲み枠)のコードを生成するツールでした。 そのツール自体のコードはJavaScriptで書いていましたが、今回はそのコードの公開です。 ついでに、…

【CSS】変形border-radiusに各種border-styleを組み合わせてみました【実験】

どうも!LSSです!! 先日の記事で、 を試した際に、double(二重線)で指定した枠線部分も奇妙に歪んだりしていました。 枠線の種類は solid double dotted dashed inset outset ridge groove と多数ありますが、この変わったborder-radiusと組み合わせた場…

【CSS】裏表画像めくり【カードをめくる改変】

どうも!LSSです!! 【CSS】カードをめくる その3 idを使わない版 - Little Strange Software の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。 コードの簡略化、class名を1つにまで削減などを行っています。 参考記事:チェックボック…

【CSS】変なborder-radiusとbox-shadowを合わせてみました【小ネタ】

どうも!LSSです!! ふと思いついて、これまでに試した2つの小ネタを合体させてみました。 小ネタ+小ネタ=あわせても小ネタ、って感じですがw こんな枠、どうでしょう? コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう? と、単…

チェックボックスとラベルの話【CSS編】

どうも!LSSです!! チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと…

【はてなブログ】キーワードリンクの無効化と、URLリンクの無効化と、無効化の無効化(!?)【小ネタ】

どうも!LSSです!! はてなブログには、キーワードリンクの機能があります。 普通に記事中に、どこかの誰かが登録したキーワードが入っていると、自動的にその意味を解説するページへのリンクになる機能ですね。 実際、この「はてなブログには、キーワード…

【CSS】border-radius(角丸)ってこんな事もできたんだ!【今更】

どうも!LSSです!! 今までさんざんborder-radiusを使っていましたが、今さらになって新たに見つけた事がありました!! ほんと今更www サンプル コード その他サンプル サンプル かなり今更感がありますが、border-radius(角丸)って縦横別々に指定で…

チェックボックスとラベルの話【HTML編】

どうも!LSSです!! 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 (←こういうものですね) クリックするたびに オン/オフ が切り替…

【CSS】渦巻き・改【いただいたアイデア】

どうも!LSSです!! 先日の記事、【CSS】回転+移動=渦巻き?【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称…

【CSS】回転+移動=渦巻き?【実験作】

どうも!LSSです!! ちょっとした思いつきで作ったCSSアニメーションです。 渦巻きアニメーション コード コード解説 あとがき 渦巻きアニメーション 文の頭につけたマークが渦を巻いて回転するアニメーション コード <style>

【CSS】本のページをめくるCSS【シンプルに改善版】

どうも!LSSです!! 以前に、【CSS】本をめくる、という動作をCSSで表現してみました。というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない!^^…

【CSS】複数の文章をアニメーションで動かすサンプル

どうも!LSSです!! ちょっと変な文章アニメーションを作ってみました。 2021/8/29追記Windows+GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで正常に動作しないようです^^; サンプル コード コード中、最後のpタグ あとがき サンプル あ…

【しつこく】ちょっとCSSの実験【複数要素でのアニメーション同期】

どうも!LSSです!! ちょっと何がしたいのか、LSSにも分からないシリーズ(?) little-strange.hatenablog.com の続き、です。 2021/8/29追記Windows+GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで文字のほうが正常に動作しないようで…

ちょっとCSSの実験・改

どうも!LSSです!! 先日、 little-strange.hatenablog.com という記事をあげていましたが、少しそれに手を加えてみました。 サンプル コード やった事と言えば… サンプル コード <style>

【CSS】カードをめくる その3 idを使わない版

どうも!LSSです!! 「カードをめくる その3」、前回の「その2」は little-strange.hatenablog.com 一年前の記事でしたw その後、そのアレンジ版として、 little-strange.hatenablog.com というのも作りました。 補足説明記事→【CSS】本をめくる、のペー…