ナビゲーションでよく見かけるものです。 transform-origin を left や right に変更すれば動きが変わります。
Category: HTML+CSS
ヘッダー固定でページ内リンク
検索すれば多数ヒットするのですが、自分がわすれないために。 ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。 アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。 なので、ヘッダーの高さの分だけアンカーをずらせばよい。方法は CSS と jQuery の２通り。 jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。
レスポンシブで 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 φ ° ° ° ℃ – ℃ ㎡ – ㎡ ± ± ± ² ² ² ³ ³ ³ ¥ ¥ ￥ 〒 – 〒 ① – ① ② – ② ③ – ③ ④ – ④ ⑤ – ⑤ ⑥ – ⑥ ⑦ – ⑦ ⑧ – ⑧ ⑨ – ⑨ ⑩ – ⑩ ⑪ – ⑪ ⑫ – ⑫ ⑬ – ⑬… Continue reading 環境依存文字・機種依存文字
ブラウザのシェアで 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]