HTML5&CSS3 レッスンブック

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

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

CSSの基礎

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

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

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

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

(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

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

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

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 - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

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

演 習 室 の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

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

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

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

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

(1)

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

More information

PowerPoint プレゼンテーション

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

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

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

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

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

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

More information

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

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

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

初 期 設 定... 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

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

目 次 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

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

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの Google Blogger 入 門 目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの 編 集... 9 テンプレートの 設 定... 10 ブログの

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

<5461726F2D89C692EB834E8389837582CC837A815B83808379815B83578DEC>

<5461726F2D89C692EB834E8389837582CC837A815B83808379815B83578DEC> 初 めて 作 る 家 庭 クラブのホームページ ホームページビルダーの 起 動 WindowsXP, IBM ホームページ ビルダー 10 対 応 1 [スタート]ボタンをクリックして,[すべてのプログラム]-[ IBM ホームページ ビルダー 10 ]-[ホームペ ージ ビルダー]を 選 択 します 2 [スタンダード]を 選 択 して,[ OK ]ボタンをクリックします 1ページ 目 ( index

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

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

「美家CAD《操作マニュアル:CAD機能編

「美家CAD《操作マニュアル:CAD機能編 MajorCAD Version.2 操 作 マニュアル: 見 積 フォームカスタマイズ 編 目 次 1. 見 積 フォームの 保 存 場 所 と 種 類 1-1. 見 積 フォームの 保 存 場 所 2 1-2. 標 準 添 付 フォームの 種 類 3 1-3. 標 準 添 付 フォームの 構 成 4 2. 見 積 フォームのカスタマイズ 2-1. 注 意 事 項 と 前 準 備 8 2-2.セルに

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

第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

PowerPoint プレゼンテーション

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

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

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

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

More information

タイトル 画 像 の 挿 入 <1 行 目 > タイトル 挿 入 セルの 選 択 属 性 セルタブ 参 照 タイトル 画 像 (30title.jp g) 選 択 開 く <2 行 目 > < 左 側 > < 右 側 > < 中 央 > <3 行 目 > 挿 入 セルの 選 択 属 性 セルタブ 参

タイトル 画 像 の 挿 入 <1 行 目 > タイトル 挿 入 セルの 選 択 属 性 セルタブ 参 照 タイトル 画 像 (30title.jp g) 選 択 開 く <2 行 目 > < 左 側 > < 右 側 > < 中 央 > <3 行 目 > 挿 入 セルの 選 択 属 性 セルタブ 参 サムネール ページの 作 り 方 ビルダー 起 動 ファイル 標 準 モードで 新 規 作 成 ページタイトルを 入 れる 画 面 上 の BODY をクリック BODY の 属 性 ページ 情 報 タグ ページタイトル 紫 陽 花 と 入 力 OK 表 の 挿 入 表 の 挿 入 6 行 1 列 OK 属 性 表 タブ 表 の 幅 :750p x Ente r 属 性 セルタブ

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

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

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00 design de sign coration デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ CSS CSS CSS CSS デザイン 線や色でサイン 情報をイイトコロに配置 CSS CSS CSS { : ; { : ; { : ; { : ; CSS

More information

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

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

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

PowerPoint プレゼンテーション

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

More information

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

スライド 1

スライド 1 第 5 章 ワープロ B(Word2003) ( 解 答 と 解 説 ) 5B-1. 文 書 の 編 集 1スタイルの 設 定 : 見 出 し1の 設 定 (ア)=I スタイルとは さまざまな 書 式 を 組 み 合 わせて 名 前 を 付 けて 登 録 したものです あらかじめ 用 意 してあるもの 以 外 に 新 規 に 登 録 することもできます ここでは 後 で 使 う 目 次 の 項 目

More information

PowerPoint プレゼンテーション

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

More information

スライド 1

スライド 1 アリババ ワールドパスポート 製 品 詳 細 ご 利 用 ガイド 2010/03/11 Ver1.00 2012/10/09 Ver1.50 お 問 い 合 わせ 先 アリババ 株 式 会 社 メール:infoggs@alibaba-inc.jp 103-0007 東 京 都 中 央 区 日 本 橋 浜 町 2-12-4 エスエス 製 薬 本 社 ビル4F 目 次 文 字 装 飾 の 追 加 変 更

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

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

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

スライド 1

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

More information

2 / 15 ページ 第 10 講 バーコードシートの 作 成 10-1 ブック(ファイル)を 開 く 第 8 講 で 保 存 した meibo2.xlsx を 開 きましょう 10-2 データの 検 索 と 置 換 データを 検 索 したり 別 のデータに 置 き 換 えたりする 機 能 です 検

2 / 15 ページ 第 10 講 バーコードシートの 作 成 10-1 ブック(ファイル)を 開 く 第 8 講 で 保 存 した meibo2.xlsx を 開 きましょう 10-2 データの 検 索 と 置 換 データを 検 索 したり 別 のデータに 置 き 換 えたりする 機 能 です 検 1 / 15 ページ キャリアアップコンピューティング 第 10 講 [ 全 15 講 ] 2016 年 度 2 / 15 ページ 第 10 講 バーコードシートの 作 成 10-1 ブック(ファイル)を 開 く 第 8 講 で 保 存 した meibo2.xlsx を 開 きましょう 10-2 データの 検 索 と 置 換 データを 検 索 したり 別 のデータに 置 き 換 えたりする 機 能

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

■新聞記事

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

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

おすすめページ

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

More information

OpenCity2説明

OpenCity2説明 和 光 市 市 民 活 動 支 援 サイト 新 掲 示 板 (FCKエディタ)について 通 常 ホームページを 作 成 するには HTML という 専 門 言 語 の 知 識 が 必 要 ですが FCK エディ タを 使 えば ワードやエクセルと 同 じ 感 覚 で タイトル 文 字 を 太 字 にしたり 表 を 作 成 したり 画 像 を 挿 入 したり 更 にはワードで 作 成 した 文 章 スタイルそのままにコピー&ペースト

More information

ひらがなを 入 力 する 濁 点 などを 入 力 する 漢 字 を 入 力 する 漢 字 に 変 換 する 一 度 入 力 した 文 字 の 再 変 換 は 全 角 半 角 文 字 を 切 り 替 える 文 章 を 入 力 し 漢 字 変 換 する 数 字 を 入 力 する 英 文 字 を 入 力

ひらがなを 入 力 する 濁 点 などを 入 力 する 漢 字 を 入 力 する 漢 字 に 変 換 する 一 度 入 力 した 文 字 の 再 変 換 は 全 角 半 角 文 字 を 切 り 替 える 文 章 を 入 力 し 漢 字 変 換 する 数 字 を 入 力 する 英 文 字 を 入 力 目 次 及 びページ 内 容 見 本 目 次 起 動 する 新 規 文 書 作 成 する 既 存 の 文 書 を 開 く 編 集 する 作 成 文 書 を 保 存 する 終 了 する パソコンのキーと 操 作 方 法 ソフトがフリーズした 場 合 の 操 作 法 キー 操 作 Word 2013 Word 2010 Word 2007 Word 2000/2003 Writer 日 本 語 入 力

More information

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

More information

立ち読みページ

立ち読みページ 6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML

More information

Microsoft Word - 201009_page新機能について.doc

Microsoft Word - 201009_page新機能について.doc @page 新 機 能 について 1. 全 体 背 景 とページ 背 景 画 像 に 画 像 の 入 力 背 景 にグラデーションを 採 用 する 11. 全 画 面 基 本 項 目 の 設 定 の 実 行 ボタンを 選 択 2 背 景 色 を 白 にし カスタマイズ 画 像 を 使 用 する をチェックする グラデーション 画 像 を 横 に 繰 り 返 し 表 示 を 選 択 背 景 とページを

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

SchITコモンズ【活用編】

SchITコモンズ【活用編】 2016 SchIT コモンズ 活 用 編 株 式 会 社 スキット 1. 画 像 のサイズ 変 更 (リサイズ) 1. 画 像 の 大 き さ( 幅 )を 変 更 (ア) 画 像 を 挿 入 する 場 合 は[ 画 像 の 挿 入 ]のマークをクリックします [ 参 照 ]をクリックし 任 意 の 場 所 から 挿 入 したい 画 像 を 選 択 し [ 画 像 の 挿 入 ]をクリックします (イ)

More information

2 塗 り 足 し テンプレートは 実 際 の 仕 上 がりサイズより 上 下 左 右 3mm ずつ 大 きいサイズになっています (テンプレ ートではピンクの 斜 線 部 分 になります ) 仕 上 がりサイズいっぱいに 写 真 やパターン 色 などを 入 れたい 場 合 はピンクの 斜 線 部

2 塗 り 足 し テンプレートは 実 際 の 仕 上 がりサイズより 上 下 左 右 3mm ずつ 大 きいサイズになっています (テンプレ ートではピンクの 斜 線 部 分 になります ) 仕 上 がりサイズいっぱいに 写 真 やパターン 色 などを 入 れたい 場 合 はピンクの 斜 線 部 ツインリングマルチブック 作 成 においての 注 意 点 弊 社 ではデータ 着 信 後 印 刷 が 出 来 るデータかどうかチェックを 実 施 致 します ただし 文 字 の 入 力 ミスやデザインおよびレイアウトなどに 関 しては データチェックの 対 象 とはなりません またデータに 不 備 が 発 見 された 場 合 サーバーのデータを 削 除 し 修 正 箇 所 をご 連 絡 致 しますの

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

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

KITENN 編集操作マニュアル

KITENN 編集操作マニュアル KITENN 編 集 操 作 マニュアル 目 次 操 作 方 法 基 本 編 自 分 のページをブラウザで 開 く ログイン 方 法 編 集 画 面 の 開 き 方 文 章 を 入 力 する 画 像 メディアファイルを 挿 入 する 文 字 スタイル( 太 字 斜 体 )を 変 更 する 文 字 配 置 ( 左 揃 え 中 央 揃 え 右 揃 )を 変 更 する リンクを 作 成 する 画 像 横

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

CSSNite-LP54-kubo-ito.key

CSSNite-LP54-kubo-ito.key div { div { width: ; div { width: 100%; div { width: 100%; div { width: 100%!important; a { color: #000!important; .box { padding: 20px; border: 4px solid #666; h1 { color:

More information

ThinkBoard Free60 Manual

ThinkBoard Free60 Manual 3.TB ファイル 制 作 手 順 簡 単 ガイド (1) 画 面 をキャプチャする ThinkBoard は ワードやエクセル インターネットブラウザなど 普 段 使 っている 画 面 を 利 用 してコンテンツを 作 る 予 め 作 っていた 画 像 を 利 用 してコンテンツを 作 る といった 事 が 可 能 です 以 下 にそれぞれの 手 順 をご 紹 介 します 1-1.ワードやエクセル

More information

コンピュータ基礎実習(上級) 第二回

コンピュータ基礎実習(上級) 第二回 コンピュータ 基 礎 実 習 ( 上 級 ) 第 四 回 ウェブページの 作 成 について3 清 水 淳 紀 前 回 までの 内 容 ページの 作 成 方 法 ( 編 集 アップロード 確 認 ) ページはKompozer やメモ 帳 等 で 編 集 する ページを 公 開 するには アップロードをする 必 要 がある Internet Explorerなどでページを 開 き F5キーで 表 示 を

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

エクセルを 起 動 します [スタート]をクリックします [すべてのプログラム]をポイントします [Microsoft Office]を クリックします [Microsoft Office Excel 2007]をクリックします 1 [Office ボタン]をクリックして [ 開 く]を 選 択 し

エクセルを 起 動 します [スタート]をクリックします [すべてのプログラム]をポイントします [Microsoft Office]を クリックします [Microsoft Office Excel 2007]をクリックします 1 [Office ボタン]をクリックして [ 開 く]を 選 択 し NPO 法 人 いきいきネットとくしま 第 26 回 定 期 勉 強 会 森 の 日 県 南 平 成 22 年 9 月 9 日 ( 木 ) 担 当 和 泉 雅 子 エクセルで 贈 答 品 リスト 作 成 エクセルの 起 動 ワークシート 名 の 変 更 文 字 の 入 力 と 書 式 設 定 表 の 作 成 タイトル 名 の 入 力 と 書 式 設 定 クリップアートの 挿 入 名 前 をつけて 保

More information

<4D6963726F736F667420576F7264202D20819A837A815B83808379815B83578DEC90AC837D836A83858341838B2E646F6378>

<4D6963726F736F667420576F7264202D20819A837A815B83808379815B83578DEC90AC837D836A83858341838B2E646F6378> 2010 年 12 月 改 正 版 ビーコマース ホームページ 作 成 マニュアル 本 文 中 の 画 像 は 2010/12/06 までのものとなっておりますので 実 際 の 画 像 とは 異 なる 場 合 がございます もくじ 本 書 の 使 い 方 1 スタイル 設 定 2 自 由 ページレイアウト 設 定 3 ホームページ 作 成 画 面 説 明 4 コンテンツ 編 集 5 ( 店 舗 TOP

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

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

More information

コⅡ8-2 段 組 みとセクション 区 切 り 文 書 の 途 中 で 段 組 み 設 定 を 変 更 すると その 部 分 の 前 後 に セクション 区 切 り が 自 動 的 に 挿 入 され セ クション 付 けが 変 わる セクション 区 切 り 1 段 組 み セクション 区 切 りを

コⅡ8-2 段 組 みとセクション 区 切 り 文 書 の 途 中 で 段 組 み 設 定 を 変 更 すると その 部 分 の 前 後 に セクション 区 切 り が 自 動 的 に 挿 入 され セ クション 付 けが 変 わる セクション 区 切 り 1 段 組 み セクション 区 切 りを コⅡ8-1 [ コンピュータ 実 習 Ⅱ (No.8) ] [1] 段 組 み 段 組 みとは 1 ページ 内 で 文 字 を 書 く 範 囲 を 横 や 縦 にいくつかに 分 割 して 配 置 するものです 1 ページに 小 さな 文 字 で 左 右 ( 横 書 きの 場 合 )や 上 下 ( 縦 書 きの 場 合 )にびっしり 書 いてあると 読 む 際 に 1 行 ごとの 視 線 の 移 動

More information

サイト 基 本 情 報 2/7 納 品 及 びコンテンツ 有 効 化 作 業 のための 基 本 情 報 サーバのFTP 情 報 アクセス 先 FTPアカウント FTP 初 期 パスワード サーバのsend mail パス サーバのコントロールパネル 情 報 アクセス 先 アカウント パスワード 記

サイト 基 本 情 報 2/7 納 品 及 びコンテンツ 有 効 化 作 業 のための 基 本 情 報 サーバのFTP 情 報 アクセス 先 FTPアカウント FTP 初 期 パスワード サーバのsend mail パス サーバのコントロールパネル 情 報 アクセス 先 アカウント パスワード 記 サイト 基 本 情 報 1/7 新 規 制 作 サイトの 基 本 情 報 サイトのトップページURL サイトタイトル Copyright (C) 2015 XXXXXXXX All Rights Reserved. Google Analyticsを 導 入 しますか? FACE BOOKのOGPを 導 入 しますか? ファビコン 作 成 しておきますか? アップルタッチアイコン 作 成 しておきますか?

More information

<32303130208376838C835B8393332D348B89838F8393837C8343839383672E786477>

<32303130208376838C835B8393332D348B89838F8393837C8343839383672E786477> 日 本 情 報 処 理 検 定 協 会 主 催 ワンポイント 3 4 級 (Microsoft PowerPoint 2010 対 応 ) 2012 年 4 月 日 本 情 報 処 理 検 定 協 会 0 試 験 前 にすること... 2 ファイルの 保 存... 2 試 験 本 番... 3 標 準 フォント 文 字 色... 3 色 について... 3 配 置 について... 3 図 形 描 画

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション WiLL Mail トライアルアカウント 用 簡 易 マニュアル 1 メールを 配 信 する(シンプルDB 編 ) 1.データベースを 設 定 する 2.メールを 作 成 する 1 新 規 メールを 作 成 する 2 配 信 対 象 設 定 をする 3 基 本 設 定 をする 4コンテンツを 編 集 する 5 設 定 内 容 を 確 認 する 6 配 信 を 行 う p3,4 p5 p6,7 p8,9

More information

目 次 1. Officeボタンと 表 紙 2. Word2007のリボン 3. フォント の 書 式 設 定 4. 段 落 5. 段 落 の 書 式 設 定 6. ページ 設 定 7. インデント 8. 印 刷 9. 挨 拶 文 の 挿 入 10. 段 組 み 11. 着 色 12. 記 号 と

目 次 1. Officeボタンと 表 紙 2. Word2007のリボン 3. フォント の 書 式 設 定 4. 段 落 5. 段 落 の 書 式 設 定 6. ページ 設 定 7. インデント 8. 印 刷 9. 挨 拶 文 の 挿 入 10. 段 組 み 11. 着 色 12. 記 号 と Wordの 基 礎 Windows7 Word2007 平 成 23 年 8 月 ジー アイ カルチャー 目 次 1. Officeボタンと 表 紙 2. Word2007のリボン 3. フォント の 書 式 設 定 4. 段 落 5. 段 落 の 書 式 設 定 6. ページ 設 定 7. インデント 8. 印 刷 9. 挨 拶 文 の 挿 入 10. 段 組 み 11. 着 色 12. 記 号

More information

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード]

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード] 目 次 目 次 2 全 体 概 要 3 管 理 画 面 へのログイン 4 ページの 種 類 5 新 規 投 稿 の 流 れ 7 記 事 を 投 稿 する( 各 要 素 のパターン) 8 記 事 を 投 稿 する( 要 素 の 順 番 入 れ 替 え 削 除 の 方 法 ) 10 画 像 追 加 11 投 稿 の 編 集 14 サイドエリアの 編 集 16 投 稿 の 削 除 17 新 規 カテゴリの

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

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

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

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information