先週勉強したCSSの復習（後半のPHPテンプレート作成のウォームアップとして）

1. CSSのみで制御するフレキシブルな横並びの復習Web Designing 11月号 sample-06より

◆　幅が600px以下に縮小してもtableがカラム落ちしないように横並びが維持されるCSS

@media(max-width:600px){
  .mod-flexNav ul{
    font-size: 90%;
    display:table;
    width: 100%;
  }
  .mod-flexNav li{
    vertical-align: middle;
    display: table-cell; ← ここが重要ですヨ!
    width:auto;
    height: 1px;
    float:none; /*floatがあると強制的にblockになってしまうので解除*/
  }
  .mod-flexNav a{
  padding-left:14px;
  }
}



2. 今回使用するタカハシ先生提供のlesson.html

PHPの学習のベースとなるhtmlについての説明　lesson.html

◆ 上述と同じようにtable-cellが使用されています。

◆ マウスhoverすると、transitionが適用されて、hover状態に変化しています。

nav ul {
    display: table;
}
nav li {
    display: table-cell; ← ここで使ってます
    list-style: none outside none;
}
nav a {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #999999;
    display: block;
    padding: 0.5em 1em;
    text-align: center;
    transition: all 0.4s ease 0s; ← 全ての要素を　0.4秒間で　ease効果で　delayなしで開始
}
nav a:hover {
    background: none repeat scroll 0 0 #333333;
    box-shadow: 0 0 0.5em #DDDDDD inset;
    color: #999999;
}



3. 豆知識 transition-timing-function

◆　変化する速度の種類を指定できます

ease --------- ゆっくり変化を始め、途中で加速し、減速して終わる
linear ------- 一定の速度で変化する
ease-in ------ ゆっくり変化を始め、その後加速して終わる
ease-out ----- 高速で変化を始め、減速しながら終わる
ease-in-out -- ゆっくり変化を始め、徐々に加速し、減速しながら終わる

ワードプレスで外部JS、cssを読み込ませる方法：実践編

1. かおりんごさんのWordPress Freyja's Ramblingsで実践

どのように導入したか、経緯は岸野さんのWordPressにアクセスしてください。 Freyja's Ramblings

かおりんごさんよろしく！

PHPで簡単なテンプレートを作ってみよう

1. lesson.htmlをlesson.phpに変更し、サーバーにアップする
2. lesson.phpのnav部分 page1.htmlをpage1.phpに変更
3. page1.phpを作成

include_once("header.php");でヘッダー部分を読み込む

/html終了タグまでがpage1.phpとなる。

4. header.phpを各ページの共通のヘッダーとして部品化

html開始タグまでがヘッダー部分となる。

5. navのpage1をクリックすると、header.phpも読み込まれた形で表示される
6. 以降は次回に続きます〜

その他・連絡等

次回は11月16日（金）18:00〜22:00 柴崎学習館3階第二和室