1 章 Web ページを 作 るための 基 礎 知 識 この 章 では Web ページを 作 るために 必 要 な 基 礎 知 識 として 以 下 のような 内 容 を 説 明 しま す インターネットの 仕 組 み インターネットはデジタル 高 速 回 線 ( 光 ファイバ)で 世 界 中 の 研

Size: px
Start display at page:

Download "1 章 Web ページを 作 るための 基 礎 知 識 この 章 では Web ページを 作 るために 必 要 な 基 礎 知 識 として 以 下 のような 内 容 を 説 明 しま す インターネットの 仕 組 み インターネットはデジタル 高 速 回 線 ( 光 ファイバ)で 世 界 中 の 研"

Transcription

1 HTML+CSS 超 入 門 2012 年 12 月 河 西 朝 雄 本 書 の 一 部 または 全 部 を 著 作 権 法 の 定 める 範 囲 を 超 え 無 断 で 複 写 複 製 転 載 あるい はファイルに 落 とすことを 禁 じます 本 書 に 記 載 された 内 容 は 情 報 の 提 供 のみを 目 的 としています したがって 本 書 を 用 い た 運 用 は 必 ずお 客 様 自 身 の 責 任 と 判 断 によって 行 ってください これらの 情 報 の 運 用 の 結 果 について 著 者 はいかなる 責 任 も 負 いません 2012 河 西 朝 雄

2 1 章 Web ページを 作 るための 基 礎 知 識 この 章 では Web ページを 作 るために 必 要 な 基 礎 知 識 として 以 下 のような 内 容 を 説 明 しま す インターネットの 仕 組 み インターネットはデジタル 高 速 回 線 ( 光 ファイバ)で 世 界 中 の 研 究 機 関 企 業 団 体 プロバイダなどのサーバに 接 続 され プロバイダと 各 個 人 (クライアント)は 電 話 回 線 ( 光 ファイバ)で 接 続 されています クライントをインターネットに 接 続 する 際 に 各 種 サービ スを 行 う 組 織 ( 会 社 )をプロバイダ(Internet Service Provider)と 呼 びます 各 個 人 のコ ンピュータ(クライアント)をインターネットに 接 続 するためには アクセス 回 線 を 介 し てプロバイダに 接 続 します インターネットのデータ 通 信 において 広 い 帯 域 を 使 うことで 同 時 に 送 ることができる 情 報 量 を 増 やすことで 通 信 速 度 を 速 くしたものをブロードバンド と 呼 んでいます こうしたインターネットの 仕 組 みについて 説 明 します Web ページとは WWW はインターネット 上 のハイパーテキストベースの 情 報 システムで テキストの 他 に 静 止 画 動 画 サウンドも 扱 うことができます WWW 上 の 情 報 を Web ページと 呼 びま す 世 界 中 の Web ページがハイパーリンクによりくもの 巣 状 にネットワークされています Web ページはメモ 帳 などのテキストエディタを 用 いて 直 接 HTML+CSSでプログラムフ ァイルを 作 成 します 簡 単 な Web ページを 作 ってみます ブラウザと 画 像 編 集 ソフトの 使 い 方 Web 上 で 使 えるイメージフォーマットには JPEG(ジェイペグ) GIF(ジフ) PNG(ピ ング)があります これらのイメージを 編 集 するためのソフトとして Windows ではペイン トがあります Web ページを 検 索 し 閲 覧 するアプリケーションを Web ブラウザと 呼 びます WWW ブ ラウザ インターネットブラウザなどとも 呼 んだり 単 にブラウザ(browser)とも 呼 びます は 代 表 的 なブラウザとしてマイクロソフトの Internet Explorer などがあります これらのソフトの 使 用 方 法 を 説 明 します

3 1-1 インターネットの 仕 組 み 1. インターネットの 構 造 インターネット(internet)は 個 々のコンピュータネットワークを 相 互 に 結 ぶ 国 際 的 なコ ンピュータネットワークです inter は 相 互 の を 意 味 し net は computer network を 意 味 します インターネットはデジタル 高 速 回 線 ( 光 ファイバ)で 世 界 中 の 研 究 機 関 企 業 団 体 プロバイダなどのサーバに 接 続 され プロバイダと 各 個 人 (クライアント)は 電 話 回 線 ( 光 ファイバ)で 接 続 されています また 研 究 機 関 学 校 企 業 などでは LAN 経 由 で 複 数 のク ライアントがインターネットに 接 続 されています 1 本 の 電 話 回 線 ( 光 ファイバ)を 使 っ て 複 数 のクライアントをインターネットに 接 続 するサーバを 特 にプロキシサーバと 呼 びま す インターネットで 利 用 できる 基 本 サービスとして 以 下 のものがあります Web ページ(ホームページ) 世 界 中 の 様 々な Web ページにある 情 報 を ブラウザを 用 いて 閲 覧 できます 電 子 メール( ) 特 定 の 相 手 にメール(テキスト イメージなど)を 送 / 受 信 できます ファイル 転 送 FTP という 方 法 を 使 ってインターネット 上 でファイル 転 送 を 行 うことができます Web サイトからデータをダウンロードするときや 自 作 のホームページをプロバイダのサーバ に 転 送 するときなどに 使 用 します FTP(File Transfer Protocol)はファイルを 転 送 する プロトコル( 手 順 または 規 約 )を 意 味 します 用 語 LAN(Local Area Network) 企 業 団 体 学 校 などの 同 じ 建 物 構 内 において 同 軸 ケーブルや 光 ファイバを 使 ってコ ンピュータ 同 士 を 接 続 した 通 信 網 サーバ(server) コンピュータネットワークにおいて データや 各 種 サービス 機 能 をクライアントに 提 供 するもとになるコンピュータ クライアント(client) コンピュータネットワークにおいて サーバが 提 供 するデータや 各 種 サービスを 受 ける 個 々の 顧 客 コンピュータ 2. IX と ISP クライントをインターネットに 接 続 する 際 に 各 種 サービスを 行 う 組 織 ( 会 社 )をプロバ イダ(Internet Service Provider)と 呼 びます プロバイダが 行 うサービスとして メール アドレスの 発 行 ホームページ 領 域 の 貸 与 FTTP(ファイル 転 送 )などがあります 具 体 的 な 大 規 模 プロバイダとして NTT コミュニケーションズの OCN,NTT ぷららのぷらら ソ

4 フトバンクテレコム( 旧 日 本 テレコム)の ODN,KDDI の au one net( 旧 DION)などの 通 信 会 社 系 のプロバイダ 富 士 通 系 NEC 系 の BIGLOBE,ソニー 系 の So-net な どのパソコンメーカー 系 のプロバイダなどがあります この 他 にも 地 域 に 密 着 した 小 規 模 プロバイダも 数 多 くあります インターネットへの 接 続 の 元 になる 場 所 を IX(Internet exchange:インターネットの 相 互 接 続 点 )と 呼 びます 各 ISP が IX に 接 続 することで 相 互 の 接 続 が 図 れます 具 体 的 な IX として 民 間 系 の JPIX 学 術 系 の dix-ie( 旧 NSPIXP-2) NTT 系 の JPNAP などがありま す 3. アクセス 回 線 各 個 人 のコンピュータ(クライアント)をインターネットに 接 続 するためには アクセ ス 回 線 を 介 してプロバイダに 接 続 します 従 来 の 電 話 回 線 を 通 じたインターネットへのダイヤルアップ 接 続 では 狭 い 帯 域 しか 使 わ ないので 通 信 速 度 は 128Kbps 以 下 で 遅 いものでした インターネットのデータ 通 信 において 広 い 帯 域 を 使 うことで 同 時 に 送 ることができる 情 報 量 を 増 やすことで 通 信 速 度 を 速 くしたものをブロードバンドと 呼 んでいます ブロード バンド(broadband)は 広 帯 域 という 意 味 です これに 対 し 従 来 のものをナローバンド (narrowband)と 呼 びます ブロードバンドにすることで 動 画 データなどをスムーズに 送 ることができるようになります 主 なブロードバンド 回 線 として 有 線 の ADSL 回 線 と 光 ファイバー 回 線 無 線 のモバイ ル 通 信 回 線 無 線 LAN があります 1ADSL 回 線 インターネットアクセスではクライアントからサーバ 方 向 ( 上 り)よりサーバからクラ イアント 方 向 ( 下 り)へのデータの 流 れが 圧 倒 的 に 多 いです そこで ADSL は 従 来 の 電 話 線 を 使 用 しますが 与 えられた 周 波 数 帯 域 を 下 りの 周 波 数 帯 域 を 広 く 上 りの 周 波 数 帯 域 を 狭 くする( 非 対 称 にする)ことで 下 りの 通 信 速 度 を 速 くしています 周 波 数 帯 域 を 広 く とるということは 一 度 に 送 るデータ 量 が 増 えるので 結 果 的 に 通 信 速 度 が 速 くなるわけです ADSL は Asymmetric Digital Subscriber Line( 非 対 称 デジタル 加 入 者 回 線 )という 意 味 で す ADSL の 通 信 速 度 は 下 りが 1Mbps~50Mbps 上 りが 0.1Mbps~5Mbps 程 度 です ADSL の 欠 点 は NTT 回 線 収 容 局 から 距 離 が 離 れるほど それに 比 例 して 通 信 速 度 が 遅 くなってし まうことです 2 光 ファイバー 回 線 通 常 の 電 話 回 線 の 代 わりに 光 ファイバーを 使 用 します 光 ファイバーを 使 用 することで 大 量 のデータを 高 速 に 通 信 することができます 光 ファイバーの 通 信 速 度 は 下 り/ 上 りとも 100Mbps~1Gbps 程 度 です FTTH(Fiber To The Home)は 一 般 家 庭 に 光 ファイバーを 引 き 電 話 インターネット テレビなどのサービスを 統 合 したサービスの 総 称 です

5 3モバイル 通 信 回 線 ケータイまたはスマートフォンなどの 携 帯 端 末 から 無 線 でインターネットに 接 続 する 回 線 です 2000 年 ~2011 年 位 までは 主 に 3G(3rd. Generation: 第 三 世 代 )と 呼 ばれるモバ イル 通 信 回 線 が 使 用 されていました 各 キャリア( 通 信 会 社 )が 提 供 する 3G によるインタ ーネット 接 続 サービスとして NTT ドコモの i モード au の EZweb ソフトバンクモバ イルの Yahoo!ケータイなどがあります 3G の 通 信 速 度 は 下 り 7.2Mbps 程 度 です スマートフォンの 普 及 に 伴 い 2012 年 頃 から 動 画 や3D ゲームなど 大 量 のデータ 転 送 を 可 能 にする 次 世 代 高 速 通 信 サービス(4G)が 普 及 しだしました docomo は Xi(クロッシ ィ) au は WiMAX(ワイマックス)や 4G LTE SoftBank は ULTRA SPEED や SoftBank4G という 名 前 です 4G の 通 信 速 度 は 下 り 42Mbs~110Mbs 程 度 です 4 無 線 LAN 親 機 ( 無 線 LAN アクセスポイントや 無 線 LAN ルーターなど)と 子 機 (パソコンやスマ ートフォンなど)を 無 線 でつなぐローカルエリアネットワークです 各 家 庭 に 接 続 されてい る ADSL 回 線 または 光 ファイバー 回 線 に 無 線 LAN ルーターをつければ 家 のなかのどこ からでもパソコンやスマートフォンでインターネット 接 続 できます 各 キャリア( 通 信 会 社 )が 設 置 している 無 線 LAN アクセスポイント 基 地 局 を 使 っても 同 じことができます 無 線 LAN で 使 用 する 通 信 方 式 として Wi-Fi(ワイハイ)があります Wi-Fi の 通 信 速 度 は 下 り 54Mbps 程 度 です 補 足 bps bps は Bits Per Second の 意 味 で1 秒 間 に 送 れるビット 数 です 補 助 単 位 (K M G) 重 さは g:グラム 長 さは m:メートル 情 報 量 は b:ビット などの 単 位 を 使 い ます この 主 単 位 で 表 す 値 を 適 当 な 桁 にまるめるために 10^3 ごとの 補 助 単 位 を 使 います この 補 助 単 位 として K(キロ:10^3) M(メガ:10^6) G(ギガ:10^9)などがありま す 128Kb(キロビット)は ^3= =128000b(ビット)です アクセス 回 線 サービス 業 者 クライアントとプロバイダの 接 続 は 通 常 NTT(NTT 東 日 本 NTT 西 日 本 )の 所 有 する 電 話 線 ( 光 ファイバ)を 介 して 行 います クライアント<->クライアントの 最 寄 りの NTT 局 <->プロバイダの 最 寄 りの NTT 局 <->プロバイダという 経 路 です 昔 は アクセス 回 線 =NTT でしたが ADSL の 普 及 に 伴 い NTT 以 外 のアクセス 回 線 サ ービス 業 者 が 登 場 しました アクセス 回 線 サービス 業 者 は 物 理 的 な 電 話 線 ( 光 ファイバ) は NTT のものを 利 用 しますが ADSL モデムや 光 ネットワークユニット (Optical Network

6 Unit; ONU)をクライアントと NTT 局 に 置 いて 独 自 のサービスを 行 います もちろん NTT もアクセス 回 線 サービス 業 者 ( 巨 大 な)で たとえば 光 回 線 を 使 用 したフ レッツ 光 (フレッツ 光 ネクスト B フレッツの 総 称 )や 通 常 の 電 話 回 線 を 使 用 したフレッツ ADSL などのサービス 名 のサービスを 行 っています NTT 以 外 の NTT の 電 話 線 ( 光 ファ イバ)を 利 用 したアクセス 回 線 サービスとしては Yahoo!BB の Yahoo!BB ADSL や Yahoo!BB 光 with フレッツなどがあります NTT の 電 話 線 ( 光 ファイバ)を 利 用 しないものとして 電 力 会 社 や CATV の 所 有 する 光 フ ァイバ 網 を 利 用 したアクセス 回 線 サービスがあります この 場 合 対 象 エリアは 限 定 されて しまいます たとえば 東 京 電 力 の 光 ファイバ 網 を KDDI が 使 用 して 行 うひかり one サービ スがあります クライアントはアクセス 回 線 サービスとプロバイダとを 組 み 合 わせて 選 択 することにな ります たとえば B フレッツ(アクセス 回 線 )+BIGLOBE(プロバイダ) または フ レッツ ADSL(アクセス 回 線 )+OCN(プロバイダ) などです

7 1-2 Web ページとは 1. WWW とは WWW はインターネット 上 のハイパーテキストベースの 情 報 システムで テキストの 他 に 静 止 画 動 画 サウンドも 扱 うことができます WWW 上 の 情 報 を Web ページと 呼 びま す 世 界 中 の Web ページがハイパーリンクによりくもの 巣 状 にネットワークされていると いう 意 味 で World Wide Web(WWW)と 呼 ばれています WWW を 支 える 技 術 要 素 として 以 下 のものがあります HTTP(Hyper Text Transfer Protocol) サーバとクライアントのブラウザ 間 でハイパーテキストを 授 受 するための 通 信 規 約 Web ページの URL は で 始 まっています HTML(Hyper Text Markup Language) Web ページを 記 述 するための 言 語 です HTML 4 以 後 は HTML と CSS を 組 み 合 わせて 記 述 する 方 式 になりました 近 年 は HTML 5 も 使 用 されだしました 用 語 ハイパーリンク 文 書 内 に 埋 め 込 まれた 他 の 文 書 や 画 像 への 結 合 構 造 ハイパーリンクの 入 口 をホット テキストと 呼 び そこをクリックすることで 別 の Web ページにジャンプします 2. Web ページを 作 る 方 法 Web ページを 作 る 方 法 は 大 きく 分 けて3 種 類 あります 本 書 は1の 方 法 で 作 成 します 1テキストエデイタを 用 いて 直 接 HTML+CSS を 打 つ メモ 帳 やTeraPad などのテキストエディタを 用 いて 直 接 HTML+CSS でプログラムファ イルを 作 成 します 2Web オーサリングツール(Web デザインソフト) 視 覚 的 な 操 作 でテキストやイメージを 配 置 しながら Web ページをデザインしていき 結 果 として HTML+CSS コードが 自 動 生 成 されます HTML や CSS の 知 識 がなくても Web ページが 作 成 できます Web オーサリングツールとして IBM のホームページ ビルダーや アドビシステムズの Adobe Dreamweaver マイクロソフトの Microsoft Expression Web などがあります 3CMS(Contents Management System) CMS は Web ページの 作 成 から Web サイトの 構 築 まで 総 合 的 に 管 理 する Web ページ 管 理 システムです プロバイダの 中 には CMS を 活 用 した 簡 単 ホームページ 作 成 といったサ ービスが 提 供 されています Web ページのデザインをテンプレートとして 予 め 用 意 してお き ユーザはイメージやテキストをそのテンプレートに 配 置 するだけで Web ページの 作 成 と 登 録 が 行 えます ブログなども CMS を 利 用 して Web ページの 作 成 登 録 をしている 例 です

8 用 語 Web ページ ホームページ Web サイト WWW 上 の 情 報 を Web ページと 呼 び 各 Web ページはリンクにより 結 合 されています Web ページの 中 でリンクの 基 点 になり 表 紙 や 目 次 などの 役 割 を 持 つページを 特 にホーム ページと 呼 びます 日 本 では Web ページとホームページを 厳 密 に 区 別 せず それらをまと めてホームページと 呼 んでいる 例 が 多 いです この 場 合 基 点 になるホームページのこと をトップページと 呼 ぶことがあります Web ページを 構 成 する HTML ファイルやイメージなどのデータが 置 かれているサーバ 上 の 場 所 を Web サイトと 呼 びます

9 1-3 画 像 (イメージ)の 扱 い Web ページで 使 用 するい 画 像 (イメージ)を 入 手 するには 主 に 次 のような 方 法 がありま す デジカメ(カメラ 付 きケータイ)などで 撮 影 したものをパソコンに 取 り 込 む CD やインターネット 上 で 提 供 されるフリー 素 材 を 利 用 する インターネット 上 の 画 像 を 画 像 編 集 ソフトでキャプチャーして 使 う 1. イメージフォーマットの 種 類 Web 上 で 使 えるイメージフォーマットには JPEG(ジェイペグ) GIF(ジフ) PNG(ピ ング)があります JPEG(Joint Photographic Experts Group) フルカラーに 対 応 していて 色 数 が 多 い 画 像 を 使 った 時 の 圧 縮 率 も 良 いので 写 真 などに 適 しています 不 可 逆 圧 縮 のため 保 存 を 繰 り 返 すと 画 像 劣 化 します GIF(CompuServe Graphics Interchange File) 使 用 できる 色 は 256 色 に 限 られますが ファイルサイズを 小 さくできます 可 逆 圧 縮 の ため 画 像 劣 化 しません 透 過 GIF インターレース GIF アニメーション GIF などの 様 々 な 形 式 をサポートします PNG(Portable Network Graphics) GIF はライセンスの 問 題 があったため GIF に 代 わるフォーマットとして 開 発 されまし た フルカラーに 対 応 していますが JPEG より 圧 縮 率 は 悪 いようです 可 逆 圧 縮 のため 画 像 劣 化 しません 2. 画 像 編 集 ソフト 画 像 編 集 ソフトはペイント 系 とドロー 系 に 分 類 できます ペイント 系 はピクセル 単 位 (ビ ットマップ)で 画 像 を 扱 うタイプのもので Windows に 付 属 しているペイント デジタル カメラに 付 属 のソフト Adobe 社 の Photoshop などがあります ドロー 系 は 数 値 計 算 によって 円 直 線 曲 線 などのベクタデータで 画 像 を 扱 うタイプの もので Adobe 社 の Illustrator などがあります ここでは Windows に 付 属 しているペイントを 使 って 画 像 のキャプチャーから 画 像 編 集 ま での 簡 単 な 流 れを 説 明 します 1 画 像 のキャプチャー Alt + Print Screen でカレントウインドウの 画 像 をクリップボードにキャプチャ ーします Ctrl + V でクリップボードにキャプチャーした 画 像 をペイントに 貼 り 付 けます

10 2 切 り 取 り いちごの 部 分 だけを 切 り 取 ります を 選 択 し いちごの 周 りの 左 上 から 右 下 にかけてマウスをドラッグすると 領 域 が 指 定 されます Ctrl + C で 指 定 領 域 をクリップボードにコピーし ファイル 新 規 作 成 で 新 しいキャンバスを 開 き そこに Ctrl + V で 貼 り 付 けます 3サイズ 変 更 変 形 - サイズ 変 更 / 傾 斜 を 選 択 し イメージサイズを 変 更 します この 例 では 150% に 拡 大 しています

11 4テキストの 挿 入 苺 という 文 字 を 画 像 に 書 き 入 れます 変 形 - 背 景 色 を 不 透 明 にする のチェックを 外 し 背 景 色 を 透 明 にします フォント 色 を 選 択 し を 選 択 し マウスをドラッグして 領 域 を 指 定 し 文 字 を 入 力 しま す 5 背 景 の 塗 りつぶし 背 景 色 を 選 択 し を 選 択 し マウスで 背 景 をクリックして 背 景 を 塗 りつぶします 6イメージの 保 存 ファイル - 名 前 を 付 けて 保 存 を 選 択 し ファイル 名 (strawberry.png) ファイル の 種 類 (PNG)を 指 定 し 保 存 ボタンで 保 存 します

12

13 1-4 最 も 簡 単 な Web ページを 作 る 1. HTML プログラムの 作 成 1 行 のテキストと 1 枚 のイメージだけの 最 も 簡 単 な Web ページを 記 述 する HTML プログ ラムを 以 下 に 示 します <html> <head> <title>my 写 真 集 </title> </head> <body> 秋 のコスモス 畑 <br> <img src="flower.jpg"> </body> </html>

14 このプログラムをメモ 帳 などのエデイタを 使 って 入 力 します ファイルを 適 当 なフォルダに 保 存 します(この 例 では HTML+CSS 1 章 というフォ ルダ) ファイル 名 は test1.html とします HTML ファイルの 拡 張 子 は.html また は.htm とします メモ 帳 でファイルを 保 存 する 場 合 は ファイルの 種 類 を すべてのファイル(*.*) に 設 定 してください 2 作 成 した HTML ファイルの 内 容 をブラウザで 見 る 以 下 のいずれかの 方 法 で 作 成 した HTML ファイルの 内 容 をブラウザで 見 ることができ ます 1 フォルダに 保 存 された test1.html(ファイルタイプは 表 示 されない)をダブルクリック します

15 2ブラウザの ファイル - 開 く メニューを 選 択 するとダイアログが 表 示 されますの で 参 照 ボタンを 使 ってにファイルのパスを 指 定 します

16 1-5 ブラウザ 画 面 の 構 成 Web ページを 検 索 し 閲 覧 するアプリケーションを Web ブラウザと 呼 びます WWW ブ ラウザ インターネットブラウザなどとも 呼 んだり 単 にブラウザ(browser)とも 呼 びます は 代 表 的 なブラウザとしてマイクロソフトの Internet Explorer モジラファウンデーショ ンの Firefox グーグルの Google Chrome アップルの Safari などがあります 1タイトルバー <titel>タグに 指 定 された 内 容 が 表 示 されます 2アドレスバー Web ページの URL やローカルディスク 上 の HTML ファイルのパスを 入 力 する 場 所 です たとえば Yahoo!のホームページの URL は ローカルディス ク 上 のファイルのパスは C: Users Asao Desktop HTML+CSS 1 章 test1.html な どになります 3 更 新 ボタン 最 新 の 情 報 に 更 新 します Web ページを 開 発 中 に HTML ファイルを 修 正 したときに そ の 新 しい 内 容 を 見 る 場 合 にこのボタンをクリックします 4メニューバー ファイル 操 作 ブラウザの 表 示 形 態 の 設 定 などの 作 業 内 容 が 項 目 別 メニューになってい ます 作 成 中 の HTML ファイルの 内 容 をブラウザに 表 示 するには ファイル - 開 く メニューで HTML ファイルのパスを 指 定 します 5ツールバー メニューバーの 中 で 比 較 的 頻 繁 に 使 うものをボタンで 提 供 しています 6タブ

17 1 つのウィンドウ 内 に 複 数 のページを 開 き タブで 表 示 ページを 切 り 替 えることができま す いわゆる タブブラウズ 機 能 です Firefox などではすでに 搭 載 されていた 機 能 です が IE では IE7 からこの 機 能 を 搭 載 しました ファイル - 新 しいタブ で 新 しいタブページが 開 きます 7 本 体 アドレスバーで 指 定 した Web ページの 内 容 が 表 示 されます 8ステータスバー ブラウザの 現 在 の 作 業 情 報 が 表 示 されます たとえば マウスがリンク 上 にあればリン ク 先 の URL がステータスバーに 表 示 されます ページのロード 中 はロードしているファイ ル 名 や 進 捗 状 況 が 表 示 されます 参 考 URL URL(Uniform Resource Locator)はインターネット 上 の 様 々なリソース(データ)に アクセスする 方 法 とアドレスを 組 み 合 わせたもので 次 の 3 つの 部 分 から 構 成 されます リソースへのアクセス 方 法 リソースのあるサーバアドレス(ホスト 名 ) リソースの 名 称 (パス 名 +ファイル 名 ) たとえば Wikipedia 上 の URL の 説 明 ページは 以 下 の URL にあります リソースの 名 称 サーバーアドレス(ホスト 名 ) アクセス 方 法 方 法 です //ja.wikipedia.org がサーバアドレスです /wiki/url がリソ ースの 名 称 です パス 名 のみ 指 定 してある 場 合 はファイル 名 に index.html を 指 定 したもの として 扱 われます URL の 英 大 小 文 字 は 区 別 されます

18 2 章 HTML と CSS の 関 係 HTML は Web ページのコンテンツの 構 造 を CSS はコンテンツの 見 栄 え を 指 定 するものです 当 初 は HTML で 両 方 を 指 定 していましたが 近 年 (HTML 4)では HTML と CSS で 役 割 を 分 ける 方 式 が 標 準 的 な Web ページの 作 り 方 になっています たとえば 文 書 (テキスト)コンテンツは 見 出 しと 本 文 に 分 かれ 本 文 はいくつかの 段 落 に 分 かれ ある 段 落 にはリストが 含 まれていて というようなことがコンテンツ の 構 造 に 相 当 し これらを 指 定 するのが HTML の<h>タグ <p>タグ <ul>や<li>タグで す これに 対 し 見 出 しの 文 字 のサイズや 形 状 各 段 落 の 文 字 のサイズや 形 状 などがコンテン ツの 見 栄 えに 相 当 し これらを 指 定 するのが CSS の font プロパティ color プロパティ border プロパティです

19 2-1 HTML だけで 作 った Web ページ 以 下 のようなコンテンツから 構 成 される Web ページを HTML だけを 使 って 記 述 します 1 本 体 の 背 景 にイメージを 入 れる <body>タグの background アトリビュートにイメージのファイルを 指 定 します back1.jpg は 次 のような ピクセルのイメージです <body background="back1.jpg"> と 指 定 することでこのイメージが 背 景 に 敷 き 詰 められます back1.jpg(52 52 ピクセル) 22 種 類 の 見 出 し <h1>で 大 見 出 し <h3>で 中 見 出 しを 作 ります <h>タグは 見 出 しを 作 るタグで <h>と </h>で 囲 まれた 文 字 は 太 字 (ボールド)で 表 示 されます <h1>( 最 大 )~<h6>( 最 小 )の 6 種 類 で 文 字 の 大 きさを 指 定 します 3イメージ <img>タグの src アトリビュートに 表 示 したいイメージのファイルを 指 定 します 4 本 文 は 1 つの 段 落 で 構 成 <p>と</p>で 囲 んで 1 つの 段 落 を 構 成 します 見 栄 え 上 は<p>と</p>で 囲 んだだけでは 通 常 の 文 字 で 表 示 されるだけです 例 題 2-1 <html> <head> <title> HTML だけの Web ページ </title> </head> <body background="back1.jpg"> <h1>my Diary</h1> <h3> 伊 豆 の 海 へ 行 ってきました</h3> <img src="sea.jpg"> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 伊 豆 の 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </body>

20 </html> 練 習 問 題 2-1 見 出 し イメージ 段 落 を<div>と</div>で 囲 むことで 1つのブロックを 構 成 させます そのブロックに 対 し align アトリビュートに center を 指 定 することで 中 央 揃 えして 表 示 します <html> <head> <title> HTML だけの Web ページ </title> </head> <body background="back1.jpg"> <div align="center"> <h1>my Diary</h1> <h3> 伊 豆 の 海 へ 行 ってきました</h3> <img src="sea.jpg"> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 伊 豆 の 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </div> </body> </html>

21

22 2-2 スタイルシートを 入 れた Web ページ スタイルシートは<head> 部 の<style>~</style>タグで 囲 まれた 範 囲 に 次 のような 書 式 で 記 述 します スタイルシートを 適 用 したいタグに 対 し {で 囲 まれた 範 囲 にプロパティと 値 をコロン(:)で 区 切 って 指 定 します 各 プロパティはセミコロン(;)で 区 切 ります <style> タグ1 { プロパティ 1: 値 ; プロパティ 2: 値 ; タグ 2 { プロパティ 1: 値 ; プロパティ 2: 値 ; </style> たとえば<body>タグに 背 景 となるイメージを 指 定 するには 以 下 のようにします body { background-image:url(back1.jpg); <div>タグに 背 景 色 (background-colo) マージン(margin) パディング(padding) 配 置 (text-align)を 指 定 するには 以 下 のようにします div { background-color:white; margin:50px; padding:20px; text-align:center; </style> マージンは 画 面 の 左 右 上 下 端 から<div>で 指 定 したブロックまでの 幅 を 示 します パデ ィングは<div>で 指 定 したブロックの 左 右 上 下 端 から 内 容 (テキストやイメージ)までの 幅 を 示 します 50px の px はピクセル(pixel)を 示 す 単 位 です 例 題 2-2 <body>タグに 背 景 イメージ back1.jpg のスタイルシートを 適 用 します <div>タグに 背 景 色 を 白 マージンを 50px パディングを 20px 中 央 揃 いのスタイルシートを 適 用 します

23 <html> <head> <title> CSS を 入 れた Web ページ </title> <style> body { background-image:url(back1.jpg); div { background-color:white; margin:50px; padding:20px; text-align:center; </style> </head> <body> <div> <h1>my Diary</h1> <h3> 伊 豆 の 海 へ 行 ってきました</h3> <img src="sea.jpg"> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 伊 豆 の 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </div> </body> </html>

24 練 習 問 題 2-2 <h1>タグの 背 景 色 を pink 文 字 色 を green にし <p>タグのテキスト 配 置 を 左 端 寄 せに しなさい <html> <head> <title> CSS を 入 れた Web ページ </title> <style> body { background-image:url(back1.jpg); div { background-color:white; margin:50px; padding:20px; text-align:center; h1 { background-color:pink; color: green; p {

25 text-align:left; </style> </head> <body> <div> <h1>my Diary</h1> <h3> 伊 豆 の 海 へ 行 ってきました</h3> <img src="sea.jpg"> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 伊 豆 の 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </div> </body> </html>

26 3 章 HTML の 基 礎 HTML(Hyper Text Markup Language)は Web ページを 記 述 する 言 語 です 文 字 の 種 類 サイズ 位 置 などの 組 版 情 報 やリンク 情 報 を 指 示 する 命 令 を 文 章 中 に 記 述 していく 方 式 の 言 語 をマークアップ 言 語 といいます HTML は<>で 囲 んだタグと 呼 ばれる 要 素 を 使 って 文 書 の 構 造 を 指 定 します タグの 中 に 記 述 し 細 かな 指 定 するものをアトリビュート( 属 性 )と 呼 びます たとえば Web ページに chara.gif というイメージファイルを 表 示 するには<img>タグと src アトリビュートを 使 って 次 のようにします <img src="chara.gif"> この 章 ではテキスト イメージ リスト テーブル リンクなどの Web ページを 構 成 す る 要 素 に 関 するタグとアトリビュートの 使 い 方 について 説 明 します

27 3-1 HTML(XHTML)とは HTML(Hyper Text Markup Language)は Web ページを 記 述 する 言 語 です 文 字 の 種 類 サイズ 位 置 などの 組 版 情 報 やリンク 情 報 を 指 示 する 命 令 を 文 章 中 に 記 述 していく 方 式 の 言 語 をマークアップ 言 語 といいます HTML は 通 常 次 のように 記 述 します <html> <head> 見 出 し 部 </head> <body> 本 体 部 </body> </html> 1. タグ HTML は<>で 囲 んだタグと 呼 ばれる 要 素 を 使 って 文 書 の 構 造 を 指 定 します HTML プロ グラムは<html>で 始 まり</html>で 終 わります 次 に<head>と</head>で 囲 まれた 見 出 し 部 分 が 来 ます ここにはタイトルやドキュメントの 付 加 情 報 を 記 述 します 具 体 的 には <title>や JavaScript プログラムなどです <head>に 書 く 内 容 がない 場 合 は 省 略 すること ができます 次 に<body>と</body>で 囲 まれた 本 体 部 分 が 来 ます ここには Web ページに 表 示 される 内 容 を 記 述 します 具 体 的 にはテキストやイメージなどです タグは<html> </html> <head> </head> <title> </title> <body> </body>のようにたいがい 開 始 タグと 終 了 タグのペアになっていますが<img>や<br>タグ のように 終 了 タグのないものもあります 終 了 タグはスラッシュ(/)で 始 まります タグは 大 文 字 で 書 いても 小 文 字 で 書 いても 同 じですが 本 書 では 小 文 字 で 表 記 します 開 始 タグと 終 了 タグの 間 にそのタグで 行 いたい 内 容 を 記 述 します 2. アトリビュート タグの 中 に 記 述 し 細 かな 指 定 するものをアトリビュート( 属 性 )と 呼 びます たとえ ば<img>タグはイメージを Web ページに 表 示 するものですが src アトリビュートを 使 っ てイメージファイル 名 を 指 定 します <img src="chara.gif"> ファイル 名 アトリビュート( 属 性 ) タグ アトリビュートに 与 える 値 ( 文 字 )は 二 重 引 用 符 (")または 単 一 引 用 符 ( )で 囲 みます 本 書

28 では 原 則 として 二 重 引 用 符 を 使 用 します 3. 本 書 で 使 用 するタグ 1 構 造 タグ <html> <head> <body> <!DOCTYPE> 2<head> 部 に 記 述 するタグ <title> <meta> <link> <style> 3<body> 部 に 記 述 するタグ 書 体 制 御 <h> <em> <br> <p> <div> <span> <pre> <hr> <!--> リスト <ul> <ol> <li> <dl> <dt> <dd> テーブル <table> <td> <th> <tr> <caption> イメージ <img> リンク <a> フォーム <form> <input> 4. HTML の 変 遷 HTML は 1990 年 代 初 期 に CERN( 欧 州 原 子 力 研 究 機 関 )の Tim Berners-Lee により 開 発 されたのが 始 まりです その 後 HTML の 仕 様 は HTML 1.0(1993 年 6 月 ) HTML 2.0(1995 年 11 月 ) HTML 3.2(1997 年 1 月 ) HTML 4.0(1997 年 12 月 ) HTML 4.01(1999 年 12 月 )と 改 定 されています HTML の 仕 様 は 当 初 IETF(Internet Engineering Task Force:インターネットで 利 用 さ れる 技 術 を 標 準 化 する 組 織 )で 制 定 していましたが HTML 3.2 以 後 は W3C(World Wide Web Consortium:WWW で 利 用 される 技 術 を 標 準 化 する 組 織 )で 制 定 しています 現 在 の HTML の 仕 様 は HTML 4.0/HTML 4.01( 代 表 して HTML 4.0 と 呼 ぶ)ですが 仕 様 は 次 の 2 つに 分 類 されます HTML 4.0 Strict 見 栄 えに 関 することはスタイルシートに 任 せ 見 栄 えに 関 するタグやアトリビュートを 認 めない 厳 格 (Strict)な 仕 様 HTML 4.0 Transitional 見 栄 えに 関 することはスタイルシートに 任 せるが 見 栄 えに 関 するタグやアトリビュー

29 トも 認 め( 従 来 の 書 き 方 も 認 める) 過 渡 期 (Transitional)の 仕 様 注 動 画 などのマルチメディアをサポートする HTML5 が W3C より 2008 年 にドラフト ( 草 案 )が 発 表 され 2014 年 までの 正 式 勧 告 を 目 指 して 策 定 が 行 われています 5. HTML と XHTML の 違 い HTML を 拡 張 したものとして XHTML(Extensible HyperText Markup Language)があ ります HTML で 使 用 できるタグは XHTML でも 同 じように 使 用 できますが XHTML の 方 が 記 述 に 厳 密 性 を 持 たせています すべてのタグ アトリビュートは 小 文 字 で 書 きます アトリビュートの 値 は 必 ず 引 用 符 で 囲 みます HTML ではアトリビュートの 値 に 数 値 を 指 定 する 場 合 に 引 用 符 を 省 略 することがでましたが XHTML では 必 ず 囲 みます たと えば<img src= hana.jpg width=100>は 必 ず<img src= hana.jpg width= 100 >とします 終 了 タグを 省 略 できません HTML では <ul> <li>リスト1 </ul> のように</li>を 省 略 できましたが これは<li>リスト1</li>としなければなりま せん 空 要 素 のタグは/>で 閉 じます HTML では<img>や<br>などの 終 了 タグのないタグが ありましたが XHTML ではこのようなタグは/>で 閉 じます たとえば 次 のような 記 述 にな ります <img src= hana.jpg /> <br />

30 3-2 テキスト テキスト 関 連 のタグとして 以 下 があります <h1>~<h6> 見 出 し 文 字 を 定 義 します 見 出 し 文 字 の 前 後 に 空 白 行 がとられ 太 字 (ボールド) 表 示 となります h の 後 ろの 数 字 は 文 字 の 大 きさを 示 し 1( 最 大 )~6( 最 小 )を 指 定 します <p> 段 落 を 定 義 します <em> 強 調 文 字 を 定 義 します 斜 体 (イタリック) 表 示 となります <blockquote cite= URL title= タイトル > 引 用 文 を 定 義 します このタグで 囲 まれたテキストは 前 後 に1 行 の 空 白 行 がとられ イ ンデントされて 表 示 されます cite アトリビュートに 引 用 した 文 のあるサイトの URL を 指 定 します 引 用 文 の 上 にマウスが 入 ったときに 表 示 されるテキストを title アトリビュート に 指 定 します <pre> このタグで 囲 まれたテキストの 空 白 タブ 改 行 は HTML ファイル 上 で 見 た 目 の 通 りに ブラウザ 上 で 表 示 されます <br> HTML ファイル 上 で 改 行 を 入 れたり 空 白 行 を 入 れて 書 いてあっても ブラウザ 上 では 無 視 されます <br>は 強 制 的 に 改 行 を 行 います 例 題 3-2 次 のようなテキスト 構 造 の 日 記 のページを 作 ります 大 見 出 しに Web ページのタイトル 中 見 出 しに 各 日 ごとの 日 記 のタイトル 段 落 1に 日 記 の 本 文 小 見 出 しにトピックス 段 落 2 にトピックスの 内 容 という 感 じです <html> <body> <h1>my Diary</h1> <h3> 伊 豆 の 海 </h3> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 伊 豆 の 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いので<em>ビーチパラソル</em>をはりました </p> <h4> 参 加 メンバ</h4> <p> つよぽん<br>

31 やっし<br> ひろぽん<br> </p> </body> </html> 練 習 問 題 3-2 JavaScript のプログラムを 引 用 した 場 合 の 引 用 文 のページを<blockquote>と<pre>を 使 って 作 りなさい <html> <body> <h1>javascript 入 門 </h1> <blockquote cite=" title="if 文 の 例 "> <p> if 文 の 例 <pre> if (a==0) b=0; else a=0; </pre> a が 0 なら b に 0 を 代 入 し 0 でないなら a に 0 を 代 入 </p> </blockquote> </body> </html>

32

33 3-3 イメージ イメージを 表 示 するには<img>タグを 使 用 します <img src= ファイルパス alt= 代 替 えテキスト titel= タイトル width= 幅 height= 高 さ border= 枠 の 幅 align= 回 り 込 み 方 法 > アトリビュート src alt title width height border align 機 能 表 示 するイメージのファイルパスを 指 定 します 表 示 できるイメー ジフォーマットは GIF,JPEG,PNG です 指 定 したイメージがなかったり 表 示 できないフォーマットだった りしてイメージが 表 示 できなかったときに 表 示 されるテキストを 指 定 します イメージの 説 明 文 などを 書 きます イメージ 上 にマウスが 来 た 時 に 表 示 されるテキストを 指 定 します イメージの 表 示 幅 と 高 さを 指 定 します 単 位 はピクセルです イメ ージの 実 際 の 幅 と 高 さと 異 なるピクセル 値 を 与 えた 場 合 イメージは 縮 小 あるいは 拡 大 されることになります 縦 横 を 等 倍 で 縮 小 拡 大 したい 場 合 は width または height の 一 方 のみ 指 定 します width= 50% のように%を 指 定 するとブラウザ 画 面 に 対 する 相 対 的 なパーセントになります 100%がブラウザ 画 面 一 杯 のサイズです 通 常 は CSS で 指 定 します border を 指 定 するとイメージに 外 枠 が 付 加 されます 外 枠 の 幅 をピ クセル 値 で 指 定 します 通 常 は CSS で 指 定 します <img>タグの 後 ろに 記 述 されたテキストをイメージの 左 に 置 くのか 右 に 置 くのかを 指 定 します align= left だとイメージを 画 面 の 左 に 寄 せ 右 側 にテキストを 配 置 します align= right だとイメージを 画 面 の 右 に 寄 せ 左 側 にテキストを 配 置 します この 機 能 はテキス トの 回 り 込 みと 言 います align 指 定 がないと 後 続 のテキストはイメ ージの 下 に 表 示 されます 通 常 は CSS で 指 定 します 例 題 3-3 オーストラリアとカナダのイメージを alt と title アトリビュートを 指 定 して 表 示 します この 例 では canada.gif がないため alt に 指 定 したテキストが 表 示 されています <html> <body> <p> オーストラリア<br> <img src="australia.gif" alt="オセアニアに 位 置 する 連 邦 立 憲 君 主 制 国 家 " title="オースト

34 ラリア"> </p> <p> カナダ<br> <img src="canada.gif" alt=" 北 アメリカ 大 陸 北 部 に 位 置 する 連 邦 立 憲 君 主 制 国 家 " title="カ ナダ"> </p> </body> </html> 練 習 問 題 3-3 オーストラリアのイメージを 左 寄 せ カナダのイメージを 右 寄 せで 配 置 しなさい 外 枠 を 付 け 幅 と 高 さを 指 定 しなさい <html> <body> <p> <img src="australia.gif" align="left" border="1" width="120" height="90"> オーストラリアはオセアニアに 位 置 する 連 邦 立 憲 君 主 制 国 家 です </p> <p> <img src="canada.gif" align="right" border="1" width="120" height="90"> カナダは 北 アメリカ 大 陸 北 部 に 位 置 する 連 邦 立 憲 君 主 制 国 家 です </p> </body> </html>

35 注 ブラウザの 横 幅 を 狭 くして 見 てください

36 3-4 リスト 目 次 やタイトルなどの 項 目 を 並 べたものをリストと 呼 びます 次 の3 種 類 のリストがあ ります 1. 順 序 なしリスト リスト 全 体 を<ul>と</ul>で 囲 み 各 項 目 は<li>と</li>で 囲 みます <ul> <li> 経 済 </li> <li>エンタメ</li> <li>スポーツ</li> </ul> <ul>タグに type アトリビュートを 指 定 すると 項 目 の 先 頭 に 付 くマークを 指 定 できます type を 省 略 すると です 通 常 CSS で 指 定 します type= disk type= circle type= square <ul></ul>の 中 にさらに<ul></ul>を 指 定 すれば 内 側 のリストほどインデントが 深 くなりま す 2. 順 序 リスト リスト 全 体 を<ol>と</ol>で 囲 み 各 項 目 は<li>と</li>で 囲 みます 順 序 リストは などの マークの 代 わりに 1,2,3 などの 番 号 が 付 きます type アトリビュートに I や A などを 指 定 すると 算 用 数 字 の 代 わりにローマ 数 字 やアルファベットで 順 序 を 表 すことができます <ol> <li> 経 済 </li> <li>エンタメ</li> <li>スポーツ</li> </ol> 3. 定 義 リスト リスト 全 体 を<dl>と</dl>で 囲 み <dt>と</dt>で 定 義 テキスト <dd>と</dd>で 意 味 テキ ストを 指 定 します 意 味 テキストはインデントされます リストにはマークや 番 号 は 付 き

37 ません <dl> <dt>エンタメ</dt> <dd>エンターテインメント(entertainment)の 略 </dd> </dl> 例 題 3-4 経 済 エンタメ スポーツを 順 序 リストで 作 ります 経 済 の 中 に 日 本 経 済 と 世 界 経 済 を 順 序 なしリストで 作 ります <html> <body> <h3>カテゴリ</h3> <ol> <li> 経 済 </li> <ul> <li> 日 本 経 済 </li> <li> 世 界 経 済 </li> </ul> <li>エンタメ</li> <li>スポーツ</li> </ol> </body> </html> 練 習 問 題 3-4 北 海 道 東 北 関 東 甲 信 越 を 順 序 なしリストで 作 り 北 海 道 の 中 に 札 幌 市 と 小 樽 市 を 定 義 リストで 作 りなさい <html> <body> <h3>カテゴリ</h3>

38 <ul type="disc"> <li> 北 海 道 </li> <dl> <dt> 札 幌 市 </dt> <dd> 北 海 道 の 政 治 経 済 の 中 心 的 都 市 </dd> <dt> 小 樽 市 </dt> <dd> 歴 史 的 建 造 物 が 数 多 くある 港 湾 都 市 </dd> </dl> <li> 東 北 </li> <li> 関 東 甲 信 越 </li> </ul> </body> </html>

39 3-5 テーブル テーブルは<table> <tr> <td>タグを 組 み 合 わせて 作 ります 全 体 を<table>と</table>で 囲 みます 各 要 素 (セル)は<td>と</td>で 囲 みます 同 一 行 を 構 成 するセルを<tr>と</tr>で 囲 みます <table>タグに border アトリビュートを 指 定 し ないと 枠 が 表 示 されません 通 常 border アトリビュートの 内 容 は CSS で 指 定 します <table border> <tr> <td>orange</td><td>みかん</td> </tr> <tr> <td>apple</td><td>りんご</td> </tr> </table> <td>の 代 わりに<th>を 用 いると そのセルは 太 字 で 中 央 寄 せで 表 示 されます 表 の 先 頭 行 のセルを 見 出 しにする 場 合 に 使 います <caption>タグを 使 うとテーブルの 上 部 にタイトルが 中 央 寄 せで 表 示 されます <td>と</td>の 中 には 通 常 テキストを 置 きますが<img>タグを 使 ってでイメージを 置 くこ ともできます 例 題 3-5 月 日 行 事 を 1 行 の 要 素 とする 予 定 表 テーブルを 作 ります <html> <body> <table border> <caption> 予 定 表 </caption> <tr> <th> 月 </th><th> 日 </th><th> 行 事 </th> </tr> <tr> <td>7 月 </td><td>7 日 </td><td> 七 夕 祭 り</td> </tr> <tr> <td> </td><td>14 日 </td><td> 納 涼 祭 </td>

40 </tr> <tr> <td>8 月 </td><td>15 日 </td><td> 花 火 大 会 </td> </tr> </table> </body> </html> 練 習 問 題 3-5 国 旗 イメージ 国 名 紹 介 内 容 を1 行 の 要 素 とする 国 紹 介 テーブルを 作 りなさい <html> <body> <table border> <caption> 国 紹 介 </caption> <tr> <th> 国 旗 </th><th> 国 名 </th><th> 紹 介 記 事 </th> </tr> <tr> <td><img src="australia.gif" width="80" height="50"></td> <td>オーストラリア</td><td>オーストラリアはオセアニアに 位 置 する 連 邦 立 憲 君 主 制 国 家 です </td> </tr> <tr> <td><img src="canada.gif" width="80" height="50"></td> <td>カナダ</td><td>カナダは 北 アメリカ 大 陸 北 部 に 位 置 する 連 邦 立 憲 君 主 制 国 家 です </td> </tr> </table> </body> </html>

41

42 3-6 リンク(アンカー) 画 面 上 のある 項 目 にマウスが 入 るとハンドマークに 変 わるところがあります これを ホ ットテキスト と 呼 び そこをクリックすると 指 定 された 別 のページに 移 ります これを リンク と 呼 びます ホットテキストを 作 るには<a>タグを 用 い href アトリビュートにリンク 先 の URL また はファイルパスを 指 定 します ホットテキストは 画 面 上 では 他 のテキストと 異 なる 色 で 下 線 付 きで 表 示 されます テキストの 代 わりにイメージを 使 ってリンクを 貼 ることもできます リンク 先 は 大 きく 分 けて 次 の 3 種 類 です 1 他 のサイト <a href=" 2 同 じサイト 上 の 別 のファイル <a href= taro.html > 太 郎 のページ</a> 3 同 じファイル 上 の 別 の 位 置 同 じファイルの 別 の 場 所 にリンクするには 飛 び 先 に<a>タグの name アトリビュートを 使 ってアンカーという 目 印 を 付 けます href アトリビュートにはこの name で 指 定 した 名 前 の 前 に#を 付 けたものを 指 定 します <a href= #book1 > 書 籍 1<a> <a name= book1 ></a> 参 考 パス パスはファイル 位 置 までのフォルダ 名 を 連 ねて ファイルまでの 道 筋 を 示 すものです URL に 指 定 するパスのフォルダ 名 とフォルダ 名 の 区 切 りは / を 使 います 1つ 上 のフォ ルダは../ で 表 します たとえば 図 3-2 に 示 すフォルダ 構 成 でフォルダ taro にカレント フォルダがあった 場 合 の 各 種 パスの 指 定 の 仕 方 を 示 します taro.html taro フォルダのファイル taro.tml /img/taro.png taro の 下 の img フォルダのファイル taro.png../web.html 1 つ 上 のフォルダ(web)のファイル web.html../jiro/jiro.html 同 じ 階 層 の 別 のフォルダ(jiro)のファイル jiro.html 参 考 <a>タグの a は anchor の 先 頭 文 字 anchor は 繋 ぎ 合 っているものの 最 後 部 のもの たとえば 船 の 錨 やリレーの 最 終 走 者 など HTML でのアンカーはリンクの 基 点 のような 意 味 例 題 3-6 W3C や Microsoft のホームページにリンクを 張 ります ホットテキストを 順 序 なしリス

43 トとして 構 成 します <html> <body> <h3>html 講 座 </h3> HTML で Web ページを 作 る 際 の 参 考 にしてください <ul> <li><a href=" の 仕 様 </a><br> W3C のホームページ( <li><a href=" 製 品 について</a><br> マイクロソフトのホームページ( </ul> </body> </html> 練 習 問 題 3-6 写 真 をホットテキストにし 写 真 のクリックでメンバのページ(australia.html または canada.html)にジャンプしなさい 各 メンバのページは 元 のページ(dr3-6.html)に 戻 れ るようにリンクを 張 りなさい dr3-6.html <html> <body> <h3> 国 の 紹 介 </h3> イメージをクリックするとその 国 のページにジャンプします <ul> <li><a href="australia.html"><img src="australia.gif" width="80" height="50"></a> オーストラリア</li> <li><a href="canada.html"><img src="canada.gif" width="80" height="50"></a> カナダ</li> </ul> </body> </html>

44 australia.html <html> <body> <h3>オーストラリアの 紹 介 ページです</h3> <p> オーストラリアはオセアニアに 位 置 する 連 邦 立 憲 君 主 制 国 家 です </p> <p> <a href="dr3-6.html"> 戻 る</a> </p> </body> </html>

45 4 章 CSS の 基 礎 HTML は Web ページのコンテンツの 構 造 ( 見 出 し リスト 段 落 ブロックなど) を CSS はコンテンツの 見 栄 え( 色 背 景 フォント 位 置 など) を 指 定 するものです CSS は Cascading Style Sheet の 意 味 です スタイルシートは<head> 部 に<style>タグを 使 ってタグのスタイルをプロパティと 値 で 定 義 しています タグ 名 { プロパティ: 値 ; プロパティ: 値 ; この 章 では テキスト 装 飾 (フォント テキスト) 色 の 指 定 方 法 ブロック 要 素 とイン ライン 要 素 ブロック 要 素 の 構 造 テキストの 回 り 込 み 背 景 配 置 位 置 リスト リン クといった 内 容 に 関 連 する CSS プロパティの 使 い 方 を 説 明 します

46 4-1 CSS とは HTML は Web ページのコンテンツの 構 造 ( 見 出 し リスト 段 落 ブロックなど) を CSS はコンテンツの 見 栄 え( 色 背 景 フォント 位 置 など) を 指 定 するものです 当 初 は HTML で 構 造 と 見 栄 えの 両 方 を 指 定 していましたが 近 年 では HTML と CSS で 役 割 を 分 ける 方 式 が 標 準 的 な Web ページの 作 り 方 になっています CSS は Cascading Style Sheet の 意 味 で W3C により Cascading Style Sheets, level 1 (CSS1:1996 年 12 月 ) Cascading Style Sheets, level 2 (CSS2:1998 年 5 月 )と 規 格 が 改 定 せれています 1. スタイルシートの 書 き 方 例 題 2-2 で 示 したスタイルシートの div タグにスタイルシートを 定 義 している 部 分 をもう 一 度 見 てみましょう <head> <style> div { background-color:white; margin:50px; padding:20px; text-align:center; </style> </head> スタイルシートは<head> 部 に<style>タグを 使 って 定 義 します スタイルシートを 適 用 する タグに 上 の 例 では タグ 名 { プロパティ: 値 ; プロパティ: 値 ; の よ う に し て タ グ の ス タ イ ル を プ ロ パ テ ィ と 値 で 定 義 し て い ま す た と え ば background-color:white;は 背 景 色 を 示 すプロパティの background-color に white( 白 )と いう 値 を 設 定 します プロパティと 値 はコロン(:)で 区 切 り 各 プロパティはセミコロン (;)で 区 切 ります 最 後 のプロパティの 後 ろに ; はあってもなくても 良 いです 2. クラスの 定 義 タグ 名 に 直 接 スタイルシートを 定 義 したのでは そのタグはいつも 同 じスタイルシート が 適 用 されてしまいますので 汎 用 性 に 欠 けます このような 場 合 はスタイルシートをクラ ス 名 で 定 義 しておき 使 用 するタグの class アトリビュートに 指 定 することができます

47 .MyStyle1 { background-color:white; margin:50px; padding:20px; text-align:center; <div class= MyStyle1 > </div> 3. スタイルシートの 記 述 方 法 3 種 類 外 部 スタイルシート css ファイルを 外 部 に 置 いて, 参 照 する <link rel="stylesheet" type="text/css" href="css ファイル 名 ( 拡 張 子 は.css)" />のように 記 述 する エンベデッド スタイルシート HTML ファイルの<style type="text/css"></style>ブロ ック 内 に CSS を 定 義 する インライン スタイルシート HTML 要 素 の style 属 性 に 指 定 する <div style="スタイ ル 指 定 "></div>のように 記 述 する 本 稿 では, 処 理 の 見 通 しをよくするため, 基 本 的 にエンベデッド スタイルシートを 使 います 一 部 のデザインが 異 なる 場 合 や,スクリプトによってスタイルを 動 的 に 変 える 場 合 には,インライン スタイルシートを 使 います 4. rei1-3.html を 異 なる 記 述 方 法 で 書 く 1style 属 性 に 直 接 指 定 <html> <head> <title> 最 初 のホームページ </title> </head> <body style="background-image:url(fleurdelis_pattern.jpg);"> <div style="background-color:white;margin:50px;padding:20px;text-align:center;"> <h1 style="background-color: #333333;text-align: center;color: #CCCCCC;">My Diary</h1> <h3> 下 田 の 海 へ 行 ってきました</h3> <img src="fh000s007.jpg"> <p style="text-align:left;">

48 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </div> </body> </html> 2CSS を 別 ファイルに rei1-5.html <html> <head> <title> 最 初 のホームページ </title> <link href="rei1-5.css" rel="stylesheet" type="text/css"> </head> <body> <div> <h1>my Diary</h1> <h3> 下 田 の 海 へ 行 ってきました</h3> <img src="fh000s007.jpg"> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> </div> </body> </html> rei1-5.css body { background-image:url(fleurdelis_pattern.jpg); div { background-color:white; margin:50px;

49 padding:20px; text-align:center; h1 { background-color: #333333; text-align: center; color: #CCCCCC; p { text-align:left;

50 4-2 テキスト 装 飾 (フォント テキスト) テキストのフォント( 色 サイズ ファミリなど)を 指 定 する font 系 プロパティとして 以 下 があります プロパティ color font-size font-family font-weight font-style font-variant font 機 能 文 字 色 フォントサイズ フ ォ ン ト フ ァ ミ リ ー 名 総 称 フ ァ ミ リ 名 と し て serif( 明 朝 体 系 ),sans-serif(ゴ シック 体 系 ),cursive( 筆 記 体 系 ),monospace( 等 幅 系 ),fantasy( 装 飾 系 )が 指 定 できる 個 々のファイミリ 名 を 指 定 する 場 合 は MS 明 朝, MS P ゴシック のように で 囲 む フォント 幅 ( 太 字 指 定 ) normal,bold 100( 最 も 細 い)~900( 最 も 太 い)の 値 フォントスタイル( 斜 体 指 定 ) normal,italic フォントバリエーション normal,small-caps 複 数 のフォントプロパティを 次 の 順 序 で 設 定 各 プロパティは 空 白 で 区 切 る font-style,font-variant,font-weight,font-size/line-height,font-family 例 :font:italic bold 12pt/1.5em serif テキストの 行 間 位 置 揃 えなどを 指 定 する text 系 プロパティとして 以 下 があります プロパティ 機 能 line-height 行 間 隔 text-align 配 置 left( 左 寄 せ),right( 右 寄 せ),center( 中 央 寄 せ),justyfy ( 両 端 揃 え) text-decolation 文 字 装 飾 none,underline( 下 線 ),line-through( 打 ち 消 し 線 ) letter-spacing 文 字 間 隔 font-size,line-height,margin,padding,border などに 指 定 する 長 さや 幅 の 単 位 として 相 対 単 位 と 絶 対 単 位 があります プロパティに 指 定 する 数 値 の 後 ろにこれらの 単 位 を 示 す 文 字 を 指 定 します 相 対 単 位 意 味 em 使 用 されている 文 字 の 高 さ ex 子 文 字 の x の 高 さ % パーセント 比 率

51 絶 対 単 位 pt pc px in mm cm 意 味 ポイント 1 ポイント=1/72 インチ パイカ 1 パイカ=12 ポイント ピクセル インチ 1 インチ=2.54cm ミリメートル センチメートル 例 題 4-2 フォントサイズを 12 ポイント フォントファミリーを sans-serif 色 を 青 行 間 を 使 用 文 字 の 1.5 倍 に 設 定 したスタイルシートをクラス 名 text1 で 定 義 します <html> <head> <style type="text/css">.text1 { font-size:12pt; font-family:sans-serif; color:blue; line-height:1.5em; </style> </head> <body> <p class="text1"> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </p> </body> </html> 練 習 問 題 4-2 強 調 文 字 を 指 定 する<em>タグのスタイルシートに 文 字 サイズ 16 ポイント 斜 体 赤 を 指 定 しなさい

52 <html> <head> <style type="text/css">.text1 { font-size:12pt; font-family:sans-serif; color:blue; line-height:1.5em; em { font-size:16pt; font-style:italic; color:red; </style> </head> <body> <p class="text1"> 8 月 1 日 夏 の 空 に<em> 熱 気 球 </em>が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </p> </body> </html>

53 4-3 色 の 指 定 方 法 色 の 指 定 は blue や green などの 色 名 を 示 す 英 単 語 で 指 定 できますが 次 のような 16 進 数 の RGB 値 (Red-Green-Blue)で 指 定 することもできます 各 要 素 は 00~ff の 値 をとり 00 が 一 番 弱 く ff が 一 番 強 くその 色 の 成 分 がでます 16 進 を 示 す a~f の 記 号 は A~F でも 良 いです #rrggbb 青 成 分 00~ff 緑 成 分 00~ff 赤 成 分 00~ff 光 の 赤 と 青 を 混 ぜると 紫 赤 と 緑 なら 黄 緑 と 青 なら 水 色 赤 緑 青 なら 白 となります 代 表 的 な 16 色 の 色 名 と 16 進 RGB 値 を 以 下 に 示 します 色 名 16 進 RGB 値 色 aqua #00ffff 水 色 black # 黒 blue #0000ff 青 fuchsia #ff00ff 赤 紫 gray # 灰 green # 緑 lime #00ff00 ライムグリーン maroon # くり 色 navy # ネイビーブルー olive # オリーブ purple # 紫 red #ff0000 赤 silver #c0c0c0 銀 teal # 薄 い 青 緑 white #ffffff 白 yellow #ffff00 黄 色 名 green の 16 進 値 が#00ff00 でなく# になっているのは# は#00ff00 より 薄 い 緑 で こちらの 方 が 実 際 の 緑 に 近 いからです 例 題 4-3 olive(#808000)と limegreen(#32cd32)をテーブルのセルの 背 景 色 に 指 定 します <html> <head>

54 <style type="text/css">.olive { color:#000000; background-color:#808000;.limegreen { color:#000000; background-color:#32cd32; </style> </head> <body> <table border="1"> <caption> 色 見 本 </caption> <tr class="olive"> <td>olive</td><td>#808000</td> </tr> <tr class="limegreen"> <td>limegreen</td><td>#32cd32</td> </tr> </table> </body> </html> 練 習 問 題 4-3 blueviolet(#8a2be2)と indigo(#4b0082)を 追 加 した 色 見 本 を 作 りなさい この2 色 が 背 景 色 のときのテキスト 色 は 白 とします <html> <head> <style type="text/css">.olive {

55 color:#000000; background-color:#808000;.limegreen { color:#000000; background-color:#32cd32;.blueviolet { color:#ffffff; background-color:#8a2be2;.indigo { color:#ffffff; background-color:#4b0082; </style> </head> <body> <table border="1"> <caption> 色 見 本 </caption> <tr> <td class="olive">olive<br>#80800</td><td class="blueviolet">blueviolet<br>#8a2be2</td> </tr> <tr> <td class="limegreen">limegreen<br>#32cd32</td><td class="indigo">indigo<br>4b008</td> </tr> </table> </body> </html>

56 参 考 色 名 がブラウザで 定 義 されている 140 色 があります この 140 色 の 色 名 16 進 数 色 見 本 を 表 示 するプログラムです JavaScript を 使 用 しています <html> <head> <style type="text/css"> td { width:140px; font-size:10.5pt; </style> </head> <body> <script type="text/javascript"> var colname=new Array(28); colname[0]=new Array("black","aliceblue","darkcyan","lightyellow","coral"); colname[1]=new Array("dimgray","lavender","teal","lightgoldenrodyellow","tomato"); colname[2]=new Array("gray","ghtsteelblue","darkslategray","lemonchiffon","orangered"); colname[3]=new Array("darkgray","lightslategray","darkgreen","wheat","red"); colname[4]=new Array("silver","slategray","green","burlywood","crimson"); colname[5]=new Array("lightgrey","steelblue","forestgreen","tan","mediumvioletred"); colname[6]=new Array("gainsboro","royalblue","seagreen","khaki","deeppink"); colname[7]=new Array("whitesmoke","midnightblue","mediumseagreen","yellow","hotpink"); colname[8]=new Array("white","navy","mediumaquamarine","gold","palevioletred"); colname[9]=new Array("snow","darkblue","darkseagreen","orange","pink"); colname[10]=new Array("ghostwhite","mediumblue","aquamarine","sandybrown","lightpink"); colname[11]=new Array("floralwhite","blue","palegreen","darkorange","thistle"); colname[12]=new Array("linen","dodgerblue","lightgreen","goldenrod","magenta"); colname[13]=new

57 Array("antiquewhite","cornflowerblue","springgreen","peru","fuchsia"); colname[14]=new Array("papayawhip","deepskyblue","mediumspringgreen","darkgoldenrod","violet"); colname[15]=new Array("blanchedalmond","lightskyblue","lawngreen","chocolate","plum"); colname[16]=new Array("bisque","skyblue","chartreuse","sienna","orchid"); colname[17]=new Array("moccasin","lightblue","greenyellow","saddlebrown","mediumorchid"); colname[18]=new Array("navajowhite","powderblue","lime","maroon","darkorchid"); colname[19]=new Array("peachpuff","paleturquoise","limegreen","darkred","darkviolet"); colname[20]=new Array("mistyrose","lightcyan","yellowgreen","brown","darkmagenta"); colname[21]=new Array("lavenderblush","cyan","darkolivegreen","firebrick","purple"); colname[22]=new Array("seashell","aqua","olivedrab","indianred","indigo"); colname[23]=new Array("oldlace","turquoise","olive","rosybrown","darkslateblue"); colname[24]=new Array("ivory","mediumturquoise","darkkhaki","darksalmon","blueviolet"); colname[25]=new Array("honeydew","darkturquoise","palegoldenrod","lightcoral","mediumpurple"); colname[26]=new Array("mintcream","lightseagreen","cornsilk","salmon","slateblue"); colname[27]=new Array("azure","cadetblue","beige","lightsalmon","mediumslateblue"); var colnum=new Array(28); colnum[0]=new Array("#000000","#f0f8ff","#008b8b","#ffffe0","#ff7f50"); colnum[1]=new Array("#696969","#e6e6fa","#008080","#fafad2","#ff6347"); colnum[2]=new Array("#808080","#b0c4de","#2f4f4f","#fffacd","#ff4500"); colnum[3]=new Array("#a9a9a9","#778899","#006400","#f5deb3","#ff0000"); colnum[4]=new Array("#c0c0c0","#708090","# ","#deb887","#dc143c"); colnum[5]=new Array("#d3d3d3","#4682b4","#228b22","#d2b48c","#c71585"); colnum[6]=new Array("#dcdcdc","#4169e1","#2e8b57","#f0e68c","#ff1493"); colnum[7]=new Array("#f5f5f5","#191970","#3cb371","#ffff00","#ff69b4");

58 colnum[8]=new Array("#ffffff","#000080","#66cdaa","#ffd700","#db7093"); colnum[9]=new Array("#fffafa","#00008b","#8fbc8f","#ffa500","#ffc0cb"); colnum[10]=new Array("#f8f8ff","#0000cd","#7fffd4","#f4a460","#ffb6c1"); colnum[11]=new Array("#fffaf0","#0000ff","#98fb98","#ff8c00","#d8bfd8"); colnum[12]=new Array("#faf0e6","#1e90ff","#90ee90","#daa520","#ff00ff"); colnum[13]=new Array("#faebd7","#6495ed","#00ff7f","#cd853f","#ff00ff"); colnum[14]=new Array("#ffefd5","#00bfff","#00fa9a","#b8860b","#ee82ee"); colnum[15]=new Array("#ffebcd","#87cefa","#7cfc00","#d2691e","#dda0dd "); colnum[16]=new Array("#ffe4c4","#87ceeb","#7fff00","#a0522d","#da70d6"); colnum[17]=new Array("#ffe4b5","#add8e6","#adff2f","#8b4513","#ba55d3"); colnum[18]=new Array("#ffdead","#b0e0e6","#00ff00","#800000","#9932cc"); colnum[19]=new Array("#ffdab9","#afeeee","#32cd32","#8b0000","#9400d3"); colnum[20]=new Array("#ffe4e1","#e0ffff","#9acd32","#a52a2a","#8b008b"); colnum[21]=new Array("#fff0f5","#00ffff","#556b2f","#b22222","#800080"); colnum[22]=new Array("#fff5ee","#00ffff","#6b8e23","#cd5c5c","#4b0082"); colnum[23]=new Array("#fdf5e6","#40e0d0","#808000","#bc8f8f","#483d8b"); colnum[24]=new Array("#fffff0","#48d1cc","#bdb76b","#e9967a","#8a2be2"); colnum[25]=new Array("#f0fff0","#00ced1","#eee8aa","#f08080","#9370db"); colnum[26]=new Array("#f5fffa","#20b2aa","#fff8dc","#fa8072","#6a5acd"); colnum[27]=new Array("#f0ffff","#5f9ea0","#f5f5dc","#ffa07a","#7b68ee"); var forecol=new Array(28); forecol[0]=new Array("#ffffff","#000000","#ffffff","#000000","#ffffff"); forecol[1]=new Array("#ffffff","#000000","#ffffff","#000000","#ffffff"); forecol[2]=new Array("#ffffff","#000000","#ffffff","#000000","#ffffff"); forecol[3]=new Array("#000000","#ffffff","#ffffff","#000000","#ffffff"); forecol[4]=new Array("#000000","#ffffff","#ffffff","#000000","#ffffff"); forecol[5]=new Array("#000000","#ffffff","#ffffff","#000000","#ffffff"); forecol[6]=new Array("#000000","#ffffff","#ffffff","#000000","#ffffff"); forecol[7]=new Array("#000000","#ffffff","#ffffff","#000000","#ffffff"); forecol[8]=new Array("#000000","#ffffff","#000000","#000000","#ffffff"); forecol[9]=new Array("#000000","#ffffff","#000000","#000000","#000000"); forecol[10]=new Array("#000000","#ffffff","#000000","#000000","#000000"); forecol[11]=new Array("#000000","#ffffff","#000000","#000000","#000000"); forecol[12]=new Array("#000000","#ffffff","#000000","#000000","#ffffff"); forecol[13]=new Array("#000000","#ffffff","#000000","#000000","#ffffff");

59 forecol[14]=new Array("#000000","#000000","#000000","#000000","#ffffff"); forecol[15]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[16]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[17]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[18]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[19]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[20]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[21]=new Array("#000000","#000000","#ffffff","#ffffff","#ffffff"); forecol[22]=new Array("#000000","#000000","#ffffff","#ffffff","#ffffff"); forecol[23]=new Array("#000000","#000000","#ffffff","#ffffff","#ffffff"); forecol[24]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[25]=new Array("#000000","#000000","#000000","#ffffff","#ffffff"); forecol[26]=new Array("#000000","#ffffff","#000000","#ffffff","#ffffff"); forecol[27]=new Array("#000000","#ffffff","#000000","#ffffff","#ffffff"); var i,j; document.write("<table border='1'>"); for (i=0;i<28;i++){ document.write("<tr>"); for (j=0;j<5;j++){ document.write("<td style='background-color:"+colnum[i][j]+";color:"+forecol[i][j]+"'>"+colname[i][j]+"<br>"+c olnum[i][j]+"</td>"); document.write("</tr>"); document.write("</table>"); </script> </body> </html>

60

61 4-4 ブロック 要 素 とインライン 要 素 HTML のタグは 大 きくはブロック 要 素 とインライン 要 素 に 分 けられます ブロック 要 素 は 文 書 の 段 落 見 出 し リスト テーブルなどの 骨 組 となる 要 素 で ページの 横 幅 一 杯 の 領 域 を 持 ちます このため 通 常 この 要 素 の 前 後 には 自 動 的 に 改 行 が 入 り 次 の 要 素 は 次 の 行 から 開 始 されます インライン 要 素 は 文 書 のホットテキスト 強 調 文 字 などの 一 部 とし て 扱 われる 要 素 で 指 定 された 内 容 だけの 領 域 を 持 つので 改 行 は 入 りません ブロック 要 素 の 中 にインライン 要 素 が 入 り ブロック 要 素 の 中 にはさらにブロック 要 素 をネストすることもできます インライン 要 素 の 中 にはインライン 要 素 しか 置 けません 1. ブロック 要 素 を 作 るタグ ブロック 段 落 <div> <p> 見 出 し <h> リスト <ul> <ol>,<dl> テーブル <table> その 他 <blockquote>,<pre>,<address>,<hr> なお リストの 中 に 指 定 する<li>,<dd>,<dt> やテーブルの 中 に 指 定 する <caption>,<tr>,<th>,<td>は 特 定 の 親 タグに 内 包 される 特 殊 なタグでブロック 要 素 的 です が 分 類 はあいまいです 2. インライン 要 素 を 作 るタグ <span>,<a>,<em>,<br>,<img> 基 本 的 な 文 書 構 造 を 図 4-1 に 示 します 見 出 し(h タグ) それに 関 する 複 数 の 段 落 (p タグ) 段 落 の 中 のインライン 要 素 (span タグ) これら 全 体 を 1 つにしたブロック(div タグ)からなります 例 題 4-4 ブロック 全 体 のフォントサイズを 12pt に 指 定 します h1 見 出 しはテキストの 色 背 景 色 中 央 揃 えを 指 定 します 段 落 (p タグ)とインライン 要 素 (span タグ)に 適 用 するテキス トの 色 と 背 景 色 を aliceblue lightyellow blueviolet の 3 つのクラス 名 で 定 義 します <html> <head> <style type="text/css"> div { font-size:12pt; h1 { background-color: #333333; color: #CCCCCC;

62 text-align: center;.aliceblue { color:#000000; background-color:#f0f8ff;.lightyellow { color:#000000; background-color:#ffffe0;.blueviolet { color:#ffffff; background-color:#8a2be2; </style> </head> <body> <div> <h1>my Diary</h1> <h3> 伊 豆 に 行 ってきました</h3> <p class="aliceblue"> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いのでビーチパラソルをはりました </p> <h3> 熱 気 球 を 見 ました</h3> <p class="lightyellow"> 8 月 5 日 夏 の 空 に<span class="blueviolet"> 熱 気 球 </span>が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </p> </div> </body> </html>

63 練 習 問 題 4-4 ブロック 全 体 のフォントサイズ テキスト 色 背 景 色 を 指 定 しなさい h3 タグにテキス ト 色 背 景 色 を 指 定 しなさい インライン 要 素 (span タグ)に 適 用 するテキストの 色 と 背 景 色 を lightyellow blueviolet の 2 つのクラス 名 で 定 義 しなさい <html> <head> <style type="text/css"> div { font-size:12pt; color:#000000; background-color:#f0f8ff; h1 { background-color:#333333; color: #CCCCCC; text-align: center; h3 { background-color:#ffffff; color: #CCCCCC;.lightyellow { color:#000000; background-color:#ffffe0;.blueviolet { color:#ffffff;

64 background-color:#8a2be2; </style> </head> <body> <div> <h1>my Diary</h1> <h3> 伊 豆 に 行 ってきました</h3> <p> 8 月 1 日 AM5:00 に 車 で 家 を 出 発 し 下 田 には AM11:00 に 着 きました 夏 の 太 陽 は 暑 いので<span class="lightyellow">ビーチパラソル</span>をはりました </p> <h3> 熱 気 球 を 見 ました</h3> <p> 8 月 5 日 夏 の 空 に<span class="blueviolet"> 熱 気 球 </span>が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </p> </div> </body> </html>

65 4-5 ブロック 要 素 の 構 造 ブロック 要 素 は 以 下 のプロパティで 指 定 します 単 位 は 相 対 単 位 または 絶 対 単 位 を 与 え ます width 要 素 本 体 の 幅 height 要 素 本 体 の 高 さ padding パデイング 要 素 本 体 を 囲 む 外 枠 と 要 素 本 体 の 間 の 空 間 border 外 枠 の 幅 形 状 色 margin マージン 親 ブロック(ブラウザ 画 面 )と 外 枠 の 間 の 空 間 margin プロパティは 次 のように 上 右 下 左 の 順 にマージン 値 を 指 定 します margin-top,margin-right,margin-bottom,margin-left プロパティを 使 用 すれば 個 々の 値 を 単 独 に 指 定 できます margin:20px 100px 20px 100px; margin-left margin-bottom margin-right margin-top なお margin:20px 100px; のように 2 つだけを 指 定 すると top と right の 値 が bottom と left にも 適 用 されます margin:20px; のように 1 つだけを 指 定 すると この 値 が top,right,bottom,left に 適 用 されます padding プロパティも margin プロパティと 同 じ 方 法 で 値 を 指 定 します border プロパティは 幅 の 他 に 形 状 色 などを 指 定 します border:20px solid blue; border-color

66 border-style border-width 個 々の 幅 を 指 定 するなら border-width プロパティを 使 って 次 のようにします 値 の 指 定 方 法 と 省 略 時 の 解 釈 は margin プロパティと 同 じです border-width:10px 20px 10px 20px; border-left-width border-bottom-width border-right-width border-top-width border-style border-color プロパティも border-width プロパティと 同 様 に 上 右 下 左 の 順 序 で 形 状 あるいは 色 を 指 定 できます 形 状 には none( 枠 線 なし) solid(1 本 線 ) double(2 本 線 ) groove( 窪 んだ 線 ) ridge ( 隆 起 した 線 ) inset( 立 体 的 に 窪 んだような 表 示 ) outset( 立 体 的 に 隆 起 したような 表 示 ) 例 題 4-5 外 枠 の 形 状 を solid 幅 2px 青 マージンを 50px パデイングを 20px テキスト 配 置 を 中 央 揃 えのブロックを 定 義 します <html> <head> <style type="text/css">.block1 { border-style:solid; border-width:2px; border-color:blue; margin:50px; padding:20px; text-align:center; </style> </head> <body> <div class="block1"> <h3>diary</h3> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </div>

67 </body> </html> 練 習 問 題 4-5 例 題 4-5 において 枠 の 形 状 を outset 幅 を 20px 要 素 本 体 の 幅 を 500px に 変 更 しなさ い <html> <head> <style type="text/css">.block1 { border-style:outset; border-width:20px; border-color:blue; width:500px; margin:50px; padding:20px; text-align:center; </style> </head> <body> <div class="block1"> <h3>diary</h3> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです </div> </body> </html>

68

69 4-6 テキストの 回 り 込 み 3-3 で<img>タグの align アトリビュートを 使 ってテキストの 回 り 込 みを 制 御 する 方 法 を 説 明 しましたが テキストの 回 り 込 みは float プロパティ clear プロパティを 使 って 行 い ます float:right; と 指 定 したブロックは 画 面 の 右 に 配 置 され 後 続 するテキストはブロックの 左 に 回 りこみ ます float:left; と 指 定 したブロックは 画 面 の 左 に 配 置 され 後 続 するテキストはブロックの 右 に 回 りこみ ます 一 度 回 り 込 みを 指 定 すると 以 後 の 内 容 はすべて 回 り 込 み 処 理 されます 回 り 込 みを 解 除 したいときは clear プロパティを 使 います float:rigkt 指 定 されている 回 り 込 みを 解 除 す るには clear:right とし float:left 指 定 されている 回 り 込 みを 解 除 するには clear:left とします clear:both とすると float:rigkt または float:left のどちらで 指 定 されていても 解 除 します 例 題 4-6 右 寄 せして 左 に 回 り 込 ませます マージンを 左 と 下 に1 文 字 分 とります <html> <head> <style type="text/css">.float1 { float:right; margin:0 0 1em 1em; </style> </head> <body> <p class="float1"><img src="balloon.jpg"></p> <p> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 熱 気 球 (ねつききゅう)とは 飛 行 するための 道 具 である 気 球 の 一 種 暖 めた 空 気 により 浮 力 を 得 て 飛 行 する 熱 源 となるバーナーの 燃 料 は LPG を 使 用 しており 飛 行 時 間 にもよるが 一 度 のフライトで 一 般 家 庭 が 使 用 する 約 1~2 ヶ 月 分 の LPG を 消 費 する

70 </p> </body> </html> 練 習 問 題 4-6 左 寄 せして 右 に 回 り 込 ませなさい マージンを 右 と 下 に1 文 字 分 取 りなさい 2009 年 8 月 1 日 霧 ヶ 峰 高 原 にて 撮 影 というテキストは 回 り 込 みを 解 除 し 右 寄 せで 青 色 表 示 しなさい <html> <head> <style type="text/css">.float1 { float:left; margin:0 1em 1em 0;.clear1 { clear:both; text-align:right; color:blue; </style> </head> <body> <p class="float1"><img src="balloon.jpg"></p> <p> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 熱 気 球 (ねつききゅう)とは 飛 行 するための 道 具 である 気 球 の 一 種

71 暖 めた 空 気 により 浮 力 を 得 て 飛 行 する 熱 源 となるバーナーの 燃 料 は LPG を 使 用 しており 飛 行 時 間 にもよるが 一 度 のフライトで 一 般 家 庭 が 使 用 する 約 1~2 ヶ 月 分 の LPG を 消 費 する </p> <p class="clear1">2009 年 8 月 1 日 霧 ヶ 峰 高 原 にて 撮 影 </p> </body> </html>

72 4-7 背 景 ブロックの 背 景 を 設 定 するプロパティとして 以 下 があります プロパティ 機 能 background-color 背 景 色 background-image 背 景 イメージ url("ファイルパス") background-repeat 背 景 イメージの 並 べ 方 repeat( 縦 横 に 埋 め 尽 くす:デフォルト) repeat-x( 横 方 向 に 1 行 ) repeat-y( 縦 方 向 に 1 列 ) none(1 つだ け 表 示 ) background-attachment 背 景 イメージのスクロール scroll( 背 景 イメージもページととも にスクロール:デフォルト) fixed( 背 景 イメージは 固 定 ) background-position 背 景 イメージの 左 上 隅 の x 座 標 y 座 標 空 白 で 区 切 って x y を 指 定 するか left,right,center,top,bottom を 指 定 background 背 景 プロパティを 次 の 順 序 で 一 括 指 定 background-color background-image background-repeat background-attachment background-position 例 題 4-7 背 景 を 左 縦 に 固 定 で 配 置 します <html> <head> <style> body { background-image:url("heart.gif"); background-repeat:repeat-y; background-position:left; background-attachment:fixed; </style> </head> <body> <hr> <h1>html</h1> <hr> <hr> <h1>css</h1> <hr>

73 </body> </html> 練 習 問 題 4-7 背 景 を 中 央 横 に 固 定 で 配 置 しなさい <html> <head> <style> body { background-image:url("heart.gif"); background-repeat:repeat-x; background-position:center; background-attachment:fixed; </style> </head> <body> <hr> <h1>html</h1> <hr> <hr> <h1>css</h1> <hr> </body> </html>

74 4-8 配 置 位 置 ブロックの 配 置 位 置 を 指 定 するプロパティとして 以 下 があります プロパティ position left top 機 能 座 標 の 取 り 方 absolute( 絶 対 座 標 ) relative( 直 前 の 要 素 からの 相 対 座 標 ) static( 位 置 指 定 なし) ブロックの 左 上 隅 の x 座 標 ブロックの 左 上 隅 の y 座 標 position:absolue; left:100px; top:50px; 例 題 4-8 中 心 (300px,200px) 半 径 200px の 円 周 上 の 8 方 位 (N: 北 NE: 北 東 E: 東 SE: 南 東 S: 南 SW: 南 西 W: 西 NW: 北 西 )の 位 置 にイメージを 配 置 します <html> <head> <style type="text/css">.n { position:absolute; left:300px; top:0px;.ne { position:absolute; left:440px; top:60px;;.e { position:absolute; left:500px; top:200px;.se { position:absolute; left:440px; top:340px;.s { position:absolute; left:300px; top:400px;.sw { position:absolute; left:160px; top:340px;

75 .W { position:absolute; left:100px; top:200px;.nw { position:absolute; left:160px; top:60px;; </style> </head> <body> <img src="num1.gif" class="n"> <img src="num2.gif" class="ne"> <img src="num3.gif" class="e"> <img src="num4.gif" class="se"> <img src="num5.gif" class="s"> <img src="num6.gif" class="sw"> <img src="num7.gif" class="w"> <img src="num8.gif" class="nw"> </body> </html>

76 練 習 問 題 4-8 イメージとテキストを1つのブロックとして 8 方 位 に 配 置 しなさい <html> <head> <style type="text/css">.n { position:absolute; left:300px; top:0px;.ne { position:absolute; left:440px; top:60px;;.e { position:absolute; left:500px; top:200px;.se { position:absolute; left:440px; top:340px;

77 .S { position:absolute; left:300px; top:400px;.sw { position:absolute; left:160px; top:340px;.w { position:absolute; left:100px; top:200px;.nw { position:absolute; left:160px; top:60px;; </style> </head> <body> <div class="n"> <img src="num1.gif"><br> 北 </div> <div class="ne"> <img src="num2.gif"><br> 北 東 </div> <div class="e"> <img src="num3.gif"><br> 東 </div> <div class="se"> <img src="num4.gif"><br> 南 東 </div> <div class="s"> <img src="num5.gif"><br> 南 </div> <div class="sw"> <img src="num6.gif"><br> 南 西 </div> <div class="w"> <img src="num7.gif"><br> 西 </div>

78 <div class="nw"> <img src="num8.gif"><br> 北 西 </div> </body> </html>

79 4-9 リスト リストのマークに 適 用 する 専 用 プロパティとして 以 下 があります <ol> <ul>タグに 対 して 次 のように 指 定 します ol { list-style-type:upper-roman; プロパティ 機 能 list-style-type リストのマークの 種 類 none(なし) disc( 黒 丸 ) circle( 円 の 丸 ) square( 黒 の 四 角 ) decimal( 算 用 数 字 ) lower-roman( 英 小 文 字 ) upper-roman( 英 大 文 字 ) lower-alpha( 小 文 字 の ロ ー マ 数 字 ) upper-alpha( 大 文 字 のローマ 数 字 ) CSS2 から cjk-ideographic( 漢 数 字 ) hiragana( 平 仮 名 ) katakana( 片 仮 名 ) hiragana-iroha( 平 仮 名 のいろは) katakana-iroha( 片 仮 名 のイ ロハ)などが 追 加 list-style-image リストの 前 に 表 示 されるイメージ url("ファイルパス") list-style-position リストマークの 表 示 位 置 outside(リスト 項 目 の 枠 の 外 にマークを 表 示 :デフォルト),inside(リスト 項 目 の 枠 の 内 にマークを 表 示 ) list-style 各 リストプロパティを 一 括 指 定 ( 順 不 同 ) list-style-type list-style-image list-style-position この 他 に 一 般 の background プロパティ margin プロパティ padding プロパティなど を 使 ってリスト 項 目 にスタイルシートを 適 用 します たとえば<dl>リストの<dd>タグを 次 のように 定 義 するとインデント 幅 (デフォルト 2 文 字 )を 変 えることができます dd { margin-left:1em; 例 題 4-9 <ol>のマークに 英 大 文 字 <ul>のマークにイメージ(mark1.gif)を 適 用 します <html> <head> <style> ol { list-style-type:upper-roman; ul { list-style-image:url("mark1.gif");

80 </style> </head> <body> <ol> <li> 野 菜 </li> <ul> <li>キャベツ</li> <br> ビタミンA B1 B2 C E K ナイアシンなど ほとんどのビタミン 類 が 含 まれています <li> 小 松 菜 </li> </ul> <li> 魚 介 類 </li> <ul> <li> 鯛 </li> <li>ホタテ</li> </ul> </ol> </body> </html> 練 習 問 題 4-9 例 題 4-9 の <ul> 定 義 部 を<dl> で 行 い な さ い <dl> に は マ ー ク は 付 か な い の で list-style-image でイメージを 指 定 できない <dt>に 対 し 背 景 イメージで 与 えること <html> <head> <style> ol { list-style-type:upper-roman;

81 dt { padding-left:1em; background:url("mark1.gif") no-repeat; </style> </head> <body> <ol> <li> 野 菜 </li> <dl> <dt>キャベツ</dt> <dd> ビタミンA B1 B2 C E K ナイアシンなど ほとんどのビタミン 類 が 含 まれています </dd> <dt> 小 松 菜 </dt> </dl> <li> 魚 介 類 </li> <dl> <dt> 鯛 </dt> <dt>ホタテ</dt> </dl> </ol> </body> </html>

82 4-10 リンク アンカータグ<a>に 対 し 以 下 の 疑 似 クラスを 指 定 できます 擬 似 クラスは 要 素 の 個 別 の 状 況 や 状 態 に 対 しスタイルを 設 定 します a:hover { color:blue; text-decoration:underline; 擬 似 クラス active hover link visited 機 能 <a>タグのアクティブ 時 のスタイルを 指 定 <a>タグのホバリング 時 のスタイルを 指 定 <a>タグの 非 訪 問 時 のスタイルを 指 定 <a>タグの 訪 問 時 のスタイルを 指 定 カーソルの 形 状 を 指 定 するプロパティとして 以 下 があります プロパティ 機 能 cursor カーソルの 形 状 auto(ua が 自 動 選 択 ),crosshair( 十 字 線 ),default(os の デ フ ォ ル ト ),pointer( リ ン ク ボ タ ン ),move( 移 動 可 能 対 象 ),e-resize( 右 辺 移 動 ),ne-resize( 右 上 隅 移 動 ),nw-resize( 左 上 隅 移 動 ),n-resize( 上 辺 移 動 ),se-resize( 右 下 隅 移 動 ),sw-resize( 左 下 隅 移 動 ),s-resize( 下 辺 移 動 ),w-resize( 左 辺 移 動 ),texti の 形 ),wait( 時 計 や 砂 時 計 ),progress( 砂 時 計 ),help( 疑 問 符 やバルーンなど) 例 題 4-10 アンカーのノーマル 時 に 下 線 を 付 けず 背 景 色 を 付 けます ホバリング 時 は 下 線 を 付 け 青 色 表 示 とし カーソルをデフォルトのハンドマークでなく 矢 印 マークとします <html> <head> <style> a { margin:2px; background-color:lavender; text-decoration:none; a:hover {

83 color:blue; text-decoration:underline; cursor:default; </style> </head> <body> <h3>html 講 座 </h3> HTML で Web ページを 作 る 際 の 参 考 にしてください <ul> <li><a href=" の 仕 様 </a><br> W3C のホームページ( <li><a href=" 製 品 について</a><br> マイクロソフトのホームページ( </ul> </body> </html> 練 習 問 題 4-10 練 習 問 題 3-6 を CSS 版 にしなさい イメージをリンクにするとデフォルトで 外 枠 が 付 い てしまいますので 外 枠 が 付 かないようにしなさい またホバリング 時 のイメージのサイズ を 少 し 大 きくしなさい リストのマークも 外 しなさい アンカーのイメージタグのスタイルを 指 定 するにはセレクタとして a:active img a:link img a:visited img a:hover img を 使 います 内 容 が 同 じ 場 合 はセレクタ をコンマ(,)で 区 切 って 並 べることができます <html> <head> <style type="text/css"> h3 { font-size:16pt; color:blue;

84 span { font-size:10pt; a:active img, a:link img, a:visited img { border:0px; width:80px; height=50px; a:hover img { border:0px; width:90px; height=60px; ul { list-style:none; </style> </head> <body> <h3> 国 の 紹 介 </h3> <span>イメージをクリックすると 各 国 のページにジャンプします </span> <ul> <li><a href="australia.html"><img src="australia.gif"></a> <span>オーストラリア</span></li> <li><a href="canada.html"><img src="canada.gif"></a> <span>カナダ</span></li> </ul> </body> </html>

85

86 5 章 スタイルシートデザインの 基 礎 3 章 で HTML の 基 礎 4 章 で CSS の 基 礎 について 説 明 しました この 章 ではそれらの 基 礎 を 応 用 して 各 種 Web コンテンツのスタイルシートデザインの 方 法 について 説 明 します Web ページの 基 本 となるコンテンツとして 見 出 し 囲 み 記 事 風 ボックス テーブル ナビゲーション メニュー 段 組 みなどを 例 に 説 明 します

87 5-1 見 出 し 縦 帯 横 帯 をいれた 見 出 しを 作 ります ブロックの 外 枠 の 形 状 を solid にし 外 枠 の 幅 を 左 右 上 下 で 変 えることにより 各 種 帯 を 実 現 します 文 字 位 置 はパディングを 入 れて 調 整 します 例 題 5-1 縦 帯 L 字 帯 の 見 出 しを 作 ります 帯 の 色 は 青 左 のパデイングは 5px とします 縦 帯 の 枠 の 幅 は border-left-width: 10px; L 字 帯 の 枠 の 幅 は border-width: 0px 0px 2px 10px; とします <html> <head> <style> h1 { border-left-color: #0000ff; border-left-width: 10px; border-left-style: solid; padding-left: 5px; h2 { border-color: #0000ff; border-width: 0px 0px 2px 10px; border-style: solid; padding-left: 5px; </style> </head> <body> <h1>nana の 日 記 </h1> <h2>nana の 日 記 </h2> </body> </html> 練 習 問 題 5-1 左 右 両 端 帯 で 背 景 イメージを 入 れた 見 出 しを 作 りなさい <html>

88 <head> <style> h1 { margin-left:20%; margin-right:20%; text-align:center; font-size:32pt; color:blue; border-style:solid; border-width: 0px 10px 0px 10px; background-image:url("heart.gif"); background-repeat:repeat-x; background-position:center; </style> </head> <body> <h1>nana の 日 記 </h1> </body> </html>

89 5-2 囲 み 記 事 風 ボックス ボックスの 位 置 float プロパティでボックスを 置 く 位 置 を 指 定 します ボックスの 枠 border プロパティでボックスの 形 状 枠 の 幅 枠 の 色 を 指 定 します border:solid 1px blue; ボックスの 幅 と 高 さ width,height プロパティで 指 定 します マージンとパディング ブロックと 本 文 の 隙 間 は margin で ブロックの 中 の 枠 と 文 字 の 隙 間 は padding で 指 定 します スクロールバー overflow プロパティでスクロールバーを 付 けるか 付 けないか 指 定 します 例 題 5-2 <html> <head> <style>.kakomi { float:right; border:solid 1px blue; width:360px; height:150px; overflow:auto; padding:5px; margin:0px 0px 5px 5px; </style> </head> <body> <div class="kakomi"> <img src="info.gif"> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 2 月 10 日 雪 原 の 林 の 上 に 朝 日 が 上 りました 幻 想 的 な 光 の 中 に 身 が 引 き 締 まる 思 いです </div>

90 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 2 月 10 日 雪 原 の 林 の 上 に 朝 日 が 上 りました 幻 想 的 な 光 の 中 に 身 が 引 き 締 まる 思 いです </body> </html> 練 習 問 題 5-2 例 題 5-2 の Information イ メ ー ジ の 代 わ り に 背 景 を 入 れ る float:right だと background-position:left;とした 場 合 背 景 が 表 示 されない <html> <head> <style>.kakomi { float:left; border:solid 1px blue; width:360px; height:100px; overflow:auto; padding:5px 5px 5px 40px; margin:0px 5px 5px 0px; background-image:url("bk571.gif"); background-repeat:repeat-y; background-position:left; background-attachment:fixed; </style> </head> <body>

91 <div class="kakomi"> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 2 月 10 日 雪 原 の 林 の 上 に 朝 日 が 上 りました 幻 想 的 な 光 の 中 に 身 が 引 き 締 まる 思 いです </div> 8 月 1 日 夏 の 空 に 熱 気 球 が 飛 んでいました 色 とりどりの 模 様 が 青 空 に 映 えて 気 持 ちよさそうです 2 月 10 日 雪 原 の 林 の 上 に 朝 日 が 上 りました 幻 想 的 な 光 の 中 に 身 が 引 き 締 まる 思 いです </body> </html>

92 5-3 テーブル テーブルに 線 を 引 くには 次 のようにします table の border:solid 1px;で 外 枠 の 線 を 描 き ます td の border-width: 0px 0px 1px 1px;で 左 下 線 を L 字 状 に 描 きます 外 枠 の 左 端 と 下 端 で table の 線 と td の 線 が 二 重 にならないように tabel に border-collapse: collapse;を 指 定 します table { border:solid 1px; border-collapse: collapse; td { border:solid; border-width: 0px 0px 1px 1px; 例 題 5-3 図 5-1 で 示 すテーブルを 作 ります th 要 素 は 背 景 色 を 入 れます セルには 5px のパディ ングを 入 れます <html> <head> <style> table { border:solid 1px #000080; border-collapse: collapse; th { border:solid #000080; border-width: 0 0 1px 1px; background:#f5f5f5; padding:5px; td { border:solid #000080; border-width: 0 0 1px 1px; padding:5px;

93 </style> </head> <body> <table> <tr> <th> 名 前 </th><th> 性 別 </th><th> 職 業 </th> </tr> <tr> <td> 山 田 太 郎 </td><td> 男 </td><td> 会 社 員 </td> </tr> <tr> <td> 綾 瀬 はるな</td><td> 女 </td><td> 学 生 </td> </tr> <tr> <td> 新 垣 ゆう</td><td> 女 </td><td> 主 婦 </td> </tr> </table> </body> </html> 練 習 問 題 5-3 交 互 に 行 に 背 景 色 を 入 れなさい フォントサイズを 10.5pt にしなさい <html> <head> <style> table { border:solid 1px #000080; border-collapse:collapse; font-size:10.5pt;

94 td { border:solid #000080; border-width:0px 0px 1px 1px; padding: 5px;.backcolor { background:#f5f5f5; </style> </head> <body> <table> <tr class="backcolor"> <td> 山 田 太 郎 </td><td> 男 </td><td> 会 社 員 </td> </tr> <tr> <td> 綾 瀬 はるな</td><td> 女 </td><td> 学 生 </td> </tr> <tr class="backcolor"> <td> 佐 藤 三 郎 </td><td> 男 </td><td> 自 営 業 </td> </tr> <tr> <td> 新 垣 ゆう</td><td> 女 </td><td> 主 婦 </td> </tr> </table> </body> </html>

95 5-4 ナビゲーション メニュー 4-10 でリンクを 説 明 しましたが これを 応 用 してナビゲーション メニューを 作 ります リンク 項 目 を 縦 に 並 べた 縦 ナビと 横 に 並 べた 横 ナビがあります リンクはリスト 項 目 で 作 りますので デフォルトで 縦 ナビとなります 横 ナビにするに は display:inline によりリスト 項 目 をブロック 要 素 からインライン 要 素 に 変 更 するか float:left で 横 配 置 にするか 2 通 りの 方 法 があります 例 題 5-4 横 ナビを 作 ります ul に margin:0px;を 指 定 しないと 開 始 位 置 が 少 し 右 に 寄 ってしまい ます <html> <head> <style> ul { list-style-type:none; margin:0px; li { display:inline; a { width:120px; padding:2px; color:#000080; background-color:#e6e6fa; text-decoration:none; text-align:center; a:hover { color:#ffffff; background-color:#000080; cursor:default; </style> </head> <body> <ul>

96 <li><a href="">プロフィール</a></li> <li><a href="">ギャラリー</a></li> <li><a href=""> 友 達 </a></li> <li><a href=""> 問 い 合 わせ</a></li> </ul> </body> </html> 練 習 問 題 5-4 縦 ナビにしなさい 縦 に 並 べたリスト 項 目 の 下 に 2px の 隙 間 を 入 れなさい li はデフォル トでブロック 要 素 なので li に display:block;を 指 定 しなくても 良 い <html> <head> <style> ul { list-style-type:none; margin:0px; li { display:block; a { width:120px; margin:0px 0px 2px 0px; padding:2px; color:#000080; background-color:#e6e6fa; text-decoration:none; text-align:center; a:hover { color:#ffffff; background-color:#000080; cursor:default;

97 </style> </head> <body> <ul> <li><a href="">プロフィール</a></li> <li><a href="">ギャラリー</a></li> <li><a href=""> 友 達 </a></li> <li><a href=""> 問 い 合 わせ</a></li> </ul> </body> </html> 参 考 各 種 ナビ 例 題 4-5 のプログラムを 元 にして 変 更 した 部 分 のみ 示 してあります float プロパティを 使 った 横 ナビ display:inline;で 横 に 並 べた 場 合 リスト 項 目 の 間 に 隙 間 がとられますが float:left で 横 に 並 べた 場 合 リスト 項 目 の 間 が 詰 められます 以 下 の 例 では 枠 の 左 幅 を 8px に 指 定 して 区 切 りに 使 用 しています li { border:solid pink; border-width:0px 0px 0px 8px; float:left; 背 景 を 入 れた 横 ナビ li { float:left; a {

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

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

More information

HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:<...>で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd 他 に loose.dtd,frameset.d

HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:<...>で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd 他 に loose.dtd,frameset.d 第 10 回 HTMLの の 基 礎 HTMLとは 作 成 手 順 基 本 形 改 行 と 段 落 整 形 済 みテキスト 横 線 見 出 し リスト1(UL,OL) リスト2(DL) インライン 画 像 リンク HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd

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

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

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

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

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

More information

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 目 次 動 作 環 境 特 長 方 法 方 法 起 動 終 了 方 法 方 法 操 作 方 法 使 方 使 方 使 方 詳 細 設 定 使 方 KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 KINGSOFT Office 2016 特 長 主 特 長 以

More information

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

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

More information

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

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

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

■新聞記事

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

More information

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

ホームページ制作スターターズ 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

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7 1. アーカイブデータベースを 検 索 / 閲 覧 する 1.1. データの 検 索 方 法 東 京 アーカイブ では 以 下 に 分 類 されるカテゴリの 画 像 データ 資 料 データを 閲 覧 できます 江 戸 城 浮 世 絵 双 六 和 漢 書 江 戸 東 京 の 災 害 記 録 絵 葉 書 写 真 帖 近 代 の 地 図 東 京 府 東 京 市 関 係 資 料 番 付 建 築 図 面 書

More information

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ .3 1...3 メール 受 信 タブのサブメニューから 直 接 受 信 箱 以 外 のフォルダを 表 示 することもできます 共 有 メー ルボックスのフォルダは 指 定 できません 3. 35 メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受

More information

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

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

More information

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

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

More information

スライド 1

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

More information

文 書 構 造 とスタイル

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

More information

PowerPoint プレゼンテーション

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

More information

CSSの基礎

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

More information

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

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

More information

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

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

More information

■コンテンツ

■コンテンツ Joruri CMS 2.0.0 基 本 マニュアル (2013.7.23) 2012.2.14 データ データでは 複 数 の 場 所 で 共 通 して 利 用 できる 情 報 (テキスト 形 式 ファイル 形 式 )を 作 成 登 録 管 理 できます テキスト データ>テキスト 作 成 されたテキストが 一 覧 表 示 されます 複 数 の 場 所 で 利 用 するテキスト( 住 所 TEL

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

A

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

More information

Microsoft Word - 操作手順書.doc

Microsoft Word - 操作手順書.doc さーちずまえばし 操 作 手 順 書 目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する... 2 2 章 基 本 操 作... 3 2. 画 面 構 成... 3 2.2 ヘルプを 表 示 する... 5 2.3 地 図 を 移 動 する... 5 2.4 地 図 を 拡 大 / 縮 小 する... 5 2.5 索 引 図 を 利 用 する...

More information

ホームページとは何?

ホームページとは何? ホームページ 作 成 にあたっての 基 本 事 項 ホームページとは? インターネットを 介 して 誰 もが 閲 覧 できるように 作 られたものを ホームページ と 言 います ホームページには 文 字 だけでなく 画 像 や 動 画 音 楽 なども 埋 め 込 むことができま す またホームページに 掲 載 されている 情 報 の 中 でひとまとめに 括 られたものを コンテ ンツ と 呼 んでいます

More information

Microsoft Office Excel2007(NO.2エクセル初級後編)

Microsoft Office Excel2007(NO.2エクセル初級後編) 目 次 序 章... 1 エクセル 2007 初 級 ( 後 編 ) の 目 的... 1 エクセル 2007 初 級 ( 後 編 )について... 2 表 の 編 集 ( 後 編 その1)... 2 シートの 操 作... 2 基 本 の 計 算 式 ( 後 編 )... 3 印 刷 の 基 本... 3 グラフ 作 成 の 基 本... 3 第 1 章 表 の 編 集 ( 後 編 その 1)...

More information

スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していき

スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していき モジュール MP-06 MP-06 スライドの 編 集 とリンク 岡 山 県 情 報 教 育 センター スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していきます

More information

Microsoft Word - TCⅡマニュアル_第6章_ doc

Microsoft Word - TCⅡマニュアル_第6章_ doc .1 章 -1 .1 様 々な 機 能 を 利 用 し 簡 単 にイメージ 通 りの 加 工 が 行 えます した は 元 を 残 し 新 規 として 保 存 されます また 再 できる 加 工 内 容 の 場 合 は 上 書 き 保 存 することができます.1.1 面 について 配 置 面 ( 第 4 章 ) ペンスコープ 面 ( 第 5 章 ) 一 覧 面 ( 第 12 章 )( 複 数 選 択

More information

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編 POWER EGG V2.0 ユーザーズマニュアル ファイル 管 理 編 Copyright 2009 D-CIRCLE,INC. All Rights Reserved 2009.4 はじめに 本 書 では POWER EGG 利 用 者 向 けに 以 下 の POWER EGG のファイル 管 理 機 能 に 関 する 操 作 を 説 明 しま す なお 当 マニュアルでは ファイル 管 理 機

More information

■デザイン

■デザイン Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) デザイン デザインでは 各 ページ 内 に 構 成 されるパーツである ピース と それをページ 内 に 配 置 し 構 成 する レイアウト を 作 成 できます また スタイルシート でピース レイ アウトの HTML を 制 御 し 装 飾 する CSS を 設 定 できます ピース デザイン>ピース ピース をクリックすると

More information

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 改 訂 の 要 因 旧 新 (2013 年 4 月 版 ) 文 言 削 除 p.11(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 p.5(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 1. 用 紙 系 ( 線 種 ピッチ 等 用 紙 上 の 大 きさで

More information

untitled

untitled 第 1 節 第 3 章 企 業 ショップ 基 本 情 報 の 登 録 3.2 プレビュー 表 示 機 能 ここでは 基 本 情 報 新 鮮 情 報 商 品 サービス 情 報 クーポン 情 報 求 人 情 報 を 登 録 する 際 に 実 際 の 登 録 処 理 前 に 公 開 側 での 表 示 イメージを 確 認 する 方 法 を 説 明 します 1 基 本 情 報 新 鮮 情 報 商 品 サービス

More information

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7.

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. Web メール 操 作 説 明 書 京 都 与 謝 野 町 有 線 テレビ 0 目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. メール 一 覧 画 面...

More information

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

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

More information

スライド 1

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

More information

MapDK3のインストール

MapDK3のインストール ExifEditor Version 4.6 サポートアドレス:kaneda_supp@yahoo.co.jp 目 次 1. メイン 画 面... 3 1.1. 画 像 表 示... 6 2. Exif 情 報 編 集... 8 2.1. 付 帯 情 報 の 編 集... 10 2.2. 日 付 データの 一 括 編 集... 10 2.3. タイムスタンプ... 11 2.3.1. タイムスタンプ

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

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

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

More information

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように 情 報 メディアとインターネット 授 業 資 料 (2011.7.4) 1.HTML の 基 本 HTML ファイルというのは 例 えば 以 下 のような 内 容 のテキストファイルです 拡 張 子 を.html また は.htm とするのが 普 通 で Web ブラウザで 読 み 込 まれて 中 身 の 表 示 が 行 われます Simple HTML File Hello

More information

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン 2014 年 1 月 7 日 治 験 依 頼 者 各 位 新 潟 市 民 病 院 治 験 管 理 室 Excel 形 式 の 電 子 プロトコール 提 出 の 御 依 頼 当 院 では 効 率 的 で 正 確 な 治 験 の 実 施 のため 電 子 カルテ 内 に 専 用 の Excel 形 式 による 電 子 プロトコールを 導 入 しております つきましては 治 験 依 頼 の 際 に 下 記

More information

OpenCity2説明

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

More information

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378> 1. 基 本 事 項 1.1. システムで 行 えること デジタルライブラリー では データベース 上 に 登 録 されている 様 々なカテゴリのデータを 検 索 閲 覧 できます データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 簡 易 検 索 データの 共 通 項 目 に 条 件 を 指 定 し 全 データを 横 断 して 検 索 できます 詳 細 検 索

More information

改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改

改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改 災 害 アーカイブデータベースシステム 一 般 向 け 検 索 マニュアル 改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改 訂 履 歴 改 訂 履 歴

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 履 修 履 歴 データベースの 仕 組 み 学 生 が 履 修 履 歴 を 登 録 して 企 業 へデータを 送 信 すると 企 業 担 当 者 が 履 修 履 歴 データを 見 られるようになります 不 特 定 の 企 業 に 履 修 履 歴 データが 閲 覧 されるわけではありません < 基 本 的 な 流 れ> A 社 データ ベース 応 募 企 業 へ データを 送 信 学 生 A 専

More information

スライド 1

スライド 1 e 研 修 PDCA 運 用 チェック Simple e-learning Management System Plus 操 作 説 明 書 管 理 者 機 能 ( 運 用 チェックテーマ 資 材 作 成 管 理 編 ) 05 年 月 Ver..7 アーチ 株 式 会 社 機 能 e 研 修 管 理 機 能 LOGIN 画 面 (PC 環 境 用 ) 説 明 e 研 修 管 理 機 能 LOGIN

More information

の と す る (1) 防 犯 カ メ ラ を 購 入 し 設 置 ( 新 設 又 は 増 設 に 限 る ) す る こ と (2) 設 置 す る 防 犯 カ メ ラ は 新 設 又 は 既 設 の 録 画 機 と 接 続 す る こ と た だ し 録 画 機 能 付 防 犯 カ メ ラ は

の と す る (1) 防 犯 カ メ ラ を 購 入 し 設 置 ( 新 設 又 は 増 設 に 限 る ) す る こ と (2) 設 置 す る 防 犯 カ メ ラ は 新 設 又 は 既 設 の 録 画 機 と 接 続 す る こ と た だ し 録 画 機 能 付 防 犯 カ メ ラ は 小 牧 市 地 域 防 犯 カ メ ラ 等 設 置 補 助 金 交 付 要 綱 平 成 2 8 年 3 月 2 2 日 2 7 小 市 安 第 7 5 7 号 ( 通 則 ) 第 1 条 小 牧 市 地 域 防 犯 カ メ ラ 等 設 置 補 助 金 ( 以 下 補 助 金 と い う )の 交 付 に つ い て は 市 費 補 助 金 等 の 予 算 執 行 に 関 す る 規 則 ( 昭 和

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

<5461726F2D89C692EB834E8389837582CC837A815B83808379815B83578DEC>

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

More information

Microsݯft Word - 91 forܠ2009November.docx

Microsݯft Word - 91 forܠ2009November.docx 特 集 : Query & Analysis の 仕 訳 転 送 機 能 SunSystems と 連 携 し て 使 用 す る こ と が で き る Infor Performance Management Query&Analysis( 以 下 Q&A) ( 旧 : SunSystems Vision ) と い う 製 品 が あ り ま す Q&A は Microsoft Excel の

More information

Microsoft Word - 第4&5回HTML&MIFES入門.doc

Microsoft Word - 第4&5回HTML&MIFES入門.doc 第 4&5 回 HTML & MIFES 入 門 水 野 りか ここでは,いわゆるホームページを 作 成 する 方 法 の 基 礎 を 学 びます ホームページを 作 るための 言 語 は,HTML (Hyper Text Makeup Language)と 呼 ばれています この 言 語 を 書 くためのテキスト エディタが MIFES です HTML で 書 かれたページは,Netscape や

More information

別冊資料-11

別冊資料-11 一 般 競 争 入 札 方 式 工 事 希 望 型 競 争 入 札 方 式 における 技 術 資 料 入 力 システムの 利 用 方 法 について Rev 8.0( 平 成 28 年 3 月 ) 国 土 交 通 省 中 国 地 方 整 備 局 - 目 次 - 1. はじめに... 1 2. 利 用 環 境 及 び 注 意 事 項... 1 3. 入 力 手 順 について... 2 3.1. 技 術

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

4.5. < 参 加 表 明 書 を 提 出 する> 調 達 案 件 一 覧 の 表 示 対 象 となる 案 件 を 検 索 し 調 達 案 件 一 覧 に 表 示 させます 参 加 したい 案 件 の 調 達 案 件 名 称 行 - 入 札 参 加 資 格 確 認 申 請 / 技 術 資 料 /

4.5. < 参 加 表 明 書 を 提 出 する> 調 達 案 件 一 覧 の 表 示 対 象 となる 案 件 を 検 索 し 調 達 案 件 一 覧 に 表 示 させます 参 加 したい 案 件 の 調 達 案 件 名 称 行 - 入 札 参 加 資 格 確 認 申 請 / 技 術 資 料 / 目 次... 4-46 4.5. < 参 加 表 明 書 を 提 出 する>... 4-46 4.5.2 < 参 加 表 明 書 受 付 票 を 表 示 する>... 4-55 4.5.3 < 選 定 通 知 書 ( 非 選 定 通 知 書 )を 表 示 する>... 4-58 4.5.4 < 技 術 提 案 書 を 提 出 する>... 4-6 4.5.5 < 技 術 提 案 書 受 付 票 を

More information

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T ホームページングサービス G o o d P a g e E a s y GoodPageASPシリーズ 操 作 マニュアル 基 本 操 作 編 (EASY+のメニュー 操 作 については メニュー 操 作 編 をご 覧 下 さい) ASPシリーズ(SUPERLITE EASY EASY+)の 基 本 操 作 手 順 は 共 通 ですが マニュアルではGoodPageEASYの 画 面 で 説 明

More information

4 応 募 者 向 けメニュー 画 面 が 表 示 されます 応 募 者 向 けメニュー 画 面 で [ 交 付 内 定 時 の 手 続 を 行 う] [ 交 付 決 定 後 の 手 続 を 行 う]をクリックします 10

4 応 募 者 向 けメニュー 画 面 が 表 示 されます 応 募 者 向 けメニュー 画 面 で [ 交 付 内 定 時 の 手 続 を 行 う] [ 交 付 決 定 後 の 手 続 を 行 う]をクリックします 10 2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e-rad の ID パ ス ワード を 入 力 し [ログイン]をクリックします 9 4 応 募 者

More information

SchITコモンズ【活用編】

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

More information

3. 画 面 説 明 1 アドレスバー/Google 検 索 バー 4 ステータスバー 1 アドレスバー/Google 検 索 バー 現 在 表 示 されているホームページの URL 1 (ホームページアドレス)を 表 示 します URL を 入 力 すると 目 的 のページに 移 動 することがで

3. 画 面 説 明 1 アドレスバー/Google 検 索 バー 4 ステータスバー 1 アドレスバー/Google 検 索 バー 現 在 表 示 されているホームページの URL 1 (ホームページアドレス)を 表 示 します URL を 入 力 すると 目 的 のページに 移 動 することがで V. ブラウザーの 使 い 方 Windows ブラウザーとは インターネット 上 のホームページを 閲 覧 するためのソフトウェアのことです ブラウザーはインターネットから HTML ファイルや 画 像 ファイル 音 楽 ファイルなどをダウンロ ードし レイアウトを 解 析 して 表 示 再 生 します パソコン 教 室 には Internet Explorer Firefox Chrome の

More information

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

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

More information

スライド 1

スライド 1 立 命 館 大 学 校 友 会 本 部 提 供 校 友 会 ホームページ 操 作 マニュアル 担 当 : 泉 慎 平 izumi@humanweb.net 株 式 会 社 ヒューマンウェブ 600-8269 京 都 市 下 京 区 七 条 通 堀 川 西 入 ル 朝 日 ビル2F TEL.075-352-3477 FAX.075-352-2877 目 次 各 ページの 説 明 ホームページ 構 成..03

More information

Microsoft PowerPoint - c3_op-manual.pdf

Microsoft PowerPoint - c3_op-manual.pdf 研 究 者 学 術 情 報 データベース 操 作 説 明 -- - 研 究 者 DBのログイン 画 面 へのアクセス 手 順 () 立 命 館 大 学 トップページ http://www.ritsumei.jp/index_j.html 研 究 産 学 官 連 携 ページ http://www.ritsumei.ac.jp/research/ 研 究 産 学 官 連 携 をクリック 研 究 産 学

More information

名刺作成講習

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

More information

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc)

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc) 2009/07/03 前 回 のおさらい 関 数 確 認 問 題 水 尾 作 成 の Excel 基 本 動 作 練 習 用 ファイルの 表 タイトルなし を 用 いて 次 の 指 示 を 実 際 に 完 成 させよ 1 セル M50 に セル L50:L54 の 合 計 数 値 をセル K50 の 数 値 で 割 った 結 果 を 表 示 できるよう に 関 数 を 設 定 せよ 2 M50 に

More information

研究者総覧システム

研究者総覧システム 関 西 大 学 学 術 情 報 システム 操 作 マニュアル 検 索 用 第 1.5 版 2010/4/1 関 西 大 学 更 新 履 歴 版 数 作 成 日 内 容 1.0 2008/11/28 新 規 作 成 1.1 2009/04/08 画 像 の 変 更 ログイン 画 面 への 遷 移 を 追 加 キーワード 検 索 の 対 象 を 変 更 概 要 の 変 更 対 象 ブラウザの 追 加 1.2

More information

Acrobat早分かりガイド

Acrobat早分かりガイド Adobe PDF を 加 工 編 集 する PDF を 再 利 用 する PDF ファイルの Word 文 書 書 き 出 し [ 名 前 を 付 けて 保 存 ] ダイアログが 開 くので ファイルの 書 き 出 し 先 を 指 定 し [ 保 存 ] ボタンをクリックします Acrobat を 使 用 すると Adobe PDF から Word の フォーマットに 書 き 出 してファイルを

More information

スライド 1

スライド 1 新 機 能 マニュアル( 事 業 者 向 け) 平 成 22 年 7 月 新 機 能 概 要 携 帯 電 話 メールアドレス 入 力 項 目 追 加 ( 詳 細 2P) ページデザイン 選 択 (5パターン) ページレイアウトが 選 択 可 能 になります ( 詳 細 3P) Googleマップ 設 定 Googleマップを 自 動 表 示 します ( 詳 細 4P) QRコードの 表 示 / 非

More information

ワープロソフトウェア

ワープロソフトウェア プレゼンテーションソフト (PowerPoint) プレゼンテーションソフト プレゼンテーションソフト 発 表 会 や 会 議 などで 使 用 する 資 料 を 作 成 表 示 するため のアプリケーションソフト PowerPoint Microsoftによって 提 供 されているプレゼンテーションソフト 比 較 的 簡 単 に 見 映 えのするスライドが 作 れる 2 PowerPointの 起

More information

Microsoft Word - 203MSWord2013

Microsoft Word - 203MSWord2013 3.1 Word 2013 の 起 動 第 3 章 ワープロ 1.Word 2013 の 起 動 (1)マウスの 左 ボタンでスタートボタンをクリックします (2)[すべてのプログラム] [Microsoft Office 2013] [Word 2013]の 順 にマウスをクリックすると Word 2013 の 初 期 画 面 ( 図 3-1)が 開 かれます クイックアクセスツールバー タイトルバー

More information

Microsoft PowerPoint - css [互換モード]

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

More information

Microsoft Word - 311Tools_END

Microsoft Word - 311Tools_END 11.1 テキストエディター(TeraPad) 第 11 章 さらに 使 いこなすためのツール Windows の 標 準 で 搭 載 されているテキストエディターのメモ 帳 Word などに 比 べて メモ 帳 は 軽 く ちょっとした 文 章 を 書 くのに 非 常 に 便 利 です しかし メモ 帳 は 軽 いだけに 機 能 性 はそれほど 高 くありません この 章 で 紹 介 する TeraPad

More information

1.3 利 用 方 法 図 1 国 立 国 会 図 書 館 デジタルコレクション 送 信 サービスの 対 象 資 料 本 文 の 閲 覧 は 図 書 館 サービスカウンター 備 え 付 けの 専 用 パソコン(1 台 )のみでの 利 用 となります 利 用

1.3 利 用 方 法 図 1 国 立 国 会 図 書 館 デジタルコレクション  送 信 サービスの 対 象 資 料 本 文 の 閲 覧 は 図 書 館 サービスカウンター 備 え 付 けの 専 用 パソコン(1 台 )のみでの 利 用 となります 利 用 デジタル 化 資 料 送 信 サービス の 利 用 方 法 目 次 1 はじめに(サービスの 概 要 利 用 上 の 注 意 利 用 方 法 ) p.1 2 検 索 の 仕 方 ( 本 を 探 す) p.3 3 閲 覧 の 仕 方 ( 本 を 読 む) p.7 1 はじめに 1.1 サービスの 概 要 について デジタル 化 資 料 送 信 サービス ( 送 信 サービス)は 国 立 国 会 図 書

More information

<4D6963726F736F667420576F7264202D20979897708ED28FDA8DD7837D836A83858341838B2E646F6378>

<4D6963726F736F667420576F7264202D20979897708ED28FDA8DD7837D836A83858341838B2E646F6378> デジタル 化 資 料 送 信 サービス の 利 用 方 法 目 次 1 はじめに(サービスの 概 要 利 用 上 の 注 意 ) p.1 2 検 索 の 仕 方 ( 本 を 探 す) p.3 3 閲 覧 の 仕 方 ( 本 を 読 む) p.7 1 はじめに 1.1 サービスの 概 要 について デジタル 化 資 料 送 信 サービス ( 送 信 サービス)は 国 立 国 会 図 書 館 でデジタル

More information

目 次 1 個 人 基 本 情 報 個 人 基 本 情 報 入 力 画 面 の 分 散 4 申 告 区 分 および 申 告 種 類 の 選 択 方 法 5 繰 越 損 失 入 力 年 別 の 繰 越 損 失 額 入 力 に 対 応 6 作 成 手 順 作 成 手 順 の 流 れを 提 供 7 所 得

目 次 1 個 人 基 本 情 報 個 人 基 本 情 報 入 力 画 面 の 分 散 4 申 告 区 分 および 申 告 種 類 の 選 択 方 法 5 繰 越 損 失 入 力 年 別 の 繰 越 損 失 額 入 力 に 対 応 6 作 成 手 順 作 成 手 順 の 流 れを 提 供 7 所 得 所 得 税 R4 機 能 アップ 内 容 Ver.13.1 所 得 税 R4 主 な 機 能 アップ 内 容 についてご 説 明 いたします 当 資 料 は2014 年 3 月 時 点 のものです 内 容 や 画 像 は 予 告 なく 変 更 される 場 合 がございます Rev.1.1 1 目 次 1 個 人 基 本 情 報 個 人 基 本 情 報 入 力 画 面 の 分 散 4 申 告 区 分

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

Microsoft Word - ms-word

Microsoft Word - ms-word 日 本 語 ワードプロセッサ 1 Microsoft Word の 概 要 コンピュータの 特 徴 の 一 つは,ソフトウェアを 入 れ 替 えて 動 作 させることにより, 種 々の 機 械 に 変 えることができることです.とくにパーソナルコンピュータは, 日 本 語 ワードプロセッサとして 使 用 されることが 多 くあります. 総 合 メディアセンターの 教 育 シ ステムでは,Microsoft

More information

2 / 18 ページ 第 13 講 データの 活 用 とデータマップの 作 成 13-1 ホームページの 保 存 ホームページ(Web ページ)に 表 示 される 様 々な 情 報 を ファイルとして 保 存 することができます http://www1.doshisha.ac.jp/~digitex

2 / 18 ページ 第 13 講 データの 活 用 とデータマップの 作 成 13-1 ホームページの 保 存 ホームページ(Web ページ)に 表 示 される 様 々な 情 報 を ファイルとして 保 存 することができます http://www1.doshisha.ac.jp/~digitex 1 / 18 ページ キャリアアップコンピューティング 第 13 講 [ 全 15 講 ] 2016 年 度 2 / 18 ページ 第 13 講 データの 活 用 とデータマップの 作 成 13-1 ホームページの 保 存 ホームページ(Web ページ)に 表 示 される 様 々な 情 報 を ファイルとして 保 存 することができます http://www1.doshisha.ac.jp/~digitext/data/east.htm

More information

情報処理技能検定試験 表計算2級 手順書

情報処理技能検定試験 表計算2級 手順書 日 本 情 報 処 理 検 定 協 会 主 催 情 報 処 理 技 能 検 定 試 験 ( 表 計 算 ) ワンポイント 2 級 (Microsoft Excel 2010 対 応 ) 2012 年 4 月 日 本 情 報 処 理 検 定 協 会 練 習 をはじめる 前 に 3 試 験 前 にすること 4 受 験 番 号 名 前 の 入 力 4 試 験 本 番 4 注 意 すること 4 試 験 後

More information

スライド 1

スライド 1 Android 版 目 視 録 運 用 操 作 マニュアル 作 成 2012/03/22 更 新 2014/09/26 目 視 録 とは 携 帯 またはパソコンで 施 工 写 真 を 登 録 確 認 できるシステムです ご 利 用 の 為 にはIDとパスワードが 必 要 です TEG ログインID ( ) パスワード ( ) https://teg.mokusiroku.com/

More information

<5461726F2D93648E718E868EC58B8F30332E6A7464>

<5461726F2D93648E718E868EC58B8F30332E6A7464> PowerPointで 電 子 紙 芝 居 を 作 ろう! Microsoft Office Power Point 2003 を 用 いて 電 子 紙 芝 居 を 作 成 します 主 に, 画 像 の 挿 入 や オートシェイプ, クリップアート, アニメーションの 設 定, 画 面 の 切 り 替 え 効 果 機 能 を 用 います また,プロジェクタで 投 影 して 電 子 紙 芝 居 として

More information

医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情

医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情 報 入 力 項 目 2 1.2.2 子 ども 医 療 費 明 細 入 力 項 目 3 1.2.3 ひとり

More information

Microsoft Word - linkad_manual【110418】.doc

Microsoft Word - linkad_manual【110418】.doc リンクアド 設 定 マニュアル リンクアドLLC 1 LinkAd 概 要 図 媒 体 サイト 2 INDEX リンクアド 設 定 の 流 れ 1. 広 告 掲 載 ページに 広 告 配 信 タグを 設 置 する CSVのアップロードを 行 う p.5~p.6 タグが 設 定 されたHTMLをダウンロードする p.7 2. 配 信 したい 広 告 を 登 録 する 媒 体 に 掲 載 する 広 告

More information

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

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

More information

MapDK3のインストール

MapDK3のインストール デジカメ 整 理 専 科 Version 3.6 サポートアドレス:kaneda_supp@yahoo.co.jp 目 次 1. メイン 画 面... 3 2. フルオート 整 理... 4 2.1. 検 索 場 所 の 指 定... 4 2.2. 保 存 場 所 の 指 定... 5 2.3. 検 索 開 始... 5 2.4. カメラ 名 称 確 認... 6 2.5. 結 果 表 示... 7

More information

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高 雇 用 保 険 マイナンバー 改 定 向 け 操 作 説 明 書 < 目 次 > 1.マイナンバー 等 の 法 令 改 定 対 応 について 3 1.1 法 令 改 定 の 変 更 点 3 1.2 その 他 主 要 な 変 更 点 4 2.マイナンバー 管 理 システムとの 連 携 設 定 5 2.1 マイナ de 社 労 夢 の 運 用 設 定 5 2.2 マイナ de 社 労 夢 CL の 運

More information

目 次 1 ご 使 用 の 前 に 1.1 動 作 環 境 1.2 セットアップ 方 法 2 使 用 方 法 2.1 起 動 方 法 2.2 操 作 方 法 2.2.1 効 果 音 設 定 2.2.2 アニメーション 設 定 2.2.3 スライドジャンプ 設 定 2.2.4 フラッシュカード 設 定

目 次 1 ご 使 用 の 前 に 1.1 動 作 環 境 1.2 セットアップ 方 法 2 使 用 方 法 2.1 起 動 方 法 2.2 操 作 方 法 2.2.1 効 果 音 設 定 2.2.2 アニメーション 設 定 2.2.3 スライドジャンプ 設 定 2.2.4 フラッシュカード 設 定 マニュアル(2013.11.22ver) 目 次 1 ご 使 用 の 前 に 1.1 動 作 環 境 1.2 セットアップ 方 法 2 使 用 方 法 2.1 起 動 方 法 2.2 操 作 方 法 2.2.1 効 果 音 設 定 2.2.2 アニメーション 設 定 2.2.3 スライドジャンプ 設 定 2.2.4 フラッシュカード 設 定 2.2.5 時 間 指 定 スライド 移 動 設 定 2.2.6

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

Microsoft PowerPoint - HTML1復習_1021.ppt

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

More information

設定フロー ★印は必須の設定です

設定フロー ★印は必須の設定です AutoBiz StartUp Manual オートビズ 基 本 設 定 マニュアル ( 一 括 登 録 ~ メルマガ 配 信 編 ) 目 次 1. 登 録 用 アドレスリスト(CSV ファイル)の 作 成... 2 2.シナリオ 名 の 変 更...4 3. 登 録 ページ 作 成 でフォームを 作 成... 5 4. 完 了 ページ 作 成 で 解 除 完 了 ページの 設 定... 7 5.

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション インターネット 出 願 手 引 き (システムWAKABA 継 続 入 学 申 請 手 引 き) 目 次 1.システムWAKABAトップ 画 面 2 2. 学 生 種 選 択 画 面 3 3. 出 願 申 請 画 面 (1) 全 科 履 修 生 の 場 合 4 (2) 全 科 履 修 生 以 外 の 場 合 6 4.オンライン 授 業 8 5. 科 目 登 録 申 請 画 面 (1) 授 業 種 別

More information

Microsoft Word - 不正アクセス行為の禁止等に関する法律等に基づく公安

Microsoft Word - 不正アクセス行為の禁止等に関する法律等に基づく公安 不 正 アクセス 行 為 の 禁 止 等 に 関 する 法 律 等 に 基 づく 公 安 委 員 会 による 援 助 等 の 措 置 に 関 する 訓 令 平 成 12 年 7 月 1 日 警 察 本 部 訓 令 第 25 号 改 正 平 成 14 年 11 月 22 日 本 部 訓 令 第 29 号 平 成 16 年 3 月 25 日 本 部 訓 令 第 6 号 平 成 24 年 5 月 1 日

More information

5 振 込 依 頼 書 の 作 成 方 法 ()ツールの 起 動 コピーまたはダウンロードしたツールをダブルクリックして 開 いてください (ツール 起 動 の 際 マクロを 有 効 にしてください ) ダブルクリック 後 以 下 のメッセージが 出 力 されますので 読 み 取 り 専 用 ボタン

5 振 込 依 頼 書 の 作 成 方 法 ()ツールの 起 動 コピーまたはダウンロードしたツールをダブルクリックして 開 いてください (ツール 起 動 の 際 マクロを 有 効 にしてください ) ダブルクリック 後 以 下 のメッセージが 出 力 されますので 読 み 取 り 専 用 ボタン 振 込 依 頼 書 作 成 ツール のご 利 用 説 明 書 はじめに 振 込 依 頼 書 作 成 ツール( 以 下 ツール という ) は パソコンを 使 用 し 全 国 の ろうきんが 統 一 して 使 用 する 振 込 依 頼 書 を 作 成 するためのツールです ツールを 利 用 して 頂 くことで お 客 様 が 振 込 依 頼 書 を 手 書 きで 作 成 する 負 担 をなくし また

More information

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ 5-1 一 般 ユーザー 用 :メール お 使 いのブラウザ 上 でメールの 送 受 信 ができます メールはJobMagicのサーバーにて 管 理 されており いつでもどこでも 別 のマシーンでログインしても 同 じ 環 境 でご 利 用 いただけます 受 信 したメールを 読 む 1 受 信 したメールを 読 むには3 種 類 の 方 法 があります メニューからメールメニューをクリック 新 着

More information

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

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

More information

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

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

More information

Microsoft Word - hagakiwriter3free-atenagaki-hou.doc

Microsoft Word - hagakiwriter3free-atenagaki-hou.doc IT-ふたば 会 ミニ 講 習 手 順 書 ( 取 説 /はがき 宛 名 書 き: はがき 作 家 3 Free による 宛 名 書 き 方 法 :H25.11.26) 1. はがき 作 家 を 自 分 のパソコンに 取 り 込 む (1) 自 宅 のパソコンで 実 施 する 場 合 1 自 分 のパソコンに はがき 作 家 の 最 新 版 はがき 作 家 6Free をダウンロードする Yahoo

More information

2 シ ス テ ム が 2 4 時 間 3 6 5 日 安 定 的 に 稼 働 す る 機 材 と 設 置 環 境 を 整 え る こ と ( 2 ) ソ フ ト ウ ェ ア 1 既 に 導 入 実 績 の あ る CMS で あ る こ と 2 Windows7(Windows IE1 1 ) で

2 シ ス テ ム が 2 4 時 間 3 6 5 日 安 定 的 に 稼 働 す る 機 材 と 設 置 環 境 を 整 え る こ と ( 2 ) ソ フ ト ウ ェ ア 1 既 に 導 入 実 績 の あ る CMS で あ る こ と 2 Windows7(Windows IE1 1 ) で 結 の 故 郷 匠 の 技 体 験 観 光 事 業 ウ ェ ブ サ イ ト 構 築 保 守 管 理 業 務 仕 様 書 1. 業 務 名 結 の 故 郷 匠 の 技 体 験 観 光 事 業 ウ ェ ブ サ イ ト 構 築 保 守 管 理 業 務 2. 目 的 こ の 業 務 は 越 前 お お の 雇 用 創 造 推 進 協 議 会 ( 以 下 協 議 会 と い う )が 実 施 す る 実 践

More information

untitled

untitled 操 作 実 習 資 料 各 レイヤの 表 示 状 態 1 新 規 レイヤの 追 加 ( 外 部 データ) 2 新 規 レイヤの 追 加 ( 内 部 データ) 3 機 場 データの 作 成 (ポイント) 4 機 場 データのラベル 作 成 5 パイプラインデータの 作 成 (ライン) 6 ラインデータのラベル 作 成 ( 管 種 管 径 延 長 ) 7 ラインデータの 個 別 値 の 作 成 ( 管

More information

ThinkBoard Free60 Manual

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

More information