CSSの雛形

2010/06/30

CSSファイルの情報、外部CSSの読み込み、各要素の初期化という感じ。

初期化では、あらかじめ設定されている内容を消すようにしてる。

具体的には、デザイン的な使い勝手でとりあえず見出し(<h1>とか)タグ、<p>タグのmarginとかをなくす。
<table>タグ類はpaddingとかをこれもまたデザイン的な使い勝手でなくす。
<form>のmarginもなくしておきたいけど使う頻度が少ないからいれてはいない。

アクセシビリティでは斜体文字は見づらいというので<em>のfont-styleはノーマルにしてる。

リンク画像に線がつくのはデザイン的に嫌だから<img>のborderはなくす。

で、こういった内容は下記。

@charset “Shift_JIS”;

/*
information{
ファイル名 : /css/hogehoge.css;
概要 : このCSSファイルはhogehogeのCSS;
サイト名 : hogehoge;
URL : http://tips.recatnap.info/
コピーライト : Copyright(c)2010 hogehoge Co.,Ltd. All Rights Reserved;
}
*/

/* —-+—-+—-+—-+—-+—-+—-+—- */
@import url(“./hogehoge.css”);
/* —-+—-+—-+—-+—-+—-+—-+—- */

body {
font-family: “MS Pゴシック”, “Osaka”;
font-size:small;
margin:0;
padding:0;
background-color:#ffffff;
color:#000000;
}
img{ border:none; }
em{ font-style:normal; }
p{ margin:0; }
table{ border-collapse:collapse; margin:0; }
th{ text-align:left; vertical-align:top; padding:0; }
td{ text-align:left; vertical-align:top; padding:0; }
caption{ text-align:left; }

h1,h2,h3,h4,h5{ font-size:100%; font-weight:normal; margin:0; }

a:link{ color:#0000ff; }
a:visited{ color:#8080ff; }
a:hover{ color:#ff0000; }
a:active{ color:#ff0000; }

これを保存するときはShift_JIS。
違う文字コードを使う場合は下記を任意のコードに変更する。

@charset “Shift_JIS”;

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。