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( 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

Microsoft Word - 2016メディプロ1HTML統合版v1

Microsoft Word - 2016メディプロ1HTML統合版v1 2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な

More information

スライド 1

スライド 1 株 式 会 社 アジタス コーディングレギュレーション 改 訂 履 歴 初 版 2009/10/01 一 部 修 正 2010/12/06 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2011/05/02 対 応 ブラウザ 修 正 2013/04/12 文 言 内 容 一 部 修 正 2014/02/25 対 応 メーラーの 追 加 2014/04/08 メールアドレスの

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ 株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に CSS の 主 なプロパティ プロパティ 説 明 color 色 の 設 定 font フォントの 一 括 設 定 font-size フォントサイズの 設 定 font-family フォントの 種 類 の 設 定 font-style 文 字 を 斜 体 にする text-align 位 置 の 設 定 text-decoration 文 字 装 飾 の 設 定 vertical-align 文

More information

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 更新日 : 2015/12/17 FS2 サジェストリンク設定マニュアル キーワードを入力しながら リアルタイムに商品画像が現れる 株式会社フューチャーショップ 営業時間 : 平日 9:30~18:00 サポート TEL:06-6485-6485 1.FS サジェストリンクについて FS2 サジェストリンクとは FS2 サジェストリンク は サイト内検索窓へのキーワード入力中に 検索キーワードを予測表示し

More information

WORD 98 入力の手引き

WORD 98 入力の手引き コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され

More information

(1)

(1) 第 回 アビリンピック 京 都 大 会 ホームページ 部 門 練 習 問 題 (1) 仕 様 1 ホームページの 内 容 府 立 京 都 高 等 技 術 専 門 校 のホームページを 作 成 する 2 ページ 構 成 とファイル index.html guid.html course.html mystyle.css ie.css 以 上 のファイルと 素 材 はホームページよりダウンロードして

More information

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...

More information

分散情報システム構成法

分散情報システム構成法 Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1 Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容

More information

2,700,000 26,800,000 5 - - jquery Mobile - - - - jquery Mobile - - Objective-C / 30% Android - - jquery Mobile - - - - jquery Mobile - - iphone ipod UI jquery Mobile Gallery http://www.jqmgallery.com/

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を

Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を はじめての Web サイト Sushi Web ページの編集 Card 1 of 10 1 これから新しい Web ページを作ります! 今回は本のリストを作りますが HTML を使えば何でも好きな Web ページが作れます! まず http://coderdojo-hiroshima.com/my-first-website-ja.zip から HTML のソースファイルをダウンロードします my-first-website

More information

2014メディプロ1HTML発展編2

2014メディプロ1HTML発展編2 04 年 度 メディアプロジェクト 演 習 HTML 講 座 発 展 編 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 山 都 町 移 住 定 住 サイト マイホームページ 操 作 説 明 書 平 成 26 年 3 月 10 日 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な アメブロ ~ヘッダー 画 像 メニューバーの 設 定 方 法 ~ 本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

...... ......

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 ましき はぴまるサイト マイホームページ 操 作 説 明 書 平 成 27 年 12 月 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト デザインの 設 定 (p5) 3 記 事 の 登

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi

More information

インターネットマガジン1996年12月号―INTERNET magazine No.23

インターネットマガジン1996年12月号―INTERNET magazine No.23 26 INTERNET magazine 1996/12 HTML S jhttp://www.microsoft.com/truetype/css/gall ery/spec2.htm S jhttp://www.hidaho.com/c/ S jhttp://www.microsoft.com/ie/most/howto/lay out/winston/wclub.htm

More information

課 題 1 ピボットテーブル 編 集 ファイル H27 東 京 アビリン 提 供 データ を 開 き シート 課 題 1 受 注 一 覧 を 表 示 し 以 下 の 設 問 にしたがってピボットテーブルを 作 成 後 表 をコピーし 整 えなさい シートは 課 題 1 受 注 一 覧 課 題 1ピボ

課 題 1 ピボットテーブル 編 集 ファイル H27 東 京 アビリン 提 供 データ を 開 き シート 課 題 1 受 注 一 覧 を 表 示 し 以 下 の 設 問 にしたがってピボットテーブルを 作 成 後 表 をコピーし 整 えなさい シートは 課 題 1 受 注 一 覧 課 題 1ピボ 第 14 回 東 京 障 害 者 技 能 競 技 大 会 表 計 算 競 技 事 前 課 題 これは 第 14 回 東 京 障 害 者 技 能 競 技 大 会 における 事 前 課 題 である 参 考 として 公 表 されるものであり 実 際 に 使 われる 競 技 課 題 は 事 前 課 題 の 仕 様 の 一 部 を 変 更 したものである 1 競 技 内 容 作 品 は 課 題 1~5 の 5

More information

...... @media only screen and (max-width: 768px) {...... } RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iphone ipod ipad Android IEMobile) [NC] RewriteRule ^$ /sp/ [R,L]

More information

自 己 紹 介 1 フリーランスで Web デザイン&グラフィックデザインしてます 赤 塚 妙 子 (アカツカ タエコ) @ ken_c_lo(ケンシロウと 読 むけど 正 直 後 悔 しています) https://twitter.com/ken_c_lo/ http://d.hatena.ne.j

自 己 紹 介 1 フリーランスで Web デザイン&グラフィックデザインしてます 赤 塚 妙 子 (アカツカ タエコ) @ ken_c_lo(ケンシロウと 読 むけど 正 直 後 悔 しています) https://twitter.com/ken_c_lo/ http://d.hatena.ne.j とりあえず これやっとけば 大 丈 夫 ( 多 分 ) 少 ない 手 間 と 知 識 で それなり に 見 せる ズルいデザインテクニック Zurui Design @ken_c_lo TAEKO AKATSUKA 自 己 紹 介 1 フリーランスで Web デザイン&グラフィックデザインしてます 赤 塚 妙 子 (アカツカ タエコ) @ ken_c_lo(ケンシロウと 読 むけど 正 直 後 悔

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language) は, 文章の部分を Tag( タグ ) と呼ばれる命令で挟んでいく タグは ... 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している 属性としてさらに細かい設定を開始タグの中に書き込むことができる

More information

メーカー用資料

メーカー用資料 F = k 1. お 申 込 み 2. お 打 合 せ 3. デザイン オ リ ジ ナ ル デ ザ イ ン 制 作 用 取 扱 説 明 書 } S ( 4. デザインチェック 5. 仕 上 がりチェック 6. 納 品 / 公 開 レイアウト1 レイアウト 2 レイアウト 3 年 齢 認 証 スマホ ロゴ リンク ファビコン imagelist.xlsx デザインするレイアウトを 選 ぶ 主 要 パーツ

More information

◆TOPページデザインを制作する際の注意点 ※別紙(sample_1

◆TOPページデザインを制作する際の注意点 ※別紙(sample_1 2011/4/26 改 定 デザインカンプ 制 作 ガイドライン 別 紙 (sample_1.pdf) 参 照 カンプ 制 作 に 入 る 前 にディレクターと 打 ち 合 わせを 行 い 目 的 に 合 ったトップページデザインを 制 作 すること 1. 著 作 権 について デザインで 使 用 する 写 真 素 材 およびイラスト 素 材 は 弊 社 提 供 の 素 材 集 サイトから 使 用

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 (

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 ( JIS X 8341-3:2010に 基 づいた ウェブの 試 験 方 法 2010 年 9 月 22 日 富 士 通 デザイン 株 式 会 社 近 藤 真 太 郎 ウェブアクセシビリティ 基 盤 委 員 会 WG3 委 員 Copyright 2010 FUJITSU LIMITED 1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に

More information

目 次 目 次... 1 1. はじめに... 2 1.1 目 的... 2 1.2 適 用 範 囲... 2 1.3 ウェブサイト 想 定 利 用 者... 2 2. 使 用 フォントについて... 3 2.1 グラフィックテキスト... 3 2.1 HTML テキスト... 3 2. 画 像 に

目 次 目 次... 1 1. はじめに... 2 1.1 目 的... 2 1.2 適 用 範 囲... 2 1.3 ウェブサイト 想 定 利 用 者... 2 2. 使 用 フォントについて... 3 2.1 グラフィックテキスト... 3 2.1 HTML テキスト... 3 2. 画 像 に 別 紙 5 東 京 の 観 光 公 式 サイト GO TOKYO ウェブサイト 制 作 ガイドライン 英 語 編 公 益 財 団 法 人 東 京 観 光 財 団 Copyright 2014 Tokyo Convention & Visitors Bureau. All rights reserved. 目 次 目 次... 1 1. はじめに... 2 1.1 目 的... 2 1.2 適 用 範

More information

おすすめページ

おすすめページ 4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

目 次 第 一 章. BESTホームページシステム 概 要 Ⅰ.システムの 構 成 P.1 Ⅱ.システム 要 件 P.1 Ⅲ.システムについて P.1 Ⅳ.システムの 特 徴 P.1 第 二 章.ホームページ 公 開 までの 流 れ Ⅰ.ホームページを 3 分 で 公 開 する 方 法 P.2,3

目 次 第 一 章. BESTホームページシステム 概 要 Ⅰ.システムの 構 成 P.1 Ⅱ.システム 要 件 P.1 Ⅲ.システムについて P.1 Ⅳ.システムの 特 徴 P.1 第 二 章.ホームページ 公 開 までの 流 れ Ⅰ.ホームページを 3 分 で 公 開 する 方 法 P.2,3 操 作 マニュアル 株 式 会 社 TKC アイ モバイル 株 式 会 社 平 成 25 年 1 月 -0- 目 次 第 一 章. BESTホームページシステム 概 要 Ⅰ.システムの 構 成 P.1 Ⅱ.システム 要 件 P.1 Ⅲ.システムについて P.1 Ⅳ.システムの 特 徴 P.1 第 二 章.ホームページ 公 開 までの 流 れ Ⅰ.ホームページを 3 分 で 公 開 する 方 法 P.2,3

More information

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T ホームページングサービス G o o d P a g e E a s y GoodPageASPシリーズ 操 作 マニュアル 基 本 操 作 編 (EASY+のメニュー 操 作 については メニュー 操 作 編 をご 覧 下 さい) ASPシリーズ(SUPERLITE EASY EASY+)の 基 本 操 作 手 順 は 共 通 ですが マニュアルではGoodPageEASYの 画 面 で 説 明

More information

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 ) スマートフォンオプションのご紹介とスマートフォン対応テーマ解説 カスタマイズ 2011 年 11 月 9 日シックス アパート株式会社 内毅志 自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 ) 本日のサマリ スマートフォンオプションとは テーマのおさらい スマートフォンオプション用テーマの内容ご紹介

More information

Peace & Piece 画面設計書

Peace & Piece 画面設計書 ホームページ 仕 様 書 株 式 会 社 目 次 1. 更 新 履 歴 2. 構 成 図 3. 制 作 における 基 本 事 項 4. 画 面 設 計 の 定 義 ルール 5. 各 画 面 仕 様 設 計 6. 仕 様 書 確 定 の 合 意 更 新 履 歴 更 新 日 付 更 新 箇 所 更 新 内 容 構 成 図 A-1 トップページ 会 社 サービス 特 徴 コンテンツ サブコンテンツ その

More information

2 1 4 1.1............................................. 4 1.2............................................. 4 1.3.......................................

2 1 4 1.1............................................. 4 1.2............................................. 4 1.3....................................... 19 CMS Web 20 2 15 2 1 4 1.1............................................. 4 1.2............................................. 4 1.3............................................. 5 1.4.....................................

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

BASIC

BASIC BASIC 2012 なぜ? なら ラクに CSS が書ける 今日のお話 + - 入力の 手間省く CSS を まとめる 計算 できる おさらい Sass CSS style.scss style.css 変換コンパイル PSD JPEG 書き出し PSD を し PSD JPEG JPEG 書き出し に する PSD PSD を 変換し JPEG JPEG 書き出し に する PSD PSD

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

Microsoft PowerPoint - HTML1復習_1021.ppt HTML-Ⅱ(HTML 文 書 構 造 編 ) 3-1 HTML 基 本 構 造 html おいしいお 店 一 覧

More information

Wordでホームページ

Wordでホームページ Wordでホームページ の 旅 日 記 TOPページ サブページ アップロード マーキーの 挿 入 Microsoft Word 2010 目 次 1 Webページ 作 成 の 準 備 1 2 Webページの 作 成 と 保 存 5 3 フレーム 機 能 の 表 示 と 設 定 6 4 壁 紙 ボタンアイコンの 挿 入 とタイトルの 設 定 13 5 main( 下 フレーム)ページの 編 集 16

More information

この content というものには 幅 や 高 さがあるんですけども CSS でそれを 表 す 時 には こ の content という 物 自 体 を height や wedth という 値 で 表 します なので CSS で 幅 や 高 さを 指 定 するとき content そのものに 対

この content というものには 幅 や 高 さがあるんですけども CSS でそれを 表 す 時 には こ の content という 物 自 体 を height や wedth という 値 で 表 します なので CSS で 幅 や 高 さを 指 定 するとき content そのものに 対 CSS 2 章 はじめに 大 切 なこと2つ ボックスモデル セレクターの 種 類 セレクターの 種 類 はたくさんあるので 覚 えるしかありません ボックスモデルを 理 解 しないと CSS ができません これは 重 要 すぎるほど 重 要 な 部 分 です! 各 html 要 素 には BOX モデルと 言 って 各 部 分 部 分 を 表 すようなものがある 具 体 的 な 図 で 見 ていきましょう

More information

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet 2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage

More information

Web概論

Web概論 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 4.1 CSS の仕組みと書式 CSS とは Cascading Style Sheet の略 単に スタイルシート と呼ばれることもある HTML で作ったページにレイアウトや装飾などのデザインを施すための仕組み CSS を記述したファイルは.css

More information

1-1 Excel Excel で 作 成 した 表 やグラフは Office クリップボードを 介 して Word にコ ピーして 貼 り 付 けることができます 1-1 では Word 文 書 内 に Excel で 作 成 した 表 を 貼 り 付 ける 方 法 を 紹 介 します Excel

1-1 Excel Excel で 作 成 した 表 やグラフは Office クリップボードを 介 して Word にコ ピーして 貼 り 付 けることができます 1-1 では Word 文 書 内 に Excel で 作 成 した 表 を 貼 り 付 ける 方 法 を 紹 介 します Excel Chapter1 Word&Excelの 活 用 Word は 日 本 語 文 書 の 作 成 に 向 いており Excel は 表 計 算 に 向 いていま す しかし 日 本 語 文 書 と 表 計 算 の 2 つの 要 素 が 混 ざった 文 書 を 作 成 したい 場 合 には それぞれのアプリケーションで 各 要 素 を 作 成 し 一 方 からもう 一 方 に データを 貼 り 付 けます

More information

2 1 2 3 3 1 @media screen and (max-width: 48em) { #container { width: 100%; display: -webkit-box; display: -moz-box; display: box; } #nav { -webkit-box-ordinal-group: 3; box-ordinal-group: 3; } #main

More information

18

18 3.2.1 HTML,CSS 概 要 第 3 部 第 2 章 HTML,CSS 私 達 が 普 段 見 ている Web ページは そのほぼ 全 てが HTML(HyperText Markup Language)と CSS(Cascading Style Sheets)をはじ めとするいくつかの 技 術 の 組 み 合 わせによって 作 られています そして 私 達 でも 簡 単 に Web ページを

More information

CSSで書籍組版を

CSSで書籍組版を CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館 簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単

More information

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

CSSNiteLP32-s7-tomita-v3.key

CSSNiteLP32-s7-tomita-v3.key Sassの日常の運用 または私は如何にして心配するのを止めて プリプロセッサを愛するようになったか 2014.02.15 CSS Nite LP, Disk 32: Sass 富田 梓 ! ! sass! _common_utility! _common_setting! _common_module! _common_layout! _md_common! _md_main! _md_sub!

More information

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 において header 要 素 はセクショニングコンテンツに 属 さない 第 2 問 jquery などの JavaScript フレームワークの 利 用 には 各 ユーザエージェントのプラグインが 必 須 である 第 3 問 不 正 アクセスや 不 正

More information

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 5. エディタの 使 い 方 5.1. エディタとは? NetCommons の 全 モジュールで 共 通 する 編 集 画 面 です 5.2. 通 常 のエディタの 使 い 方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19)(20)(21) (22) (23) (24) (25)

More information

アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable Type キャプチャツール WebScan PHP Perlなどによるシステム 開 発 Webサイトの 制 作 2

アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable Type キャプチャツール WebScan PHP Perlなどによるシステム 開 発 Webサイトの 制 作 2 Movable Typeによるブログの 携 帯 対 応 と イントラブログへの 活 用 2010 年 3 月 15 日 ~WEB 社 内 報 で 情 報 共 有 をもっと 簡 単 に~ アイデアマンズ 株 式 会 社 代 表 取 締 役 宮 永 邦 彦 1 アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable

More information

- 目 次 - 1.はじめに...2 2.サイト 初 期 設 定...2 3.SiteBuilderインストール...5 4.サイトの 作 成...6 4.1 SiteBuilder ウィザードを 開 く...7 4.2 開 始...8 4.3 デザイン...9 4.3.1 デザインテンプレートの

- 目 次 - 1.はじめに...2 2.サイト 初 期 設 定...2 3.SiteBuilderインストール...5 4.サイトの 作 成...6 4.1 SiteBuilder ウィザードを 開 く...7 4.2 開 始...8 4.3 デザイン...9 4.3.1 デザインテンプレートの KDDI ホスティングサービス (G120, G200) ブック SiteBuilder スタートアップガイド (ご 参 考 資 料 ) Rev.1.0 KDDI 株 式 会 社 1 - 目 次 - 1.はじめに...2 2.サイト 初 期 設 定...2 3.SiteBuilderインストール...5 4.サイトの 作 成...6 4.1 SiteBuilder ウィザードを 開 く...7 4.2

More information

【試用版】AppStudioクイズアプリ作成手順

【試用版】AppStudioクイズアプリ作成手順 2014 年 08 月 18 日 最 終 更 新 クイズアプリをつくろう Dacoon, Inc. 目 次 1. APP STUDIO で 作 れるクイズについて... 3 2. クイズアプリを 作 ってみよう... 4 3. 画 像 の 設 定... 22 4. CSS 編 集 について... 25 5. パブリッシュについて... 27 2 1.App Studio で 作 れるクイズについて

More information

Microsoft PowerPoint - 第03回目.pptx

Microsoft PowerPoint - 第03回目.pptx 1 情 報 リテラシーII ( 樋 口 担 当 ) 3 回 目 10/10 本 日 の 予 定 2 Webページの 作 成 I.テキストの 記 述 方 法 II.ハイパーリンク III.インラインイメージ( 画 像 ) IV. 表 V. 課 題 3 I.テキストの 記 述 方 法 1. 改 行 4 終 了 タグは 無 い 改 行 していない なすび なすびがいっぱい

More information

カゴラボ管理画面マニュアル(3.商品管理)

カゴラボ管理画面マニュアル(3.商品管理) カゴラボ 管 理 画 面 操 作 設 定 マニュアル CHAPTER 3 商 品 管 理 編 カゴラボバージョン4.0 系 お 問 い 合 せはこちらまで カゴラボサポートセンター 0120-713-362 ( 携 帯 電 話 からは 0985-23-3362 ) E-mail : support@cagolab.jp 受 付 時 間 : 平 日 10:00~12:00/13:00~18:00 (

More information

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000 Appendix_B EMOBILE CSSプロパティ 対 応 表 印 の 要 素 および 属 性 はモバイルブラウザで 使 用 できます で 示 す 項 目 は 一 部 の 端 末 で 使 用 できません A azimuth center - EMOBILE 非 対 応 B background 個 々のプロパティを 参 照 [

More information