kuroaka1871のブックマーク - はてなブックマーク

[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法

こんにちは、霙(@xxmiz0rexx)です。スマートフォンサイトを制作している時、たまーに困ることがあります。それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。必要なもの 1.Mac 2.iPhone 3.ケーブル次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐまず

kuroaka1871 2015/05/26

iPhone

リンク

左が過去で右が未来…？ページ送りの正しい方向とは？WEB屋のみなさんに聞いてみました

ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。これって何か変じゃない？という疑問をWEB屋の皆さんにぶつけてみましたので、いただいた回答をまとめます。何が言いたいかよくあるページ送りはこんな感じなんです。記事一覧のページ送り記事詳細のページ送り仮に最新の記事の詳細とします。『次』にあたる記事がない場合こんな感じになっています。記事一覧は右に行くほど過去なのに、詳細に入ったときにページ送りの方向が変わるのが何か気持ち悪いなぁという事なのです。（ちなみに、説明上『前の記事』『次の記事』というボタンを置いていますが、普段は記事タイトルを表示させています）記事詳細のしっくり来るページ送りこっちの方が矛盾がないというか、しっくり来

kuroaka1871 2014/06/14

左から右へと読む視線の流れからすると、記事のページ送りボタンの「次」は、右下設置が自然な気がする。逆にアーカイブのページングのほうが混乱する。1 2 3 4 ...はどれが新しいのか古いのか分かりづらい。

リンク

Sublime Text初心者向け：覚えておけばとりあえずラクできるおすすめショートカットキーまとめ

こんにちは、霙(@xxmiz0rexx)です。立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず！！という、私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です覚えておきたいショートカットキーとりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますｗみぞれが選ぶ最も便利なショートカットキー3個入力コマンド結果

kuroaka1871 2014/04/16

リンク

[WordPress]稼働中のテーマに手を加えたい時に！囲った部分がログインユーザにしか見えなくなるテンプレートタグ

こんにちは！霙(@xxmiz0rexx)です。WordPressでテーマに手を加える時、大きい変更であればテストサイトやローカルなどで試すのですが、ほんのちょこっと軽めの変更をしたい時っていちいち面倒なんですよね。。そんな時に私が愛用しているテンプレートタグがあるのですが、毎回記述方法をど忘れするのでいい加減記事にしますｗ以前「本番環境でOK！指定したレベルのログインユーザーだけにテーマを反映出来るプラグイン『Theme Test Drive』」という記事でご紹介したテスト用のテーマを表示するプラグインとは違い、こちらは今まさに本番環境で稼働しているテーマでログインユーザにしか見えないスペースを作ることが可能です。記述方法

kuroaka1871 2014/02/15

WordPress

リンク

[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ

先日、勉強会でAdobe Bracketsをはじめて触ってきました！私はST2に恋している身なのでそこまで興味はなかったのですｇげふんげふん！これ、使ってみたらなかなか良かったのですよ…！なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet（Zen-Coding）のインストール方法を皆さんにご紹介したいと思います！！というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…ｗ Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく

kuroaka1871 2013/09/11

リンク

ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』

以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや

kuroaka1871 2013/09/08

css

リンク

アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介

最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！こちらは拡大レンズがついているので

kuroaka1871 2013/03/12

リンク

デザインの参考に。素敵なデザインのiPhoneアプリ紹介サイト5選

最近資料としてiPhoneアプリ紹介ページのデザインを集めているので、その一部を記事にまとめたいと思います。参考にしたいアプリ紹介ページ画像をクリックでサイト全体のキャプチャを表示します 1:girls pic サイバーエージェントさんによる女の子のための写真共有アプリ「girls pic」のページです。レースや配色など女の子が好むガーリーなデザイン。fontの選び方とかも勉強になります。 2:instagr.am みんな大好き「Instagram」のページ。iPhoneの画面がJavaScriptによって切り替わります。少ないスペースで複数のスクリーンショットを見せることができる上にアプリの雰囲気が伝わってかなりイイですね！ 3:UNIQLO CALENDAR iPhone ユニクロカレンダーのページ。余白たっぷりで大きめのスクリーンショットを配置。ちょっと変わった配置の仕方

kuroaka1871 2013/02/24

リンク

はてなブックマーク

タグ

ブックマーク / webimemo.com (8)

お知らせ

今週のはてなブックマーク数ランキング（2024年5月第4週）

今週のはてなブックマーク数ランキング（2024年5月第3週）

今週のはてなブックマーク数ランキング（2024年5月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス