コメントアウトの中でコメントアウトを使うと期待通りに動きません。
CSSには、JavaScriptで使うような一行コメントアウト // の記述は存在しません。
以下、全体をコメントアウトできない例
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
/*
p.sample {
font-size:16px;
font-weight:700;
color:#777;
text-align:left;
line-height:100%;
padding:12px 25px;
width:320px;
background:#DDD;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
border-radius: 10px; /* CSS3 */
*/
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
以下のような文字列は、widthを超えても折り返されず、突き抜ける仕様がある。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
理由は、英文は単語毎にスペース区切りで折り返すが、スペースがない為に長い単語とみなされててしまうから。
期待通りに動かないことを覚えておくとよい。
以下のCSSプロパティを追加する。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
li {
list-style:none;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
以下、2点の条件を満たす必要があります。
1. *.htmlファイル(テキストファイル)自体がUTF-8で保存されていること。。
(DreamweaverでHTMLページを新規作成(Ctrl+N)した際はこの条件を満たしていました。)
*.txtファイルを新規作成してから、*.htmlにリネームする手順をとった場合は、テキストエディタによっては条件を満たしません。
Shift JISで保存されているテキストファイルに、UTF-8で使われるような特殊文字を保存すると、文字化けして ? のようになります。
そもそもファイルフォーマット上で特殊文字を保存できないということです。
2. HTML文書内のmetaタグで文字エンコーディングを指定していること。
以下のように宣言する必要があります。
(DreamweaverでHTMLページを新規作成(Ctrl+N)した際はこの条件を満たしていました。)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0
\css\nav.css を外部に準備したのにCSSが動作しない場合は、<head>タグ内に宣言するのを忘れている、または記述にミスがあるかどうかをチェックしています。
以下のHTMLコードでは、nav.cssは動作しない。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!–CSS–>
<link href=”css/common.css” rel=”stylesheet” type=”text/css” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<!– InstanceBeginEditable name=”head” –>
<!– InstanceEndEditable –>
</head>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
以下のHTMLコードでは、nav.cssの記述を加えたので動作する。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!–CSS–>
<link href=”css/common.css” rel=”stylesheet” type=”text/css” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<!– InstanceBeginEditable name=”head” –>
<link href=”css/nav.css” rel=”stylesheet” type=”text/css” />
<!– InstanceEndEditable –>
</head>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
以下、覚書
・一般的なブラウザのデフォルトフォントサイズは16pxとなる。(フォントサイズ指定が無い場合の基準値)
・ピクセル指定の際は絶対値となる。
例)font-size:20px; ←20ピクセルが表示される
・パーセント指定の際は相対値となる。(継承元と乗算値に注意しなくてはならない)
例)font-size:125%; ←16px×125%=20ピクセルが表示される
・昔のIEはpx指定のWebページは文字の拡大/縮小ができない。(IE11は文字拡大/縮小が可能でした。IE9以前ができないようです。)
・HTML内にフォントサイズのCSSを記述してはいけない。(見つけ次第CSSへ移動すること)
[参考]
http://gelsol.sub.jp/wp/?p=136
> 基準サイズとなるフォントサイズを指定し、これを基準に相対的に大きさの指定をします。一般的に font-size プロパティを指定しないときのブラウザのデフォルトフォントサイズは 16px です。
> 16px × 0.63 = 10.08px
> 16px × 0.69 = 11.04px
> 16px × 0.75 = 12.00px
> 16px × 0.82 = 13.12px
> 16px × 0.88 = 14.08px
> 16px × 0.94 = 15.04px
> 16px × 1.00 = 16.00px
http://owlish.jp/web/font_size_adjust.html
> CSS px CSS % CSS pt FONT size
> 6px 40% 4.5pt
> 8px 50% 6pt
> 9px 55% 6.75pt
> 10px 65% 7.5pt size=”1″
> 11px 69% 8.25pt
> 12px 75% 9pt
> 13px 82% 10pt size=”2″
> 14px 88% 10.5pt
> 15px 94% 11.25pt
> 16px 100% 12pt size=”3″
> 17px 107% 12.75pt
> 18px 113% 13.5pt size=”4″
> 19px 119% 14.5pt
> 20px 125% 15pt
> 22px 138% 16.5pt
> 24px 150% 18pt size=”5″
> 26px 163% 19.5pt
> 28px 175% 21pt
> 30px 188% 22.5pt
bugfix等でCSSを修正したいが、*.css ファイルの変更は最小限に止めたいことがあります。
HTML内に記述するCSSのほうが優先順位が高いことを利用します。
例)
↓↓↓↓↓↓↓↓↓↓
<link href=”css/*.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
<!–
#mainImg {
height:0px;
}
–>
</style>
</head>
<body>
↑↑↑↑↑↑↑↑↑↑
・送信ボタンも含めて<form></form>で挟み込む必要があります。
・body直下に置いてページ全体を大きく挟み込むのは問題ありません。
・table、tr、th、th、ul、liの隙間に入れてはいけません。
・タグ上の整合性が取れてる必要があります。
例)
×<div><form></div></form>
○<div><form></form></div>
○<form><div></div></form>
inputタグにpaddingは利きません。
marginは利きます。
理由はinputタグがインラインブロック要素だから。
inputタグを縦に複数行並べてパディング調整する時はdiv、p、liあたりを使います。
spanタグはインライン要素なので、margin、paddingは利かないと思ったほうがよいです。
[参考]
http://mozilla.gr.jp/standards/webtips0015.html
フッターの上部に背景画像を置きたいことがあります。
例)フッターを地面に見立てて樹木の画像を配置したい。
例)フッターを道路に見立てて自転車の画像を配置したい。
以下のようにしても背景画像はしっかり表示されません。
divの外にはみ出た画像は見切れてしまいます。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【以下、HTML】
<div id=”footer”>~ここにフッターが入る~</div>
【以下、CSS】
#footer {
background:url(image/background_bicycle.png) no-repeat center -80px;
background-color: #555;
padding:15px 0px 15px 0px;
height: 50px;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
そこで以下のようにします。
背景画像がしっかり表示されるようになります。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
【以下、HTML】
<div id=”footer_wrap”>
<div class=”background”></div>
<div id=”footer”>~ここにフッターが入る~</div>
</div>
【以下、CSS】
.background{
background:url(image/background_bicycle.png) no-repeat center 0px;
height:80px;
}
#footer {
background-color: #555;
padding:15px 0px 15px 0px;
height: 50px;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
Practice is better than precept.