Web概論

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Web概論"

Transcription

1 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved.

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

3 4.1 CSS の仕組みと書式 HTML とスタイルシートの仕組み HTML <html> <head> <link href= style.css type= text/css rel= stylesheet /> </head> <body> ファイルへのパス <h1> 見出し </h1> <p> 段落 </p> </body> </html> CSS(style.css "utf-8"; h1 { color: red; 文字コードの設定 p { font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 3

4 4.1 CSS の仕組みと書式 HTML 要素の プロパティ HTML で記述された要素は大きさ 色 間隔など様々な属性 ( プロパティ ) を持つ CSS の書き方 CSS では HTML のどの要素の何の属性を何の値にするかという指定を記述する 要素を特定する記述を セレクタ という Copyright 2011 ZDRIVE, K.K. All rights reserved. 4

5 4.1 CSS の仕組みと書式 CSS の書式 基本的な書き方 セレクタ { プロパティ : 値 ; セレクタ CSS(style.css "utf-8"; コロン h1 { color: red; 値プロパティ p { font-size: 24px; セミコロン Copyright 2011 ZDRIVE, K.K. All rights reserved. 5

6 4.1 CSS の仕組みと書式 CSS の書式 複数のプロパティをまとめて記述することも可能 セミコロン (;) が区切りの役目を持つ 要素名 { プロパティ : 値 ; プロパティ : 値 ; CSS(style.css "utf-8"; h1 { color: red; セミコロン font-size: 24px; セミコロン 最後のセミコロンは無くても良いが 各行の最後にセミコロンを書くクセをつけることで書き忘れを防ぐことができる Copyright 2011 ZDRIVE, K.K. All rights reserved. 6

7 4.1 CSS の仕組みと書式 CSS の書式 セレクタをまとめて記述することも可能 コンマ (,) で区切る 要素名, 要素名 { プロパティ : 値 ; CSS(style.css "utf-8"; コンマ h1, p { color: red; font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 7

8 4.1 CSS の仕組みと書式 CSS の基本書式 コメントを記述する /* */ で囲む コメントはページ上での見た目に影響を与えない CSS(style.css "utf-8"; /* 見出しと段落 */ h1, p { color: red; font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 8

9 4.2 セレクタの種類 タイプセレクタ HTML の全ての要素名がセレクタになり得る (body, h1~h6, p, a, div など ) "utf-8"; h1 { color: red; h1, p { font-size: 24px; margin: 0; Copyright 2011 ZDRIVE, K.K. All rights reserved. 9

10 4.2 セレクタの種類 クラスセレクタ 書式 : 要素名. クラス属性の値 { プロパティ : 値 ; HTML. クラス属性の値 { プロパティ ; 値 ; <p class= error > これは赤い文字 </p> <p class= info > これは緑文字 </p> CSS p.error { color: red;.info { color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 10

11 4.2 セレクタの種類 ID セレクタ 書式 : 要素 #ID 属性の値 { プロパティ : 値 ; HTML #ID 属性の値 { プロパティ : 値 ; <p id= error > これは赤い文字 </p> <p id= info > これは緑文字 </p> CSS p#error { color: red; #info{ color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 11

12 4.2 セレクタの種類 子孫セレクタ 書式 : 親要素子孫要素 { プロパティ : 値 ; 親要素と子要素 ( または孫要素 ) は半角スペースで区切る HTML <p> これは <span> 赤い </span> 文字 </p> <p> これは <span class= info > 緑 </span> 文字 </p> 半角スペース CSS p span { color: red; p span.info { color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 12

13 4.2 セレクタの種類 クラス ID の値のルール class 属性は 1 つの文書内で同じ値を重複して指定することができるが id 属性は同じ値を重複して使用することはできない <p> これは <span id= red > 赤い </span> 文字 </p> <p> これは <span id= red > 赤い </span> 文字 </p> <p> これは <span class= red > 赤い </span> 文字 </p> <p> これは <span class= red > 赤い </span> 文字 </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 13

14 4.2 セレクタの種類 クラス ID の値のルール 半角英数字 ハイフン ( - ) アンダーバー ( _ ) を使用することができる 大文字 小文字は区別される 数字から開始することはできない 記号から開始することはできない <p> これは <span id= 1-a > 赤い </span> 文字 </p> <p> これは <span class= 1-a > 赤い </span> 文字 </p> <p> これは <span id= a-1 > 赤い </span> 文字 </p> <p> これは <span class= a-1 > 赤い </span> 文字 </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 14

15 4.3 文字の大きさを指定する font-size プロパティ 書式 : { font-size: 値 ; 相対値の単位 px ピクセルモニター上の表示単位 % パーセント 基準となる文字サイズに対し 割合で指定 em エム文字の高さを 1 とする ex エックスハイト小文字の x の高さを 1 とする 絶対値の単位 pt ポイント 1pt = mm pc パイカ 1pc = 12pt = mm cm センチメートル 1cm = 10mm キーワード xx-small 非常に小さい 9px 相当 x-small 小さい 10px 相当 small やや小さい 12px 相当 medium 通常サイズ 16px 相当 large やや大きい 18px 相当 x-large 大きい 24px 相当 xx-large 非常に大きい 32px 相当 larger ひとまわり大きい smaller ひとまわり小さい mm ミリメートル 1mm = 0.1cm in インチ 1in = 25.4mm Copyright 2011 ZDRIVE, K.K. All rights reserved. 15

16 4.3 文字の大きさを指定する 文字サイズ指定の記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS p { font-size: 20px; p span { font-size: 2em; 1em は 1 文字分の大きさであり 親要素の文字サイズに依存する 例 ) 親要素の文字サイズが 20 ピクセルで 子要素の指定が 2em だった場合 子要素の文字サイズは 40 ピクセルとなる Copyright 2011 ZDRIVE, K.K. All rights reserved. 16

17 4.3 文字の大きさを指定する 見出しタグをつけると文字の大きさが変わる ブラウザが持っている CSS が適用される HTML <h1>h1 要素の文字の大きさ </h1> <h2>h2 要素の文字の大きさ </h2> <h3>h3 要素の文字の大きさ </h3> <h4>h4 要素の文字の大きさ </h4> <h5>h5 要素の文字の大きさ </h5> <h6>h6 要素の文字の大きさ </h6> Copyright 2011 ZDRIVE, K.K. All rights reserved. 17

18 4.4 文字の色を指定する color プロパティ 書式 :{ color: 値 ; 値の種類指定方法記述例 16 進数表記 RGB を 16 進数で 2 桁ずつ指定 #FF 進数表記 RGB を 16 進数で 1 桁ずつ指定 #F00 10 進数表記 RGB を 10 進数で指定 ( 最大 255) rgb(255,0,0) % 表記 RGB を % で指定 rgb(100%,0%,0%) 色名色の名前で指定 red Copyright 2011 ZDRIVE, K.K. All rights reserved. 18

19 4.4 文字の色を指定する 16 進数表記 16 進数 : a b c d e f ( 輝度低 輝度高 ) 表記例 : 赤を指定したい場合は R の最大値を入れ G と B は最小値を入れる color: #ff0000; R G B Copyright 2011 ZDRIVE, K.K. All rights reserved. 19

20 4.4 文字の色を指定する <span> タグ 書式 :<span>~</span> 論理的な意味はない 部分的に CSS の指定を変更するために使用する <span> タグと color プロパティを使用した記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS p span { color: #0000ff; font-size: 30px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 20

21 練習 練習 ch04-1 練習 ch04-2 練習 ch04-3 Copyright 2011 ZDRIVE, K.K. All rights reserved. 21

22 4.5 文字を装飾する font-weight プロパティ 書式 :{ font-weight: 値 ; プロパティ 値 説明 数値 100~900(400が標準 ) font-weight normal bold bolder lighter 通常の太さ太字一段階太くする一段階細くする 実際には 9 種類の太さをブラウザが表示できるわけではなく normal と bold の 2 種類しか表示できない Copyright 2011 ZDRIVE, K.K. All rights reserved. 22

23 4.5 文字を装飾する font-weight プロパティを使用した記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS span { font-weight: bold; Copyright 2011 ZDRIVE, K.K. All rights reserved. 23

24 4.5 文字を装飾する text-decoration プロパティ 書式 :{ text-decoration: 値 ; プロパティ 値 説明 line-through 取り消し線をつける textdecoration underline overline blink none 下線をつける上線をつける点滅させる通常表示にする 取り消し線をつける際は 通常 <del> タグを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 24

25 4.5 文字を装飾する text-decoration を使用した記述と表示例 HTML <p class= under > 今日はいい天気ですね </p> <p> <a href= # > 今日はいい天気ですね </a> </p> CSS p.under { text-decoration: underline; /* p タグの中の a タグには下線を付けない */ p a { text-decoration: none; テキストに下線をつけるとテキストリンクのように見えるので使用時には注意が必要 Copyright 2011 ZDRIVE, K.K. All rights reserved. 25

26 4.5 文字を装飾する font-style プロパティ 書式 :{ font-style: 値 ; プロパティ値説明 font-style italic oblique normal 斜体にする 斜体にする 通常表示にする italic と oblique は基本的に同じ Copyright 2011 ZDRIVE, K.K. All rights reserved. 26

27 4.5 文字を装飾する font-style を使用した記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS p span { font-style: italic; Copyright 2011 ZDRIVE, K.K. All rights reserved. 27

28 練習 練習 ch04-4 練習 ch04-5 Copyright 2011 ZDRIVE, K.K. All rights reserved. 28

29 4.6 行の高さを指定する line-height プロパティ 書式 :{ line-height: 値 ; プロパティ値説明 line-height 絶対値 相対値 pt, pc, cm, mm, in px, %, em, ex キーワード normal( 標準的な高さ ) Copyright 2011 ZDRIVE, K.K. All rights reserved. 29

30 4.6 行の高さを指定する 行の高さを指定する 新しい食感 文字の高さ 行の高さ line-height を指定しない場合 line-height の値を 2 (2 倍 ) に指定した場合 Copyright 2011 ZDRIVE, K.K. All rights reserved. 30

31 4.6 行の高さを指定する line-height を使用した記述と表示例 1 HTML <h2> 新着情報 </h2> <dl> <dt>2012/02/23</dt> <dd> 新しい食感のパンが新登場!</dd> <dt>2012/02/22</dt> <dd> 春特集アップしました </dd> </dl> CSS dl { line-height: 2; line-height の値には単位をつけないことが多い Copyright 2011 ZDRIVE, K.K. All rights reserved. 31

32 4.6 行の高さを指定する line-height を使用した記述と表示例 2 HTML <div> <h1> プロパティ : line-height</h1> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> </div> CSS div { font-size: 16px; line-height: 2em; background-color: yellow; p { font-size: 24px; span { font-size: 36px; line-height の値は div で計算された数値 (32px = 16 x 2) が p 要素と span 要素に対しても適用される Copyright 2011 ZDRIVE, K.K. All rights reserved. 32

33 4.6 行の高さを指定する line-height を使用した記述と表示例 3 HTML <div> <h1> プロパティ : line-height</h1> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> </div> CSS div { font-size: 16px; line-height: 2; background-color: yellow; p { font-size: 24px; span { font-size: 36px; line-height の値は div の値である 2 が p 要素と span 要素に対しても適用される p 要素の line-height: 48px = 24 x 2 span 要素の line-height: 72px = 36 x 2 Copyright 2011 ZDRIVE, K.K. All rights reserved. 33

34 練習 練習 ch04-6 Copyright 2011 ZDRIVE, K.K. All rights reserved. 34

35 4.7 テキストを揃える text-align プロパティ 書式 :{ text-align: 値 ; 値 left right center 説明左寄せ右寄せ中央寄せ Copyright 2011 ZDRIVE, K.K. All rights reserved. 35

36 4.7 テキストを揃える text-align を使用した記述と表示例 html <p id="left"> この文章は左揃えとなります </p> <p id="center"> この文章は中央揃えとなります </p> <p id="right"> この文章は右揃えとなります </p> CSS p#left { text-align: left; p#center { text-align: center; p#right { text-align: right; Copyright 2011 ZDRIVE, K.K. All rights reserved. 36

37 4.8 テキストの字下げをする text-indent プロパティ 書式 :{ text-indent: 値 ; インデント ( 字下げ ) プロパティは 文章の 1 行目のインデント幅を指定する際に使用する Copyright 2011 ZDRIVE, K.K. All rights reserved. 37

38 4.8 テキストの字下げをする text-indent を使用した記述と表示例 CSS p#whole { text-indent: 1em; p#half { text-indent: 0.5em; HTML <p id="whole"> この文章は 1 文字分の字下げとなります </p> <p id="half"> この文章は 1 文字の半分の字下げとなります </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 38

39 4.9 HTML 内に CSS を書く style タグを使って head タグ内に書く HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>html とスタイルシートの仕組み </title> <style type="text/css"> h1 { color: red; p { font-size: 24px; </style> </head> <body> <h1> 見出し </h1> <p> 段落 </p> </body> </html> Copyright 2011 ZDRIVE, K.K. All rights reserved. 39

40 4.9 HTML 内に CSS を書く style 属性を使って各タグの中に書く インラインスタイルシート HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>html とスタイルシートの仕組み </title> </head> <body> <h1 style="color: red;"> 見出し </h1> <p style="font-size: 24px;"> 段落 </p> </body></html> Copyright 2011 ZDRIVE, K.K. All rights reserved. 40

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

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

More information

Network Computing の基礎

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

More information

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

CSSの基礎

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

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

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

PowerPoint プレゼンテーション

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

More information

1/2

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

More information

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

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

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 の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

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

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

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

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

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

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

More information

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

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

More information

1 1 1........................... 1 2.............................. 1 3........................ 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

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

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

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

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

セレクタ? セレクタ (Selector 選択 指定するもの ) は どのタグにスタイルを付けるのかを指定するためのものです セレクタ { プロパティ : 値 ; どのタグにスタイルを付けるかの指定 { スタイルの設定名 : スタイルの設定値 ; body { color: red; body を選

セレクタ? セレクタ (Selector 選択 指定するもの ) は どのタグにスタイルを付けるのかを指定するためのものです セレクタ { プロパティ : 値 ; どのタグにスタイルを付けるかの指定 { スタイルの設定名 : スタイルの設定値 ; body { color: red; body を選 CSS のセレクタについて 作成日 : 2016/01/25 作成者 : 西村 はじめに CSS では タグを指定するのに セレクタ というものを使います セレクタを覚えておくと スタイルを付ける時に指定したいタグをうまく指定することができるようになります JavaScript(jQuery) でもタグの指定の方法としてセレクタを使うため JavaScript も学びたい方は覚えておくとお得です この文書では

More information

ホームページの作成

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

More information

Microsoft PowerPoint - css [互換モード]

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

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

スタイルシートを 用 いた 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

書式に示すように表示したい文字列をダブルクォーテーション (") の間に書けば良い ダブルクォーテーションで囲まれた文字列は 文字列リテラル と呼ばれる プログラム中では以下のように用いる プログラム例 1 printf(" 情報処理基礎 "); printf("c 言語の練習 "); printf

書式に示すように表示したい文字列をダブルクォーテーション () の間に書けば良い ダブルクォーテーションで囲まれた文字列は 文字列リテラル と呼ばれる プログラム中では以下のように用いる プログラム例 1 printf( 情報処理基礎 ); printf(c 言語の練習 ); printf 情報処理基礎 C 言語についてプログラミング言語は 1950 年以前の機械語 アセンブリ言語 ( アセンブラ ) の開発を始めとして 現在までに非常に多くの言語が開発 発表された 情報処理基礎で習う C 言語は 1972 年にアメリカの AT&T ベル研究所でオペレーションシステムである UNIX を作成するために開発された C 言語は現在使われている多数のプログラミング言語に大きな影響を与えている

More information

スライド 1

スライド 1 自動更新ホームページ 2 組込み手順書 2015.01 MyKomon 目次 - 1 この手順書では 自動更新コンテンツを既存のホームページへ組込む際に行う作業の手順をご説明しています ホームページの作成 管理を業者様へ委託されている場合は この手順書を業者様へお渡しいただくことをおすすめいたします 既存ホームページへの組込みイメージ P. 2 通常のホームページへ組込む場合 P. 3 組込みの手順

More information

WORD 98 入力の手引き

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

JavaプログラミングⅠ

JavaプログラミングⅠ Java プログラミング Ⅰ 2 回目 ようこそ Java へ 今日の講義で学ぶ内容 画面へのメッセージの表示 文字や文字列 数値を表現するリテラル 制御コードを表すエスケープシーケンス 画面出力の基本形 ソースファイル名 : クラス名.java class クラス名 System.out.println(" ここに出力したい文字列 1 行目 "); System.out.println(" ここに出力したい文字列

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

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

Copyright 2008 All Rights Reserved 2

Copyright 2008 All Rights Reserved 2 Copyright 2008 All Rights Reserved 1 Copyright 2008 All Rights Reserved 2 Copyright 2008 All Rights Reserved 3 Copyright 2008 All Rights Reserved 4 Copyright 2008 All Rights Reserved 5 Copyright 2008 All

More information

ハピタス のコピー.pages

ハピタス のコピー.pages Copyright (C) All Rights Reserved. 10 12,500 () ( ) ()() 1 : 2 : 3 : 2 4 : 5 : Copyright (C) All Rights Reserved. Copyright (C) All Rights Reserved. Copyright (C) All Rights Reserved. Copyright (C) All

More information

Ⅴ 古陶器にみる装飾技法

Ⅴ 古陶器にみる装飾技法 中 小 企 業 総 合 事 業 団 情 報 技 術 部 12 2 105-8453 TEL 03-5470-1523 FAX 03-5470-1526 Copyright 2000 All right reserved 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2 3 4 5 6 7 8 9 -1- 3 4 34 22.5 880 9208 12 1300

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

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

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

More information

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

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

More information

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

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

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

More information

スライド 1

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

More information

準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準で メモ帳 がはいっています HTML を書くには メモ帳 を使いましょう スタート ( すべての ) プログラム アクセサリ メモ帳 HTML はアルファベットと記号の組み合わせで書かれています 必ず直接入力で書きましょう 全角

準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準で メモ帳 がはいっています HTML を書くには メモ帳 を使いましょう スタート ( すべての ) プログラム アクセサリ メモ帳 HTML はアルファベットと記号の組み合わせで書かれています 必ず直接入力で書きましょう 全角 HTML に挑戦! HTML(HyperTextMarkupLanguage) はインターネット上でホームページや動くメールなどを表示させるための言葉です もともと WWW は 世界中の研究者が最新の研究成果を共有するため 1989 年に開発された仕組みです ホームページを見るためのソフト ( ブラウザ ) また そのソフトを動かすための基本ソフト OS(OperatingSystem) プロバイダが使っているサーバーコンピュータなど

More information

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

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

More information

1-4. 日本語論文 ( 横書 ) を作成する場合の留意事項 1) 標題部 1. 論題文字 フォント = 明朝 ( 英数字は Century) 太さ = 太字 大きさ =14 ポイント 中央揃え ( センタリング ) 2 行以上にわたる時の 2 行目以下も中央揃えとする 論題は 1 行 30 文字以

1-4. 日本語論文 ( 横書 ) を作成する場合の留意事項 1) 標題部 1. 論題文字 フォント = 明朝 ( 英数字は Century) 太さ = 太字 大きさ =14 ポイント 中央揃え ( センタリング ) 2 行以上にわたる時の 2 行目以下も中央揃えとする 論題は 1 行 30 文字以 紀要原稿作成書式 [1] 基本的な書式 1-1. ページ設定 ( 横書 ) 1) 用紙サイズ B5 縦 2) 段組 1. 標題部 ( 論題 執筆者名 ) 1 段組 2. 抄録部 1 段組 3. 論文部 ( 論文 参考文献リスト ) 和文 1 段組または 2 段組欧文 1 段組 3) 行数 42 行 4) 文字数 1 段組 (1 行 45 文字 ) 2 段組 (1 行 22 文字 ) 欧文 (1 行半角

More information

- 2 Copyright (C) 2006. All Rights Reserved.

- 2 Copyright (C) 2006. All Rights Reserved. - 2 Copyright (C) 2006. All Rights Reserved. 2-3 Copyright (C) 2006. All Rights Reserved. 70-4 Copyright (C) 2006. All Rights Reserved. ...1...3...7...8 1...9...14...16 2...18...20...21 3...22...23...23...24

More information

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

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

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

問題 1 次の文章は 作業環境について述べたものである を解答群 { } より選び その記号で答えよ にあてはまる適切なもの 設問 1. < 図 1>はルーラーの一部である 1に示されるインデントマーカーを移動することにより を設定することができる < 図 1> { ア. 1 行目のインデントイ.

問題 1 次の文章は 作業環境について述べたものである を解答群 { } より選び その記号で答えよ にあてはまる適切なもの 設問 1. < 図 1>はルーラーの一部である 1に示されるインデントマーカーを移動することにより を設定することができる < 図 1> { ア. 1 行目のインデントイ. Microsoft PowerPoint プレゼンテーション技能認定試験 上級 2007 サンプル問題 知識試験 制限時間 30 分 受験会場 受験番号 氏 名 問題 1 次の文章は 作業環境について述べたものである を解答群 { } より選び その記号で答えよ にあてはまる適切なもの 設問 1. < 図 1>はルーラーの一部である 1に示されるインデントマーカーを移動することにより を設定することができる

More information

FileList Convert a pdf file!

FileList Convert a pdf file! Tamadaigakufuzokuhijirigaokac yugakukoutougakkoupasocom butamadaigakufuzokuhijirigaok acyugakukoutougakkoupasoco mbutamadaigakufuzokuhijiriga 2009 09 20 21 okacyugakukoutougakkoupaso combutamadaigakufuzokuhijiri

More information

Copyright All Rights Reserved. -2 -!

Copyright All Rights Reserved. -2 -! http://ameblo.jp/admarketing/ Copyright All Rights Reserved. -2 -! Copyright All Rights Reserved. -3- Copyright All Rights Reserved. -4- Copyright All Rights Reserved. -5 - Copyright All Rights Reserved.

More information

[ ][ ] HTML [ ] HTML HTML

[ ][ ] HTML [ ] HTML HTML COPYRIGHT 2009 MAGREX, ALL RIGHTS RESERVED. [ ][ ] HTML [ ] HTML HTML [ ][ ] / / / [ ][ ] HTML HTML URL URL [ ][ ] Cellpadding Cellspacing ID ID URL [ ][ ] ID ID URL [ ][ ] ID ID URL [ ][ ] [ ][ ] [ ]

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 CSS CSS.................... 2 4........................... 3 2 4 1................

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................

More information

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する..

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する.. Newdea Inc. プロジェクトセンター ユーザーガイド ウィジェット 2 目次 1. 基本操作... 3 1.1. ウィジェットとは何か... 3 1.2. ウィジェットの目的と構成... 3 1.3. ウィジェットの設置... 5 2. ウィジェットのカスタマイズ... 10 2.1. ウィジェットコードの構成... 10 2.2. ウィジェットの外観を変更する... 11 2.2.1. 個別のウィジェットの外観を変更する...

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

WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発した ハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc

WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発した ハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc インターネットの情報技術 HTML入門 Webページが表示される仕組み WWWServer WWWServer 2 必要なデータを送信 Client WWWServer 1 見たいWebページのURLを入力 URLをもとに ページを指定してデータ送 信を要求 3 目的のWebページを閲覧 Client WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN(

More information

Microsoft Word - 最終版 バックせどりismマニュアル .docx

Microsoft Word - 最終版 バックせどりismマニュアル .docx ism ISM ISM ISM ISM ISM ISM Copyright (c) 2010 All Rights Reserved. Copyright (c) 2010 All Rights Reserved. Copyright (c) 2010 All Rights Reserved. ISM Copyright (c) 2010 All Rights Reserved. Copyright

More information

目 次 1.SNS の概要 1.1 SNS の概要 地域 SNS の起動 地域 SNS の画面構成 自己紹介の設定 2.1 自己紹介の設定 ブログ 3.1 ブログを書く コメントを書く コミュニティ 4.1 コミュニティに

目 次 1.SNS の概要 1.1 SNS の概要 地域 SNS の起動 地域 SNS の画面構成 自己紹介の設定 2.1 自己紹介の設定 ブログ 3.1 ブログを書く コメントを書く コミュニティ 4.1 コミュニティに 2012 年 7 月 厚木市 目 次 1.SNS の概要 1.1 SNS の概要... 1.2 地域 SNS の起動... 1.3 地域 SNS の画面構成... 2. 自己紹介の設定 2.1 自己紹介の設定... 3. ブログ 3.1 ブログを書く... 3.1 コメントを書く... 4. コミュニティ 4.1 コミュニティに参加する... 4.2 コミュニティに招待する 招待される... 4.3

More information

中綴じ3・4級.ren

中綴じ3・4級.ren 99 分野 用 語 解 説 クリック マウスの左ボタンを押す動作のこと ダブルクリック マウスの左ボタンを素早く2度続けてクリックする動作のこと ドラッグ マウスの左ボタンを押したまま マウスを動かすこと タッチタイピング キーボードを見ないでタイピングする技術のこと 右寄せ (右揃え) 入力した文字列などを行の右端でそろえること センタリング (中央揃え) 入力した文字列などを行の中央に位置付けること

More information

分散情報システム構成法

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

More information

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 Word - CSS\202P\201i\212\356\226{\202P_.doc)

(Microsoft Word - CSS\202P\201i\212\356\226{\202P_.doc) スタイルシート ( 第 1 章 基 礎 1) HTMLはWeb 作 成 用 の 言 語 ですが 文 字 飾 りがかなり 貧 弱 です そこを 強 化 した ものがスタイルシートと 言 われるものです さらにスタイルシートには HTMLでは 出 来 ないような 仕 組 みも 取 り 入 れられています スタイルシートよりレベルの 高 い 技 術 は JavaScript ですが スタイルシートの 仕

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

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

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

More information

5.1. ホームページ登録 ホームページ URL を登録します ホームページ URL は基本契約で 1 個 (100MB) まで無料 2 個目以降は有料オプションサービス ( 月額 300 円 / 個 ) で追加登録が可能です (1) 左メニューの HP アカウント登録 リンクをクリックします (1

5.1. ホームページ登録 ホームページ URL を登録します ホームページ URL は基本契約で 1 個 (100MB) まで無料 2 個目以降は有料オプションサービス ( 月額 300 円 / 個 ) で追加登録が可能です (1) 左メニューの HP アカウント登録 リンクをクリックします (1 5. HP( ホームページ ) アカウント情報 ホームページアカウント情報では ホームページ URL の取得やパスワードの変更 ホームページ容量の追加 authid の設定など ホームページ URL に関する管理が行えます HP アカウント情報 にアクセスするには 世帯情報参照 画面で HP アカウント情報 のリンクをクリックします 新しくホームページ URL を取得する場合は 41 ページへ FTP

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

More information

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

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

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方 Ver.2 ユーザマニュアル スタートガイド 第 5 版 最 終 更 新 日 2012/7/11 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方...

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

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. Crescent Eve ホームページ編集ソフト の使い方マニュアル 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 3 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 4 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

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

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

untitled

untitled mitsuya Copyright (C) 2007. All Rights Reserved. 1/1 mitsuya Copyright (C) 2007. All Rights Reserved. 2/2 mitsuya Copyright (C) 2007. All Rights Reserved. 3/3 mitsuya Copyright (C) 2007. All Rights Reserved.

More information

データの作成方法のイメージ ( キーワードで結合の場合 ) 地図太郎 キーワードの値は文字列です キーワードの値は重複しないようにします 同じ値にする Excel データ (CSV) 注意キーワードの値は文字列です キーワードの値は重複しないようにします 1 ツールバーの 編集レイヤの選択 から 編

データの作成方法のイメージ ( キーワードで結合の場合 ) 地図太郎 キーワードの値は文字列です キーワードの値は重複しないようにします 同じ値にする Excel データ (CSV) 注意キーワードの値は文字列です キーワードの値は重複しないようにします 1 ツールバーの 編集レイヤの選択 から 編 手順 4 Excel データを活用する ( リスト / グラフ 色分け ) 外部の表データ (CSV 形式 ) を読み込み リスト表示やカード表示 その値によって簡単なグラフ ( 円 正方形 棒の 3 種類 ) や色分け表示することができます この機能を使って地図太郎の属性情報に無い項目も Excel で作成し CSV 形式で保存することにより 自由に作成することができます (Excel でデータを保存するとき

More information

Web のクライアントサーバモデル

Web のクライアントサーバモデル 第 2 回の内容 クライアントサーバモデル URI HTTP Web のクライアントサーバモデル クライアントサーバモデル ユーザークライアントサーバ 処理要求の入力 処理要求 結果の提示 処理結果 処理 Web のクライアントサーバモデル ユーザー Web ブラウザ Web サーバ URI の指示 HTTP リクエスト Web ページの描画 HTTP レスポンス URI Web ブラウザのアドレスバー

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

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

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

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

More information

untitled

untitled 25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)

More information

how-to-decide-a-title

how-to-decide-a-title Contents 3 4 5 6 8 13 13 14 14 15 15 18 19 Copyright 2014 All Rights Reserved. 2 / 21 URL AdobeReader ( ) http://www.adobe.co.jp/products/acrobat/readstep2.html Copyright 2014 All Rights Reserved. 3 /

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. アウトラインとスタイルの設定 (1) 論文を構成するアウトライン そうすると, 次のような画面になります アウトラインのツールバー は, 一つの段落をあらわしています 文書における段落 ( パラグラフ ) は, 非常に重要な概念です ので, 次節で改めて解説をします ここでは, 章 節ごとに見

2. アウトラインとスタイルの設定 (1) 論文を構成するアウトライン そうすると, 次のような画面になります アウトラインのツールバー は, 一つの段落をあらわしています 文書における段落 ( パラグラフ ) は, 非常に重要な概念です ので, 次節で改めて解説をします ここでは, 章 節ごとに見 2. アウトラインとスタイルの設定 (1) 論文を構成するアウトライン 論文作成のための Microsoft Word2003 活用第 1 回 1. アウトラインの作成 レポートでも論文でも, 評価の対象となるのは内容です 見栄えがよい文書ほど, 読み手としては助 かりますが, それは内容の評価とは直接関係ありません ですから, Word のテクニックを学んでも, 論文の内容にはプラスにならない と考える人が多いのも当然です

More information

WordPressとは WordPressを触ってみる 1 WordPressインストール 2 サイト構造とテーマ構成 3 子テーマでカスタマイズ WordPress制作フロー STEP1 WordPressインストール WordPress制作フロー 全体 サイトタイトルとディスクリプション設定 WordPress制作フロー パーマリンク設定 URL構造の最適化 最初にやること リンクスコア統一に繋がります

More information

1.Wicrosoft Word2010 を起動 1 スタート ボタン スタートメニューの すべてのプログラム Microsoft Office Microsoft Word2010 と順にクリックします Microsoft Word2010 が起動します 2. ページ設定 余白 フォント フォント

1.Wicrosoft Word2010 を起動 1 スタート ボタン スタートメニューの すべてのプログラム Microsoft Office Microsoft Word2010 と順にクリックします Microsoft Word2010 が起動します 2. ページ設定 余白 フォント フォント さくらクラブ 平成 25 年 11 月 18 日 担当鵜殿幸世 同窓会のお知らせ作成 同窓会の通知を ワードアート クリップアートを使ってカラフルに作成します 学習内容ワードアートの挿入と色の変更と変形クリップアートの挿入と図の装飾ページ罫線挿入 完成イメージ 1 1.Wicrosoft Word2010 を起動 1 スタート ボタン スタートメニューの すべてのプログラム Microsoft Office

More information

中綴じ2級.ren

中綴じ2級.ren 98 2 筆記問題 機械 機械操作 検定問題 1 2 に出題される内容 分野 用 語 般 解 説 な は ルビ 漢字などに付けるふりがなのこと 文字ピッチ 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

■新聞記事

■新聞記事 PowerPoint2010 基本操作 P.1 PowerPoint2010 基本操作 1.PowerPoint の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 5 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

Microsoft Word - 操作マニュアル(PowerPoint2010).doc

Microsoft Word - 操作マニュアル(PowerPoint2010).doc PowerPoint2010 基本操作 P.1 PowerPoint2010 基本操作 1.PowerPoint の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 5 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

(2) 情報は記号や記号等の組み合わせのみで伝えず 文字や音声読み上げソフト等でも伝えられるようにする JIS /JIS 解説 記号によっては音声読み上げソフトで読み上げられなかったり 意図したとおりに読み上げられない場合があります また 音声読み上げソフトで記号を読み

(2) 情報は記号や記号等の組み合わせのみで伝えず 文字や音声読み上げソフト等でも伝えられるようにする JIS /JIS 解説 記号によっては音声読み上げソフトで読み上げられなかったり 意図したとおりに読み上げられない場合があります また 音声読み上げソフトで記号を読み (1) 情報は取り消し線や太字等の文字修飾のみで伝えず 文字や音声読み上げソフト等でも伝えられるようにする JIS 7.1.1.1/JIS 7.1.3.3 解説 取り消し線や太字等の文字装飾は 音声読み上げソフト等で伝えられない場合があります また スタイルシート ( 文字の大きさや色 行間の幅 画像の配置等の見栄えに関する情報をまとめたファイル ) による表示を無効にしている利用者にも情報が伝わらない場合があります

More information

PictureFill を 使 用 してバナー 画 像 ( 海 外 航 空 券 専 門 窓 )が 切 り 替 わるようにする その 際 切 替 条 件 は 最 幅 800px で 最 小 デバイスピクセル 比 (-webkit-min-device-pixel-ratio)を 2 とする 新 着 情

PictureFill を 使 用 してバナー 画 像 ( 海 外 航 空 券 専 門 窓 )が 切 り 替 わるようにする その 際 切 替 条 件 は 最 幅 800px で 最 小 デバイスピクセル 比 (-webkit-min-device-pixel-ratio)を 2 とする 新 着 情 スマートフォンサイト 制 作 基 礎 実 習 課 題 01 架 空 の 旅 代 理 店 スカイトラベル 株 式 会 社 の 会 社 サイトをレスポンシブデザインでモバイル 対 応 する 課 題 01-1 スカイトラベル 株 式 会 社 のサイトのトップページ(index.html)を HTML5 形 式 に 変 更 し メディ アクエリを 使 ってレスポンシブデザインに 変 更 する モバイル 用

More information

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4 SuperSQL SuperSQL 2016 6 30 1 SuperSQL ITC 2 SuperSQL 2.1 public html/ssql 2.2 SSedit SSedit (3.1 ) postgresql (ua123456 ) 131.113.101.124 /public html/ssql SuperSQL HTML /public html/ssql http://user.keio.ac.jp/

More information

1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます 例えば町内会でグループページを作成し運用して

1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます 例えば町内会でグループページを作成し運用して ページ設定や参加メンバーの設定 eコミのデザインを決めるスキンの設定など 一般ユーザー にはできず グループ管理者 / 副管理者 のみができる操作について説明していきます 1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます

More information