HTML5&CSS3 レッスンブック

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "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(http://fonts.googleapis.com/ 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

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

More information

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ 日 本 情 報 処 理 検 定 協 会 主 催 1 級 編 (Expression Web 4 対 応 ) 2015 年 4 月 日 本 情 報 処 理 検 定 協 会 初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information