HTML5&CSS3 レッスンブック

Transcription

1 STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの 背 景 を ライム 色 に 設 定 角 丸 や 影 を 使 用 しない フッターの 背 景 を 暗 い 緑 色 に 設 定 全 体 を 画 像 に 合 わせた 横 幅 (640ピクセル)に 設 定 関 連 記 事 へのリンクなどの 背 景 を 黄 緑 色 に 設 定 ナビゲーションメニューにカーソルを 重 ねたときの 表 示 記 事 の 概 要 にカーソルを 重 ねたときの 表 示 1

2 CSS SOURCE style.css /* STEP 7-6 url( css?family=bowlby+one); Google Fontsの Bowlby One を 使 用 するための 設 定 article * article time {background-color: inherit} {display: inline-block} スマートフォン 用 の 設 定 (STEP 7-4の 4 と 同 じ 設 定 ) body {font-family: ' メイリオ ', 'Hiragino Kaku Gothic Pro', sans-serif; background-color: #1e4100; margin: 0} フォントの 設 定 (STEP 1-5の 3 ~ 6 と 同 じ 設 定 ) ページの 背 景 を 暗 い 緑 色 (フッター 部 分 と 同 じ 色 )に 指 定 ページまわりの 余 白 を 削 除 h1 {font-weight: normal; font-size: 60px; margin-top: 40px; margin-bottom: 40px} タイトルの 文 字 を 標 準 の 太 さに 設 定 タイトルの 文 字 サイズを60ピクセルに 指 定 タイトルの 上 の 余 白 サイズを40ピクセルに 指 定 タイトルの 下 の 余 白 サイズを40ピクセルに 指 定 p {line-height: 1.5} 文 章 の 行 の 高 さを 指 定 (STEP 1-5の 2 と 同 じ 設 定 ) /* ヘッダー */ header {background-color: #ffffff; padding-top: 20px; padding-bottom: 15px; zoom: 1} ヘッダーの 背 景 を 白 色 に 指 定 ヘッダー 内 の 上 の 余 白 サイズを20ピクセルに 指 定 ヘッダー 内 の 下 の 余 白 サイズを15ピクセルに 指 定 IE7 用 の 設 定 (STEP 7-3の 2 と 同 じ 設 定 ) header h1 {font-family: 'Bowlby One', cursive; font-size: 38px; line-height: 40px; width: 640px; margin-top: 0; margin-bottom: 0; サイト 名 のフォントを Bowlby One に 指 定 サイト 名 の 文 字 サイズを38ピクセルに 指 定 サイト 名 の 行 の 高 さを40ピクセルに 指 定 サイト 名 をマークアップした<h1>の 構 成 するボックスの 横 幅 を640ピクセルに 指 定 ボックスの 上 下 の 余 白 サイズを0に 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 header h1 a {text-decoration: none; display: block; width: 200px} header h1 a:hover {color: #000000} サイト 名 の サイト 名 をマークアップした<a>でブロックボックスを 構 成 ボックスの 横 幅 を200ピクセルに 指 定 これにより サイト 名 の FOREST の 後 に 改 行 が 入 ります サイト 名 にカーソルを 重 ねたときの 文 字 の 色 を 黒 色 に 指 定 header h1 img {display: none;} ロゴ 画 像 を 非 表 示 に 指 定 /* 記 事 */ article {background-color: #daed2b; overflow: hidden} 記 事 の 背 景 をライム 色 に 指 定 <article>の 中 身 をボックスに 含 める 設 定 (STEP 3-3の 5 と 同 じ 設 定 ) 2

3 article > * {width: 640px; <article>の 中 身 の 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 /* フッター */ footer {background-color: #1e4100; color: #ffffff; padding-top: 30px; padding-bottom: 30px} フッターの 背 景 を 暗 い 緑 色 に 指 定 フッターの 文 字 を 白 色 に 指 定 フッター 内 の 上 の 余 白 サイズを30ピクセルに 指 定 フッター 内 の 下 の 余 白 サイズを30ピクセルに 指 定 footer small {display: block; width: 640px; コピーライトをマークアップした<small>でブロックボックス を 構 成 し 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 /* 画 像 */ figcaption {text-align: center} キャプションを 中 央 揃 えに 指 定 /* リンク */ a {color: #000000} リンクの 文 字 を 黒 色 に 指 定 a:hover {color: #ff8800} リンクにカーソルを 重 ねたときの 色 をオレンジ 色 に 指 定 a img {border: none} リンクを 設 定 した 画 像 のまわりに 罫 線 を 表 示 しないように 指 定 /* 関 連 記 事 へのリンク */ aside {width: auto; padding-top: 20px; padding-bottom: 20px; background-color: #b1c500; margin-top: 40px} <aside>でマークアップした 部 分 の 横 幅 を auto に 指 定 <aside>の 上 の 余 白 サイズを20ピクセルに 指 定 <aside>の 下 の 余 白 サイズを20ピクセルに 指 定 <aside>の 背 景 を 黄 緑 色 に 指 定 <aside>の 上 の 余 白 サイズを40ピクセルに 指 定 aside > * {width: 640px; <aside>の 中 身 の 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 aside h1 {font-family: 'Bowlby One', cursive; font-size: 16px; color: #425831; margin-top: 0; margin-bottom: 0} 見 出 しのフォントを Bowlby One に 指 定 見 出 しの 文 字 サイズを16ピクセルに 指 定 見 出 しの 色 を 緑 色 に 指 定 見 出 しの 上 の 余 白 サイズを0に 指 定 見 出 しの 下 の 余 白 サイズを0に 指 定 aside ul {list-style-type: none; padding-left: 0; margin-top: 5px; margin-bottom: 0} リストマークを 削 除 リストの 左 側 の 余 白 を 削 除 リストの 上 の 余 白 サイズを5ピクセルに 指 定 リストの 下 の 余 白 サイズを0に 指 定 3

4 aside li {display: inline} <li>がインラインボックスを 構 成 するように 指 定 aside a {text-decoration: none; font-size: 14px; text-align: center; padding: 10px; border: solid 1px #ffffff; display: inline-block} リンクの 文 字 サイズを14ピクセルに 指 定 リンクを 中 央 揃 えに 指 定 リンクのまわりの 余 白 サイズを10ピクセルに 指 定 リンクのまわりに 太 さ1ピクセルの 白 色 の 罫 線 を 表 示 リンクがインラインブロックボックスを 構 成 するように 指 定 aside a:hover {background-color: orange; color: #000000} リンクにカーソルを 重 ねたときの 背 景 をオレンジ 色 に 指 定 リンクにカーソルを 重 ねたときの 文 字 を 黒 色 に 指 定 /* ナビゲーションメニュー */ nav ul {list-style-type: none; margin-top: 0px; margin-bottom: 0; padding-left: 0; font-size: 0} ナビゲーションメニューのリストマークを 削 除 ナビゲーションメニューのまわりの 余 白 を 削 除 余 計 な 余 白 を 入 れないための 設 定 (STEP 4-4の 7 と 同 じ 設 定 ) nav li {display: inline; font-size: 12px; padding-left: 6px} <li>がインラインボックスを 構 成 するように 指 定 リンクの 文 字 サイズを12ピクセルに 指 定 リンクの 間 隔 を6ピクセルに 指 定 nav nav a {width: 640px; margin-right: auto; text-align: right; margin-top: -85px} font-weight: bold; text-decoration: none; display: inline-block; width: 90px; padding-top: 32px; padding-bottom: 32px; text-align: center; background-color: #ff7f50} ナビゲーションメニューの 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 ナビゲーションメニューを 右 側 に 配 置 ナビゲーションメニュー 上 の 余 白 サイズを 調 節 してサイト 名 と 並 べて 表 示 リンクの 文 字 を 白 色 に 指 定 リンクの 文 字 を 太 字 に 指 定 リンクがインラインブロックボックスを 構 成 するように 指 定 リンクの 横 幅 を90ピクセルに 指 定 リンクの 上 の 余 白 サイズを32ピクセルに 指 定 リンクの 下 の 余 白 サイズを32ピクセルに 指 定 リンクの 文 字 を 中 央 揃 えに 指 定 リンクの 背 景 をピンク 色 に 指 定 nav a:hover background-color: #ffaa00} リンクにカーソルを 重 ねたときの 文 字 を 白 色 に 指 定 リンクにカーソルを 重 ねたときの 背 景 をオレンジ 色 に 指 定 /* 記 事 の 一 覧 ページ */ #posts section {background-color: #daed2b; overflow: hidden} 記 事 の 一 覧 の 背 景 をライム 色 に 指 定 <section>の 中 身 をボックスに 含 める 設 定 #posts section > * {width: 640px; <section>の 中 身 の 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 4

5 #posts article {background-color: #b1c500; margin-bottom: 20px; -webkit-text-size-adjust: 100%} 記 事 の 概 要 の 背 景 を 黄 緑 色 に 指 定 記 事 の 概 要 の 下 の 余 白 サイズを20ピクセルに 指 定 スマートフォン 用 の 設 定 (STEP 7-4の 5 と 同 じ 設 定 ) #posts article img {float: left; margin-right: 20px;} 画 像 を 左 側 に 配 置 画 像 の 右 の 余 白 サイズを20ピクセルに 指 定 #posts article h1 {font-size: 24px; margin-top: 10px; margin-right: 20px; margin-bottom: 0} 記 事 のタイトルの 文 字 サイズを24ピクセルに 指 定 記 事 のタイトルの 上 の 余 白 サイズを10ピクセルに 指 定 記 事 のタイトルの 右 の 余 白 サイズを10ピクセルに 指 定 記 事 のタイトルの 下 の 余 白 サイズを0に 指 定 #posts article p {font-size: 12px; margin-right: 20px;} 概 要 文 の 文 字 サイズを12ピクセルに 指 定 概 要 文 の 右 の 余 白 サイズを20ピクセルに 指 定 #posts time {font-size: 12px; color: #ffffff; background-color: #1e4100; padding: 2px 20px 2px 20px} 投 稿 日 時 の 文 字 サイズを12ピクセルに 指 定 投 稿 日 時 の 文 字 を 白 色 に 指 定 投 稿 日 時 の 背 景 を 暗 い 緑 色 に 指 定 投 稿 日 時 のまわりの 余 白 サイズを 指 定 #posts article a {text-decoration: none; display: block; overflow: hidden} リンクがブロックボックスを 構 成 するように 指 定 <a>の 中 身 をボックスに 含 める 設 定 #posts article a:hover {color: #000000; background-color: #00b9c5} リンクにカーソルを 重 ねたときの 文 字 を 黒 色 に 指 定 リンクにカーソルを 重 ねたときの 背 景 を 緑 色 に 指 定 /* トップページ */ #top header {margin-bottom: 0} ヘッダーの 下 の 余 白 を 削 除 #top section {background-color: #daed2b; padding-top: 60px; padding-bottom: 40px} <section>の 背 景 をライム 色 に 指 定 <section> 内 の 上 の 余 白 サイズを60ピクセルに 指 定 <section> 内 の 下 の 余 白 サイズを40ピクセルに 指 定 #top section > * {width: 640px; <section>の 中 身 の 横 幅 を640ピクセルに 指 定 左 右 の 余 白 サイズを auto にして 画 面 の 中 央 に 配 置 #photo h1 font-size: 150px; font-family: 'Bowlby One', cursive; line-height: 1; margin-top: 0; margin-bottom: 20px; text-shadow: 0px 0px 5px #000000;} サイト 名 の 文 字 を 白 色 に 指 定 サイト 名 の 文 字 サイズを150ピクセルに 指 定 サイト 名 のフォントを Bowlby One に 指 定 サイト 名 の 行 の 高 さを 指 定 サイト 名 の 上 の 余 白 サイズを0に 指 定 サイト 名 の 下 の 余 白 サイズを20ピクセルに 指 定 サイト 名 の 文 字 に 影 を 付 けるように 指 定 #photo p font-size: 20px; キャッチフレーズの 文 字 を 白 色 に 指 定 キャッチフレーズの 文 字 サイズを20ピクセルに 指 定 5

6 font-weight: bold; float: right; margin: 0; text-shadow: 0px 0px 5px #000000} キャッチフレーズの 文 字 を 太 字 に 指 定 キャッチフレーズを 右 に 配 置 キャッチフレーズのまわりの 余 白 を 削 除 キャッチフレーズの 文 字 に 影 を 付 けるように 指 定 #photo a {text-align: center; background-color: #72f7ff; background-image:url(data:image/svg+xml;b ase64,phn2zyb4bwxucz0iahr0cdovl3d3dy53m 略 VpZ2h0PSIxIiBmaWxsPSJ1cmwoI2cyMjgpIi AvPgo8L3N2Zz4=); background-image: -webkit-gradient( linear, left top, left bottom, from(#72f7ff), to(#00b9c5)); background-image: -webkit-linear-gradient( top, #00b9c5 100%); background-image: linear-gradient( to bottom, #00b9c5 100%); padding: 10px 40px 10px 40px; color: #000000; font-weight: bold; text-decoration: none} リンクボタンの 文 字 を 中 央 揃 えに 指 定 リンクボタンの 背 景 を 青 色 に 指 定 IE9 用 のSVGグラデーションの 設 定 古 いiOS/Android 用 のグラデーションの 設 定 ios/android/safari 用 のグラデーションの 設 定 グラデーションの 設 定 リンクボタンの 内 側 の 余 白 サイズを 指 定 リンクボタンの 文 字 を 黒 色 に 指 定 リンクボタンの 文 字 を 太 字 に 指 定 #message {margin-top: 40px} 紹 介 文 の 上 の 余 白 サイズを40ピクセルに 指 定 /* アバウトページ */ table, th, td {border: solid 1px #333333} テーブルの 罫 線 を 指 定 table {border-collapse: collapse; margin-top: 30px; margin-bottom: 30px;} テーブルの 罫 線 を 重 ねるように 指 定 テーブルの 上 の 余 白 サイズを30ピクセルに 指 定 テーブルの 下 の 余 白 サイズを30ピクセルに 指 定 th, td {padding: 10px 20px 10px 20px} セルの 内 側 の 余 白 サイズを 指 定 th {width: 150px; background-color: #9cd31a; text-align: left} 見 出 しセルの 横 幅 を150ピクセルに 指 定 見 出 しセルの 背 景 を 緑 色 に 指 定 見 出 しセルの 中 身 を 左 揃 えに 指 定 td {width: 450px; background-color: #fdffc9} データセルの 横 幅 を450ピクセルに 指 定 データセルの 背 景 を 薄 い 黄 色 に 指 定 caption {font-weight: bold; background-color: #b1c500; キャプションの 文 字 を 太 字 に 指 定 キャプションの 背 景 を 黄 緑 色 に 指 定 6

7 padding: 5px; margin-bottom: 10px} キャプション 内 の 余 白 サイズを5ピクセルに 指 定 キャプションの 下 の 余 白 サイズを10ピクセルに 指 定 /* お 問 い 合 わせページ */ input, textarea {display: block; background-color: #ffffff} <input>と<textarea>がブロックボックスを 構 成 するように 指 定 入 力 欄 の 背 景 を 白 色 に 指 定 input {width: 400px} <input>の 横 幅 を400ピクセルに 指 定 input[type="submit"] {width: 200px; background-color: #137f86; background-image: -webkit-gradient( linear, left top, left bottom, from(#72f7ff), to(#137f86)); background-image: -webkit-linear-gradient( top, #137f86 100%); background-image: linear-gradient( to bottom, #137f86 100%); color: white; border: solid 1px #aaaaaa; padding-top: 10px; padding-bottom: 10px} 送 信 ボタンの 横 幅 を200ピクセルに 指 定 送 信 ボタンの 背 景 を 青 色 に 指 定 古 いiOS/Android 用 のグラデーションの 設 定 ios/android/safari 用 のグラデーションの 設 定 グラデーションの 設 定 送 信 ボタンの 文 字 を 白 色 に 指 定 送 信 ボタンを 太 さ1ピクセルのグレーの 罫 線 で 囲 むように 指 定 送 信 ボタンの 上 の 余 白 サイズを10ピクセルに 指 定 送 信 ボタンの 下 の 余 白 サイズを10ピクセルに 指 定 textarea {width: 600px; height: 120px} <textarea>の 横 幅 を600ピクセルに 指 定 <textarea>の 高 さを120ピクセルに 指 定 form {margin-bottom: 30px} 投 稿 フォームの 下 の 余 白 サイズを30ピクセルに 指 定 7