アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方
Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニューがあることがひと目で分かると便利ですよね。 さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、 今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。 矢印の向きが切り替わるドロップダウンメニューの作り方 まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。 今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。 記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox
左が過去で右が未来…？ページ送りの正しい方向とは？WEB屋のみなさんに聞いてみました
ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。 これって何か変じゃない？という疑問をWEB屋の皆さんにぶつけてみましたので、いただいた回答をまとめます。 何が言いたいか よくあるページ送りはこんな感じなんです。 記事一覧のページ送り 記事詳細のページ送り 仮に最新の記事の詳細とします。『次』にあたる記事がない場合こんな感じになっています。 記事一覧は右に行くほど過去なのに、詳細に入ったときにページ送りの方向が変わるのが何か気持ち悪いなぁという事なのです。 （ちなみに、説明上『前の記事』『次の記事』というボタンを置いていますが、普段は記事タイトルを表示させています） 記事詳細のしっくり来るページ送り こっちの方が矛盾がないというか、しっくり来
Sublime Text初心者向け：覚えておけばとりあえずラクできるおすすめショートカットキーまとめ
こんにちは、霙(@xxmiz0rexx)です。 立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。 便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず！！という、 私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です 覚えておきたいショートカットキー とりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。 私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますｗ みぞれが選ぶ最も便利なショートカットキー3個 入力コマンド 結果
大川さんに壁ドンされる女性役として無料写真素材サイトPAKUTASO(ぱくたそ)の撮影に参加してきました
昔から写真が嫌い過ぎて、友達との青春の想い出写真があまりない馬鹿な女みぞれ(@xxmiz0rexx)です。絶対にそれだけはないだろうと思っていたんですが、何故か無料写真素材サイト『PAKUTASO/ぱくたそ 』さんの壁ドン写真素材で女性役をしてきましたのでレポートしますｗ 経緯 2月某日に突然、大川さんからこんなご連絡がありました。 大川さん みぞれさん、今度壁ドン写真素材を撮るので良かったら女性役をやって頂けませんか？ しゃ、写真素材…？ 学生時代よりマシになったとはいえ、まだまだ写真にうつるのが苦手な私。 しかも、リアルの知人に垢バレしたらわりと死ねる。 以前おつぱしが写真素材になった時も、足だけ参加させてもらったりはしていましたが、今回は完全に全身うつっちゃうやーつです。ない。完全にありえない。やるわけない。断ろう。 みぞれし めっちゃやりたいｗｗｗ壁ドンされるの夢だったんです！！！
備忘録：リストタグで囲んだ要素の上部に余白があいてしまった時の対処法
こんにちは、霙(@xxmiz0rexx)です。スマートフォンサイトによくあるサムネイル＋記事タイトルの形をコーディングしていたところ、 うっかりミスではまってしまったので備忘録です。 症状 画像のとおり、リストタグの上部に謎の余白が出来てしまいました。 デベロッパーツールで細かく見てみても、paddingもmarginもおかしくないしfloatが悪さしているわけでもなし。 heightは90px程度のはずなのに何故か110pxもある。 いくつかスマートフォンサイトを作って来ましたが、こんなことは初めてでとっても戸惑いました。 初歩的すぎてｗ 原因・対処法 下の図はブラウザ幅いっぱいに伸びていたリストタグに余白を与えたもの。 リストスタイルの「・」が出てますね…。お前だったのか… というわけで該当のリストタグに以下の指定をしたら直りました。
[アプリ]注目の記事をまとめ読みできるiPhoneアプリ『FeedDrop』をリリースしました[作ってみた]
こんにちは、霙(@xxmiz0rexx)です！ 最近ロクにブログも書かずに何をしていたかと言いますと、水面下でいろいろな事に首を突っ込んで活動をしておりました。その中の1つを本日発表させて頂きます :) ユニットを組んで、iPhoneアプリを共同開発しました！！ 自由大学でiOSアプリの作り方を学んでから半年ほどが経過したでしょうか。 作る作ると言って全然X-Codeを起動する時間もなく年を越してしまったとある冬の日、 友人のデベロッパーさんと打ち合わせ後にアプリの話になったのがキッカケになりました。 「一緒になにか作りたいよね」 「いいね！おもしろそう！！」 「……じゃあいつやるか？」 「「今でしょ！！！！！」」 という会話があったかなかったかは置いておいてｗ やるなら今！！ってことで、そこから約1ヶ月ほどでアプリが完成いたしました :) アプリ名はFeedDrop(フィードロップ) 雨
![[アプリ]注目の記事をまとめ読みできるiPhoneアプリ『FeedDrop』をリリースしました[作ってみた]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f81ebc7aa6177bd98e44f56de07d0567b1104c3b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2F203df2f6e0371d0aa1d089835bbba0a1-540x315.png)
メインマシンをWindowsからMacにした時に教えてもらった「Macではこれできないの？」→「できるよ」Tips
2011年7月にMacBook Airを購入して約1年半。 職場でもメインPCをWindowsからMacにして頂けたこともあって 段々と扱いに慣れてきた霙(@xxmiz0rexx)です。 今回はそんな私の「Windowsでできたアレ、Macではできないの？？」 という購入当初の疑問とその答えをまとめます。 まだMacに慣れていない人、もしくはこれから購入を考えている人はチェックしてみてください！ 1.保存しますか？「はい」「いいえ」をキーボードで WindowsではYとNでできたアレ。Macではどちらのキーを押してもうんともすんとも言いません。 おまけにタブキーを押しても無反応。 解決法 Macにもショートカットキーがありました！ 保存しない→⌘D キャンセル→esc 保存する→return これずっと悩んでいたので解決した時のスッキリ感がやばかったｗ 例えるなら「スゲーッ 爽やかな気分だ
【ウェザーリポート】利根川水系ダムが水不足と聞いて雨乞いしてきた【発動】
大事な日には高確率で雨が降る女、霙（@xxmiz0rexx）です。 いままでハワイ旅行で連日雨に振られたり、プールに出かけたら雷雨になったり、 雨男の友人と遊んだら吹雪になったり・・・。 いつも天候には迷惑をかけられている私ですが、 このたび利根川水系上流のダムの貯水量が減少し、渇水の恐れが出ているというニュースを耳にし、 「わたしが行けば雨が降るのでは？」と思い立ち、実際に行って参りましたｗ 利根川水系ダムのうち最も貯水容量が大きい矢木沢ダムへ きてみた。 晴れてますね・・・ｗまあ天気は置いておいて、たしかに深刻そうな感じです。 写真ちょっと切れちゃってますが、いつもは水の中にあるであろう地肌がむぎだしになっているのが分かりますでしょうか。 本来の矢木沢ダムの写真を探してみたらFlickrで発見しましたので比較してみましょう。 By mossygajud どじゃ〜ん。こ、これはまずいです
Google Analytics APIを使って、プラグインに頼らずに記事のアクセスランキングを表示しよう［ wordpress］
こんにちは、霙（@xxmiz0rexx）です。 サイトにGoogle Analyticsを導入していることが条件ですが、APIを利用すればプラグインに頼らなくても記事のアクセスランキングが表示できることを最近知りました！色々カスタマイズもしてみましたので、以下に手順とサンプルコードをメモしていきます。 1：GAPI（GAPI – Google Analytics API PHP Interface）をダウンロード まずは下記のサイトからライブラリが入っているzipファイルをダウンロードします。 gapi-google-analytics-php-interface 2：example.report.phpの中身を編集 次に、ダウンロードしたzipファイルを解凍し、中に入っているexample.report.phpを編集していきます。 下記のサンプルは結構盛りだくさんなので要らない部分は外し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
