MJ-WAVE.COM

Recent Entries 最新記事一覧

  • Web開発
  • マークアップ

IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ

以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみました。ちなみにその時に追記したmeta要素は以下。 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> 上記meta要素はIE8以上のブラウザの時にレンダ…

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

【BLOGレスポンシブ化計画Vol.01】ブログをレスポンシブWebデザイン化するための準備をしよう

人知れずブログをレスポンシブWebデザインに移行しました。2ヶ月ほど前にリニューアルしたばっかりなのに、再リニューアルしちゃいました。 そんな移り気なところがあるMJです。こんばんは。 さて、せっかくなのでブログをレスポンシブWebデザイン(以下RWD)にするために、僕が考えたこと、注力したこと、大変だったことなど実作業の中で感じたことを何回かに分けて書いてみようかと思います。初めての連載です。誰に頼まれたわけでもないですけど。 基本的には僕個人の意見なとこだったり、解釈だっ…

  • Webサービス
  • 情報収集

RSS地獄から解放される!? 自分が欲しい情報だけを毎日配信してくれるサービス「Gunosy(グノシー)」

3日ぶりにGoogleリーダーを開いたら未読が1000件以上になってた。 なんてことは「新聞よりRSS派」のみなさんには日常茶飯事だと思います。 もちろん未読を溜めないように常にチェックして「必要な情報」をストックし「不必要な情報」を捨てていくことが大事ですが、RSSの情報を精査していく作業って体力がいるんですよね。 今回はそんな煩わしいRSSチェックの地獄から僕らを解放してくれる救世主になりうるか!?というようなWebサービスの紹介です。 自分が欲しい情報だけを毎日配信して…

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

iOS5のposition:fixed指定時のバグ対処法

Androidは2.3(一応)からiOSでも5からposition:fixedが使えるようになりましたが、これが色々とバグが多いわけです。 to-R(西畑さん)「スマートフォン」とposition:fixedのバグ」でも挙げられていますが、意外と曲者なわけです。 でもどうにか使いたい!ってことで、色々と試してみました。 最後まで読むとガッカリするから気をつけてください。 URLに#が付いてた時の出たり消えたりバグ fixedを指定するときのセレクタ#idを使用するとURLに#…

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

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

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

  • Web開発
  • マークアップ

CSS3:メディアクエリで読み込むスタイルを制御しよう

レスポンシブWebデザイン(RWD)というものが最近ではよく耳にするようになってきました。 レスポンシブWebデザインとは簡単に言えば、ブラウザの横幅等、条件に合わせてスタイルを切り替えることです。 例えば基本的にはワンソースでスタイルを切り替えれるようになるので、PC用、タブレット用、スマホ用のソースを各種用意する必要がなくなる等、いっぱいメリットがあると思います。(他にもメリットは色々あります) 今回のエントリーは、レスポンシブWebデザインの初歩の初歩。 メディアクエリ…

  • 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開発
  • マークアップ

CSS3:構造擬似クラスのおさらい

以前こちらの記事で構造擬似クラスについて触れたけど、 ちょっとわかりにくかったので、まとめ直します。 僕は構造擬似クラスを大まかに「child系」と「of-type系」、「その他」と呼んでます。 「その他」は「:root」「:empty」のことですが、 これの使い方は特に説明する必要もないと思うので省きます。 「child系」と「of-type系」は似て非なるものなので注意が必要。 何も考えずに使ってると僕みたいに「なんだよ適用されねーじゃんかよ」 ってふてくされてしまいます…

  • Web開発
  • マークアップ

CSS3:ターゲット擬似クラス「:target」について

使ったことないのでメモ。っていうか使う機会あるのかな。 CSS3では擬似クラスが豊富ですが、その中に「:target」というターゲット擬似クラスと呼ばれるものがあります。 使い所としては、アンカーリンク(URLにハッシュ[#]が含まれている)の時です。 実際にどう適応されるのか、以下のソースを用いて確認してみます。 HTMLソース <div id="sample"> <p id="target_p" class=&qu…