Little Strange Software

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

HTMLなど

【CSS】回遊【小ネタ】

どうも!LSSです!! さぁて…書くネタがないなぁ、と下書きを見てみるとこんなものが! ↑ 一応、コードも載せておきますねw <style>

【CSS】CSS関連記事まとめ

どうも!LSSです!! このブログのカテゴリを見ていると…「HTMLなど カテゴリーの記事一覧」の記事数ばかりがダントツで多くなってますねwww 「HTMLなど」というざっくりとしたカテゴリを設けたのは、本来Androidアプリ開発をメインとしたブログとなる予…

【CSS】gridレイアウトの列数をJavaScriptから制御

どうも!LSSです!! JavaScriptからCSSのプロパティを色々制御する事ができますが、gridレイアウトの設定についての制御(列数とか)が調べてもなかなか情報に行き当たりませんでした^^; とりあえず成功したので、ここに書いておきます! gridレイアウトの…

【HTML5】画像ファイルへのリンクを「表示」じゃなく「ダウンロード」する方法【でも、はてなブログでは無理っぽい】

どうも!LSSです!! このブログでも、これまで、HTML・CSS・JavaScriptについて色々記事を書いてきました。 が、LSSがそれらを学んだのは20年以上前の、まだHTML4.0の時代で、ブログを始めてからちょこちょこと学び直してはアウトプットしてる、といった感…

【CSS】マウスカーソルで枠線の太さが変わる演出!【outlineの有効活用!?】

どうも!LSSです!! 昨日の記事、 で、 border と outline の違いを試してみました。 記事にしておきながら、書いてる自分も試しながら書いていたので、ことさら「読んでもよく分からない」内容だったかと思います^^; 一応、自分では理解したつもりで、outl…

【CSS】borderによく似た、outlineというCSSプロパティを試してみます【実験】

どうも!LSSです!! 以前からちょっと気になっていたCSSプロパティ「outline」を試してみます。 これまでもよく使ってきた「border」とよく似ていますが、ちょっと違う?らしく、本の説明を見てもイマイチよく分からないものでw そういう時は、試してみる…

【CSS】たたっ斬る!の色を変えてみる

どうも!LSSです!! 昨日の記事は、左右に配置した黒が分れていく、というものでしたが、ちょっと色を変えて試してみます。 フランス国旗風サンプル フランス国旗風 グラデなし 失敗例 あとがき フランス国旗風サンプル フランス国旗風 コード <style>

【CSS】たたっ斬る!!【小ネタ】

どうも!LSSです!! さて、昨日に続き、今日もCSS小ネタ。 またtransitionを使った小ネタを思いついたので、やってみます! 一言でいうと「ズバァッッッ!!」って感じですw たたっ斬る!!サンプル コード コード解説 全体的な構造 たたっ斬りを表現する…

【CSS】transitionで光が斜めに横切るバーを作ってみました【小ネタ】

どうも!LSSです!! ちょっと久々に、CSSネタいってみます! サンプル コード ざっくりコード解説 光のデザイン カーソルを乗せると光が移動する仕組み あとがき サンプル ↓こんなのを作ってみました。 こういうバーで、マウスカーソルをのせると 黄緑色の…

【JavaScript】同じ記事なのに内容が変わる、種あかし

どうも!LSSです!! 先日、ここで公開したブラウザゲーム、 最大のポイントは「同じ記事なのにコメント欄のリンクから入ると違う迷路になる」というところでした。 普通ならサーバ側でのプログラムで内容を書き換えるところを、そういった事ができない、は…

【JavaScript】addEventListener と 連想配列 の使用例

どうも!LSSです!! 昨日の記事、 「なるほど、こうなるんだ」ってだけの話でしたが、いただいたコメントの中に、 なる(id:narutabi) おお!これだと例えばC1を選んだあなたは…とかも出来ちゃうのでしょうか…!あなたは食いしん坊です!とか!( ゚Д゚) 421miy…

【JavaScript】addEventListener、ユーザーはどれをクリックした?

どうも!LSSです!! ちょっとまたJavaScriptで作り始めたものがあって(完成までまだ少しかかりそう)、それを作ってる時に気づいた事があったので、ここに記しておきます。 サンプル コード コード失敗例(動作しません) addEventListenerで呼び出す関数…

【はてなブログ】機能紹介記事・CSSカスタマイズ記事 まとめ

どうも!LSSです!! 結構、間があいてしまったのですが、 に続く「まとめ記事 第三弾」!! はてなブログの機能の使い方やCSSカスタマイズについて、これまで書いた記事をまとめてみました。 なお、この「まとめシリーズ」は にいただいたコメントが発端と…

【JavaScript】WebStorageを試してみます

どうも!LSSです!! 今回はJavaScriptでWebStorageというものを試してみます。 WebStorage使用例 WebStorageって? 今回のサンプルのコード まとめると、 活用例 WebStorage使用例 // ↑とりあえず簡単な使用例として、カウンタにしてみました。 今、この記…

【CSS】background-position 縦スクロールの場合

どうも!LSSです!! 一昨日の記事、 little-strange.hatenablog.com にコメントいただき、ありがとうございました^^ 「上下もいけるんですよね?」とのコメントを複数いただきましたので、今回は上下移動を含めたスクロールを試してみます! 縦・横・斜めス…

【CSS】background-positionプロパティにマイナスの値を指定してみます

どうも!LSSです!! 以前に、やってみたかったけどうまくいかなかった事があります。 little-strange.hatenablog.com これを使いこなせたら、例えば背景画像のスクロールアニメーションができるなー、とか、以前に作ったとあるゲームの表現性が凄く上がるな…

【Twitter タイムライン】複数の指定アカウントの最新ツイートだけを表示

どうも!LSSです!! さじさん(id:conasaji)のブログ記事、 conasaji.hatenablog.com に、 自分としてはフォローしてる人の最新ツイートを 一覧で見れたら便利なのになあ、などと ものぐさな使い方を希望します。 Twitter様、ご検討を。 リツイーター、孤高…

【JavaScript】からふるおえかき!【ジョークスクリプト:マウス操作専用】

どうも!LSSです!! マウスイベントを使用した、ちょっとしたジョークスクリプトを書いてみました。 遊び方 一応、コード スマホの方ごめんなさい 遊び方 // '+i+''; } gamen.innerHTML=txt; flg=false; mi=0; document.body.addEventListener("mousemove",…

【JavaScript】マウス操作による「イベント座標」とりあえず比較してみた【実験】

どうも!LSSです!! ※本日の記事のスクリプトは、スマホとIEを対象外としています。すみません^^; 先日の記事、 little-strange.hatenablog.com で、「クリックした時のマウスカーソルの位置から花火が打ち上がる」というのを作ってみました。 位置の指定に…

【CSS・JavaScript】花火その4 クリックで打ち上げる連続花火

どうも!LSSです!! 以前、記事内で花火を打ち上げるようなものを作りました。 little-strange.hatenablog.com 今回はそれの改変で「訪問した読者さんが好きな位置で打ち上げる事ができる花火」を作ってみました^^ 前回までのコードはJavaScript不使用でし…

無料レンタルサーバの話

どうも!LSSです!! 今、このブログ上でHTML・CSS・JavaScriptに触れて色々試みています。 20年近く前にも、個人サイトを作るのが流行った頃に手を出して色々やってましたが、その頃、「無料レンタルサーバ」が多数乱立していました。 もちろん今も無料レ…

【CSS】ナンバリング箇条書き装飾サンプル集

どうも!LSSです!! 【CSS】ナンバリング箇条書き、色付き背景に成功しました!【olタグ装飾】 つまづきの記録。ナンバリングの背景を色付き円に…できなかった話^^; 【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます 【CSS】箇条書…

【CSS】ナンバリング箇条書き、色付き背景に成功しました!【olタグ装飾】

どうも!LSSです!! いやぁ、昨日は結局うまくいかなかったんですが、記事投稿後に思いついた事があって、試してみたら(一応)できました!! ↓うまくいかなかった昨日の記事w little-strange.hatenablog.com ナンバリングの背景に色付きの丸 サンプル コ…

【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます

どうも!LSSです!! 昨日の記事、 little-strange.hatenablog.com にて、その前にいただいたコメントを元に「箇条書き」のマーカーの装飾を試みてみました。 するとその記事に、 あとか(id:c089818) 仕事早っ!さすがです。ナンバリングもカラフルとか、カ…

【CSS】箇条書きのドットに色をつける【list-style-image】

どうも!LSSです!! 昨日の記事、 のコメント欄に、 なる(id:narutabi) ドットを箇条書きの前に色でつくるとかも勿論可能ですかね?LSSさんの記事をみてると想像力が膨らみます(#^^#) とのコメントをいただきました。 なる様、ありがとうございます^^ とい…

【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます!【極端な例】

どうも!LSSです!! だいぶ前の記事ですが、 で使用した、background-sizeとbackground-positionというプロパティの自由度の高さを確認してみます! CSSでドット絵が描けます! まず枠を作ります ドットをひとつ置いてみます 小さすぎて分かりにくいので、…

【JavaScript】効果があるかどうか未確認ですがコピペサイト対策スクリプト

どうも!LSSです!! Twitterで「ブログ記事をまるっとコピーして、独自の広告をつける」悪質コピペサイトの話を見かけました。 恐らくは自動的にURLを収集して、膨大な数のページを作ってるんでしょうね。 と、いう事で、「対策になるかならないか分からな…

【CSS】とことこ歩く(はためく改変)【おまけ:異様に苦労した別バージョン】

どうも!LSSです!! 今回は、先日の記事、 の改変で、「左右に とことこ歩きまわる」ように見えるサンプルに挑戦してみました。 事の発端 とことこ歩く 別バージョン つまづきの記録 事の発端 冒頭に書いた、以前の記事 を見て、だるころ9216さん(id:daruco…

【CSS】しつこく花火3【linear-gradientとrotateZ版】

どうも!LSSです!! と2回、borderとborder-radiusを使用しての花火に挑戦してきましたが、3度目となる今回は「全く別の方法」で花火に挑戦してみます! 花火その3 コード 解説その1:linear-gradient 解説その2:rotateZ 解説その3:keyframeアニメ…

【CSS】花火のアニメーション その2【多重化】

どうも!LSSです!! 先日の記事、 を「なるべくコードを増やさずに」多重化してみました。 (コレジャナイ感ありありかもw) 花火のアニメーション その2 コード 前回からの改変点 animationプロパティは複合プロパティです 省略したanimation-delayは別…