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

Size: px
Start display at page:

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

Transcription

1 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書

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 1.CSSとは? 3

4 1.CSSとは? CSSとはカスケーディングスタイルシート の 略 で HTMLにデザインを 加 えるために 開 発 されたも のです ブログのほとんどはHTMLとCSSで 構 成 されていて CSSに 手 を 加 えれば 誰 でも 簡 単 に カスタマイズすることができる 点 もブログの 楽 しみの 一 つではないでしょうか まずはその 効 果 を ご 覧 ください CSS 適 用 前 (HTMLのみの 状 態 ) 4

5 1.CSSとは? CSS 適 用 後 (HTML+CSS) left_layout HTMLにCSSを 加 えるだけでこんなにも 変 わります 見 た 目 に 加 え 読 みやすさも 増 したこと がお 分 かりになるかと 思 います この 解 説 書 ではCSSについて 大 まかにしか 説 明 していませ んが これを 期 にぜひCSSをマスターしてあなただけのオリジナルブログに 挑 戦 してみてくだ さい 5

6 予 備 知 識 cssの 解 説 に 入 る 前 に 予 備 知 識 として 下 記 をご 覧 ください ボックスについて Margin border paddingを 図 に 表 すとこのようになります マージン:margin の 周 りの 空 間 :padding 枠 線 :border 上 の 各 には2 種 類 のスタイル 指 定 の 方 法 があります 一 つは 上 下 左 右 を 個 別 に 指 定 する 方 法 例 : border-left : 1px; 左 の 枠 線 を1pxに margin-top : 5px; 上 のマージンを5pxに padding-bottom : 6px; 下 のパディングを6pxに というやり 方 と これらを 一 括 で 指 定 する 方 法 です 例 : border : 0px 0px 1px 0px; 枠 線 の 一 括 指 定 上 0px 右 0px 下 1px 左 0px (borderだけでなく padding marginとも 必 ずこの 順 番 です ) padding: 5px; パディングの 一 括 指 定 上 下 左 右 とも5pxに 6

7 2.common.css #container コンテナ(ブログ 全 体 ) #banner バナー #content コンテンツ.sidebar.entry エントリ サイドバー commmon.cssは 大 きくこのように 分 けることができます それぞれについての 解 説 は 次 ページからになっています 7

8 2.common.css common.cssでは ブログ 全 体 の 幅 背 景 色 リンク 色 文 字 の 色 など 細 かな 指 定 を 行 っているとこ ろです スタイル 指 定 の 数 は 他 のCSSと 比 べると 多 いですがその 分 重 要 なところです /* bodyの 設 定 */ body 部 分 は 主 にブログの 外 側 ( 背 景 の 部 分 )の 指 定 をします /* bodyの 設 定 */ body { background-color:#ffffff; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center; /*background-repeat: repeat-x;*/ font-size: 90%; line-height: 140%; background-attachment: fixed; background-image:url(../img/bg.gif); color:#ffffff; background-color margin-left margin-top margin-right margin-bottom text-align background-repeat font-size line-height background-image color ページ 全 体 の 背 景 色 を 指 定 します ページの 左 マージンを 指 定 します ページの 上 マージンを 指 定 します ページの 右 マージンを 指 定 します ページの 下 マージンを 指 定 します bodyに 含 まれる の 行 揃 えを 指 定 します 背 景 画 像 の 繰 り 返 しの 仕 方 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています ページ 全 体 の 文 字 のサイズを 指 定 します ページ 全 体 文 字 の 行 間 を 指 定 します ページの 背 景 画 像 を 指 定 します ページ 全 体 の 文 字 の 色 を 指 定 します 8

9 2.common.css /* リンクカラー 設 定 */ ここではリンクの 色 の 指 定 をします まだ 見 ていないリンク 色 すでに 見 たリンク 色 など 細 かく 指 定 することができます /* リンクカラー 設 定 */ a {text-decoration: underline;color:#cc0000; a:link {text-decoration: underline;color:#cc0000; a:visited {text-decoration: underline;color:#cc0000; a:active {text-decoration: underline;color:#cc0000; a:hover {TEXT-DECORATION:none ; COLOR:#FFFFFF ; background-color:#cc0000 ; a a:link a:visit a:active a:hover リンクのスタイルを 指 定 します まだ 見 ていないリンクのスタイルを 指 定 します すでに 見 たリンクのスタイルを 指 定 します マウスボタンを 押 したときのリンクのスタイルを 指 定 します カーソルがそのリンクの 上 にある 時 のスタイルを 指 定 します /* 見 出 し 用 タグの 設 定 */ ここでは 見 出 し 用 の 文 字 (h 要 素 )を 指 定 します /* 見 出 し 用 タグの 設 定 */ h1, h2, h3 { margin: 0px; padding: 0px; font-weight: normal; ここでは h1 要 素 h2 要 素 h3 要 素 を 一 括 で 指 定 しています margin padding font-weight 文 字 のマージンを 指 定 します 文 字 のパディングを 指 定 します 文 字 の 太 さを 指 定 します /* バナーのリンク(ブログタイトルのリンク)*/ バナー 部 分 のリンク つまりブログのタイトル 部 分 のリンクのスタイルを 指 定 します /*バナーのリンク*/ #banner a{text-decoration: none;color:#ffffff; #banner a:link{text-decoration: none;color:#ffffff; #banner a:visited {text-decoration: none;color:#ffffff; #banner a:active {text-decoration: none;color:#ffffff; #banner a:hover {TEXT-DECORATION:underline;COLOR:#FFFFFF;background:none; a a:link a:visit a:active a:hover リンクのスタイルを 指 定 します まだ 見 ていないリンクのスタイルを 指 定 します すでに 見 たリンクのスタイルを 指 定 します マウスボタンを 押 したときのリンクのスタイルを 指 定 します カーソルがそのリンクの 上 にある 時 のスタイルを 指 定 します 9

10 2.common.css /* ブログ 全 体 サイズなどの 設 定 */ ブログの 全 体 のサイズの 指 定 をします ブログの 幅 ブログの 背 景 などはここで 指 定 してください /* ブログ 全 体 のサイズなどの 設 定 */ #container { margin-right:auto; margin-left:auto; padding: 15px 15px 0px 15px; width: 760px; border: 0px solid; background-color: #FFFFFF; text-align: left; line-height: 160%; position: relative; left: 0px; top: 0px; margin-right margin-left padding width border background-color text-align line-height position left top ブログの 右 マージンを 指 定 します ブログの 左 マージンを 指 定 します ブログのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します ブログの 横 幅 を 指 定 します ブログの 枠 線 の 指 定 をします ブログの 背 景 色 を 指 定 します ブログ 内 の 文 字 の 行 揃 えを 指 定 します ブログ 内 の 文 字 の 行 間 を 指 定 します ブログの 位 置 を 指 定 します ここでは 相 対 位 置 に 指 定 しています positionとセットで 使 用 します ブログを 右 に 指 定 数 だけ 移 動 します positionとセットで 使 用 します ブログを 下 に 指 定 数 だけ 移 動 します 10

11 2.common.css /* バナー 部 分 の 枠 設 定 */ バナー(TOPイメージ)のサイズ マージン バナー 内 の 文 字 などの 指 定 をします /* バナー 部 分 の 枠 設 定 */ #banner { margin-left:0px; margin-right:0px; margin-bottom:15px; height: 100px; border-top: none; border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid; background:url(../img/header.gif) no-repeat top center; color: #FFFFFF; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif; text-align: rleft; margin-left margin-right margin-bottom height border-top border-left border-right border-bottom background color font-family text-align バナーの 左 マージンを 指 定 します バナーの 右 マージンを 指 定 します バナーの 下 マージンを 指 定 します バナーの 高 さを 指 定 します バナーの 上 枠 のスタイルの 指 定 をします バナーの 左 枠 のスタイル 指 定 をします バナーの 右 枠 のスタイル 指 定 をします バナーの 下 枠 のスタイル 指 定 をします バナーの 背 景 を 一 括 で 指 定 します バナー 内 の 文 字 の 色 を 指 定 します バナー 内 のフォントの 指 定 をします バナー 内 の 文 字 の 行 揃 えを 指 定 します 11

12 2.common.css /* バナー 部 分 のタイトルのサイズなど*/ ここではタイトルのサイズ 細 かい 位 置 などの 設 定 をします /* バナー 部 分 のタイトルのサイズなど*/ #banner h1 { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: -5px; font-size: 140%; font-weight: bold; line-height:30px; padding:20px 0px 0px 30px; letter-spacing: 0em; margin-left margin-top margin-right margin-bottom font-size font-weight line-height padding letter-spacing タイトルの 左 マージンの 指 定 をします タイトルの 上 マージンの 指 定 をします タイトルの 右 マージンを 指 定 します タイトルの 下 マージンを 指 定 します タイトルの 文 字 サイズを 指 定 します タイトルの 太 さを 指 定 します タイトルの 行 間 を 指 定 します タイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します タイトルの 文 字 間 隔 を 指 定 します /* バナー 部 分 のサブタイトルの 指 定 */ サブタイトルのスタイルの 指 定 をします /* バナー 部 分 のサブタイトル 設 定 */ #banner h2 { color: #FFFFFF; font-size: 100%; padding:0px 0px 0px 30px; color font-size padding サブタイトルの 文 字 の 色 を 指 定 します サブタイトルの 文 字 の 大 きさを 指 定 します サブタイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します 12

13 2.common.css /* コンテンツブロック 部 分 の 枠 設 定 */ コンテンツ 部 分 (エントリ)の 枠 の 指 定 をします /* コンテンツブロック 部 分 の 枠 設 定 */.content { margin-left: none; margin-right: none; padding: 0px 5px 0px 5px; border: none; /* background-color: #FFFFFF; */ color: #333333; margin-left margin-right padding border background-color color コンテンツの 左 マージンを 指 定 します コンテンツの 右 マージンを 指 定 します コンテンツのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツ 枠 のスタイル 指 定 をします コンテンツの 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくく り 適 用 されないようにしています コンテンツ 内 の 文 字 の 色 を 指 定 します /* コンテンツヘッダー 設 定 */ コンテンツスペースの 一 番 上 の 部 分 の 設 定 をします /* コンテンツヘッダー 設 定 */.contentheader { margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px; height: 0px; color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; margin-top margin-bottom padding height color font-family font-size コンテンツヘッダーの 上 マージンを 指 定 します コンテンツヘッダーの 下 マージンを 指 定 します コンテンツヘッダーのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツヘッダーの 高 さの 指 定 をします コンテンツヘッダー 内 の 文 字 の 色 を 指 定 します コンテンツヘッダー 内 のフォントを 指 定 します コンテンツヘッダー 内 の 文 字 のサイズを 指 定 します 13

14 2.common.css /* コンテンツセパレーター 設 定 */ 各 コンテンツの 間 に 入 るセパレーター( 区 切 り)の 指 定 をします /* コンテンツセパレーター 設 定 */.contentseparater{ margin-top: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; height: 0px; /* background:url(../img/contentseparater.gif) repeat left center; */ color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; margin-top margin-bottom padding height background color font-family font-size コンテンツセパレーターの 上 マージンを 指 定 します コンテンツセパレーターの 下 マージンを 指 定 します コンテンツセパレーターのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 しま す コンテンツセパレーターの 高 さの 指 定 をします コンテンツセパレーターの 背 景 を 一 括 で 指 定 します ここでは 使 用 しないため コ メント(/* */)でくくり 適 用 されないようにしています コンテンツセパレーター 内 の 文 字 の 色 を 指 定 します コンテンツセパレーター 内 のフォントの 指 定 をします コンテンツセパレーター 内 の 文 字 のサイズを 指 定 します 14

15 2.common.css /* ページ 中 央 部 分 のフッター 設 定 */ ページ 中 央 部 分 のフッター(コンテンツスペースの 一 番 下 )の 設 定 をします /* ページ 中 央 部 分 のフッター 設 定 */.contentfooter{ margin-top: 5px; margin-bottom: 10px; padding: 0px 0px 0px 0px; height: 0px; /* background:url(../img/contentfooter.gif) repeat left center; */ color: #333333; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; margin-top margin-bottom padding height background color font-family font-size コンテンツフッターの 上 マージンを 指 定 します コンテンツフッターの 下 マージンを 指 定 します コンテンツフッターのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します コンテンツフッターの 高 さの 指 定 をします コンテンツフッターの 背 景 を 一 括 で 指 定 します ここでここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています コンテンツフッター 内 の 文 字 の 色 を 指 定 します コンテンツフッター 内 のフォントを 指 定 します コンテンツフッター 内 の 文 字 のサイズを 指 定 します /* エントリブロック 及 びエントリ 本 文 の 設 定 */ エントリ( 記 事 )に 関 する 細 かい 設 定 をします 1エントリをエントリブロック とします /* エントリブロック 及 びエントリ 本 文 の 設 定 */.entry { color:#000000; margin-left: none; margin-right: none; padding: 15px 10px 5px 6px; border: none; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; color margin-left margin-right padding border font-family font-size エントリ 内 の 文 字 の 色 を 指 定 します エントリの 左 マージンを 指 定 します エントリの 右 マージンを 指 定 します エントリのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリの 枠 線 を 指 定 します エントリ 内 のフォントを 指 定 します エントリ 内 の 文 字 のサイズを 指 定 します 15

16 2.common.css /* エントリヘッダー( 日 付 ) 設 定 */ エントリヘッダー(エントリの 日 付 )の 指 定 をします /* エントリヘッダー( 日 付 ) 設 定 */.entryheader { margin-bottom: 15px; padding: 0px 2px 2px 2px; color: #1E2061; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 90%; text-align: left; font-weight: bold; text-transform: uppercase; border-bottom:1px solid #1E2061; margin-bottom padding color font-family font-size text-align font-weight text-transform border-bottom エントリヘッダーの 下 マージンを 指 定 します エントリヘッダーのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリヘッダーの 文 字 の 色 を 指 定 します エントリヘッダーのフォントを 指 定 します エントリヘッダーの 文 字 のサイズを 指 定 します エントリヘッダーの 文 字 の 行 揃 えを 指 定 します エントリヘッダーの 文 字 の 太 さを 指 定 します 英 単 語 の 大 文 字 小 文 字 の 区 別 をつけるための 指 定 です ここではすべて 大 文 字 で 表 示 されるように 指 定 しまいます エントリヘッダーの 下 枠 のスタイルを 一 括 で 指 定 します /* エントリセパレータ 設 定 */ ここではエントリセパレータの 指 定 をします エントリセパレータとは 各 エントリの 下 につけられる 区 切 りのことです 同 じ 日 に 複 数 のエントリがあった 場 合 に 表 示 されます /* エントリセパレータ 設 定 */.entryseparater{ margin-top: 0px; margin-bottom: 15px; padding: 0px 0px 0px 0px; height: 15px; border-bottom: 1px dashed #1E2061; margin-top margin-bottom padding height border-bottom エントリセパレータの 上 マージンを 指 定 します エントリセパレータの 下 マージンを 指 定 します エントリセパレータのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 しま す エントリセパレータの 高 さを 指 定 します エントリセパレータの 下 枠 のスタイルを 一 括 で 指 定 します 16

17 2.common.css /* エントリフッター */ エントリフッター の 指 定 をします エントリフッター は 各 エントリの 下 にスペースを 設 けるために 設 置 されます 通 常 は 透 明 ですが 背 景 色 の 指 定 などを 行 えば 表 示 させることもできます /* エントリフッター */.entryfooter{ margin-top: 0px; margin-bottom: 15px; padding: 0px 0px 0px 0px; height: 15px; border-bottom: 0px solid #999999; margin-top margin-bottom padding height border-bottom エントリフッター の 上 マージンを 指 定 します エントリフッター の 下 マージンを 指 定 します エントリフッター のパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します エントリフッター の 高 さを 指 定 します エントリフッター の 下 枠 のスタイルを 一 括 で 指 定 します /* エントリのpタグ 設 定 */ エントリのpタグの 指 定 をします pタグは 主 に 追 記 コメント トラックバックに 使 用 されます デフォ ルトでは 本 文 と 同 じ 文 字 色 にしてありますが ご 自 信 で 変 更 することもできます /* エントリpタグ 設 定 */.entry p { margin-bottom: 10px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; font-weight: normal; text-align: left; line-height: 150%; margin-bottom color font-family font-size font-weight text-align line-height エントリpタグの 下 マージンを 指 定 します エントリpタグの 文 字 の 色 を 指 定 します エントリpタグのフォントを 指 定 します エントリpタグの 文 字 のサイズを 指 定 します エントリpタグの 文 字 の 太 さを 指 定 します エントリpタグの 文 字 の 行 揃 えを 指 定 します エントリpタグの 行 間 を 指 定 します 17

18 2.common.css /* エントリ 本 文 の 引 用 タグ 設 定 */ エントリ 本 文 に 引 用 文 を 用 いる 場 合 に 使 用 されます 細 かい 指 定 はここでできます /* エントリ 本 文 の 引 用 タグ 設 定 */.entry blockquote { line-height: 150%; line-height 行 間 を 指 定 します /* エントリ 本 文 の 設 定 <li>タグ */ エントリ 本 文 の<li>タグの 指 定 をします /* エントリ 本 文 の 設 定 <li>タグ*/.entry li { line-height: 150%; line-height 行 間 を 指 定 します /* エントリh2 設 定 */ エントリ 内 の<h2>の 指 定 をします エントリ 詳 細 ページにある この 記 事 へのコメント などの 部 分 に 使 用 されています /* エントリh2 設 定 */.entry h2 { margin-bottom: 5px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 100%; font-weight: bold; text-align: left; margin-bottom color font-family font-size font-weight text-align エントリh2の 下 マージンを 指 定 します エントリh2の 文 字 の 色 を 指 定 します エントリh2のフォントを 指 定 します エントリh2の 文 字 のサイズを 指 定 します エントリh2の 文 字 の 太 さを 指 定 します エントリh2の 文 字 の 行 揃 えを 指 定 します 18

19 2.common.css /* エントリタイトル 設 定 */ エントリのタイトル 文 字 <h3>のスタイルを 指 定 します /* エントリタイトル 設 定 */.entry h3 { margin-bottom: 0px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 120%; font-weight: bold; text-align: left; margin-bottom color font-family font-size font-weight text-align エントリタイトル の 下 マージンを 指 定 します エントリタイトル の 色 を 指 定 しています エントリタイトル のフォントを 指 定 します エントリタイトル の 文 字 のサイズを 指 定 します エントリタイトル の 文 字 の 太 さを 指 定 します エントリタイトル の 文 字 の 行 揃 えを 指 定 します /* エントリ 者 情 報 設 定 */ 各 エントリの 一 番 下 に 出 る 投 稿 者 情 報 の 細 かい 指 定 をここでします /* エントリ 者 情 報 設 定 */.entry p.posted { padding:5px; margin-bottom: 15px; color: #999999; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; font-weight: bold; text-align: left; line-height: normal; background-color:#e6e6e6; padding margin-bottom color font-family font-size font-weight text-align line-height background-color エントリ 者 情 報 のパディングを 一 括 で 指 定 します エントリ 者 情 報 の 下 マージンの 指 定 をします エントリ 者 情 報 の 文 字 の 色 を 指 定 します エントリ 者 情 報 のフォントを 指 定 します エントリ 者 情 報 の 文 字 のサイズを 指 定 します エントリ 者 情 報 の 文 字 の 太 さを 指 定 します エントリ 者 情 報 の 文 字 の 行 揃 えを 指 定 します エントリ 者 情 報 の 行 間 を 指 定 します エントリ 者 情 報 の 背 景 色 を 指 定 します 19

20 2.common.css /* サイドバーとフリーエリアの 設 定 */ サイドバーとフリーエリアのスタイル 指 定 をします サイドバーとフリーエリアのタイトルは 違 うところ で 指 定 しているので ここではサイドバーとフリーエリア 内 の 項 目 についてのスタイル 指 定 となりま す /* サイドバーとフリーエリアの 枠 設 定 */.sidebar,.freearea{ color:#000000; margin-top: 25px; margin-bottom: 10px; padding: 0px 10px 0px 10px; border: 0px dotted #666666; /* サイドバーのボーダー 設 定 */ /*background-color: #100000; */ color margin-top margin-bottom padding border background-color サイドバーとフリーエリアの 文 字 の 色 を 指 定 します サイドバーとフリーエリアの 上 マージンの 指 定 をします サイドバーとフリーエリアの 下 マージンの 指 定 をします サイドバーとフリーエリアのパディングの 指 定 をします 上 右 下 左 の 順 に 指 定 します サイドバーとフリーエリアの 枠 のスタイルを 一 括 で 指 定 します サイドバーとフリーエリアの 背 景 色 の 指 定 をします ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしてあります 20

21 2.common.css /* サイドバータイトルとフリーエリアタイトル 設 定 */ サイドバーのタイトルとフリーエリアのタイトルのスタイル 指 定 をします ( 以 下 タイトルと 略 ) /* サイドバータイトルとフリーエリアタイトル 設 定 */.sidebar h2,.freetitle{ border-bottom:1px solid #1E2061; padding: 5px 5px 0px 5px; /*background:url(../img/title_bg.gif) no-repeat center center;*/ color: #1E2061; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 90%; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing:.1em; border-bottom padding background color font-family font-size text-align font-weight text-transform letter-spacing タイトルの 下 枠 のスタイルを 一 括 で 指 定 します タイトルのパディングを 指 定 します 上 右 下 左 の 順 に 指 定 します タイトルの 背 景 の 指 定 の 一 括 でしています ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています タイトルの 文 字 の 色 を 指 定 します タイトルのフォントを 指 定 します タイトルの 文 字 のサイズを 指 定 します タイトルの 文 字 の 行 揃 えを 指 定 します タイトルの 文 字 の 太 さを 指 定 します 英 単 語 の 大 文 字 小 文 字 の 区 別 をつけるための 指 定 です ここではすべて 大 文 字 で 表 示 されるように 指 定 しまいます タイトルの 文 字 間 隔 を 指 定 します /* サイドバー 小 項 目 の 配 置 */ サイドバー 内 の 小 項 目 の 配 置 を 指 定 をします /* サイドバー 小 項 目 の 配 置 */.sidebar ul { margin: 0px; padding-left: 10px; margin padding-left サイドバー 小 項 目 のマージンを 一 括 で 指 定 します サイドバー 小 項 目 の 左 パディングを 指 定 します 21

22 2.common.css /* サイドバー 小 項 目 の 設 定 */ サイドバー 小 項 目 の 指 定 をします ( 以 下 項 目 と 略 ) /* サイドバー 小 項 目 の 設 定 */.sidebar li { margin-top: 10px; margin-bottom: -5px; margin-left: 0px; padding-left: 0px; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: 80%; text-align: left; line-height: 140%; list-style-type: none; margin-top margin-bottom margin-left padding-left color font-family font-size text-align line-height list-style-type 項 目 の 上 マージンを 指 定 します 項 目 の 下 マージンを 指 定 します 項 目 の 左 マージンを 指 定 します 項 目 の 左 パディングを 指 定 します 項 目 の 文 字 の 色 を 指 定 します 項 目 のフォントを 指 定 します 項 目 の 文 字 のサイズを 指 定 します 項 目 の 文 字 の 行 揃 えを 指 定 します 項 目 の 行 間 を 指 定 します 項 目 前 のマークの 指 定 をします ここでは 無 しに 指 定 しています /* サイドバー 内 画 像 の 枠 */ サイドバー 内 に 画 像 を 入 れたときの 枠 を 指 定 します /* サイドバー 内 画 像 の 枠 */.sidebar img { border: 0px solid #666666; margin-bottom: 5px; border margin-bottom サイドバー 内 の 画 像 の 枠 のスタイルを 一 括 で 指 定 します サイドバー 内 の 写 真 の 下 マージンを 指 定 します 22

23 2.common.css /* サイドバー 内 リンク 設 定 */ サイドバー 内 のリンク 集 の 指 定 をします /* サイドバー 内 リンク 設 定 */.link-note { margin-bottom: 15px; padding: 3px; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; font-size: small; text-align: left; line-height: 150%; margin-bottom padding font-family font-size text-align line-height リンク 集 の 下 マージンを 指 定 します リンク 集 のパディングを 一 括 で 指 定 します リンク 集 のフォントを 指 定 します リンク 集 の 文 字 のサイズを 指 定 します リンク 集 の 文 字 の 行 揃 えを 指 定 します リンク 集 の 行 間 を 指 定 します /* プロフィール 写 真 の 配 置 */ プロフィールの 写 真 の 位 置 を 指 定 します /* プロフィール 写 真 の 配 置 */.photo { margin-bottom: 5px; text-align: center; margin-bottom text-align プロフィール 写 真 の 下 マージンを 指 定 します プロフィール 写 真 の 行 揃 えを 指 定 します /* プロフィール 写 真 の 枠 */ プロフィールの 写 真 の 枠 を 指 定 します /* プロフィール 写 真 の 枠 */.photo img { border: 0px solid #666666; border プロフィール 写 真 の 枠 のスタイルを 一 括 で 指 定 します 23

24 2.common.css /* コメント 設 定 */ コメントの 指 定 をします /* コメント 設 定 */ #comment-data { float: left; margin-right: 15px; padding-right: 15px; width: 180px; border-right: 1px dashed #1E2061; text-align: left; float margin-right padding-right width border-right text-align コメントの 全 体 の 位 置 を 指 定 します コメントの 右 マージンを 指 定 します コメントの 右 パディングを 指 定 します コメントの 横 幅 を 指 定 します コメントの 右 枠 のスタイルを 一 括 で 指 定 します コメント 内 の 文 字 の 行 揃 えを 指 定 します 24

25 2.common.css /* ページ 最 下 部 フッターの 枠 設 定 */ ページ 最 下 部 のフッターの 指 定 をします フッターに 画 像 を 使 用 したいときはここで 指 定 してくださ い /* ページ 最 下 部 フッターの 枠 設 定 */ #footer { height: 43px; border-top: 0px solid; border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid; background-color: #FFFFFF; /*background:url(../img/footer.gif) no-repeat center ; */ color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', 'Osaka',' sans-serif'; text-align: left; height border-top border-left border-right border-bottom background-color background color font-family text-align フッターの 高 さを 指 定 します フッターの 上 枠 を 指 定 します フッターの 左 枠 を 指 定 します フッターの 右 枠 を 指 定 します フッターの 下 枠 を 指 定 します フッターの 背 景 色 を 指 定 します フッターの 背 景 を 一 括 で 指 定 します ここでは 使 用 しないため コメント(/* */)でく くり 適 用 されないようにしています フッターの 文 字 の 色 を 指 定 します フッターのフォントを 指 定 します フッターの 文 字 の 行 揃 えを 指 定 します 25

26 2.common.css common.cssの 最 後 に 記 入 されているコードは MACのInternet Explorerでコメントを 入 力 すると 文 字 化 けする という 現 象 を 防 ぐための コードです 知 識 のある 方 以 外 触 らないでください /* コメント 入 力 フォーム 設 定 */ コメント 入 力 フォーム 内 の 指 定 をします /* コメント 入 力 フォーム 設 定 */ textarea[id="comment-text"] { font-family: "Hiragino Kaku Gothic Pro W3", "Osaka", "MS PGothic", "MS PMincho", "Hiragino Mincho Pro W3", "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; width: 80%; textarea.comment-text { font-family: "Hiragino Kaku Gothic Pro W3", "Osaka", "MS PGothic", "MS PMincho", "Hiragino Mincho Pro W3", "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; font-family width コメント 入 力 フォームのフォントを 指 定 します コメント 入 力 フォームのサイズを 指 定 します 26

27 3.calendar.css 27

28 3.calendar.css calendar.cssでは カレンダーのスタイルに 関 することを 指 定 しています カレンダーの 文 字 の 色 な どはここで 編 集 することができます /* カレンダー 設 定 */ カレンダーの 指 定 します /* カレンダー 設 定 */ #calendar { line-height: 100%; color: #000000; font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif; font-size: 100%; padding: 0px; text-align: center; margin-bottom: 0px; line-height color font-family font-size padding text-align margin-bottom カレンダー 内 の 文 字 の 行 間 を 指 定 します カレンダー 内 の 文 字 の 色 を 指 定 します カレンダー 内 のフォントを 指 定 します カレンダー 内 の 文 字 のサイズを 指 定 します カレンダー 内 のパディングを 一 括 で 指 定 します カレンダー 内 の 文 字 の 行 揃 えを 指 定 します カレンダーの 下 マージンを 指 定 します /* カレンダーのキャプション 設 定 */ カレンダーの 年 月 ( 例 :2005 年 9 月 )のスタイル 指 定 をします /* カレンダーのキャプション 設 定 */ #calendar caption { padding: 5px; color: #004594; font-weight: bold; padding color font-weight カレンダーキャプション のパディングを 指 定 します カレンダーキャプション の 文 字 の 色 を 指 定 します カレンダーキャプション の 文 字 の 太 さを 指 定 します 28

29 3.calendar.css /* カレンダーのテーブル 設 定 */ カレンダーのテーブルの 指 定 をします /* カレンダーのテーブル 設 定 */ #calendar table { padding: 1px; border-collapse: collapse; border: 0px; font-size: 10px; width: 100%; padding border-collapse border font-size width カレンダーテーブルのパディングを 指 定 します テーブルの 枠 線 の 表 示 形 式 を 指 定 します テーブルの 枠 線 のスタイルを 指 定 します テーブル 内 の 文 字 のサイズを 指 定 します テーブルの 横 幅 を 指 定 します /* カレンダーの 曜 日 設 定 */ カレンダーの 曜 日 のスタイル 指 定 をします /* カレンダーの 曜 日 設 定 */ #calendar th { text-align: center; font-weight: normal; /* background-color: #eeeeee; */ text-align font-weight background-color 曜 日 の 行 揃 えを 指 定 します 文 字 の 太 さを 指 定 します 曜 日 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 29

30 3.calendar.css /* カレンダーの 日 付 設 定 */ カレンダーの 日 付 の 指 定 をします /* カレンダーの 日 付 設 定 */ #calendar td { text-align: center;.calendar {.calendard {.calendardbg { text-align: center; text-align: center; text-align: center; background:url(../img/calendardbg_back.gif) no-repeat center center; text-align background 日 付 の 行 揃 えを 指 定 します 日 付 の 背 景 を 一 括 で 指 定 します 30

31 4.archive_layout.css 31

32 4.archive_layout.css archive.cssでは アーカイブページ( 月 別 エントリ カテゴリ 別 エントリ 日 別 エントリ)のスタイル 指 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ アーカイブページの 指 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { width: 760px; overflow: hidden; border-top: none; border-left: none; border-right: none; border-bottom: none; padding: 0px 0px 0px 0px; /* background-color: #FFFFFF; */ width overflow border-top border-left border-right border-bottom padding background-color アーカイブページの 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します アーカイブページの 上 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 左 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 右 枠 のスタイルを 一 括 で 指 定 します アーカイブページの 左 枠 のスタイルを 一 括 で 指 定 します アーカイブページのパディングを 一 括 で 指 定 します 上 右 下 左 の 順 に 指 定 し ます アーカイブページの 背 景 を 指 定 します ここでは 使 用 しないため コメント(/* */) でくくり 適 用 されないようにしています 32

33 5.left_layout.css 33

34 5.left_layout.css left_layouto.cssは 左 にメニュー 右 にエントリ にするためのcssです widthを 指 定 することでメ ニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 くださ い /* ページの 左 部 分 の 設 定 */ メニューを 左 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 左 部 分 の 枠 設 定 */ #left { float: left; width:189px; overflow: hidden; border-top: none; border-left: none; border-right: 0px solid #CCCCCC; border-bottom: 0px solid; background-color: #E8E8DD; float width overflow border-top border-left border-right border-bottom background-color メニューの 位 置 を 指 定 します ここでは 左 に 指 定 しています メニューの 横 幅 を 指 定 します メニューからはみ 出 した の 扱 いを 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します メニューの 背 景 色 を 指 定 します 34

35 5.left_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリの 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: right; width: 570px; overflow: hidden; border-top: none; border-left: none; border-right: none; border-bottom: none; /* background-color: #FFFFFF; */ float width overflow border-top border-left border-right border-bottom background-color 中 央 部 分 の 位 置 を 指 定 します ここでは 右 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 35

36 6.right_layout.css 36

37 6.right_layout.css right_layouto.cssは 右 にメニュー 左 にエントリ にするためのcssです widthを 指 定 することで メニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 くださ い /* ページ 右 部 分 の 枠 設 定 */ メニューを 右 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 右 部 分 の 枠 設 定 */ #right { float: right; width: 189px; background-color: #E8E8DD; border-top: none; border-left: 0px solid #CCCCCC; border-right: none; border-bottom: 0px solid; overflow: hidden; float width background-color border-top border-left border-right border-bottom overflow メニューの 位 置 を 指 定 します ここでは 右 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 背 景 色 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します メニューからはみ 出 した の 扱 いを 指 定 します 37

38 6.right_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリの 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: left; width: 570px; overflow: hidden; /* background-color: #FFFFFF; */ border-top: none; border-left: none; border-right: none; border-bottom: none; float width overflow background-color border-top border-left border-right border-bottom 中 央 部 分 の 位 置 を 指 定 します ここでは 左 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 38

39 7.three_layout.css 39

40 7.three_layout.css three_layout.cssは 右 にメニュー 左 にメニュー 中 央 部 にエントリ にするためのcssです width を 指 定 することでメニューやエントリのサイズ 変 更 をすることが 可 能 になります お 好 みの 幅 に 指 定 してご 利 用 ください /* ページ 左 部 分 の 枠 設 定 */ メニューを 左 に 配 置 するための 指 定 です サイズなどは 自 由 に 変 更 することができます /* ページ 左 部 分 の 枠 設 定 */ #left { float: left; width: 180px; border-top: none; border-left: 0px solid; border-right: 0px solid #CCCCCC; border-bottom: 0px solid; overflow: hidden; background-color: #E8E8DD; float width border-top border-left border-right border-bottom overflow background-color メニューの 位 置 を 指 定 します ここでは 左 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 左 メニューの 背 景 色 を 指 定 します 40

41 7.three_layout.css /* ページ 右 部 分 の 枠 設 定 */ ページの 右 メニューの 設 定 をします /* ページ 右 部 分 の 枠 設 定 */ #right { float: right; width: 180px; border-top: none; border-left: 0px solid #CCCCCC; border-right: 0px solid; border-bottom: 0px solid; overflow: hidden; background-color: #E8E8DD; float width border-top border-left border-right border-bottom overflow background-color メニューの 位 置 を 指 定 します ここでは 右 に 指 定 しています メニューの 横 幅 を 指 定 します メニューの 上 枠 のスタイルを 一 括 で 指 定 します メニューの 左 枠 のスタイルを 一 括 で 指 定 します メニューの 右 枠 のスタイルを 一 括 で 指 定 します メニューの 下 枠 のスタイルを 一 括 で 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します メニューの 背 景 色 を 指 定 します 41

42 7.three_layout.css /* ページ 中 央 部 分 の 枠 設 定 */ ページの 中 央 部 分 (エントリ 部 分 )の 設 定 をします /* ページ 中 央 部 分 の 枠 設 定 */ #center { float: left; width: 400px; overflow: hidden; /*background-color: #E6E6E6;*/ border-top: none; border-left: none; border-right: none; border-bottom: none; float width overflow background-color border-top border-left border-right border-bottom 中 央 部 分 の 位 置 を 指 定 します ここでは 右 に 指 定 しています 中 央 部 分 の 横 幅 を 指 定 します 枠 からはみ 出 した の 扱 いを 指 定 します 中 央 部 分 の 背 景 色 を 指 定 します ここでは 使 用 しないため コメント(/* */)でくくり 適 用 されないようにしています 中 央 部 分 の 上 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 左 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 右 枠 のスタイルを 一 括 で 指 定 します 中 央 部 分 の 下 枠 のスタイルを 一 括 で 指 定 します 42

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

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

経営論集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

(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

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

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

More information

CSSの基礎

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

More information

文 書 構 造 とスタイル

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

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

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

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

PowerPoint プレゼンテーション

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

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

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

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

More information

PowerPoint プレゼンテーション

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

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

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

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

ホームページ制作スターターズ 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 ページ 構 成 とファイル index.html guid.html course.html mystyle.css ie.css 以 上 のファイルと 素 材 はホームページよりダウンロードして

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

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

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 PowerPoint - HTML1復習_1021.ppt

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

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

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

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

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

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

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

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

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

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378> アンケートフォームを 設 置 する 方 法 < 目 次 > 1 アンケートフォームを 利 用 するための 設 定 をする 2 1-1 アンケートフォームの 詳 細 設 定 をする 1-2 アンケートフォームの 入 力 画 面 を 作 成 する 1-3 お 客 さんが 入 力 内 容 を 確 認 するためのページを 作 成 する 1-4 アンケート 完 了 後 に 表 示 するお 礼 画 面 を 作

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

第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

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

[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

<5461726F2D89C692EB834E8389837582CC837A815B83808379815B83578DEC>

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

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

第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考 えること 2. PowerPoint の 画 面 -1- IBR2012-V1.0

第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考 えること 2. PowerPoint の 画 面 -1- IBR2012-V1.0 パワーポイント 基 礎 講 習 PowerPoint を 始 める 前 に PowerPoint を 始 めよう アニメーションを 活 用 する PowerPoint 2010 対 応 NPO インターネットビジネス 研 究 所 Copyright IBR 2012 第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 41 ヨロン 観 光 まちづくり 支 援 サービス マイホームページ 操 作 説 明 書 1 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の3つのステップ 1 ホームページの 設 定 (p3) 2 レイアウト デザインの 設 定

More information

Word 003 スキルブック 06 - オブジェクトの 利 用 0.Word で 作 る 表 : 行 幅 を 最 小 値 より 小 さく 設 定 する 3 表 の 左 右 のサイズを 適 宜 調 整 します Word で 表 を 作 成 するとき, 列 幅, 行 幅 ともに 基 本 的 に 自 由

Word 003 スキルブック 06 - オブジェクトの 利 用 0.Word で 作 る 表 : 行 幅 を 最 小 値 より 小 さく 設 定 する 3 表 の 左 右 のサイズを 適 宜 調 整 します Word で 表 を 作 成 するとき, 列 幅, 行 幅 ともに 基 本 的 に 自 由 Word 003 スキルブック 06 - オブジェクトの 利 用 Word 003 スキルブック 06 - オブジェクトの 利 用 ツールバーに 表 ( 罫 線 )の 作 成 機 能 を 追 加 する( 罫 線 ツールバーを 追 加 する) ツールバー 上 の,アイコンのない 空 白 箇 所 を 右 してメニューを 開 きます 0. 準 備 :ツールバーのカスタマイズ メニュー 内 の 罫 線 の

More information

A

A A. ツールボタン の 使 い 方 下 の 図 は NetCommons の 共 通 エディタで 表 示 されるツールボタンの 一 覧 です 書 式 設 定 左 からフォント サイズ スタイルを 設 定 するためのプルダウンメニューです 効 果 をつけたい 箇 所 の 先 頭 でク リックするか 効 果 をつけたい 箇 所 をカーソルで 選 択 してボタンをクリックします 文 字 効 果 左 から

More information

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

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

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

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

インターネットマガジン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

はじめに確認していただきたいこと

はじめに確認していただきたいこと ページの 内 容 を 編 集 する ページ 内 の 領 域 を 追 加 削 除 したり 修 正 したりして 編 集 します 1 編 集 メニュー 表 示 を 押 す 2 編 集 したい 領 域 の 下 にスクロールする グレーの 帯 が 表 示 されています 3 グレーの 帯 の 部 分 にカーソルを 合 わせる 編 集 メニューが 表 示 されます 4 編 集 したい 内 容 に 合 わせて 操

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 自 由 HTMLでコンテンツを 追 加 する Copyright Diverta inc. All right reserved. 目 次. 自 由 HTMLとは - 自 由 HTMLとは - 機 能 概 要. 自 由 HTMLでコンテンツを 追 加 する - 自 由 HTMLを 開 く - カテゴリを 追 加 する - 自 由 HTMLでコンテンツを 作 成 する -4 閲 覧 編 集 制 限 を

More information

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ Fckeditor マニュアル 目 次 Fckeditor の 基 本 的 な 使 い 方... 2 記 事 の 登 録 プレビューの 前 に... 2 リンクを 挿 入... 5 画 像 を 挿 入 する... 6 PC に 保 存 している 画 像 の 挿 入... 6 WEB 上 の 画 像 を 挿 入... 8 文 字 装 飾... 10 文 章 を 見 出 しにする... 10 太 文 字

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

サンプル 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

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

PowerPoint プレゼンテーション

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

More information

名刺作成講習

名刺作成講習 名 刺 作 成 講 習 (Word 2007 編 ) OS:Windows Vista Basic 講 習 内 容 Microsoft Word 2007 でオリジナル 名 刺 の 作 成 名 刺 用 紙 の 確 認 印 刷 用 紙 の 詳 細 を 調 べる ラベル 製 品 名 エーワン 製 品 番 号 A-ONE 51002 用 紙 サイズ A4 列 数 2 行 数 5 上 余 白 11 横 余

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 Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

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

新 規 にページを 作 成 するには. 新 規 ページを 立 ち 上 げる 左 上 の 新 規 ページ をクリックします モードの 選 択 の 画 面 が 表 示 されますので 標 準 モード を 選 んで OK を 押 して 立 ち 上 げます どこでも 配 置 モード は 見 る 人 のPC 環

新 規 にページを 作 成 するには. 新 規 ページを 立 ち 上 げる 左 上 の 新 規 ページ をクリックします モードの 選 択 の 画 面 が 表 示 されますので 標 準 モード を 選 んで OK を 押 して 立 ち 上 げます どこでも 配 置 モード は 見 る 人 のPC 環 ホームページ 作 成 (ホームページビルダー 編 ) 事 前 準 備 ホームページ 作 成 ソフト(ビルダー4など) レイアウト HP の 構 成 をあらかじめ 決 めて 専 用 フォルダを 作 っておく (フォルダ 構 成 サンプルを 参 考 にしてください ) 画 像 を 一 つのフォルダにまとめる ( 新 規 でフォルダを 作 成 し 名 前 は image 等 で) 容 量 の 大 きな 画

More information

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63> 商 品 管 理 商 品 管 理 を 行 うためのメニューです 4.1 商 品 管 理 のサイドメニュー 商 品 管 理 には 以 下 のサイドメニューがあります 商 品 一 覧 登 録 済 みの 商 品 の 一 覧 を 表 示 します 既 に 登 録 済 みの 商 品 の 検 索 検 索 した 商 品 を 編 集 する 際 に 使 用 します 新 規 作 成 商 品 を 新 規 登 録 する 画 面

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 PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

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

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

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

1 全 体 のレイアウトを 把 握 する 2 段 組 レイアウト 1 段 組 レイアウト 左 サイドメニューが 表 示 され, 新 着 記 事 が 一 覧 (または 簡 略 形 式 ) 投 稿 した 記 事 が, 日 付 順 にそのまま 表 示 される で 表 示 される 管 理 メニュー(ダッシュ

1 全 体 のレイアウトを 把 握 する 2 段 組 レイアウト 1 段 組 レイアウト 左 サイドメニューが 表 示 され, 新 着 記 事 が 一 覧 (または 簡 略 形 式 ) 投 稿 した 記 事 が, 日 付 順 にそのまま 表 示 される で 表 示 される 管 理 メニュー(ダッシュ 編 集 者 ユーザー 用 CONTENTS 全 体 のレイアウトを 把 握 する... 1 管 理 メニュー(ダッシュボード)へログインする... 1 ダッシュボードの 見 方 を 覚 える... 2 新 規 投 稿 の 方 法 について... 3 投 稿 記 事 を 編 集 する... 4 メディア( 外 部 ファイル)を 追 加 する... 5 別 のサイトへリンクする... 6 HTML 編

More information

表 示 箇 所 設 定 場 所 画 像 名 デフォルト 画 像 テーマカラー 必 要 可 否 デバイス サイズ( 幅 高 さ ) 形 式 容 量 備 考 H 質 問 内 容 1~10 - - 必 須 - - 最 大 5000 文 字 質 問 の 内 容 になります 選 択 肢 なし - テキスト 型

表 示 箇 所 設 定 場 所 画 像 名 デフォルト 画 像 テーマカラー 必 要 可 否 デバイス サイズ( 幅 高 さ ) 形 式 容 量 備 考 H 質 問 内 容 1~10 - - 必 須 - - 最 大 5000 文 字 質 問 の 内 容 になります 選 択 肢 なし - テキスト 型 検 定 アプリ 制 作 一 覧 表 (1/2) 表 示 箇 所 設 定 場 所 画 像 名 デフォルト 画 像 テーマカラー 必 要 可 否 デバイス サイズ( 幅 高 さ ) 形 式 容 量 備 考 1 TOPロゴ 画 像 なし - 必 須 790px 高 さ 任 意 jpg png gif 1MB 以 内 検 定 トップ 画 面 の 上 部 に 表 示 される 画 像 です A TOP 説 明

More information

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合 TIPS 目 次 TIPS 項 目 棚 割 りを 開 始 するまで 商 品 画 像 の 追 加 方 法 商 品 情 報 の 一 括 更 新 登 録 方 法 棚 割 情 報 の 連 携 方 法 小 売 様 棚 割 ソフトとの 棚 割 情 報 連 携 について 他 棚 割 ソフトとの 棚 割 情 報 連 携 について 棚 割 情 報 のExcel 取 込 について 棚 板 設 定 の 詳 細 商 品 設

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

ように記述をします 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

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

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

GMO MobileHomePage

GMO MobileHomePage テンプレート 解 説 書 (キャンペーンサイト) Last update 2010/02/26 1 目 次 1. テンプレート 解 説 書 (キャンペーンサイト)について...3 2. テンプレートを 利 用 した 携 帯 サイト 制 作 方 法...4 3. 全 ページ 共 通 画 像 について...5 4. トップページ 解 説...7 5. 問 題 ページ 解 説...8 6. 正 解 ページ

More information

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Netto ホームページ 作 成 マニュアル 2015 年 4 月 21 日 作 成 ver8.01 管 理 画 面 URL http://netto.jp/usr/index.php ログインE-mail ( ) パスワード ( ) PC/スマートフォン 対 応 スマートフォンでは 一 部 使 用 出 来 ない メニューがございます ホームページURL http://netto.jp/アカウント

More information

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

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

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

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

006-021_責)Wordトレ2-1章_斉

006-021_責)Wordトレ2-1章_斉 . Wordの 起 動 Wordの 基 礎 知 識. Wordの 起 動 Wordの 起 動 は 次 のように 行 います 他 のアプリケーションソフトのように いくつかの 起 動 方 法 があります スタートメニューからの 起 動 スタートメニューから 起 動 する 方 法 は 次 の 通 りです [スタート]メニューの[すべてのプログラム]から[Microsoft-Office]の [Microsoft-Word]を

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

図 1 図 1 に 白 紙 のテンプレートを 示 しています. 背 景 は 白 ですが, 文 字 の 入 力 位 置 が 示 されています.テン プレートへの 入 力 方 法 は, クリックしてタイトルを 入 力 クリックしてサブタイトルを 入 力 という 枠 内 に 文 字 を 入 力 していくこ

図 1 図 1 に 白 紙 のテンプレートを 示 しています. 背 景 は 白 ですが, 文 字 の 入 力 位 置 が 示 されています.テン プレートへの 入 力 方 法 は, クリックしてタイトルを 入 力 クリックしてサブタイトルを 入 力 という 枠 内 に 文 字 を 入 力 していくこ PowerPoint でオリジナルテンプレートを 作 る 県 立 広 島 病 院 麻 酔 集 中 治 療 科 讃 岐 美 智 義 PowerPoint を 使 って PC プレゼンテーションをするのが 当 たり 前 の 時 代 になりました. 学 会 では PC プレゼ ンテーションのソフトウェアを PowerPoint と 指 定 してくることも 多 く,PowerPoint はプレゼンテーションソ

More information

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

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

スライド 1

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

More information

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

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

More information

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

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

More information

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

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

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

Color Change

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

More information

WORD 98 入力の手引き

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

More information

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63> 文 書 作 成 演 習 ( 応 用 編 ) (Word007,Excel007) 文 書 作 成 演 習 ( 応 用 編 ) のテキストを 参 考 にしながら, 次 の 学 級 だよりを 作 成 してみましょう IPA 教 育 用 画 像 素 材 集 より < 演 習 のための 準 備 > 演 習 用 素 材 のフォルダをデスクトップ 上 に 作 成 します IPA 教 育 用 画 像 素 材 集

More information

3. PDF 内 のテキストに 枠 が 表 示 されます 変 更 する 部 分 をクリックし テキストの 追 加 変 更 削 除 などを 行 うことができます フォントの 種 類 や 文 字 サイズなどのスタイル を 変 更 する 場 合 は 次 のステップに 進 みます 2

3. PDF 内 のテキストに 枠 が 表 示 されます 変 更 する 部 分 をクリックし テキストの 追 加 変 更 削 除 などを 行 うことができます フォントの 種 類 や 文 字 サイズなどのスタイル を 変 更 する 場 合 は 次 のステップに 進 みます 2 A. PDF ファイルの 既 存 のテキストを 編 集 する PDF ファイルの 既 存 の 文 章 を 変 更 したり 追 加 削 除 するには 編 集 ツールまたは テキストと 画 像 を 編 集 ツールを 使 用 します PDF ファイルの 既 存 のテキストを 編 集 すると PDF の 内 部 情 報 が 変 更 されたり フォントの 問 題 が 発 生 する 可 能 性 があります 詳

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

Microsoft PowerPoint - css [互換モード]

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

More information

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

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

More information

PowerPoint プレゼンテーション

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション BestieBoxで 仲 良 しグループをつくろう! BestieBoxはグループで 楽 しむコミュニケーションをさらに 盛 り 上 げるためのアプリです 仲 良 しグループでBestieBoxをつかってたくさん 思 い 出 をつくろう! アプリケーションのインストールから 起 動 まで iosの 方 はAppStore Androidの 方 はGoogle playを 起 動 してください 2アプリ

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

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

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS:

More information

CSS / 横 1 段 組 レイアウト ビルダー 起 動 新 規 作 成 名 前 を 付 けて 保 存 (ファイル 名 =01turkey-ta.html 保 存 場 所 =css-2) (1)id= contents 用 の 親 DIV タグを BODY の 中 に 入 れる 右 側 の タグ 一

CSS / 横 1 段 組 レイアウト ビルダー 起 動 新 規 作 成 名 前 を 付 けて 保 存 (ファイル 名 =01turkey-ta.html 保 存 場 所 =css-2) (1)id= contents 用 の 親 DIV タグを BODY の 中 に 入 れる 右 側 の タグ 一 外 部 スタイルシート(CSS)の 基 本 1. 外 部 スタイルシートを 作 るには 1Sマークをクリック 2 外 部 スタイルシートの 追 加 参 照 保 存 場 所 image が 入 っているファイルを 選 択 ファイル 名 に 名 前 を 付 ける( 例 index-ta) 保 存 3スタイルシートマネージャーを 閉 じて 上 書 き 保 存 4Sマークをクリック スタイルシート 情 報

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 問 い 合 せフォームを 作 成 する Copyright Diverta inc. All right reserved. 1 目 次 1. 管 理 画 面 の 説 明 1-1 問 い 合 わせモジュールとは 1-2 機 能 概 要 1-3 基 本 設 定 1-3-1 基 本 設 定 - 管 理 画 面 のアクセス 制 限 - 1-3-2 基 本 設 定 -メール 設 定 - 2. 問 い 合 わせフォームを

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

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #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