カテゴリー別アーカイブ: HTML

Google Map 設置、吹き出し削除、レスポンシブ

Googleの地図をホームページに入れる方法。

Googleサイト地図より住所を入れて検索
「神奈川県横浜市青葉区青葉台1-6-21 a・cube」

「リンク」アイコンをクリックするとウェブサイトへの地図埋め込み用 HTML コードがでるのでその中の「埋め込み地図のカスタマイズとプレビュー」をクリック。


地図の大きさを「大」にしてズームを調整し埋め込むHTMLをコピーして、自分のサイトへHTMLをペーストする。

実際に見ると吹き出しが表示されるので、吹き出しを非表示にする

HTML内の/iframeの最後の前部分に「&iwloc=B」を追加
<iframe width=”640″ height=”480″—————–
————————–;output=embed&amp;iwloc=B“></iframe>

サイトがレスポンシブデザインなら「width」設定を「100%」にする。
<iframe width=”640″ height=”480″—————–
を
<iframe width=”100%” height=”480″—————–

iPhoneで見ると自動で横幅が調整される。

an error occurred while processing this directiveエラー

このエラー表示はSSI（Server Side Include）でのエラー原因が考えられます。
今回はhtml内にコメントとして
<!–#テキスト–>
のようにいれた場合に
「an error occurred while processing this directive」が出ました。
これは「#」「;」「’」「”」などがコメント内に入れた場合おこることがあります。

ウェブセーフカラー表

WindowsとMacintoshではカラーが違って見えたりします。またもともと標準としている色数や解像度による色数も違うのでネットではセーフカラー256色というものがあります。

この色を使っていると殆どの環境で同じ色で再現されます。フォトショップやドリームウィーバーなどは簡単に色指定ができますが、実際のブラウザで前後の濃淡など確認することができるサイトがあります。

さらに便利なのが右上のメニューから「216 Web Safe Colors」「Greens / Blues」「Reds / Blues」「Reds / Greens」「Earth Tones」「Pastels」「Greys」とそれぞれ選択してくれます。

http://websafecolors.info/

レスポンシブデザイン　ブラウザ対応にていて

レスポンシブデザインで制作した場合のブラウザ対応、非対応についてです。
ポイントはメディアクエリにブラウザが対応しているかどうかで判断しています。

viewpoint（スクリーンサイズ）のwhith（幅）、height（高さ）の指定。
この指定でブレイクポイントごとにスマートフォン、タブレット、PCと表示を変えます。

■メディアクエリ対応ブラウザ（レスポンシブデザイン対応）
IE 9 以上
Chrome
Safari 3 以上
Firefox 3.5 以上
Opera 7 以上

■メディアクエリに非対応ブラウザ（レスポンシブデザイン非対応）
IE 8 以下
Safari 2 以下
Firefox 3 以下

レスポンシブデザインに非対応であっても見れないという訳ではありません。
従来通りスマートフォンなどで見ると小さく全体が見れるということです。

 

HTML 要素の開始タグ lang 属性

レスポンシブデザインに使用するテンプレートは海外のものが多い。
そのままだと、lang属性が英語（en）になっているので日本語に変更する。

<html lang=”ja” dir=”ltr”>
「dir」は基本となる表やテキストの方向を示す。「ltr」は左から右へ。

スマートフォンのズーム機能　viewport設定

iPhoneやAndroidのズーム機能を使えるようにする場合のviewportの設定のHTML記述。
<head>にviewport設定を記述します。

<!– 画面をズームできるように設定 –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=yes”>

<!– 画面をズームできないように設定 –>
<meta name=”viewport” content=”width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

Concrete5 C5R
ズームできない
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
ズームできる
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

コピーライトの年数を自動で変更する

コピーライトの年数部分に下記スクリプトを入れる。
<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script>

・応用1
Copyright <script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.
Copyright 2012 会社名 All rights reserved.

・応用2
Copyright 1991-<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.
Copyright 1991-2012 会社名 All rights reserved.

最新の年数が入っていると、ちゃんと管理されているサイトだなぁという印象ですよね。