LINE Developersこちらのページから簡単に設置できるLINEで送るボタン。 WEBページにであれば aタグだけでも手軽に設置できます。 <a href="http://line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a> LINE Developers 記述例より引用 が。 間違えて aタグ の target を _blan…

最近は隙を見て Code Pen に投稿することが趣味のひとつとなっています。 今回もCSSアニメーションで謎の演出をつくってみました。 box-shodow の insetをつかってみたかっただけなので、とてもシンプルな仕上がりとなっています。 DEMO See the Pen hello w…

JavaScriptでシングルトンクラス的な挙動を実装する - みかづきブログ その3 前回のシングルトンクラス風のクラスは超お手軽バーションだった故に、 new で単一ではないインスタンスをつくれてしまう インスタンスがグローバルからアクセスできてしまう とい…

前回 はdelegateの概念的な説明をしました。 JavaScriptでdelegateをつかうメリットを先生と生徒に例えてご説明しましょう - みかづきブログ その3今回は実際にdelegateをつくる関数をつくってみようと思います。 仕様を考える とりあえず必要最小限の機能で…

※ イメージの話なんで実際のJavaScriptの挙動と異なるところがあります。 イメージの話 例えばあなたが30人の生徒を受け持つ教師だったとしましょう。 そして30人の生徒に、「肩を叩かれたら自分の出席番号を言うようにしましょう。」という指示を出すことに…

いままでは function Super() { alert("hey"); } Super.prototype.say = function() { alert("jump"); } function Sub() {} とあったときに、Subのインスタンスからsayメソッドを叩きたかったら、 Sub.prototype = new Super(); Sub.prototype.constructor =…

JavaScript history.back(); で実装できる模様です。 DEMO デモページへGo！※ ボタンを押すと戻ってこれるはずです。 HTML <div class="btn back"> <div class="inner"> <a id="btnBack" class="txt">BACK</a> </div> <div> SCSS @import "compass/reset"; html, body { background: #ccc; } .btn { margin: 120px auto; width: 80px; overflow: hi</div></div>…

個人的に辛い食べ物が大好きなので、職場の近く（横浜駅周辺）の辛い料理を取り扱っている店をまとめていこうと思います。東口が中心になってしまってますね。（感想は完全に個人の主観です） 辛い 韓国料理 暖韓 料理メニュー : ウラ横 焼肉センター （【旧…

フォームをつかってファイルをアップロードしたいときに、 <input class="file" type="file" />とinputタグをつかうことになりますが、IEのことを考えるとこいつのカスタムがなかなか厄介なのでメモをしておきます。 HTML <div class="btn photo"> <div class="inner"> <form class="form"> <p class="txt">FILE</p> <input class="file" type="file" accept="image/jpeg, image/png" /> </form> </div> </div>

サッカーは敵味方自分を合わせると22人で行うスポーツです。 その中で、自分が操作できるプレーヤーの人数について考えてみます。 自らの意思で操作できるプレーヤー 自分 まず当たり前ですが、自分自身の身体はほぼ100％自分で操作することができます。 あ…

JR東日本アプリ 兎に角多機能なアプリです。多機能すぎていまいち使いにくい気がします。 なんでもできるなにかはiPhoneで充分で、アプリは1うに機能に特化させても良いのではないかなと思いました。 個人的にはYahoo!の乗り換え案内が最強だと思ってます。J…

いまさらながらツイートにデフォルト文言を入力する方法まとめ - みかづきブログ その3こちらの記事で色々調べた結果、最近は share をつかっています。 shareをつかってハッシュタグを設定しようとして、 <a href="https://twitter.com/share?text=hey! #hey"></a> と書いても無視されてしまいます。 <a href="https://twitter.com/share?text=hey!&hashtags=hey"></a> と hashtags …

var arr = [61, 65, 7, 49, 9, 8, 47, 44, 45]; このような配列で1番大きな値のindexが欲しい時の一例です。ちなみにこの配列にはいっている番号は今日のマリーンズのスタメン選手の背番号を打順順に並べたものということはいうまでもありません。 JavaScrip…

アモーレ・モアレ - みかづきブログ その3以前つくったこちらのコンテンツをCodePen用にリメイクしてみました。 といっても丸抜きして、回転スピード / 方向を変えただけです。 なんかもっと有効に活用できるような気ができるような気がしたりしなかったりし…

borderをつかってタブ的な表現を目指しました。 切り替えにはJavaScriptをつかってます。 DEMO HTML <main class="main t1"> <ol class="tabs"> <li class="tab t1">HELLO</li> <li class="tab t2">WORLD</li> </ol> <ol class="notes"> <li class="note n1"> <p class="txt">hello...</p> </li> <li class="note n2"> <p class="txt">world...</p> </li> </ol></main>

週末にがっつり konashi.js をつかったアプリを開発していたんですが、気づいたことを2点メモしておきます。 konashi-bridge.min.js の読み込みについて reo.matsumura さんのコードをForkしていたときには気づきませんでしたが、konashi-bridge.min.js を読…

前回 はGoogle MapをAPI経由で埋め込みましたが、今回は読み込んだマップの色を変えてみたいと思います。Google Mapn のスタイルは http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html でプレビューしながら変更可能です。ひと…

なぜかいままでなかなかつかう機会のなかったGoogle Map API。かつて、 こんな記事 を書いたことがありましたが、実に9ヶ月ぶりに使う機会があったのでメモを残しておきます。 今回やりたいことは、マリンスタジアムを中心としたマップを埋め込む。ただそれ…

var txt = "ふるいけや。かわずとびこむ。みずのおと。"; を読みやすくしようと思って、 var txt = "ふるいけや。 かわずとびこむ。 みずのおと。"; と書いてしまうとシンタックスエラーになるのは火を見るより明らかです。 改行方法を考えましょう。 +演算…

最近はafterのborderをつかって、こんな感じで光沢をいれてます。 SCSS .icon { position: relative; width: 120px; height: 120px; &:after { display: block; position: absolute; top: 0; left: 0; border: solid transparent 60px; border-top-color: rg…

URLのハッシュにページ内でつかっているid属性をつけると頭出しができます。 これを利用してaタグのhrefにid属性名をつかってページ内リンクをつくることがよくあります。 今回はJavaScriptの力をつかって、ページ内リンクの移動をアニメーションにしてみま…

そうです。最近個人的にCSS熱が高まってきていま（略） 今回は「いま一番必要な音楽と出会えるサービス」こと オンガクスリ のロゴをつくってみたいとおもいます。今回は、ongakusuriタグというタグをつくり、そのタグのスタイルを調整するという方針にして…

本邦初公開の情報 ですが、最近個人的にCSS熱が高まってきています。 今回は習作としてGoogleスプレッドシートのアイコンをつくってみました。 DEMO HTML <div class="sheet adjust"> <div class="header"></div> <div class="body"> <div class="line"></div> </div> </div> SCSS @import "compass/reset"; html, body { height: 100%; background: #f3f3f3; } .adjust {…

最近個人的にCSS熱が高まってきています。 今回は習作としてGoogleドキュメントのアイコンをつくってみました。 DEMO HTML <div class="note adjust"> <div class="header"></div> <div class="body"> <div class="line"></div> </div> </div> SCSS @import "compass/reset"; html, body { height: 100%; background: #f3f3f3; } .adjust { position: absolute; top: 50%;…

CSSでiPhone本体の素材をつくる - みかづきブログ その3こちらの記事が意外に好評だったので、今回もCSSでフラットな素材をつくってみようとおもいます。 前回よりもちょっとニッチなデバイスですが、最近お世話になっているデバイス konashi をCSSでつくっ…

gatElementなんちゃら querySelector jQuery をつかってDOMをセレクトしたときに返ってくる NodeList が Live（動的） か Static（静的）かを意識しておかないと思わぬところではまることがあると思ったのでメモを残しておきます。 サンプルコード NodeList…

例えばモー娘。のPVを見ている時、高橋さんも見たいけど亀井さんもチェックしたい。 そんなときがあると思います。（既に2人とも卒業してしまっていますが）そんなとき、PVがマルチアングルになっていると非常に捗りますね。そこで今回はYouTubをつかってワ…

DEMO SCSS body { background: #8d8e90; } .adjust { float: left; margin: 50px 20px; } .ball { position: relative; border-radius: 50%; width: 100px; height: 100px; box-shadow: 2px 4px 10px rgba(0, 0, 0, .1); &.red { background: radial-gradien…

以前、 ツイートボタンをつかって投票ボタンをつくったこと がありましたが、今回はFacebookのいいね！ボタンをつかって実装してみました。 デモページ 解説 デモページのソースはこんな感じになっています。 <ul class="box"> <li class="btn red"><div class="fb-like" data-href="http://jsrun.it/kimmy/redFB" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div></li> <…</ul>

最近、WEBサイトにiPhoneっぽいものを置きたいときがよくあるので、素材用につくってみました。See the Pen hello world. by kimmy (@kimmy) on CodePen.若干デフォルメしてますが、割とサイズ感にこだわってつくってます。つくってから気づいたんですが、簡…