2011-05-25

Dreamweaver 文字化けについて

日本語が文字化けしてしまうのをなおす。
そもそも文字コードがいまいちわからない。

◆文字コードの種類

デフォルト:UTF-8(utf-8)
日本語EUC(euc-jp)
日本語シフトJIS(shift_jis)

★HTMLの<meta>タグの中に<meta charset="●●"


◆文字コード違い

utf-8…よく使われ、多言語に対応
euc-jp…Unix系でつかわれる*
shift_jis…Windowsの標準

*Unix系って?
OS、OSの種類(Windows/mac/Unix)
プログラムで技術を開発するためのものらしい
詳しくはここ→回答者NO.19の人


一番わかりやすかった参考サイト:kus/ウェブリブログ
http://kus3.at.webry.info/201105/article_12.html

utf-8"にしとけば、問題ない。

※裏側のプログラムがeucで書かれていて、 組み合せる場合、HTML側もeucでかくらしい。
※日本語の入ったプログラムをかくとき、eucを使っていた。 今は、utf-8でかくのが主流らしい。
※携帯サイトは、シフトJISのみ。(スマートフォンを除く)

※jsファイルの日本語がhtmlで文字化けするときは、
テキストエディタなどで開いて、文字コードをUTF-8で再度読み込む。
書いてあった日本語は文字化けするので、バックをとっておいて、読み込んだ後にコピペ


◆文字化けしたページを開いてしまったときに直す方法


【修正】→【ページプロパティ】→【タイトル/エンコーディング】→【エンコーディング】を変更、リロード


◆CSS文字コードの指定

@charset "ここに入れる"; ※jsにはありません。

CSSファイルをコメントアウト内(/**/)に日本語で記述するとIEのみ効かない部分が出てくる。
バージョンは不明、”文字コード”を指定してあげると回避する?

html5の理解

◆何が変わったのか

・記述がちょっと簡単になった。
・大文字と小文字の区別がない。
・html側での装飾がなくなった。
(例:strong→太字にならなくなった、意味は同じ)
 すべてCSS/CSS3でやる。
 装飾が
すべてできるようにCSS3がどんどんでてくる。

・W3Cの仕様だけど、WHATWG(ワットダブルジー)
.あと3年くらいには主流になってくる??
・高度な文書構造が可能に
・的確なリスティング広告が可能に
・フォーム機能がすごい
・動画や音声の配信が手軽になった
・javascriptを使って2D・3Dもできちゃう
・APIで位置情報の取得
・スマートフォンはhtml5で


変わったけど、過去のものを躍起になって書き換える必要はにらしい。
ブラウザでサポートしてくれるらしい。

各ブラウザがhtml5をどれくらいサポートしてるのかどうかなど知りたい時は↓
http://www.findmebyip.com/litmus/
…CSS3は大分使えるみたいだ



◆とりあえずコピペ


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>javascript</title>
<script src="js/test.js" ></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>


ここに内容

</body>
</html>



◆基礎のきそ~だから何がどんなふうに変わったのか~

【今までのhtml】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↓↓↓長ったらしい宣言がこれだけに…

【html5】
<!doctype html>


------

【今までのhtml】

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">

↓↓↓長ったらしいhtml要素が…

【html5】

<html lang="ja" >




最終的に↓↓↓


<!doctype html>
<html lang="ja">
<head>
メタタグ
タイトルタグ
</head>

と、なってメタタグの変更は、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />↓

<meta charset=utf-8" >※utf-8にしないと、文字化けの恐れがあります。

それ以外は、そのままで。

次に、javaスクリプトとCSSを指定する。scriptとlinkのtyp属性が省略できます。

↓↓

<script src="js/jquery.js">

<link rel="stylesheet" href="css/common.css" >

↑linkは閉じタグがいりません!br(改行)にもいらなくなりました。



▼よくわからなかったもの【基準言語の指定】
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

↑多分かく必要がないみたい→とほほより

チェックしてもエラーがでるので削除


◆HTML5チェックhttp://nuevvo.com/labs/html5-validator-bookmarklet/





--------------------- 参考サイト --------------------------

「HTML5でサイトをつくろう」
http://www.html5-memo.com/first-html5/html5-001/
HTML5リファレンス
http://www.htmq.com/html5/index.shtml
HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト
http://www.html5-guide.com/add/layout/section.html

2011-05-20

印刷時の背景画像が二重になったりする

◆大きい背景(background-image)が改ページごとに頭から表示される

これだ!っていう解決策は今のところ無し。

★解決策として

印刷用に、ページ全体のjpgを印刷時にだけ表示させる。
表示されているページをdisplay:none;にして、jpgをjQueryで読み込む。

backgroundを極力使わない。
使っても細かく切る。さらに、改ページを微調整↓

強制的に前で改ページさせる
#CSS{page-break-before:always;




◆プリント用CSSについて


CSSの最後にmedia=”print”といれる。
<link rel="stylesheet" href="dummy.css" type="text/css" media="print" />

2011-05-12

ダブルクリックしたとき ※【jQuery】

クリックしたときに、一番初めのクリックを無効にする。
しないと<a>のリンク先にとぶ。

クリックのときは、『return false』と最後にかくが、
クリックしたら『return false』とかく。


メソッドチェーンを使って、つなげてかく。

分かりやすく色づけしてみる


イベント一覧に戻る

アマゾン和書/最新の情報