今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

HTML / CSS

HTMLとjQueryで障害物よけゲームを作る(完成版)衝突判定とスコア

sudara-bluse.hatenablog.com これの続きです! 今回で完成!^^ 衝突判定とか甘いけど笑 スマホでプレイしてみてください。 もふもふジャンプ http://killertunes.lolipop.jp/mofuGame/ スコアは経過時間にしてます。 衝突判定は、 if(charaTop > blockBotto…

HTMLとjQueryで障害物よけゲームを作る(その2)流れてくる障害物

sudara-bluse.hatenablog.com 前回の続きです。今回は流れてくる障害物を作ります! こんな風にブロックが左から右へと流れていく仕組みを作ります。 まだブロックにぶつかっても何も怒らないけど、スマホで遊んでみてね。 もふもふジャンプ http://killertu…

HTMLとjQueryで障害物よけゲームを作る(その1)

最近HTMLとJsvaScript(jQuery)書いてない。。 ふと思ったので、リハビリに簡単な障害物よけゲームを作ることにした。 スマホのみを対象としてます。 canvasやcreate.jsも使いません。DOMでいきます。 素材はこちら、友人のとりとライオン様から画像を拝借し…

display: table;が便利! 子要素を整列しつつフロートしたい時。

display:table が便利なのでメモです!ie8以上対応だし。 普段はフロートを使用しているけど、アイコンなど子要素を上下や左右中央揃えなど整列しつつフロートしたい時などに重宝します。 1,基本形 親にdisplay: table;子(セル)にdisplay: table-cell;が基本…

へっぽこコーダーが女子Webデザイナーにモテる為には。

本記事での「モテる」とは、「仕事で重宝される」から「彼女を作る的な下心」まで広い意義で使用します。笑中小の制作会社で数年間、どうにか生き抜いた実体験を元にしています。。 目次 1. PSDファイルは女子デザイナーからのラブレター。2. 「清潔感」が大…

jQueryでブログ記事の一部分を隠して、パスワード入力で表示する方法

なかなかニッチな要望だと思いますが、、、。 私のプロフページ、こんな感じになってます! sudara-bluse.hatenablog.com ライクアローリング?: の後のボックスに答えを入力してボタンを押すと、 ふわっと詳細プロフが表示される仕組みです! (なんだこの…

background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに)

レスポンシブやスマホサイトを制作していて、背景画像を可変対応させたい時があります。みなさんどうやっているでしょうか。 僕はいつもこちらの記事を参考にさせて頂いてます。 www.go-next.co.jp sample /* 例:幅640px高さ360pxの画像の場合 */ #targetElm…

CSS3アニメーション入門以前!  transform,taransition,animationの違い

こんにちは、ちゃんいーです。 今回はCSS3のプロパティ、transform, taransition, animationの違いをが 自分の中でごっちゃになっていたので簡単にまとめてみました。 変形や、アニメーションに使用するプロパティ達です。 日本語に訳すとわかりやすいのです…

【無料版で頑張る!はてなブログカスタマイズ】 コピペでOK。ハンバーガーボタンでフルスクリーンメニュー。

↑ 完成図 (追記: 10月12日) このブログは現在はPC、スマホ共に右上にボタンを表示してます! > 実装方法 > パソコン版、レスポンシブにも使用したい。 > ハンバーガーメニューを右下に表示したい 最近よく見かけるハンバーガーボタンを押すと、 フルスクリー…

【WEBデザイン】CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

いまだにレスポンシブデザイン怖い、、 なぜなら、%とかemとかremとかvw、vhとか恐ろしいフォントサイズ指定がたくさん。。。 これらををなんとなくでしてる僕みたいな人。 途中で引き継いだ案件とかでpx以外が指定されててビビったあなたへ捧げます。 大前…