コーディングの最近のブログ記事

レスポンシブでclearfixがエラー

2カラムのレイアウトで、左にナビゲーション、右にメインエリア。メインエリアでclearfixを使ったらカラム落ちしたので、ちょこっとメモメモ。

画面幅にしたがってメインエリアの幅を可変にしたいので幅は設定できない。はじめは左にマージンを持たせることで対応したらカラム落ちした。:afterのclear:bothが効いてしまってるらしい。

結局、メインエリアに「overflow:hidden」で何とかなった。。。と思う。

 

 

元ネタはこちら https://www.softel.co.jp/blogs/tech/archives/4391

下記のように書く

a:focus, *:focus { outline:none; }

元ネタはこちら

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

IE対策|とボタンがずれる

元ネタは http://www.export-japan.co.jp/blog/ie%E3%81%A7%E3%81%AF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%EF%BC%88%EF%BC%89%E3%81%A8%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8Cvertical-alignmiddle/

 

IEの場合は<input>がvertical-alignで高さ揃えができないので、display:inline;してからvertical-alignをかけるとよい。

[Edge Inspect] cookieなどのキャッシュクリア

Edge Inspect の情報って、公式のアナウンス系以外にはほとんど出てなくて困ることが多い。

今回、jQueryがらみでcookieの設定が残ってしまい、クリアする方法を探すのに苦労したのでメモメモ

 

【iOSの場合】

標準ブラウザであるSafariに依存するようで、そちらのキャッシュをクリアしたら治るらしい
(自分では試していないが)

【android(2.3.5)の場合】

こちらは標準ブラウザをごにょごにょしても治らない。
下記の手順で開いたEdge Inspectをごにょごにょする

設定 > アプリケーション > アプリケーションの管理 > Edge Inspect

 

【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

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

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

アーカイブ

ウェブページ

「紺屋の白袴」とはまさにこの事。見にくいしスマホ対応もまだしていません。そのうちやります。そのうちにね。

エフスタジオの中の人は株式会社メキメキに在籍しています。