Little Strange Software

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

HTMLなど

【CSS】再び!キーフレームアニメーションについて

どうも!LSSです!! CSSに実装されている「キーフレームアニメーション」機能、このブログでもたびたびサンプルなどで使用しています。 だいぶ前(一年ぐらい前)に、 こんな記事も書いていましたが、今回は「実際にキーフレームアニメーションを使ったもの…

【CSSサンプル】カーソルを載せると動くグラデーションバー

どうも!LSSです!! また、なんか謎のCSSサンプルを作ってみました。 カーソルを載せると動くグラデーションバー コード 色変更・移動量変更・変化時間変更について あとがき カーソルを載せると動くグラデーションバー カーソルを載せると動くグラデーショ…

【JavaScript小ネタ】複数行からなるコードを一行にまとめてみます

どうも!LSSです!! 先日、 というものを作って記事にしていました。 その記事中で使用したコード、元々の話が「学び」だったのもあり、誰かの参考&自分が見返す時にいいかな?と 「処理を細かく行に分け、さらにコメントをしつこめに入れる」 って事をや…

【CSSサンプル】2つの四角形に囲まれたボックス

こんな風に、2つの色の違う四角い枠線がズレて配置されたようなボックスを作ってみました!実はこれ、枠線じゃなくて背景だったりします。でも、枠の内容のサイズに応じて伸縮しても支障なく表示されますよ^^ どうも!LSSです!! 実は以前からCSSサンプル…

【JavaScript】英文から英単語を抽出してみる

どうも!LSSです!! さじ(id:conasaji)さんの記事、 conasaji.hatenablog.com を読みました。 その中で、 出来れば最初にどんな系列の単語を覚えたいのかを登録できたらいいですね。英文を読み込んだらその中から毎日ひとつずつ出てくるとか。 学び舎を求め…

【CSS+JavaScript】フルスクリーン表示サンプル

どうも!LSSです!! 先日の記事、 で、しれっと「ブログの記事幅を無視して全画面を覆うような表示」を行っていましたが、今回はその部分だけをサンプルとして公開します! 性質上、スマホはあまり関係なく、PCでブログを見る場合向けのネタとなります。 サ…

【制作中】もぐらたたき 効果音つき【だいぶ中途半端^^;】

sound GAME STARTGAME STOP // 0){oc0p(0,999,0.7);}} } function gstop(){ if(gmst){gmst=false;for(i=0;i3){ms[i]=2};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3}break; case 3:m[i]--;if(m[i]0){oc0p(440,550,0.5);}};break; } document.getElementById(…

【制作中】もぐらたたき用 点数SVG案

どうも!LSSです!! なかなか時間が取れず、進まずにいた 【制作中】もぐらたたき「倍速もぐら と 超速もぐら」 の制作ですが、「もぐらを叩いた時に点数が出てくる」ようにするための「点数表示」をSVGで描いてみました! レトロゲーム風 実際の表示サイズ…

【制作中】もぐらたたき「倍速もぐら と 超速もぐら」

どうも!LSSです!! に続き、もぐらたたきを作っています。 まだ、もぐらのSVG絵をいろいろ描かなきゃなんですが、今回はシステム的な面で手を加えてみました、の中間報告です^^ もぐらたたき 説明 ゲージ レベル もぐら 倍速もぐら 超速もぐら 未実装の要…

【CSS】CSS小ネタ。box-shadowでこんな効果が!

どうも!LSSです!! なんとなくCSSをいじっていたら、「かなりシンプルな記述で面白い効果」を見つけました! シンプルなサンプル box-shadowって border-radiusとpaddingを使わないとこんな感じ 見出し装飾や、ちょっとしたポイントに良さそうですね シン…

【制作中】もぐらが動きます!

どうも!LSSです!! 昨日に続き、もぐらたたきに手を加えてみました! 動きます! とりあえず動く様子だけ見られるようにしようと ランダムにぴょこぴょこ出てきますね^^ 動きます! // 3){ms[i]=2;};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3;}break; ca…

【制作中】もぐらたたきをSVGで作ろうとしています

どうも!LSSです!! 以前、即興で「もぐらたたき」をJavaScriptで作ってみました。 「もぐら」という文字をクリックする、という素気ないものでしたが、画像・ゲーム性ともに充実させたものを作りたい、とは思っていて、 やけに可愛くできあがってしまった…

【SVG+JavaScript】SVG要素をDOMで追加【実験】

どうも!LSSです!! ↑先日、JavaScriptから要素を追加するDOMを試してみました。 innerHTMLを使うと「あたかも最初からそうHTMLを書いていたように」書き換えられる、という使い勝手の良さがありますが、それだと不都合なケースもあります。(inputタグによ…

【CSS+SVG】ちょっと変テコな模様(背景用)を考えてみました

どうも!LSSです!! 今回は、【CSS+SVG】インラインSVGを背景画像に指定に続き、画像ファイル不要で使える背景模様を考えてみました! ちょっと変テコな模様 改変について CSSだけでも出来たかも?ですが ちょっと変テコな模様 '); background-size:50px; }…

【SVG】SVGは絵描き歌…なのか?

どうも!LSSです!! 昨日の記事中で、 SVGはベクター形式の画像ですが、例えていえば「絵描き歌」みたいなもので、 「まーるかいてちょん、まーるかいてちょん」みたいな「描き方の指示」が書かれているというのが基本である以上、写真画像などを表示するの…

【CSS+SVG】リスト li タグのマークも、SVGで自由に描ける!!【実験成功】

どうも!LSSです!! 先日、 little-strange.hatenablog.com の記事にて「背景画像にインラインSVGを当てる」事ができました。 その時はbackground-imageプロパティにSVGを適用していました。が、CSSには background-imageと似た書式を利用する「border-imag…

【JavaScript】DOM(DocumentObjectModel)を試してみます【実験】

どうも!LSSです!! これまで、JavaScriptで画面を書き換えるのにもっぱらinnerHTMLを使用していました。 JavaScriptには他にDOMという方法があります。 Document Object Model の略で、HTMLドキュメント(ページ)をオブジェクト(モノ)として扱う、って…

【CSS+SVG】インラインSVGを背景画像に指定

どうも!LSSです!! 以前、 little-strange.hatenablog.com の記事中で、 この、「HTMLコード中にSVGタグで描画」したものを、「背景画像として繰り返し配置して描画」するのは、実はとっても困難だったりします^^;;; 【SVG】紗綾型、なんか…できたっぽい -…

【HTML】Aタグに関する小技

どうも!LSSです!! 今回は「それほど特別な知識じゃないけど、知ってるとちょっと嬉しいかも?」な部分について書いてみます。 Aタグについて 小技その1 別ウィンドウ(別タブ)で開くリンク 小技その2 同じページの一番上に戻るリンク 小技その3 サイト…

【JavaScript】ファイル読み込み実験!

どうも!LSSです!! 今回はファイル読み込みの実験です。 テキストファイル読み込み、画像ファイル読み込みを行う処理を極力シンプルに書いてみます。 …実験段階で書いてるので、いつも以上に訳の分からない記事となっておりますw テキストファイル読み込…

【HTML】またもinputタグ。今度はtype="file"を試してみます!

どうも!LSSです!! 最近、 【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました!【実験】 - Little Strange Software 【HTML】初めてスライダー(<input type="range"/>)を使ってみました - Little Strange Software 【HTML…

MARUINO future Online event

16:30~17:2016:30~17:20まるいのをSVG 化する仕組みと挑戦。基調講演株式会社Little Strange SoftwareCEO リトル・須藤 蓮二SVGが単にIllustratorで開けるデータと思っていたのはきっと自分だけではあるまい。CSSの本を読んでいると眠くなってくるのはかつ…

【HTML】HTMLタグにカラーピッカーが実装されてた!

どうも!LSSです!! むかーし、HTML4.0時代に個人サイトを遊びで作ったりしていた身で、HTML5になってからだいぶ経った今、改めてCSSやJavaScriptを覚え直しているLSSです。 知らないうちに、色々な機能が追加されていてビックリする事も多々ありますが(※…

【CSSサンプル】タブ切り替え表示を2つ配置する場合

どうも!LSSです!! 先日の記事、 を早速使ってくださった、421miyakoさん(id:m421miyako)から問い合わせがありました。 421miyako(id:m421miyako) このスライダーを何の意味もなく上下の仕切り線みたいに使って、数字を出しておくと読者が、なんじゃこれの…

【HTML】初めてスライダー(<input type="range"/>)を使ってみました

どうも!LSSです!! 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^…

【CSS】試しに、CSS変数とラジオボタンを使ってみました【実験】

どうも!LSSです!! 現在のCSSには「変数」の概念があります。 「カスタムプロパティ」と呼ばれたり「CSS変数」と呼ばれたりするようです。 …実は自分は今まで、存在は知っていても全く使った事が無かったんですけどね^^; CSS変数とは 変数じゃなくて定数で…

【CSSサンプル】タブ切り替え表示【JavaScript不使用】

どうも!LSSです!! 昨日の記事の実験、 を用いてサンプルを作ってみました。 まず最初は普遍的な(?)ものを作ってみよう、と「タブ」をCSSで実現するのに挑戦!です。 タブ切り替え表示・サンプル コード 作ってから、ググってみると… タブ切り替え表示…

【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました!【実験】

どうも!LSSです!! だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操…

【CSS】丸から四角に変形するボックス

どうも!LSSです!! なんとなく…ハンバーガーメニューについて考えているうちに、「丸から四角に変形」を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈?なんかに使えるかもですね。 丸から…

【CSS】position:sticky;による押し出し、結局こうなりました

どうも!LSSです!! ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し1個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか</div>…