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

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.

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

ソースコードにコメント入れる。ソースをコメントアウトにする方法

■HTMLの場合

<!– コメントアウト –>
<!–
コメントを複数行
可能になります
–>

■CSSの場合

/* コメントアウト */
/*
コメントを複数行
可能になります
*/

■PHP、JavaScriptの場合

// この行だけのコメント、コメントアウト
/*
コメントを複数行
可能になります
*/

■PHP、Wordpressの場合

<?php /* ?>
コメントや使用しないコードを消
<?php */ ?>