Web10.pptx

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Web10.pptx"

Transcription

1 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2)

2 2 HTML5 コンテンツモデル

3 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models 参 考 World Wide Web Guide: HTML5 コンテンツモデル

4 4 コンテンツモデル 見 取 り 図 フロー インタラクティブ フレージング ヘッディング エンベッディッド セクショニング メタデータ

5 各 カテゴリに 含 まれる 代 表 的 タグ 群 (ただしフローは 省 略 ) 5 メタデータ セクショニング ヘッディング インタラクティブ フレージング エンベッディッド link article a a img aside audio br audio style h1 h6 cite nav input em canvas title section menu strong iframe

6 (HTML4.01,XHTML) ブロック 要 素 とインライン 要 素 6 HTML 4.01 や XHTML には コンテンツモデルという 考 え 方 はなく 代 わりにブロック 要 素 とインライン 要 素 という 分 類 があった ブロック 要 素 タグを 閉 じると, 必 ず 改 行 がある 要 素 例 )h1,h2 h6, p, ul, li, hr など CSS は HTML のバージョン を 選 ばないため この 概 念 を 利 用 する インライン 要 素 タグを 閉 じても 改 行 されな い 要 素 例 )a, em, strong, cite など

7 7 <div>と<span>によるグループ 化 コンテンツ 中 の 任 意 の 部 分 に 対 して そこがひとつのグ ループであることを 示 す これらのタグは 構 造 上 特 定 の 意 味 を 持 たないため CSSと 組 み 合 わせて 利 用 されることが 多 い <div> フロー コンテンツ (HTML 4.01, XHTMLではブロック 要 素 ) <span> フレージング コンテンツ (HTML 4.01,XHTMLではインライン 要 素 )

8 8 margin padding border border-style border-color border-width ボックスモデル

9 9 ボックスモデル CSS では 余 白 や 枠 線 をボックスモデルで 表 現 する 外 側 の 余 白 :margin 内 側 の 余 白 :padding 幅 :width コンテンツ 枠 線 :border 高 さ:height

10 10 ブロックボックスとインラインボックス ブロックボックス ブロック 要 素 で 構 成 されるボックス 幅 (width)と 高 さ(height)が 設 定 できる インラインボックス インライン 要 素 で 構 成 されるボックス 幅 (width)と 高 さ(height)を 設 定 することは できない

11 このスライドは 講 義 では 扱 いません 11 CSSでのボックス 変 換 display プロパティで 異 なるボックスに 変 換 することができる 値 block ブロックボックス inline インラインボックス inline-block インラインブロックボックス 改 行 されないが 幅 と 高 さを 決 められる list-item 箇 条 書 きの 項 目 run-in ランインボックス 後 続 のブロックボックスにインラインとして 挿 入 される

12 12 マージンとパディング 内 側 の 余 白 をパディング 外 側 の 余 白 をマージン と 呼 ぶ それぞれの CSS でのプロパティ padding margin 値 は px などの 幅 をあらわす 単 位 を 用 いる

13 13 枠 線 (ボーダー) 枠 線 は, 枠 線 の 種 類, 枠 線 の 太 さ, 枠 線 の 色 を 決 定 できる それぞれ, border-style 枠 線 の 種 類 border-width 枠 線 の 太 さ border-color 枠 線 の 色 プロパティを 用 いる

14 14 border-style プロパティに 用 いる 値 none なし solid 実 線 dotted 点 線 dashed 破 線 inset 凹 ( 全 体 ) outset 凸 ( 全 体 ) groove 凸 ridge 凹 double 二 重 線

15 15 border の 一 括 指 定 border-width, border-style, border-color は border プロパティで 一 括 指 定 することもできる border-width:5px; border-style:solid; border-color:#666666; border:5px solid #666666;

16 16 背 景 色 background-color ボックスの 背 景 色 を 指 定 するプロパティ

17 17 クラスセレクタ

18 18 クラスセレクタ クラスセレクタ これまで CSS のセレクタには HTML のタグを 用 いて きたが,クラスセレクタを 用 いれば 任 意 の 要 素 に 対 してデザインを 適 用 することが 可 能 タグが 同 じ 場 合 にはすべて 同 じデザインが 適 用 さ れるが クラスセレクタを 用 いれば 場 合 分 けをする ことができる

19 19 クラスセレクタの 記 述 法 CSS での 記 述 すべての 要 素 で 利 用 可 能 なクラスセレクタの 場 合.クラス 名 { } 特 定 の 要 素 にのみ 機 能 するクラスセレクタの 場 合 タグ 名 称.クラス 名 { } クラス 名 には 半 角 の 任 意 の 文 字 列 が 利 用 可 能 ただし 数 字 とハイフンで 始 まってはいけない

20 20 クラスセレクタの 記 述 法 HTML での 呼 び 出 し class 属 性 を 設 定 し 値 にクラス 名 を 記 述 する <h1 class="クラス 名 "> </h1>

21 21 クラスセレクタへの 応 用 div.wakugumi{ border-style:dotted; border-color:#ffcccc; border-width:5px; } <div class="wakugumi">ここに 枠 組 み</div>

22 このスライドは 講 義 では 扱 いません 22 4 方 向 で 異 なるデザイン

23 このスライドは 講 義 では 扱 いません 23 4 方 向 異 なる 余 白 と 枠 線 border,padding,margin は それぞれ4 方 向 独 立 に 指 定 可 能 border-style は, border-top-style border-bottom-style border-left-style border-right-style 上 下 左 右 に 分 解 可 能 border-style と 併 用 しないこと

24 このスライドは 講 義 では 扱 いません 24 4 方 向 異 なる 余 白 と 枠 線 border-width は, border-top-width 上 border-bottom-width 下 border-left-width 左 border-right-width 右 に 分 解 可 能 border-width と 併 用 しないこと

25 このスライドは 講 義 では 扱 いません 25 4 方 向 異 なる 余 白 と 枠 線 border-color は, border-top-color 上 border-bottom-color 下 border-left-color 左 border-right-color 右 に 分 解 可 能 border-color と 併 用 しないこと

26 このスライドは 講 義 では 扱 いません 26 4 方 向 異 なる 余 白 と 枠 線 padding は, padding-top 上 padding-bottom 下 padding-left 左 padding-right 右 に 分 解 可 能 padding と 併 用 しないこと

27 このスライドは 講 義 では 扱 いません 27 4 方 向 異 なる 余 白 と 枠 線 margin は, margin-top 上 margin-bottom 下 margin-left 左 margin-right 右 に 分 解 可 能 margin と 併 用 しないこと

28 このスライドは 講 義 では 扱 いません 28 作 成 例 h1{ border-top-style:none; border-bottom-style:inset; border-left-style:solid; border-right-style:inset; border-top-width:0px; border-bottom-width:2px; border-left-width:40px; border-right-width:2px; border-top-color:#ffffff; border-bottom-color:#666666; border-left-color:#0000ff; border-right-color:#666666; background-color:#ffffff; color:#333333; text-indent:1em; }

29 このスライドは 講 義 では 扱 いません 29 作 成 例 工 夫 次 第 で 付 箋 紙 のようなデザインも 作 ること ができる

30 30 CSS3で 追 加 された 効 果

31 参 考 資 料 31 CSS3のプロパティについて ベンダプレフィックス 各 ブラウザベンダが 実 験 的 にサポートしている が 現 段 階 では 不 完 全 なプロパティもある 仕 様 が 確 定 していないが 採 用 されているものに ついては 接 頭 辞 (プレフィックス)をつける 確 認 のためのサイト ブラウザ Safari 系 (Safari,Google Chrome 等 ) Firefox 系 (Firefox 等 ) Opera Internet Expplorer ベンダプレフィックス -webkit- -moz- -o- -ms-

32 32 枠 線 効 果 角 丸 効 果 border-radius 値 は 半 径 の 長 さ

33 33 枠 線 効 果 ボックスの 影 効 果 box-shadow 値 は 右 方 向 の 距 離 下 方 向 の 距 離 ぼかす 範 囲 影 の 色 box-shadow:3px 3px 5px #666666;

34 34 文 字 の 影 効 果 文 字 の 影 効 果 text-shadow 値 は 右 方 向 の 距 離 下 方 向 の 距 離 ぼかす 範 囲 影 の 色 text-shadow:2px 2px 3px #999999;

35 35 文 字 の 影 効 果 文 字 の 影 効 果 ( 応 用 ) text-shadow:-1px -1px 1px #333333, 1px 1px 1px #ffffff; color:#666666; background-color:#cccccc;

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

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

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

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の基礎

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

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

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

Adobe® Corporate Template 2005

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

More information

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

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

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

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

WORD 98 入力の手引き

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

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

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

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで 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

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

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

文 書 構 造 とスタイル

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

More information

Microsoft PowerPoint - css [互換モード]

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

More information

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

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

More information

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

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

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

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

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

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

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

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

More information

スライド 1

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

More information

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

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

More information

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

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

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年 Departmental Bulletin Paper / 紀 要 論 文 スタイルシートを 用 いたWebページの 運 用 太 田, 諭 之 ; 大 橋, 和 義 ; 後 藤, 克 嘉 ; 水 野, 保 則 技 術 職 員 による 技 術 報 告 集. 2009, 17, p. 24-27. http://hdl.handle.net/10076/10274 スタイルシートを 用 いた Web ページの

More information

ホームページの作成

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

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

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

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

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

More information

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である

More information

ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される We

ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される We Web HTML/CSSPHPMySQL による Web ショップ 開 設 工 学 博 士 尾 内 理 紀 夫 著 ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

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

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

More information

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

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

More information

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. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

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

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

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ 界 No.1 とも 言 われているデザイナー ナムー が WEB ページ 作 成 の コツを 解 説 していきます 少 し 専 門 的 な 内 容 も 含 まれていますが 分 からない ことは 積 極 的 に 調 べて 1つ1つスキルアップをしていきましょう! マリー HTML CSS のプロフェッショナル うさぎだけど

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

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

18

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

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

textbook.indd

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

More information

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

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3................... 0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................

More information

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................

More information

PNG 形 式 IE は 仕 様 できない favicon がうまく 表 示 されない 場 合 : Microsoft Internet Explorer

PNG 形 式 <link rel=icon type=image/png href=favicon として 利 用 するファイルの URL /> IE は 仕 様 できない favicon がうまく 表 示 されない 場 合 : Microsoft Internet Explorer Harder Labo ハダラボ Web を もっとハードに 探 究 しよう! 無 料 レンタルサーバー NINJA TOOLS 数 ある 無 料 レンタルサーバーから NINJA TOOLS を 使 います 特 に 選 定 の 大 きな 理 由 はありません その 他 land.to ゼロ ウェブ サーバー (PHP 使 用 可 ) 他 たくさんあります 有 料 のレンタルサーバーですが ロリポップ

More information

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

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

More information

Network Computing の基礎

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

More information

PowerPoint プレゼンテーション

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

More information

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

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

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

388-356697252-2.pdf

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

More information

m_sotsuron

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

More information

はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を 図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共 有に活用するものである 目次 基本仕様 ファイル ディレクトリ構成 画像ファイル 対応ブラウザ 品質管理 (X)HTML 制作 文字コード

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

More information

CAS-UB V3.0 の機能強化ポイント

CAS-UB V3.0 の機能強化ポイント CAS-UB V3.0 の 機 能 強 化 ポイント CAS-UB V2.3 から V3.0 への 変 更 点 を 中 心 に CAS-SUPPORT 2015 年 9 月 17 日 第 1 版 発 行 アンテナハウス 株 式 会 社 CAS-UB V3.0 の 機 能 強 化 ポイント CAS-UB V2.3 から V3.0 への 変 更 点 を 中 心 に CAS-SUPPORT 2015 年

More information

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

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

More information

2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4....

2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4.... CSS revision01 2012 9 24 Copyright c 2007 2012 Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License. 1 CSS 4 1.1 CSS................................... 4 1.1.1............................

More information

山梨県ホームページ作成ガイドライン

山梨県ホームページ作成ガイドライン 17 7 ...1...4...4...4...4...5...5 W3C...5...6...6...6...7...8...8...10...10...10... 11...12...12...13...13...13...14...14...14...15...15...16...16...16...16...16...17...18 15 (2003 ) 69.7 81.1 43.6 19.6

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

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

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >>

More information

Microsoft Word - 11_thesis_08k1131_hamada.docx

Microsoft Word - 11_thesis_08k1131_hamada.docx 23 08k1131 24 i JSP HTML CSS JavaScript Flash ios ii 1.... 1 2.... 1 2.1...1 2.2...2 2.3 Flash...2 2.4...2 2.5...3 2.6...3 2.7...4 3.... 4 3.1...4 3.2...6 3.3...8 3.4...9 3.5... 11 3.6... 12 3.7... 13

More information

1 1 1.................... 1 2...................... 2 3................... 3 2 5 1.............................. 5 2........................ 6 3.................... 9 3 11 1...........................

More information

うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子

うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子 タグ 付 きテキストのお 話 1 時 間 目 WEB でのまーくあっぷらんげーじ うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子 書 籍 の 勉 強

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

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

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

More information