-
レスポンシブで iframe
iframe を使う機会は随分少なくなり、Google マップや YouTube 程度。ただ、スマートフォンおよびタブレットの普及により、レスポンシブの要望は必須のような状況です。 そのような状況ですので、レスポンシブで iframe を使うケースがあります。コーポレートサイトの制作をメインとしている当オフィスでは、Google マップでの利用がほとんどですが、希に Google カレンダーや YouTube のご要望があります。Google マップの場合、高さ固定でも問題とならないのですが、Google カレンダーの場合は、スマホでみるとカレンダーが画面からはみ出している状態となったり、YouTube の場合、横長になってしまったりと支障が生じます。 なので、次のようなことを行います。 CSS については・・・。 なお、Google カレンダーの場合、カレンダーが取得した HTML コードでは、私の iPhone5 でどうしてもはみ出るため、 https://calendar.google.com/calendar/embed?src= ではなく https://calendar.google.com/calendar/htmlembed?src= が表示されるよう @media screen で切り替えて対処。
-
環境依存文字・機種依存文字
ホームページ制作の業務では、環境依存文字への対応が当たり前のようにあります。 そんな環境依存文字や記号を載せる度に過去のコードや検索するのも大変ですので、よく使う文字実体参照・数字文字参照を載せておこうかと・・・。 表示 文字実体参照 数値文字参照(10進数) & & & < < < > > > « « « » » » ≪ – ≪ ≫ – ≫ “ " " ™ ™ ™ © © © ® ® ® ℗ – ℗ Φ &Phi Φ φ &phi φ ° ° ° ℃ – ℃ ㎡ –…
-
ブラウザのシェアで Chrome がトップ
先月の記事ですが、WebブラウザシェアランキングTOP10 が発表されています。 https://webrage.jp/mobile/data/pc_browser_share.html バージョンでも分かれていますが、その他を除いて IE と Chrome それぞれのバージョンを足して比較しても Chrome がトップになっています。 さて、Internet Explorer の天下だった Webブラウザ界が上記のような状況に変化しているなか、ホームページを運営している者としてなにを注意しなければならないでしょう？ デザインのくずれ W3Cに準拠して、Chrome や Safari での表示チェックをしているようなホームページの場合、それを維持すれば問題ないと思われます。逆にそれを行っていない場合は、実施することを推奨します。 お問い合わせなどのフォーム フォームの入力欄で 全角 および 半角 の入力を自動的に切り替わる機能を ime-mode で実装している場合、少し問題がでてきます。Chrome は ime-mode に対応していません。つまり、ime-mode で実装している場合、シェア No1 のブラウザでは 全角 および 半角 の入力が自動的に切り替わらないのです。 電話番号やメールアドレスの入力欄で実装されているケースが多いため、ご自分のホームページのお問い合わせフォームをチェックしていただければと思います。 ime-mode で実装されている場合、どうすればよいか？ 入力の時点での強制ではなく「全角で入力されたら半角に変換する」で対応するのがベストと考えます。その機能は PHP で実現可能です。当オフィスのお問い合わせフォームでメールアドレスや電話番号の入力欄に全角で入力しても「入力内容の確認」をクリックしたあと半角に変換されることが確認できます。メールアドレスや電話番号などは辞書登録されている人もおられますので、ime-mode などで入力モードを強制的に制御させるより、「全角で入力されたら半角に変換する」の考えの方がベターと当オフィスでは考えています。 [mokurenCB]
-
パンくずリストの構造化マークアップ
「パンくずリスト」は昔からあるものなので、慣れ親しんでいるものですが、これに「構造化マークアップ」が加わると重圧感が滲み出てくるような。もっとも「構造化マークアップ」も Google さんが以前から推奨していますけどね。 但し、当オフィスでは、パンくずリストを設置したサイト構築はあまり受けていませんでしたので、この度、受けてしまったことから、「パンくずリストの構造化マークアップ」の方法を改めて調べました。結果は、そんなに難しいものではないです。 構造化マークアップしていないパンくずリスト 構造化マークアップしたパンくずリスト パンくずであることを「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」で示し、リンク先を「itemprop=”url”」で、アンカーテキストを span で囲い「itemprop=”title”」で指定する。 最後は、Google さん提供の「構造化データテストツール」でチェックし問題なければ OK。 [mokurenCB]
-
Windows10 なのにアップグレード？
外出から戻り、いつものように Windows と Mac それぞれを立ち上げて、数分後、Windows の画面に「アップグレードするから再起動するか？(うろ覚えの文章です)」の内容のメッセージが表示されたのですが、こちらも仕事がたまっているため「いいえ(文章はうろ覚え)」をクリック。Photoshop を立ち上げ、作業を始めて数分後、突然、画面が真っ黒になり、白文字で「Windows をアップグレードしています」で画面中央に円が描かれて、円の中にパーセントが・・・。作業途中なんですけど・・・(汗) 今までの作業は保存されているのか？ とりあえず、Windows10 のアップグレードは３ヶ月前にニュースになった http://pc.watch.impress.co.jp/docs/news/20151113_730389.html のようなので、パソコンがおかしくなったわけではないようですけど、仕事中に始めないでくれよぉ！ Mac は待ってくれるよぉ！ 現在、Windows のモニター中央は「50％」を表示。 いま急いでいる仕事のファイルは Windows だけに保存しているから、アップグレードが終わるまでどうにもならない。 あと半分か・・・。 ・・・30分後。アップグレードが終わった。 と同時にアップグレード前の作業は全て消えていたことを確認(泣) あわせて、Chrome に設定していたデフォルトのブラウザが Edge に変わっていることも確認。 セキュリティ、操作性、安定性などの向上は大歓迎なのですが、設定変更はやめて欲しい。 [mokurenCB]