HTMLの最近のブログ記事

元ネタはこちら

http://vox.nevnum.com/%E3%80%90%E3%83%A1%E3%83%A2%E3%80%91google-map%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E5%BC%B5%E3%82%8B%E9%9A%9B%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF/

 

主なところを下記にピックアップ

座標を指定する
https://maps.google.co.jp/maps?ll=35.669029,139.705421

ズーム倍率を指定する
https://maps.google.co.jp/maps?ll=35.669029,139.705421&z=15

キーワード検索の指定
https://maps.google.co.jp/maps?q=%83%89%83t%83H%81%5b%83%8c%8c%b4%8fh

地図表示を切り替える
https://maps.google.co.jp/maps?ll=35.669029,139.705421&t=k

・t=m(デフォルト)
・t=k(航空写真)
・t=h(航空写真+ラベル)
・t=p(地形)

 

--------------------------------------
こちらもまとまっていて見やすい

Google Mapsを使ってみよう
http://www.shurey.com/html/googlemaps.html

【HTML5】role属性の設定

今時点で、私のところで即々求められてはいないのですが、こういうのもボチボチやっていこうと思います。
ただ、最初からてんこ盛りにして続かないとつまらないので、最低限これだけはというのをメモメモ。

  • banner - ヘッダー
  • navigation - グローバルナビ
  • main - メインコンテンツ
  • contentinfo - フッター

まずはこの4つを必ず設定していくようにしていきます。増やしながら追記しながら。。。

PDFへリンクするときの小枝

 

元ネタはこちら

http://d.hatena.ne.jp/momdo/20080719/p1

 

以下、元ネタページからの引用

 

*************************

例えば、2ページ目を開きたいなら、URLのあとに#で区切って

code=2と記述すればいい。

http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#page=2 (IPA*2)

とまあ、少なくともAcrobat Readerのプラグインが入っているなら、2ページ目が開く。

*************************

また、ズームを指定することができる。例えば50%にしたいなら、zoom=50とする。

http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#zoom=50

*************************

2ページ目かつ、ズームを50%としたいなら、&で区切る

http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#zoom=50&page=2

*************************

view=Fit | FitH | FitV

Fit ページ全体が収まるようにpdfを開く。

FitH ページの横幅が収まるように開く。

FitV ページの縦の長さが収まるように開く。

*************************

pagemode=bookmarks | thumbs | none (default)

ブックマーク(ページ)、サムネイル(しおり)、何も表示しない(デフォルトの動作)を選択できる。

*************************

scrollbar=1|0

スクロールバーを有効にするかどうかの選択。

*************************

search=wordList

pdfを開くときに単語を検索する。日本語を検索するときはutf-8でパーセントエンコーディングする。
複数の単語を指定するときは引用符でくくってスペースで区切る。例:search="word1 word2"

*************************

toolbar=1|0

ツールバーを有効にするかどうかを選択。

*************************

navpanes=1|0

ナビゲーションバーを有効にするかどうかを選択。

*************************

chromeの不具合

jQueryで、イメージスライダーを実装した際、Chromeで二つの不具合が発生。けっこうレアなバグだと思うのでメモメモ。

使用したプラグインは、「jquery.bxslider」。

 

◆その1 画像ズレ Chrome全般

後続の要素の画像が、スライダーが動くたびに1pxほどずれては戻り、ずれては戻り。

センタリングしているものがズレているのは分かったが、他の画像は物によって症状が出ない。

原因は、ズレる画像の親要素の幅が奇数pxだったこと。偶数ピクセルにすると症状が出なくなった。

 

◆その2 テキスト色が薄くなる Mac Chrome & Mac safari

後続の要素のテキストが、スライダーの動きにつられて薄くなっては戻り、薄くなっては戻る。

症状の出ない箇所を参考に調べたところ、背景色がついてない場合に症状が出ることがわかった。

すべての要素に背景色を付与して症状が出なくなった。

ウェブフォントの落とし穴

ウェブフォントを使用したのに、自分のPCでは効いているのに他の端末では効かなかった。

原因は、フォントへのパス書き方のミスでした。

ローカルにそのフォントが入っていると、そちらを読んでしまい、自分のPCでは正しく表示されてしまうので、原因が分かりづらかったです。

formのボタン画像のソース コピペ用メモ

 

<input type="image" src="reset.gif" value="リセット" onclick="this.form.reset(); return false;" />


<input type="image" src="btn.gif" value=" submit " onclick="this.form.submit(); return false;" />

HTMLでフランス語を入力

アーカイブ

ウェブページ