2013.09.17
複数のマーカーを設置したマップを作成できる、Googleマップの「マイマップ」機能。
先日作成してIE8で確認したところ、真っ白い画面が表示されるばかりで地図が見れませんでした。
http://news.mynavi.jp/news/2012/09/18/010/index.html
上の記事によると、少し前になりますがGoogle AppsのIE8対応が終了したそうで、
そのためにマイマップが見れなくなっていたようです。
ちなみに旧バージョンのマイマップであればIE8でも見れます。
結局新旧を出し分けて対応しました。
2013.09.11
first-childは、IE8でもきくのですが、
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。
ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。
CSS: Internet Explorer 7-8 nth-child hack
これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------
こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------
「+ *」の数を増やして調節する。
IE８でもききました。
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。
ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。
CSS: Internet Explorer 7-8 nth-child hack
これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------
こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------
「+ *」の数を増やして調節する。
IE８でもききました。
css , nth-child
2013.09.03
探していて気付いたのですが、
selectタグのデザインを自由に変更できるものって意外と少ないようです。
こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。
CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）
使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。
初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！
細かいデザイン指定がある場合などに是非。
selectタグのデザインを自由に変更できるものって意外と少ないようです。
こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。
CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）
使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。
初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！
細かいデザイン指定がある場合などに是非。
2013.08.14
select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。
この頑固な汚れはどうしようもないのかしら？
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。
CSS3でセレクトボックスをカスタマイズ
選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。
というかどうにかしてください、Firefoxさん。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。
この頑固な汚れはどうしようもないのかしら？
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。
CSS3でセレクトボックスをカスタマイズ
選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。
というかどうにかしてください、Firefoxさん。
select要素
2013.08.13
グローバルメニューをssiなど、外部ファイルで管理したい時があるじゃないですか。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
メニューの表示をページに対応して変えるの続きを読む
2013.08.07
先日メモリを増設したところ、Photoshop CS6でタイトルのような現象が起きました。
下のSSはファイルを開いたところで、開くこと自体はできているのですが
何も表示されません。
まっしろ。
調べてもそれらしい情報が出てこなかったためサポートに問い合わせてみました。
するとメモリ増設の件はひとまず置いておいて、挙動からグラボ関係が怪しいということで
グラフィックプロセッサーの使用をOFFにしてくださいとの案内。
↑のチェックを外したところ、見事に解決しました！
結局、メモリの増設がきっかけではあったものの、
グラフィックドライバのバージョンが古いことが原因だったようです。
ドライバを更新することでグラフィックプロセッサーも問題なく使用できるようになりました。
下のSSはファイルを開いたところで、開くこと自体はできているのですが
何も表示されません。
まっしろ。
調べてもそれらしい情報が出てこなかったためサポートに問い合わせてみました。
するとメモリ増設の件はひとまず置いておいて、挙動からグラボ関係が怪しいということで
グラフィックプロセッサーの使用をOFFにしてくださいとの案内。
↑のチェックを外したところ、見事に解決しました！
結局、メモリの増設がきっかけではあったものの、
グラフィックドライバのバージョンが古いことが原因だったようです。
ドライバを更新することでグラフィックプロセッサーも問題なく使用できるようになりました。
2013.07.30
MTで書き出したファイルを別のドメインにアップするような場合、
http://から始まる<$mt:BlogURL$>や<$mt:EntryPermalink$>をそのまま使うことはできません。
そういうときに役立った記述をメモしておきます。
■サイトURLをルートパスで出力
<$mt:BlogRelativeURL$>
→ /blogurl/
■記事リストのURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:CategoryBasename$>/
→ /blogurl/category/
※階層数によって、<mt:ParentCategory>などを使って全ての階層を出力します
■記事のURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:EntryDate format="%Y/%m/"$><$mt:EntryBasename separator="-"$><$mt:BlogFileExtension$>
→ /blogurl/2013/07/basename.html
以上。
他にもあれば追記してきます。
http://から始まる<$mt:BlogURL$>や<$mt:EntryPermalink$>をそのまま使うことはできません。
そういうときに役立った記述をメモしておきます。
■サイトURLをルートパスで出力
<$mt:BlogRelativeURL$>
→ /blogurl/
■記事リストのURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:CategoryBasename$>/
→ /blogurl/category/
※階層数によって、<mt:ParentCategory>などを使って全ての階層を出力します
■記事のURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:EntryDate format="%Y/%m/"$><$mt:EntryBasename separator="-"$><$mt:BlogFileExtension$>
→ /blogurl/2013/07/basename.html
以上。
他にもあれば追記してきます。
MT
2013.07.02
BASIC認証を、階層ではなく1つのファイルに対してかける方法です。
1. 目的のファイルがある階層に対してBASIC認証をかける
2. .htaccessに手を加える
.htaccessの中は下記に近いものになっていると思います。
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
これを次のようにタグで囲みます。
<Files sample.html> ← 目的のファイル名に
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
</Files>
この状態でアップすれば完了。
1. 目的のファイルがある階層に対してBASIC認証をかける
2. .htaccessに手を加える
.htaccessの中は下記に近いものになっていると思います。
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
これを次のようにタグで囲みます。
<Files sample.html> ← 目的のファイル名に
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
</Files>
この状態でアップすれば完了。
2013.06.12
久しぶりにJavaScriptを書いていて少し迷ったところ。
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
setInterval()やsetTimeout()についてです。
var sample = setInterval( intervalEvent, 1000);
例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、
var sample = setInterval( intervalEvent(data1), 1000);
と普段通り書いても上手くいきません。
次のように書くことで引数を渡すことができます。
1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。
var sample = setInterval( function(){ intervalEvent(data1); }, 1000);
2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、
var sample = setInterval('intervalEvent('+ data1 +')', 1000);
JavaScript , メモ
2013.05.21
最近はIE6、7に対応させることが減ってきました。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE6 , js
