「HTML/CSS」カテゴリーアーカイブ

HTML/CSSに関する記事です。

[HTML/CSS]CSSのコメントアウトの注意点

コメントアウトの中でコメントアウトを使うと期待通りに動きません。
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 */
*/

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

[HTML/CSS]divの中の文字列がwidthを超えて突き抜ける問題について

以下のような文字列は、widthを超えても折り返されず、突き抜ける仕様がある。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

 

理由は、英文は単語毎にスペース区切りで折り返すが、スペースがない為に長い単語とみなされててしまうから。
期待通りに動かないことを覚えておくとよい。

HTMLページをUTF-8対応で作成する条件について

以下、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が動作しない時のチェックポイント

\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>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

[HTML/CSS]フォントサイズのピクセル指定とパーセント指定の性質の違いについて

以下、覚書
・一般的なブラウザのデフォルトフォントサイズは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

[HTML/CSS]外部読み込みの *.css ファイルに変更を加えずに、cssを修正したいときの対処

bugfix等でCSSを修正したいが、*.css ファイルの変更は最小限に止めたいことがあります。
HTML内に記述するCSSのほうが優先順位が高いことを利用します。

例)
↓↓↓↓↓↓↓↓↓↓
<link href=”css/*.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
<!–
#mainImg {
height:0px;
}
–>
</style>
</head>
<body>
↑↑↑↑↑↑↑↑↑↑

[HTML/CSS]formタグの使い方

・送信ボタンも含めて<form></form>で挟み込む必要があります。

・body直下に置いてページ全体を大きく挟み込むのは問題ありません。

・table、tr、th、th、ul、liの隙間に入れてはいけません。

・タグ上の整合性が取れてる必要があります。
例)
×<div><form></div></form>
○<div><form></form></div>
○<form><div></div></form>

[HTML/CSS]inputタグとmargin、paddingについてのメモ

inputタグにpaddingは利きません。
marginは利きます。
理由はinputタグがインラインブロック要素だから。

inputタグを縦に複数行並べてパディング調整する時はdiv、p、liあたりを使います。
spanタグはインライン要素なので、margin、paddingは利かないと思ったほうがよいです。

[参考]
http://mozilla.gr.jp/standards/webtips0015.html

[HTML/CSS] フッターの上部置いた背景画像が見切れてしまう時の対処

フッターの上部に背景画像を置きたいことがあります。
例)フッターを地面に見立てて樹木の画像を配置したい。
例)フッターを道路に見立てて自転車の画像を配置したい。

 

以下のようにしても背景画像はしっかり表示されません。
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;
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑