MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. スマホの記事一覧

Tag Archives スマホの記事一覧

  • Web開発

スマートフォンサイト制作に関する書籍を執筆しました(共著)!

私事ですが、実は2012年の春にスマートフォンサイト制作におけるガイドブックを執筆の依頼を奇跡的に頂きました。 それがいよいよ2013年2月19日に発売されます。その名も、 現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript] Amazonで買えますよ。 現場のプロだなんてお恥ずかしい、穴があったら、無くても穴を掘ってでも入りたいほどの僕だけではとても不安でしたので、 セミナーや執筆活動を精力的に行われ…

  • Web開発
  • レスポンシブWebデザイン

レスポンシブ・ウェブデザイン時代の表示チェックツールの決定版「Viewport Resizer」を使ってみた

レスポンシブなサイトの表示確認用ブックマークレット「Viewport Resirzer」を使ってみました。先に感想を書かせてもらうと、「こりゃあ便利だ!!!」って感じです。では、早速使い方を見ていきましょう。 「Viewport Resizer」ブックマークレットを登録しよう まずはサイトにアクセス! まずとにかく、サイトにアクセスしましょう。ぶっちゃけアクセスしなくてもブックマークレットは準備できるんですが、そんなひねくれた事はせずに素直にアクセスしましょう。 ページをブッ…

  • Web開発
  • レスポンシブWebデザイン

【BLOGレスポンシブ化計画Vol.02】目的と理由 – レスポンシブWebデザインを採用するワケ

連載するとか抜かしてから4ヶ月以上もほったらかしてすみません。生まれて初めての書籍執筆に追われてブログに全然時間を割けずにいました(という言い訳をさせてください)。気を取り直しまして・・ 【BLOGレスポンシブ化計画】連載第2回は第1回目のワークフローの項目01、「目的と理由 – レスポンシブWebデザインを採用するワケ」をテーマに書きたいと思います。 なぜレスポンシブWebデザインを採用するのでしょう? 僕みたいに個人のブログでRWDを採用するのであれば、「流行…

  • Web開発
  • JavaScript
  • ライブラリ紹介

手軽にタップやスワイプ等のジェスチャーイベントを実装できる「QUOjs」

今回はスマホのジェスチャーイベントを手軽に実装するQUOjsを軽く触ってみたので、簡単な使用方法を書きます。 詳しい仕様方法は公式サイトに書いてありますが、基本的な部分はjQueryと同じなのでジェスチャイベントの部分だけ紹介します。 基本的な形 $$('.selector').touch(function(){}); って感じで書きます。jQueryとコンフリクトしないように「$$」を使うような仕様になってます。 現在使えるジェスチャイベントは以下の図の…

  • Web開発
  • マークアップ
  • JavaScript

【Android爆発願】メディアクエリの特性を疑似要素(::after)とJavaScriptで取得するのは危険

流行りのレスポンシブウェブデザインですが、効率のいい実装方法はないかと日々探しています。今回はjavascriptで条件分岐とかしたい時のおはなし。 こちらの記事(英語)を参考に疑似要素(::after)とcontentプロパティを使って簡単に条件分岐できるやーん!っていうのをやってみたんだけど、これダメだ全然使えません。 いや、使えるんだけどね。考えた人はすげぇ天才!って思うんだけど、何がダメってAndroid(2.3〜4.0.3)がクソすぎた。 参考記事に書いてあるやり方…

  • Web開発
  • マークアップ

スマホでリンクをタップした際のハイライトの表示を変更する

リンクをタップした際、iOSのMobileSafariでは薄いグレー、 Androidではオレンジの枠でハイライトされます。 その色や表示を変更してみようというエントリーです。 iOSの場合 iOSの場合はハイライトの薄いグレーの色を変更したり、消したりできます。 ちなみにiOS4では使えなかった:hoverはiOS5でタップ時に適用されます。 まずはハイライトの色を変更する場合。a要素に下記のプロパティを適用するだけです。 a { -webkit-tap-highlight…

  • Web開発
  • マークアップ

【iOS限定】Mobile Safariでリンクを長押しした時のポップアップメニューを出ないようにする

MobileSafariを使っていると、リンクを長押しした時にポップアップメニューがでますよね。 ↓こんな感じの。 んでこれを出さないようにしようって話です。 これはCSSで出ないようにすることが可能です。 以下のプロパティを記述。 a { -webkit-touch-callout: none; } これだけでOKです。 サンプルを作ってみたので、 スマホでこちらにアクセスしてみてください。

  • Web開発
  • マークアップ

HTML5では、div要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいんです。

<div> <p><a href="#link01">リンクです。</a></p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> ↑こういうHTMLがあったとして、スマートフォンでタップしてみると、a要素で囲ってある文字の部分しかタップ出来る領域がありませんよね。 だけど絶対と言っていい程、お客さんからの要…