Archive for the ‘CSS’ Category

ホームページを作っていてEdgeだけ他の主要ブラウザ(Chrome、Safari、Firefox、IE11・・・)とは違った表示になってしまった。ってことありませんか?
そんなときはIEみたいにEdgeだけスタイルをあてるようにできるとといいですよね。

こんな書き方でできるみたいです。
メモしておきます。

@supports (-ms-ime-align:auto) {
	#top .main_visual {
		background-attachment: scroll;
	}
}

@supports(条件)で、条件の部分をサポートしている場合はそのスタイルを適用する。
みたいな感じですね。

@supports (-ms-accelerator:true) {
	#top .main_visual {
		background-attachment: scroll;
	}
}

以前は

-ms-accelerator:true

でいけたようなのですが、Edgeのバージョンアップで-ms-acceleratorはいつからかきかなくなったみたいです(2016/10/28時点)。

Edgeだけうまく表示されないということで、手っ取り早く対応したいときにはしかたないかもしれませんが、この方法はあまり良くないかもしれませんね。
バージョンアップでいつサポートされなくなるかわかりませんので。

この書式を使う場合にはご注意を!

Webサイトの制作で、Material Designを採用する機会がありました。
スマホ向けサイトのお問い合わせフォームでMaterializeというCSS、JavaScriptのフレームワークを使用しましたので、導入から実装までの手順を簡単にまとめておきたいと思います。
Documentation – Materialize

bowerコマンドを利用してインストールしました。
※ 参考サイトはこちら↓
Bower入門(基礎編) – from scratch

Materializeをインストールするためのbowerコマンドをインストールするのに幾つかツールのインストールが必要になりました。

大まかな手順は以下のようになります。

  1. Homebrewのインストール
  2. node.jsのインストール
  3. bowerのインストール
  4. bowerの初期化
  5. bowerコマンドを実行してMaterializeをダウンロード
  6. フォームの実装

続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(google編)の続きです。

画面のデザインを検討します。

とのさまのflashcast:フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる(画面作り編)と同様、こちらを参考にしました。
画面表示関係 – iPhone 3G DevWiki

iPhone特有の書式は基本的にはtonomemoと同じです。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320px, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

続きを読む »