ホームページの作成

Size: px
Start display at page:

Download "ホームページの作成"

Transcription

1 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは <hoge>...</hoge> 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを 示 している 属 性 としてさらに 細 かい 設 定 を 開 始 タグの 中 に 書 き 込 むことができる <hoge attribute = "value"> 属 性 は 一 つのタグに 複 数 指 定 することができる.その 場 合 は, 新 たな 属 性 との 境 目 に 半 角 のスペースを 入 れる 開 始 終 了 タグの 入 れ 子 構 造 は 決 して 崩 してはならない HTML ファイルの 作 成 (1) エディタ(TeraPad)を 起 動 する (2) ファイルに 名 前 をつけて 保 存 する その 際,ファイル 形 式 は HTML にする (3) 1 行 目 に<!DOCTYPE html> (4) 2 行 目 に<html>, 最 終 行 には</html> (5) 3 行 目 に<head>, 4 行 目 に</head> ヘッダ 情 報 は<head> </head>の 中 に 加 えていく (6) ヘッダ 情 報 に 以 下 の 二 行 を 記 述 する <meta charset= UTF-8 > 文 字 コードの 指 定 <title>タイトル</title> 文 章 のタイトルの 指 定 (7) </head>の 下 に<body></body>を 加 える 1

2 <!DOCTYPE html> <html> <head> <meta charset= UTF-8 > <title>タイトル</title> </head> <body> </body></html> ( 例 ) 本 文 の 記 述 1:ヘッダーとフッター, 構 造 をあらわすタグ サイト 上 部 をヘッダー, 下 部 をフッターと 呼 ぶ ヘッダーには,サイトがどこに 属 してい るのかをわかるようにタイトルをつける フッターにはコピーライトをつける <header> <h1>タイトル</h1> </header> <footer> (c) Copyright 2014 hogehoge </footer> 構 造 をあらわすタグ article aside figcaption figure header footer hgroup mark nav section time 記 事 の 部 分 関 連 リンク figure 部 分 の 脚 柱 画 像 や 映 像 の 範 囲 指 定 文 書 のヘッダー 部 分 文 書 のフッター 部 分, 作 者 情 報,コピーライトを 記 載 見 出 しタグをグルーピングする 文 字 列 の 中 のハイライト ナビゲーション 文 章 のそれぞれの 要 素 を 囲 む 文 字 列 が 時 間 や 日 付 の 場 合 本 文 の 記 述 2: 見 出 しと 本 文 本 文 は<body>タグで 囲 まれた 部 分, 上 図 ( 例 )の の 部 分 に 書 く.ここでいう 本 文 とは, 主 にテキスト( 文 字 )と 画 像 動 画 などからなりたっている 以 下, 使 用 することができる タグのうち 最 も 基 本 的 なものについて 解 説 する 2

3 (1) 段 落 <p> </p> 文 章 の 本 文 には 一 段 落 ごとに<p>というタグをつける.このタグで 囲 まれ たものがひとつの 段 落 である. (2) タイトル <h1> </h1> / ~ / <h6> </h6> 見 出 しを 設 定 すると,その 部 分 は 大 きくあるいは 太 字 で 表 示 される. 見 出 しは<h1>~<h6>まであり,<h1>が 一 番 大 きな 見 出 しである. (3) 同 一 コンテンツのマークアップ <article> </article> 同 じ 内 容 に 属 する 部 分 を 囲 むことでマークアップする タイトルのタグ h1~h6 はマークアップされた 内 部 ごとに 1 から 始 めることができ る その 他 のタグ (1) テーマやコンテンツの 区 切 り 区 切 り 線 <hr> 単 独 で 用 いられて, 終 了 タグを 持 たない CSS で, 長 さ, 太 さ, 水 平 方 向 の 位 置, 陰 の 有 無 を 指 定 できる 長 さ width: 50%> : 画 面 の 50%の 長 さ 太 さ height: 5> :5 ピクセルの 長 さ align: center 中 央 に 表 示,left 左 寄 せで 表 示,right 右 寄 せで 表 示 (2) ハイパーリンクを 張 る <a href= > </a> ハイパーリンクを 張 ることによって, 文 書 と 文 書,あるいはウェブ サイトとウェブサイトを 結 びつけることができる 引 用 符 で 囲 まれた 箇 所 には,インターネット 上 の URL やファイル 名 を 入 れる 属 性 で target = _blank と 記 述 しておくと,リンク 先 が 別 のウィ ンドウで 開 く(_self / _parent / _top / ウィンドウ 名 ) (3) 画 像 を 挿 入 する <img src = hoge.jpg width = "360" height = "220" alt = " 風 景 > img タグは 開 始 タグ 単 独 で 用 いられる width 属 性 で 画 像 の 幅,height 属 性 で 画 像 の 高 さを 指 定 できる. 別 に 指 定 しなくてもよいが,その 場 合,あらかじめ 画 像 の 大 きさを 調 整 しておく 必 要 がある. 数 値 はピクセル(px) 単 位 で 指 定 する.1px は 約 0.3mm である. 幅 と 高 さを 両 方 指 定 すると, 元 の 画 像 の 縦 横 の 比 率 が 変 わる 可 能 性 があるので, 通 常 はどちらか 一 方 だけを 指 定 する. alt 属 性 では, 画 像 ファイルについての 説 明 を 記 述 しておく. 例 えば, 川 の 写 真 を 入 れてあるならば, alt = 川 の 写 真 とでもいれておけ 3

4 ばよい.コンテンツの 意 味 が 重 複 しないように 注 意 する これは 必 須 項 目 ではないが,ブラウザのテキスト 読 み 上 げ 機 能 や 画 像 の 読 み 込 みがなされなかった 場 合 にユーザーのアクセシビリティがよくな る これ 以 外 に, 文 章 の 部 分 に 構 造 上 の 意 味 づけを 行 うためのタグが 色 々と 用 意 されている. いろいろな 構 造 に 関 するタグ (1) 強 調 <em> </em> と,さらに 強 い 強 調 <strong> </strong> 強 調 された 文 字 列 はブラウザではイタリックやボールドで 表 示 されるが, 実 際 にどのように 表 示 されるかは,ブラウザによる. (2) 定 義 <dfn> </dfn> (3) 引 用 <q> </q>, 長 い 引 用 <blockquote> </blockquote> (4) 引 用 元, 引 用 した 作 品 名 <cite> </cite> (5) 署 名 連 絡 先 <address> </address> (6) メイルの 送 信 :<a href="mailto:(メールアドレス)"> </a> (7) コメントアウト <!- - コメント - -> コメントを 記 述 する.このタグ 内 部 のコメントは,ブラウザでは 表 示 されない. (4) <div> </div> と <span> </span> このタグは 単 にテキストを 領 域 指 定 するために 用 いる. 具 体 的 な 使 い 方 は CSS の 項 を 参 照 せよ. 箇 条 書 き 箇 条 書 きを 表 すときには, 番 号 付 きの 箇 条 書 きと 番 号 を 振 らない 箇 条 書 きの 2 種 類 がある. (1) 番 号 付 き 箇 条 書 き <ol> <li>hogehoge</li> <li>hogehoge</li> </ol> (2) 番 号 無 し 箇 条 書 き <ul> <li>hogehoge</li> <li>hogehoge</li> </ul> 文 章 のタイトル(ヘッダ)と 末 尾 (フッタ)と 自 己 完 結 したセクション (1) <header> </header> 4

5 (2) <footer> </booter> (3) <article> </article> 表 の 作 成 とその 応 用 ウェブサイトにおいて 表 を 作 るには<table> </table>というタグを 用 いる.ウェブサイトに おける 表 組 みの 重 要 性 は, 1. 表 を 出 力 する 2. ウェブサイトのレイアウトを 制 御 する という 二 点 にある. 表 組 のためのタグの 使 い 方 <table border> <tr> </tr> <tr> </tr> </table> <td>(1, 1)</td> <td>(2, 1)</td> <td>(3, 1)</td> <td> (1, 2)</td> <td>(2, 2)</td> <td>(3, 2)</td> </table> <table> </table>:テーブルであることを 示 す <tr> </tr>:テーブル 内 の 行 であることを 示 す <td> <td>: 行 のなかでの 区 切 りセルを 示 す リンク タグと 属 性 タグのなかには, 属 性 を 使 って 値 を 指 定 するものがある. <tag attribute="value"> </tag> <hr>( 水 平 線 を 引 く) align="center/left/right" ( 水 平 線 の 位 置 を 指 定 ) 5

6 noshade [ 影 のない 水 平 線 を 表 示 ] width="number" [ピクセル 単 位 かページ 幅 に 対 する 割 合 (%)で 指 定 ] <a> </a> [アンカー] href="url" (url のサイトにリンクを 張 る) name="text" (ドキュメントの 一 部 に 名 前 を 付 ける) target="name_blank/self/_parent/_top" (href と 共 に 用 いる ターゲットのページ が 表 示 されるウィンドウやフレームを 指 定 する) <figure> </figure> [ 画 像 動 画 の 範 囲 指 定 ] <img> src="url" ( 画 像 ファイルの 指 定 ) alt=" 画 像 の 説 明 " ( 画 像 の 説 明 ) height(width)= number ( 画 像 の 高 さと 幅 を 数 値 で 指 定, 単 位 はピクセルか%) hspace= number ( 画 像 の 左 右 の 余 白 を 指 定, 単 位 はピクセル.) <table> </table> ( 表 組 み) align="left/right/center" (テーブルの 配 置 を 左 寄 せ/ 中 央 揃 え/ 右 寄 せのいずれで 指 定 する) background="url" ( 背 景 に 用 いる 画 像 の url を 指 定 する) border="x" ( 枠 線 の 幅 ) cellpadding="x" (セルの 罫 線 の 内 側 から 内 容 までのスペースをピクセル 単 位 で 指 定 する) cellspacing="x" (セル 間 のスペースをピクセル 単 位 で 指 定 する) vspace="x" (テーブルの 上 下 の 空 白 をピクセル 単 位 で 指 定 する) hspace="x" (テーブルの 左 右 の 空 白 をピクセル 単 位 で 指 定 する) <tr> </tr> (テーブルの 行 の 区 切 り) align="left/right/center" bgcolor="#rrggbb/colorname" valign="top/middle/bottom/baseline" <td> </td>[<th> </th>] ( 行 をセルに 区 切 る) colspan="number" ( 複 数 のセルを 横 方 向 に 結 合 する) rowspan= number ( 複 数 のセルを 縦 方 向 に 結 合 する) height(width)="x / Y%" (セルの 高 さ) 6

7 CSS 現 在 のウェブサイト 作 成 は,まず HTML によってサイトの 構 造 を 記 述 し,レイアウトは CSS(Cascading Style Sheet)でデザインするというのが 主 流 となりつつある. 本 来,HTML はネットワーク 上 のさまざまな 環 境 下 で 情 報 を 共 有 するために 開 発 されたものであり,そ して OS(オペレーティング システム)などが 異 なる 環 境 下 では, 表 示 のされ 方 も 異 なる ことが 考 えられる.したがって,HTML ではウェブサイトの 見 た 目 を 規 定 するような 要 素 は 使 わないようにし, 文 書 の 構 造 を 定 義 することのみに 用 いよう,という 最 近 の 傾 向 は HTML の 本 来 の 精 神 にかなっているといえる. しかし 近 年,ウェブサイトは 以 前 にもまして 見 た 目 やレイアウトが 重 視 されるようになっ てきた.これはサイトの 見 た 目 が,そのサイトのアクセス 数 などに 大 きな 影 響 を 与 える 以 上, 当 然 のことであろう.そこで,レイアウト 情 報 は CSS(Cascading Style Sheet)とい うスタイル ファイルによって 規 定 することになった.CSS を 利 用 することで, 従 来 では 不 可 能 であったより 細 かな 調 整 が 可 能 になったが, 他 方, 未 だ CSS に 対 応 していないブラ ウザでは, 不 可 解 なバグを 発 生 させることがありうる. CSS の 書 式 CSS は, 要 素 (selector)に 対 して 属 性 と 値 という 2 つの 要 素 を 組 み 合 わせる.こ の 場 合 の 要 素 (selector) とは,1 単 独 のタグであったり,2 複 数 タグをまとめたもので あったり,3 任 意 のウェブサイトの 要 素 である. そして,その 文 法 は どの 要 素 に 対 して 何 を:どうする という 順 番 で 記 述 していく. 複 数 の 何 を:どうする を 指 定 したい 場 合 は,それぞれをセミコロンで 区 切 って 記 述 す る.ただし, 改 行 は 任 意 に 行 ってかまわない. 要 素 { 属 性 1: 値 ; 属 性 2: 値 ;} また,CSS では /* */ がコメントとなる. CSS の 記 述 の 仕 方 は 3 種 類 ある. 1. タグに 属 性 として 記 述 する: <h1 style= fontsize:+2; color:red > 2. ページのヘッダ 部 分 ボディ 部 分 に 記 述 する: <head> <style type= text/css ><!-- h1 {font-size:+2; color:red;} h2 {color:blue;} --></style> </head> 3. CSS ファイルに 記 述 する ヘッダ 部 分 に <link rel= stylesheet href= /hoge.css > と 書 き 込 む 7

8 hoge.css というファイルをつくり そこでスタイルを 指 定 する. <div>と<span> <div>, <span> というタグは 単 に 範 囲 を 指 定 する という 機 能 のみを 担 っている.<div> はブロック 単 位 での 指 定 に 用 いて,<span>はその 前 後 で 改 行 されない 場 合 に 用 いる.これら は 様 々な 用 途 に 用 いることができるが,その 主 な 使 用 法 の 一 つが CSS を 用 いてスタイル を 指 定 するときの,スタイルの 適 用 先 を 規 定 するということである. 具 体 的 には 次 のよう な 手 順 を 踏 むことになる. 1. タグに class 属 性 を 指 定 して,クラスに 分 類 する 例 ):<div class= hoge1 > </div> 2. クラスに 対 してスタイルを 指 定 する 例 ):.hoge1 { 属 性 : 値 :} div.hoge1 { 属 性 : 値 ;} 但 し,class 属 性 は 上 記 以 外 のタグにも 用 いることができる. スタイルシートの 記 述 例 a) 色,フォント, 配 置 の 指 定 body {color:#666666; ( 文 字 の 色 を# に) background-color:#ffffee;} ( 背 景 色 を#ffffee に) h1 {font-size:40px; (フォントサイズを 40px) font-family: Comic Sans MS ; (フォントを 指 定 ) color:#666633; text-align:center; (テキストを 中 央 揃 え) font-weight:normal/bold/bolder/lighter/100~900; (テキストの 太 さ) font-style:normal/italic/oblique;} ( 普 通 /イタリック/ 斜 体 にする) b)テキストの 配 置, 余 白 の 設 定 <div>, <p>, <h1>などに 適 用 p{text-indent:20pt; (テキストの 段 落 の 最 初 の 一 文 字 をインデント) line-height:1.5; (テキストの 高 さ, 行 間 を 指 定 する) margin-top:30pt; ( 上 部 余 白 の 設 定 ) margin-bottom:30pt; ( 下 部 余 白 の 設 定 ) margin-left:30pt; ( 左 部 余 白 の 設 定 ) margina-right:30pt; ( 右 部 余 白 の 設 定 ) c) 水 平 線, 表 の 設 定 hr {height:4px; ( 水 平 線 の 高 さの 指 定 ) background-color:#33cc65;} ( 背 景 色 の 設 定 ) table {width:90%; ( 表 の 幅 をウィンドウの 90%に) 8

9 height:115px;} ( 表 の 高 さを 指 定 ) td {padding:10px; (セルの 上 下 左 右 を 10 ピクセル 余 白 をとる) text-align:left;} (セルのテキストを 左 寄 せ) 画 像 とテキストのそろえ 方 を 指 定 する CSS の 値 (<div>, <p>, h1>, <span>, <img> な ど) vertical-align: 値 ; 値 :baseline(イメージの 下 辺 をテキストのベースラインにそろえる, top (イメージの 上 辺 を 行 の 上 にそろえる), middle(イメージの 中 央 を 行 の 中 央 に そろえる), bottom(イメージの 下 辺 を 行 の 下 にそろえる), 数 値 (ベースライン からの 位 置 を 数 値 で 指 定 ), 割 合 (ベースラインからの 位 置 を 割 合 で 決 定 ), float:left/right/none; (コンテンツの 回 り 込 みを 指 定 ) clear: 値 ; (コンテンツの 回 り 込 みを 解 除 ) 部 分 的 にコンテンツの 回 り 込 みをしたくない 場 合 にはこれを 使 う. 画 像,コンテンツの 周 りに 余 白 を 入 れる margin-top: 値 ; margin-right: 値 ; margin-bottom: 値 ; margin-left: 値 ; 値 = 数 値 ( 単 位 :cm, mm, in, pt, pc, px, em, ex) 割 合 ( 単 位 :%) 画 像 の 表 示 位 置 <figure> text-align:center; 背 景 と 罫 線 のデザインをする CSS(<div>, <p> <h1>, <span> <img> <b> 背 景 色 background-color: 値 ; 背 景 色 の 境 界 線 の 角 を 丸 くする border-radius: 10px; 背 景 色 の 境 界 線 に 影 をつける box-shadow: 1px 1px 3px #aaaaaa; コンテンツと 背 景 の 間 の 余 白 padding: 値 ; 数 値 と 割 合 9

10 背 景 画 像 を 表 示 する(<div> <p> <h1> <body> <span> <img> <b> ) background-image:url; 背 景 に 画 像 を 表 示 させる.url では 画 像 ファイルを 指 定 する. 背 景 画 像 をスクロールしないようにする background-attachment:scroll/fixed; 背 景 画 像 を 繰 り 返 して 表 示 しない backgroudn-repeat:repeat/norepeat/repeat-x,repeat-y; repeat 縦 横 に 繰 り 返 し no-repeat 繰 り 返 して 表 示 しない repeat-x 横 にだけ 繰 り 返 し repeat-y 縦 にだけ 繰 り 返 し 背 景 画 像 の 表 示 位 置 を 指 定 background-position: 値 値 横 方 向 と 縦 方 向 それぞれ 数 値, 割 合,left, center, right のいずれかで 指 定 する. 罫 線 の 種 類 border-style: 値 dotted 点 線 dashed 波 線 solid 実 践 double 二 重 線 groove 立 体 枠 罫 線 の 太 さ border-width: 値 ; thin, medium, thick, 数 値 罫 線 の 色 border-color: 値 ; テーブルとフォームのデザインをする CSS 罫 線 のスタイルを 指 定 border: 値 値 値 罫 線 の 種 類, 太 さ, 色 の 順 で 指 定 する 10

11 空 セルの 罫 線 を 表 示 table{empty-cells:show/hide;} セルとセルの 間 隔 を 調 節 table{border-spacing: 値 / 割 合 ;} テーブルやセルの 大 きさの 指 定 table {table-layout:fied; width: 値 ; ( 数 値 か 割 合 ) height: 値 ; ( 数 値 か 割 合 ) } 11

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

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

More information

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

■新聞記事

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

More information

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

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

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

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

Microsoft PowerPoint - InfPro_I9.pptx

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

More information

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

WORD 98 入力の手引き

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

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

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

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

More information

CSSの基礎

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

More information

Microsoft PowerPoint - css [互換モード]

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

More information

文 書 構 造 とスタイル

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

More information

モール管理者マニュアル Ver.1.0

モール管理者マニュアル Ver.1.0 1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14 目 次 1. Html について... 3 1.1. Html とは... 4 1.2. Html タグの 基 本... 5 1.2.1. HTML タグの 基 礎... 5 1.2.2. HTML タグの 種 類 ( 主 要 タグ)... 7 2. Html 編 集 ツール...

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

第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

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

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

6 2 1

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

More information

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

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

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

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

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

More information

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

More information

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

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

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

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

CSSで書籍組版を

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

More information

情報公開システム論2.pptx

情報公開システム論2.pptx 情 報 公 開 システム 論 (2) 神 戸 情 報 大 学 院 大 学 横 山 輝 明 電 子 文 書 としてのWebページ 2 ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h,p://www.u- shimane.ac.jp/ 3 ホームページ(2)

More information

Microsoft PowerPoint - 第03回目.pptx

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

More information

コンピュータサイエンス 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

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

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

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. 画 面 の 分 割 タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項

2. 画 面 の 分 割 <frame>タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項 Web ページ 画 面 構 成 の 技 法 1. 配 置 の 制 御 基 本 的 なタグの 使 い 方 については はじめての HTML などを 通 して 学 習 した ここでは もう 少 し 凝 っ た 画 面 構 成 を 行 うための 基 礎 技 法 について 解 説 する 文 字 や 図 などを 画 面 上 の 任 意 の 位 置 に 配 置 するため には タグを 用 いた 表

More information

第7章 Webページによる情報の発信

第7章 Webページによる情報の発信 筑 波 大 学 情 報 処 理 実 習 Webページによる 情 報 の 発 信 情 報 処 理 実 習 用 手 引 き P.197~226 World Wide Web (WWW) インターネット 上 のハイパーテキストシステム 1989 年 にCERNの 物 理 学 者 Tim Berners-Leeが 発 明 WWWはインターネットとも 呼 ばれるが, 両 者 は 同 義 語 ではない WebページのアドレスURL

More information

Lecture/CompPracR2003/12th

Lecture/CompPracR2003/12th Lecture/CompPracR2003/12th 2016 年 7 月 17 日 コンピュータ 演 習 ( 再 ) 第 12 回 (1) Webページの 作 成 (1) Webページを 作 成 する 道 具 (1) テキストエディタを 使 うメリット デメリット (2) HTML (2) HTMLとは (2) HTMLの 書 き 方 (3) HTMLファイルの 構 造 (3) 空 白 と 改 行

More information

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

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

More information

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

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

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

(0) 準 備 自 分 のUSBメモリのなかに 自 分 の 学 番 の 名 前 をつけたフォルダを 作 成 する( 例 :5210001) 以 下 で 作 成 使 用 する HTML 文 書 や 画 像 ファイルはすべてこのフォルダの 中 に 作 成 すること (1)テキストエディタで HTML 文

(0) 準 備 自 分 のUSBメモリのなかに 自 分 の 学 番 の 名 前 をつけたフォルダを 作 成 する( 例 :5210001) 以 下 で 作 成 使 用 する HTML 文 書 や 画 像 ファイルはすべてこのフォルダの 中 に 作 成 すること (1)テキストエディタで HTML 文 情 報 リテラシー 第 13 回 ウェブページの 作 成 と 更 新 インターネットによって 世 界 中 の 人 に 瞬 時 に 情 報 を 伝 えることができるようになった ウェブページ はその 情 報 発 信 基 地 である ここではウェブページの 作 り 方 を 学 ぶ コンピュータ ストアにはたくさ んのウェブページ 作 成 ソフトが 市 販 されており 操 作 法 はソフトによって 様 々である

More information

HTML文章作成

HTML文章作成 HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう

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

アフィリエイターの為のHTML

アフィリエイターの為のHTML アフィリエイターが 覚 えておくべき HTML 辞 典 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はやまひろに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 を いかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを 禁 じます このレポートに 書 かれた

More information

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための 2016 年 度 春 学 期 ( 月 V/ 火 II ) 情 報 情 報 発 信 と 伝 達 22. 情 報 の 発 信 伝 達 コミュニケーション 23. 情 報 発 信 のためのHTMLの 基 礎 最 初 に 講 義 資 料 は http://astro.u-gakugei.ac.jp/~nishiura 西 浦 クンの 講 義 室 に 縮 小 版 (PDFファイル)を 置 く 予 定 東 京

More information

Web情報システム 第1章~第5章

Web情報システム 第1章~第5章 Web 情 報 システム マルチメディア 情 報 通 信 ソフトウェア 第 1 章 ~ 第 4 章 1 Web 情 報 システム マルチメディア 情 報 の 流 通 Web 情 報 システム 概 論 デジタルメディアの 特 徴 デジタルメディアの 記 述 HTML (Hyper Text Markup Language) Css (Cascading style sheet) デジタルメディアの 制

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 - chap2.doc

Microsoft Word - chap2.doc 第 2 章 ホームページとHTML(タグ) ここでは HTML タグについて 今 まで 使 う 機 会 が 無 かった 学 生 を 対 象 に 説 明 する 既 に HTML タグを 使 ったことのある 学 生 にとっては 知 っている 話 になると 思 うので ざっと 目 を 通 すだけでよいだろう 初 めての 学 生 は 演 習 等 を 通 じて 使 い 慣 れて 欲 しい [1] HTML 通

More information

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

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

More information

eil2009062930_4.ppt

eil2009062930_4.ppt URL (Universal Resource Locator) WWW (World Wide Web) URL http://www.cs.kumamoto-u.ac.jp/ Web ftp://ftp.cc.kumamoto-u.ac.jp/ FTP (File Transfer Protocol) FTP World Wide Web (WWW) Web HTTP (HyperText Transfer

More information

Microsoft PowerPoint - lecture1210.pptx

Microsoft PowerPoint - lecture1210.pptx HTML: HyperText Markup Language 1 ウェブページ 作 成 名 古 屋 大 学 情 報 基 盤 センター 情 報 基 盤 ネットワーク 研 究 部 門 嶋 田 創 通 常 のウェブページはHTMLで 記 されている URLの 最 後 が.htmlで 終 わっている( 右 下 図 )ことが 多 いのはそのせい Windowsは 拡 張 子 が.htmlもしくは.htmの

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

スライド 1

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

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

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS Web クリエイター 能 力 認 定 試 験 スタンダード エキスパート 共 通 XHTML 1.0 対 応 受 験 者 用 リファレンス 目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文

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

第9回

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

More information

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

あいち電子自治体ガイドライン(第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

OpenCity2説明

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

More information

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

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

More information

HTML文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

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

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

PowerPoint プレゼンテーション

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

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

PowerPoint プレゼンテーション

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

More information

第5回

第5回 情 報 教 育 演 習 II 第 5 回 HTML(4) 前 回 に 引 き 続 き Webの 中 心 的 な 技 術 HTML について 実 習 をします 今 回 で HTMLのまとめ になります HTML(4) 1. 水 平 線 をつくる( 復 習 ) 2.イメージを 貼 り 付 ける 今 回 の 課 題 1.HTMLファイルを 作 成 する 2.HTMLファイルの 文 法 をチェックする -

More information

1.5. 根 拠 となる 規 格 ウェブアクセシビリティに 関 する 国 内 の 標 準 規 格 である JIS X :2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ (

1.5. 根 拠 となる 規 格 ウェブアクセシビリティに 関 する 国 内 の 標 準 規 格 である JIS X :2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ ( 六 戸 町 ウェブアクセシビリティガイドライン 2015 年 4 月 1 日 1. はじめに 1.1. 目 的 六 戸 町 ウェブアクセシビリティガイドライン ( 以 下 本 ガイドラインという)は 日 本 工 業 規 格 (JIS X 8341-3)を 踏 まえ 六 戸 町 がウェブサイトにおいて 障 害 者 高 齢 者 の 使 いやすさに 最 大 限 配 慮 して 情 報 提 供 を 行 なうため

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 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用 語 の Web クリエイター 能 力 認 定 試 験 初 級 テキスト HTML 4.01 対 応 1 / 278 第 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

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 : 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp

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

HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック 可 能 です 出 来 ない 場 合 は 最 新 版 AdobeReader をダウンロードしてください ( 無 料 です) ht

HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック 可 能 です 出 来 ない 場 合 は 最 新 版 AdobeReader をダウンロードしてください ( 無 料 です) ht HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける HTML CSS 講 座 初 級 編 HTML セクション 4 時 限 目 HTML タグに 属 性 を 取 り 付 ける 著 :コスパ( 鈴 木 ) 1 HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック

More information

Microsoft Word - 1-html.doc

Microsoft Word - 1-html.doc Web ページ 作 成 の 基 礎 の 基 礎 内 容 : 1. HTML の 仕 組 み 2. HTMLの 文 法 2007-11-16 テキスト 原 案 作 成 原 田 隆 史 ( 慶 應 義 塾 大 学 ) 協 力 : 石 田 栄 美 ( 駿 河 台 大 学 ), 新 居 雅 行 (Apple Japan), 中 島 玲 子 1.Web ページの 仕 組 みと 作 成 1. Web ページを

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

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

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

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 ネットワーク ウェブサイト 関 連 の 基 本 (おさらい) ファイルの 公 開 ポート:80 (デフォルト) ウェブ サーバー 海 洋 大 のネットワーク プロキシ サーバー ファイルの アップロード 外 部 ネットワーク Apache サーバで ファイルを 公 開 パケットの 監 視 HTML 文 書 の 閲 覧 上 記 のネットワーク 構 成 は プロキシサーバーを 除 いておおよそどこでも

More information

(1)

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

More information

1 1.1 1.2 1.3 (a) WYSIWYG (What you see is what you get.) (b) (c) Hyper Text Markup Language: SGML (Standard Generalized Markup Language) HTML (d) TEX

1 1.1 1.2 1.3 (a) WYSIWYG (What you see is what you get.) (b) (c) Hyper Text Markup Language: SGML (Standard Generalized Markup Language) HTML (d) TEX L A TEX HTML 2000 7 2 ([-30]5051.49) 1 2 1.1.............................................. 2 1.2.............................................. 2 1.3................................................ 2 1.4.............................................

More information

3 1 5 1.1....................................... 6 1.2.......................................... 6 1.3..................................... 7 1.4.................................... 8 1.4.1.............................

More information

ウェブアクセシビリティガイドライン

ウェブアクセシビリティガイドライン 兵 庫 県 小 野 市 ウェブアクセシビリティガイドライン 第 1 版 平 成 24 年 12 月 情 報 管 理 課 目 次 1 ガイドライン 策 定 の 目 的... 1 2 ガイドラインの 適 用 範 囲... 1 3 ウェブアクセシビリティの 必 要 性... 1 4 根 拠 となる 規 格... 1 5 配 慮 の 対 象 となる 利 用 者... 2 6 達 成 等 級 と 達 成 基

More information

untitled

untitled MoogaOne 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm

More information

Microsoft Word - CMS操作説明会資料.docx

Microsoft Word - CMS操作説明会資料.docx 平 成 25 年 6 月 24 日 株 式 会 社 ネクストワン 1 今 回 の 操 作 説 明 会 では 次 のようなサンプル 記 事 を 作 成 してみたいと 思 います 2 管 理 画 面 にログインする 1. 九 重 町 役 場 ホームページにアクセスします 2.アドレスバーのホームページ URL の 後 ろに admin と 入 力 します http://www.town.kokonoe.oita.jp/admin/index.php

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

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

(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

Microsoft PowerPoint - manualtachiyomi.pptx

Microsoft PowerPoint - manualtachiyomi.pptx ニックネームはここに 載 る!! マイページの 左 上 ブログのプロフィール 欄 メッセージを 送 った 相 の 受 信 箱 クリックしてもらえるような 興 味 を 引 く 名 前 にしましょう 記 事 を 編 集 削 除 する 下 書 き 保 存 されている= 公 開 されていない 公 開 されている リンクが 付 いていて クリックすると 公 開 されている 記 事 が 開 く 記 事 を 編

More information

HTML入門

HTML入門 HTML ABC of Hyper Text Markup Language 2009 2 HTML2009 Copyright 2009 by BohYoh Shibata 3 WWW HTML WWW WWWworld wide web hyper text resource 4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種

More information