いわゆる管理者。無制限状態。なんでも出来る
編集者。ダッシュボード、投稿、管理（アップロード使用可）、ブログロール、プロフィールが操作可能
投稿者。ダッシュボード、投稿、管理（アップロード使用可）、プロフィールが操作可能
寄稿者。ダッシュボード、投稿、管理（アップロード使用不可）、プロフィールが操作可能
購読者。ダッシュボードとプロフィールが操作可能
overflow:autoを使うべし
overflow-yはIEの独自プロパティなのでボックスの高さを固定してもOperaなどではスクロールバーが出ない。
# safe_mysqld &
以上（様々なオプションはある：今回は省略）
このCSSはファイル名の通り、基本設定となる。
/********************************************************
* body
*/
body {
text-align: center;
}
#container {
width: 870px;
margin: 0 auto;
text-align: left;
background-color: #FFFFFF;
}
/********************************************************
* fundamental preferences
*/
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
h3 {
clear: both;
}
/********************************************************
* class for layout
*/
.mb0em {
margin-bottom: 0px;
}
.mb05em {
margin-bottom: 0.5em;
}
.mb1em {
margin-bottom: 1em;
}
.mb2em {
margin-bottom: 2em;
}
.mb3em {
margin-bottom: 3em;
}
.ta-center {
text-align: center;
}
.ta-left {
text-align: left;
}
.ta-right {
text-align: right;
}
.fwb{
font-weight:bold;
}
.fs08em {
font-size: 0.8em;
}
このCSSファイルはファイル名の通り、活字づら（フォント）設定を定義したファイルである。フォントに関する設定はこにファイルで一元管理する。
※但し、下記はWindows用の設定（Macは入っているフォントが違うので異なった記述が必要となる）
@charset "UTF-8";/*CSSドキュメントの文字コードを記述（フォント名にはマルチバイト文字が含まれるため）*/
/********************************************************
* color, type face, line height
*/
h1,h2,h3,h4,h5,h6,p,dt,dd,table,address {
font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
line-height: 1.7;
color: #444444;
}
h2 {
font-size: 0.8em;
line-height: 1.2;
}
h3 {
font-size: 0.9em;
}
h4 {
font-size: 0.8em;
line-height: 1.2;
}
code {
font-family: "メイリオ", "ＭＳ ゴシック", "Osaka－等幅";
}
em {
font-weight: bold;
padding: 3px 3px;
}
address {
font-style: normal
}
p {
text-align: justify;
text-justify: inter-ideograph;
margin-bottom: 0.5em;
}
ul {
list-style-type: none;
}
li {
line-height: 1.2;
color: #666666;
}
/********************************************************
* font-size
*/
p,dt,dd,address {
font-size: 0.8em;
}
th,td {
font-size: 0.8em;
}
li {
font-size: 0.8em;
}
li li {
font-size: 1em;/*liが複数回入れ子になってる場合フォントサイズが小さくなってしまうのを防ぐ*/
}
正直macは良く分からん。
/********************************************************
* color, type face, line height
*/
h2,h3,h4,p,li,dt,dd,table,address {
font-family: "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
}
code{
font-family: "Osaka－等幅";
}
このファイルでリンクの設定を一元管理する。注意しなくてはいけないのは、疑似クラスを指定する順序だ。これを間違うと上手く反映されないことがある。
但し、定番といえる記述は少なくサイトに合わせたデザインに下記を変更する。
/********************************************************
* link
*/
a:link {
color:#5aa5de;
text-decoration:underline;
}
a:visited {
color:#5aa5de;
text-decoration:underline;
}
a:active {
color:#f96400;
text-decoration:underline;
}
a:hover {
color:#f96400;
text-decoration:underline;
}
このファイルにはサイトごとに特色のあるソースコードが書きこまれる。
アウトローなIE6用のCSSを記述する。
CSSファイルを読み込むCSSファイルをを読み込む為のファイルである。
@importを使うとIE4には読み込まれないような処理となる。
@import "include2.css";
このCSSファイルはmac用以外を除く、上記CSSファイルを読み込む為のファイルである。
@import url(“/*ファイルのパス*/”);を使うとIE4.5には読み込まれないような処理となる。
@import url("base.css");
@import url("typeface.css");
@import url("link.css");
@import url("base.css");
以下のような順序で、HTMLファイルからCSSが読み込まれる。
<link href="css/part1.css" rel="stylesheet" type="text/css" media="all" /><!--外部CSSファイルの適用（NN4xをはじく）-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<script type="text/javascript">
//macの場合はlinkタグが書き出される
if(navigator.userAgent.indexOf("Mac") >= 0){
document.write('<link href="css/mac.css" rel="stylesheet" type="text/css" media="all" />');
}
</script>
#menu {
position:fixed;
top:100px;
}
と記述すればブラウザの内枠上から100pxで表示される
但し、IE6では全く効果が無い
<!--[if lt IE 7.0]>
<style type="text/css">
body {
filter:expression('');
}
#menu {
position:expression('absolute');
top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');
}
</style>
<![endif]-->
とhead内へ追記する
document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTopの部分は互換モードと標準モード時での違いを吸収するための記述であるIE6を捨てるというのも立派な選択肢の一つとして取っておく事を勧める。
なぜならばクロスブラウザ対策は思ったよりもコストがかかり、それに見合った効果が得られるとは必ずしも言えないからである。
XMLHttpRequestを使って、他ドメインのサーバーと通信は出来ない。
どのようにすれば他サーバーからデーターを取得できるのか？
今回は2番を使う。
（スクリプト書き換え用）
<script type="text/javascript" charset="utf-8" id="import"></script>
（下記はテスト用でアラート）
function callBackFunction(JSON){
alert('test');
}
（下記はロード時に実行）
window.onload = function(){
var originalScriptNode = document.getElementById('import');
var newScriptNode = document.createElement('script');
newScriptNode.src = '/*ここにスクリプトのsrc属性値を記入（他ドメイン）*/';
newScriptNode.charset = 'utf-8';
newScriptNode.id = 'import';
originalScriptNode.parentNode.replaceChild(newScriptNode, originalScriptNode);
}
（→このデータを受け取った瞬間にcallBackFunctionが実行される）
callBackFunction(/*引数*/);
つまり、scriptタグのsrc属性には他ドメインも可能という特性を利用している
よく出てくるサービス名や機器名。。。皆さんも読めないものが沢山ありますよね！？下記、参考にしてみてください～
訪問者の検索ワードを調べて、以下を追記しまっす！
クリックするとIE7、IE6、Operaでは「5」、Firefox、Safari3、NS7.1では「7」と表示されます
functionをfunctionの中に書くことは可能だ。しかし、function文はカレントスコープの先頭まで巻き取りが行われる。さらに、JavaScriptにはブロックスコープが存在しないので以下のスクリプトは同名の関数を2回宣言したことになる。
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('2007101901button').onclick = function(){
var bool = true;
var num = 6;
if(bool){
function func(num){
num++;
return num;
}
num = func(num);
}
else{
function func(num){
num--;
return num;
}
num = func(num);
}
document.getElementById('2007101901num').value = num;
}
}
</script>
</head>
<body>
<form>
<input type="button" value="click" id="2007101901button" />
<input type="text" size="2" id="2007101901num" />
</form>
</body>
以下のように関数リテラル（式）を使用する。
var func = function(num){
num--;
return num;
}
下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。
| 三角形 | 面積 | 公式 |
|---|---|---|
| 四角形 | 面積 | 公式 |
function figure(NAME){
this.name = NAME;
this.alert = function(){
alert(this.name);
}
}
function triangle(){
this.getArea = function(){
var num1 = parseInt(document.forms["area"].elements["num1"].value);
var num2 = parseInt(document.forms["area"].elements["num2"].value);
return (num1 * num2 / 2);
}
}
function square(){
this.getArea = function(){
var num1 = parseInt(document.forms["area"].elements["num1"].value);
var num2 = parseInt(document.forms["area"].elements["num2"].value);
return (num1 * num2);
}
}
triangle.prototype = new figure("底辺×高さ÷2");
/*この記述によりfigureクラスのメソッドがtriangleクラスのインスタンスでも使用可能になる*/
square.prototype = new figure("縦×横");
/*この記述によりfigureクラスのメソッドがsquareクラスのインスタンスでも使用可能になる*/
var tri = new triangle();
var sqr = new square();
<form action="#" name="area"> 底辺の長さ <select name="num1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> 高さ <select name="num2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </form> <table> <tr> <th>三角形</th> <td><a href="javascript:alert(tri.getArea());">面積</a></td> <td><a href="javascript:tri.alert();">形</a></td> </tr> <tr> <th>四角形</th> <td><a href="javascript:alert(sqr.getArea());">面積</a></td> <td><a href="javascript:sqr.alert();">形</a></td> </tr> </table>
人にもよるがcallを使うよりも直感的にスクリプトが書ける