Microsoft PowerPoint - cp2015_0202.pptx

Size: px
Start display at page:

Download "Microsoft PowerPoint - cp2015_0202.pptx"

Transcription

1 HTML5&CSS3 TIPS サポタント 株 式 会 社

2 HTML5 TIPS HTML5のTipsご 紹 介

3 HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 ってマークアップした サンプルコード 1 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>web モバイル 専 門 人 材 派 遣 紹 介 ウェブタント</title> <meta name="description" content="web モバイル 専 門 人 材 派 遣 紹 介 "> <meta name="keywords" content=" 人 材 派 遣,WEB"> <style>/* CSS */</style> <script>/* JavaScriptコード */</script> <! [if lt IE 9 ]> <script src=" /js/ ie/ html5shiv.js"></script> <![endif] > </head> <body> <!-- ヘッダ --> <header> <h1>html5 Tips 集 プレゼント<h1> <nav> <ul> <li><a href="../index.html">トップページ</a></li> <li><a href=../html/ >CSS3 Tips 集 プレゼント</a></li> </ul> </nav> </header> まずはhead 部 分 から DOCTYPE 宣 や 字 コードの 指 定 scriptの 記 述 など ずいぶんとスッキリしましたね! IE9 未 満 の 対 応 は 2012 年 5 中 旬 からはzipファ イルをダウンロードし 分 のサーバーへアップ してheadに 組 み 込 みます 1 へ き ZIPを 解 凍 し dist フォルダにある JavaScriptファイルを 分 のサーバーへUPして 読 み 込 みます <body> 以 下 の<header>はHTML5から 追 加 され た 新 しい 要 素

4 HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 ってマークアップした サンプルコード < 較 してみよう> これまでのHTML <html> <body> <header> <div id="header">...</div> <div id="nav">...</div> <div id="container"><h1>...</h1></div> <div id="footer">...</div> </body> </html> HTML5 <html> <body> <header>...</header> <nav>...</nav> <article> <section> <h1>...</h1> </section> </article> <footer>...</footer> </body> </html> <footer> <article>や <section> <article>は 独 立 しても 成 り 立 つような コンテンツを 囲 う <section>は テキストや 文 章 はここです!という マークアップ 見 出 しタグを 含 むような 内 容 を 括 る 従 来 のHTMLでは<div>にidやclassで 構 造 名 をつけ ここからはヘッダ ここからはメインコンテンツ~ といったよう に 分 類 していた 人 が 多 いのではないかと 思 います HTML5では 構 造 化 タグと 呼 ばれる 新 しい 要 素 (タグ)が 追 加 され ヘッダは<header>で 囲 み フッタは<footer>で 囲 む など 文 章 構 造 としてそれぞれをマークアップするようになりました <article> 要 素 は コンテンツとして 独 立 しても 成 り 立 つ 部 分 をくくり たいときに 使 用 します Blogの 記 事 や テキストコンテンツなど <section> 要 素 は パーツや 要 素 を 囲 うもので 文 書 のアウトラインを 明 確 にする ために 使 用 します sectionの 中 には<h1><h2>のような 見 出 しタグが 入 っていることが 推 奨 されています コンテンツをぐるっと<article>で 囲 み その 中 の 文 書 パーツは <section>でマークアップ <section> 内 に<h1>など 見 出 しから 始 まるコ ンテンツが 入 っている というような 構 造 になります

5 HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 って マークアップした サンプルコード <body> <div id="wrapper"> <! header > <header><h1>header 本 文 </h1></header> <! nav > <nav> <ul><li><a href= # >link1</a></li><li><a ref= # >link2</a></li></ul> </nav> <article> <section> <h1><h2>など 見 出 しが 続 いたら <hgroup>で 括 ってあげます <hgroup><h1>html5</h1><h2>header 要 素 とは</h2></hgroup> <p> 本 文 </p> </section> <section> <h2>footerの 書 き 方 </h2><p> 本 文 </p><p> 本 文 </p><p> 本 文 </p> </section> </article> < footer > <footer><small><p>コピーライトなど</p></small></footer> <! /#wrapper > </div> </body> レイアウトスタイルを 適 用 するための wrapper として 使 っていた div 要 素 を section 要 素 に 置 き 換 える 間 違 いをやってしまいがちですので 気 を 付 けま しょう でも<div>を 使 わない というわけではありません 文 書 構 造 ではなく あくまでも レイアウトを 決 める ためのボックス はdivを 使 用 します <div>はcssで 装 飾 (レイアウト)するため <section> や<article>はHTML 内 でコンテンツの 構 造 をマークアッ プするためとして 使 い 分 けましょう 見 出 しタグを 置 くとそこからsectionが 始 まる そのsectionが 独 立 コンテンツとしても 成 り 立 つよう な 内 容 を 満 たしているなら articleで 囲 う と 覚 えま しょう Blogに 例 えると 記 事 全 体 をarticleで 囲 い 記 事 の 中 の 章 分 けはsectionでパーツわけする といっ たようになります

6 HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 って マークアップした サンプルコード <! フッタ > <footer> <p> <small> By <a href= > お 仕 事 情 報 サイト ウェブタ ント</a><br > 2014 <ahref="htt p://webtant.net/" >webtant.net</a> </small> </p> </footer> footerエリアで 使 われている smallタグは さい 字 で 表 すときに 使 するのではなく ライセンス 関 連 の 記 述 や 免 責 規 約 を 表 すると きに 使 されるタグです

7 HTML5で 変 更 された 要 素 ご 紹 介 HTML5から 変 更 された 要 素 はいろいろありますが 部 をピックアップしてみました ブロック 要 素 全 体 を a で 囲 んでリンクにできる <a href=" Googleページに 飛 びます</p></a> <a name=""> のところへジャンプしていたアンカーリンク HTML5では id 指 定 で 飛 ばします <a href="#anchor">アンカーリンクへ 移 動 </a> ~~~ <h1 id="anchor">ここに 移 動 </h1> <b>は 強 調 や 重 要 性 という 役 割 はなくなりました 文 章 の 中 に 出 てくる 商 品 名 など 重 要 性 を 与 えるわけではなく 注 目 させたい 部 分 に 使 用 します *ぶっちゃけあんまり 使 わないかも <i>はイタリック( 斜 体 )じゃない 文 章 の 会 話 こんな 鍵 カッコの 中 など をマークアップ 考 えや 雰 囲 気 を 表 している 部 分 専 門 用 語 など 強 調 でもありません ( 例 ) <p><i> 明 日 は 休 みだー</i> 私 は 大 声 で 叫 んだ </p>

8 HTML5で 変 更 された 要 素 ご 紹 介 HTML5から 変 更 された 要 素 はいろいろありますが 部 をピックアップしてみました <hr>は 段 落 レベルの 変 わり 目 を 意 味 する 水 平 線 を 引 く 役 割 のあったhrは テーマの 変 わり 目 区 切 る 役 割 に ただし section 要 素 で 文 章 をマークアップするので sectionとsectionの 間 にhrを 入 れる 必 要 はありません 話 が 変 わるけど 見 出 しをつけるほどでもないな というときに 出 番 となります ( 例 ) <p> 今 日 から そのノウハウを 活 かして かけだしネットショップ 担 当 者 に 役 立 つ ECまわりのtipsをこのコラムスペースでお 伝 えしていきたいと 思 います </p> <hr> <p>セミナー 事 務 局 として 年 間 100 名 以 上 のかけだし 運 営 者 担 当 者 さんと 出 会 ってきましたが~~~ 続 く</p> <strong>は 入 れ 子 にしてさらに 重 要 度 をあげられる ( 例 ) <p> 1 社 2 社 だけではなく <strong> 商 材 やサービスが 異 なるショップなど<strong> 多 くのショップを 利 用 する</strong>こと でとても 勉 強 になります </strong></p> <お 軽 メモ 帳?!> 仕 事 中 に 急 にメモしたくなったとき 元 に 紙 とペンがない! そんなときに 便 利?な 技 data:text/html,<html contenteditable> このタグをブラウザのアドレスバーにいれると あら 不 思 議 ブラウザがメモ 帳 にへんし ん

9 HTML5で 背 景 に 動 画 を 置 いたサイトを 作 ろう 本 ではまだ 少 ないかもしれませんが 海 外 サイトでは 結 構 にしますね サイトイメージのブランディングや 具 体 的 な 内 容 を 背 景 で 動 画 再 することでより 視 覚 的 なインパクトを 与 えられます プロフィールサイトやポートフォリオサイトにも 良 いかもしれません 分 で 撮 影 してももちろんOKですが 無 料 有 料 で 様 々な 動 画 素 材 がありますのでそれらを 利 してみては 参 考 : 写 真 素 材 屋 さんの Fotolia では 動 画 も 販 売 されています 無 料 動 画 なら YouTubeのクリエイティブ コモンズ 検 索 で できます *ライセンスはしっかり 確 認 必 須 また ネットショップさんなどコンテンツが 多 いサイトには 向 いてません メインサイトの 他 に1つのサービスや 商 品 を 紹 介 するためのランディングページなどには 活 できそうですね 背 景 に 動 画 を 置 く 場 合 に 気 を 付 けたいこと 楽 はながさない 短 すぎず すぎない 動 画 秒 くらいが 適 当 ファイル 容 量 を 出 来 る 限 り 軽 くする 代 替 え 画 像 を 必 ず 意 しておく (モバイルなど 表 されない 環 境 ユーザーのために) <p>green</p> <video src=" autoplay loop> <img src=" alt="greenphoto"> </video>

10 HTML5で 背 景 に 動 画 を 置 いたサイトを 作 ろう 動 画 とコンテンツを 重 ねあわせ レイヤーにして 表 する 容 量 を 軽 くすると どうしても 荒 くなってしまいますよね その 対 策 として 動 画 に 画 像 を 組 み 合 わせて 表 するとおしゃれが 感 アップします 装 飾 の 部 としてストライプなどの 背 景 画 像 を 使 うのも 良 いですが 細 かいドット 画 像 などを 使 うことで 違 和 感 なく 動 画 を 表 現 できます さらに 画 像 を 使 わずに 動 画 の 荒 さを 気 にさせないようにするためには background を rgba で 半 透 明 を 重 ねることで 溶 け 込 みます body { background: #000; video { position: fixed; right: 0; top: 0; z-index: 1; p { font-family: serif; color: #fff; font-size: 400%; margin: 50px; position: relative ; z-index: 2;

11 HTML5でのパンくずリスト Google 推 奨 HTML5のマイクロデータを 使 して 検 索 エンジンに 正 しくサイト 構 造 を 伝 えることでSEO 効 果 がアップします *マイクロデータは もちろんパンくずだけではなくコンテンツの 中 でのマークアップにも 使 できます <div itemscope itemtype=" vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title">メニュー</span> </a> </div> <div itemscope itemtype=" vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title">フードメニュー</span> </a> </div> <div itemscope itemtype=" vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title"> 串 メニュー</span> </a> </div> マイクロデータをコンテンツにも 使 ってみたい! という 方 は こちらの 記 事 がオススメです

12 CSS3 TIPS CSS3のTipsご 紹 介

13 CSSを 書 くときに 気 を 付 けたいこと CSS3だから というわけではないですが 改 めて 気 を 付 けたいこと3 点! スタイルを 指 定 している 要 素 を 先 にくっつけておくと 後 から 見 たときにわかりやすい 下 層 ページからコーディングしよう! 下 層 ページからコーディングしていくと TOPページは 差 分 だけコーディングでOK! CSSの 記 述 を 統 一 する div#content { margin-left:10px; margin-bottom:20px; div#main { margin:0 10px 10px 0; #content.error { margin-left:10px; ではなく div#content p.error { margin-left:10px; とか div#header h1 { font-size:12px; のように 記 述 しよう! 担 当 者 が 変 わると こんな 風 に 改 行 ルールがまちまちになっていたり 最 後 の 方 で あら?CSSが 効 かない! の 原 因 の1つになっていたりします

14 CSS3 コピペで 使 える! 役 つTips 先 頭 文 字 だけを 大 きくする(ドロップキャップ) #sample-text:first-letter{ font-size: 3em; float: left; スモールキャップス(スモールキャピタル) 大 文 字 を 小 文 字 と 同 じ 大 きさにできる #sample-text{ font-variant: small-caps; ぶら 下 げインデント 2 行 目 からは1 文 字 下 げたい 場 合 #sample-text{ padding-left: 1em; text-indent: -1em; liに 付 けたborder-topだけ 消 したい html <ul> <li> list01</li> <li> list02</li> <li> list03</li> <li> list04</li> </ul> css ul { _zoom: 1; overflow: hidden; ul li { margin-top: -1px; padding: 5px; border-top: 1px solid #333;

15 CSS3 コピペで 使 える! 役 つTips 見 出 しに 折 り 返 したフセンをデザイン *IE 用 にhtml head 内 に 記 述 必 要 * <! [if IE]> <style>.arrow { top: 100%; </style> <![endif] > html <div id="container01"> <h1> 見 出 しとかいれる<span class="arrow"></span> </h1> css h1 { background: #e3e3e3; background: moz linear gradient(top, #e3e3e3, #c8c8c8); background: webkit gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); padding: 10px 20px; margin left: 20px; margin top: 0; position: relative; width: 70%; moz box shadow: 1px 1px 3px #292929; webkit box shadow: 1px 1px 3px #292929; box shadow: 1px 1px 3px #292929; color: #454545; text shadow: 0 1px 0 white; css.arrow { width : 0; height: 0; line height: 0; borde left: 20px solid transparent; border top: 10px solid #c8c8c8; top: 104%; left: 0; position: absolute;

16 CSS3 コピペで 使 える! 役 つTips ios Safariでも 使 えるテキスト 装 飾 (CSS3) *Androidでは ほぼ 表 現 可 能 一 部 非 対 応 グラデーション p{ font weight: bold; webkit background clip: text; webkit text fill color: transparent; background image: webkit gradient(linear, left top, left bottom, color stop(0%,#ff5db1), colorstop(48%,#f2b526), color stop(100%,#28c5ff)); 背 景 画 像 p{ font weight: bold; webkit background clip: text; webkit text fill color: transparent; background image: url(./bk.jpg); リフレクト p{ font weight: bold; webkit box reflect: below 10px webkit lineargradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 20%,rgba(0,0,0,0.4)) ルビ *これはhtmlで 指 定 できます <p>casemobile:スマホコンテンツ<ruby> 開 <rt>かい</rt> 発 <rt>はつ </rt></ruby>ブログ</p> 縦 書 き p{ font weight: bold; webkit writing mode:vertical rl;

17 CSS3 コピペで 使 える! 役 つTips ios Safariでも 使 えるテキスト 装 飾 (CSS3) *Androidでは ほぼ 表 現 可 能 部 対 応 グロー p{ font weight: bold; color: rgba(0,0,0,0); text shadow: 0px 0px 1px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 10px rgba(0,0,0,0.3), 0px 0px 10px rgba(0,0,0,0.3); //<div class="loading"></div>を 回 転 させる.loading{ width:50px;height:50px;background:red; webkit animation: spin 1.5s linear infinite; moz animation: spin 1.5s linear webkit keyframes spin{0% { webkit transform: rotate(0deg);100%{ webkit transform: moz keyframes spin{0% { moz transform: rotate(0deg);100%{ moz transform: rotate(360deg); 要 素 を 回 転 (くるくる 回 ります ) ローディング 中 のアニメーションにも 利 できそう

18 CSS3 コピペで 使 える! 役 つTips 落 書 き 風 にボーダーをデザイン div { border:solid 5px #0ff; width:200px; margin:25px auto; border radius: 255px 15px 225px 15px/15px 225px 15px 255px; padding:10px; リストをカフェメニュー 風 にデザイン <ul> <li><strong>css Design</strong> <em>250<sup>95</sup></em></li> </ul>.menu { width: 500px; list style: none; margin: 0 0 2em; padding: 0; font: 150%/100% Arial, Helvetica, sans serif;.menu li { clear: both; margin: 0; padding: em 0; position: relative; border bottom: dotted 2px #999;.menu strong { background: #fff; padding: 0 10px 0 0; font weight: normal; position: absolute; bottom:.3em; left: 0;.menu em { background: #fff; padding: px; font: 110%/100% Georgia, "Times New Roman", Times, serif; position: absolute; bottom:.2em; right: 0;.menu sup { font size: 60%; color: #666; margin left: 3px; IE6 用 のCSSもあり!コチラ list design

19 CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! 海 外 では 素 晴 らしいCSSジェネレーターをいくつも 見 かけます ハイセンスなデザインコードは 勉 強 にもなり カスタマイズして 自 分 好 みにデザインにするのも 良 いでしょう いくつかピックアップしてご 紹 介 します 枠 線 から 背 景 をずらして おしゃれにデザイン div 要 素 だけでギザギザのボーダー( 太 め) レスポンシブ 対 応! 対 角 線 を 用 いた 半 透 明 のパネルでセンスアップ

20 CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! hr 要 素 でセクションごとに 背 景 に を 付 ける スマホなどにも 章 を 読 みやすく 出 来 そう! 透 過 されたボックスでおしゃれに 演 出 レスポンシブにも 対 応! 半 透 明 のパネル 罫 線 が ったキャンパスノートをCSSだけで

21 CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! h1 部 分 をCSS3だけでロゴ に 仕 上 げる! 中 にテキストを れて 紙 とかにもカワイイですね divの 下 部 分 だけに グラデも 効 かせたハイセンスなシャドウ 紙 の 端 っこを 折 り 曲 げたようなデザイン ちょっとクラシックなボックス

22 CSS3 コピペで 使 える! 役 つTips CSS 3だけでアニメーション 要 素 が 飛 び 出 たり スライドインしてきたり ユラユラ 動 いたり ぐ~んと 伸 びたり ( 棒 グラフ 表 示 で 棒 の 部 分 がぐい~んと 伸 びる 演 出 など 見 かけますね!アレです ) ランディングページの 購 入 ボタンや 申 し 込 みボタンを 目 立 たせたい 時 や webページの 装 飾 でよく 使 えそうな 単 純 だけどインパクトを 与 えられる アニメーションをCSS3だけで 表 現 できちゃいます 動 き 方 もページ 上 で 確 認 できて 必 要 なものだけをコピペして 使 えるのでとっても 役 立 ちそう 沢 山 の アニメーション 動 作 をCSS3だけで 実 現 したソースを 公 開 してくれています アニメーションの 動 作 とソースはコチラから

23 WEB モバイル 専 お 仕 事 情 報 サイト ウェブタント WEB デザイナー ディレクター ネットショップ 運 営 スタッフなど WEB/スマホ 業 務 専 の 求 情 報 サイト ウェブタント HTMLやCSS ネットショップ 担 当 者 に 役 つコラムも 掲 載 中 です! 新 着 コラム スタッフブログ をぜひ 覗 いてみてくださいね!! また 当 社 は お 仕 事 紹 介 だけでなく 充 実 した 研 修 制 度 をご 意 し しっかりスキルUPできる 場 を 提 供 することにも 努 めています HTML5やCSS3などの 技 術 研 修 から WEB マーケティングまで 実 践 アップセミナー 開 催 中! 当 社 就 業 中 のスタッフさんは ナント 無 料 受 講 です セミナー 情 報 はコチラ 正 社 員 で 働 きたいあなたへ!キャリアアップして 働 きませんか? WEB 業 界 出 のエージェントがあなたを 徹 底 サポート ウェブタントキャリアはコチラ

HTML5&CSS3 レッスンブック

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

More information

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

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

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

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

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

More information

スライド 1

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

More information

HTMLとメタデータ

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

More information

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

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

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

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 Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

More information

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

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

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

CSSの基礎

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

More information

この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2

この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2 スマートフォンサイト 制 作 基 礎 11. 3 概 要 この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2 3について 3は 2.1をベースに 様 々な 機 能 を 追 加 改 訂 するモジュールの 集 まり Color Values and Units Media Query Transforms Namespace Backgrounds and Borders

More information

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

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

More information

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

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ページ 作 成 フローについて ページの 構 造 について(レイアウト/ 共 通 ヘッダー フッター) 1 共 通 ヘッダー フッターのレイアウトパターン * 共 通 ヘッダー フッター サイドバーのパターンは 複 数 作 成 することが 可 能 です * 基 本 上 層 ページの 共 通 パーツを 引 き 継 ぎますが 任 意 に 変 更 することも 可 能 です ページの 構 造 について(コンテンツ

More information

1/2

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

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

Microsoft PowerPoint - css [互換モード]

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

More information

PowerPoint プレゼンテーション

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

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

おすすめページ

おすすめページ 4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

m_sotsuron

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

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

文 書 構 造 とスタイル

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

More information

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

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

(2)大学・学部・研究科等の理念・目的が、大学構成員(教職員および学生)に周知され、社会に公表されているか

(2)大学・学部・研究科等の理念・目的が、大学構成員(教職員および学生)に周知され、社会に公表されているか 平 成 23 年 度 自 己 報 告 書 1 理 念 目 的 (1) 大 学 学 部 研 究 科 等 の 理 念 目 的 は 適 切 に 設 定 されているか 平 成 19 年 6 月 に の 目 標 として 大 学 の 発 展 に 貢 献 する 力 のある 組 織 とい う 共 通 の 目 標 を 掲 げ この 目 標 を 常 に 念 頭 に 置 きながら 日 々の 業 務 に 当 たっている さらに

More information

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

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

More information

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

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

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

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

More information

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc)

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc) Easy ページ 操 作 ガイド http://359ch.com ところチャンネル( 資 ) Easy ページサービス 操 作 ガイド 2009.1.8 版 1. はじめに Easy ページサービスとは パソコンからブラウザを 利 用 して 簡 単 にホームページを 公 開 更 新 できるサービス です Docomo や AU SoftBank 等 の 携 帯 電 話 を 利 用 して 同 様 にホームページを

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

1 林 地 台 帳 整 備 マニュアル( 案 )について 林 地 台 帳 整 備 マニュアル( 案 )の 構 成 構 成 記 載 内 容 第 1 章 はじめに 本 マニュアルの 目 的 記 載 内 容 について 説 明 しています 第 2 章 第 3 章 第 4 章 第 5 章 第 6 章 林 地

1 林 地 台 帳 整 備 マニュアル( 案 )について 林 地 台 帳 整 備 マニュアル( 案 )の 構 成 構 成 記 載 内 容 第 1 章 はじめに 本 マニュアルの 目 的 記 載 内 容 について 説 明 しています 第 2 章 第 3 章 第 4 章 第 5 章 第 6 章 林 地 ( 資 料 3) 林 地 台 帳 及 び 地 図 整 備 マニュアル( 案 ) 概 要 本 資 料 は 現 時 点 での 検 討 状 況 を 基 に 作 成 したものであり 今 後 事 務 レベルの 検 討 会 等 を 経 て 成 案 を 得 ることとしてい ます 平 成 28 年 7 月 林 野 庁 計 画 課 1 林 地 台 帳 整 備 マニュアル( 案 )について 林 地 台 帳 整 備 マニュアル(

More information

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

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

More information

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

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

More information

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

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

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. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名

目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名 特 許 取 得 済 み 平 成 26 年 9 月 15 日 株 式 会 社 メディケア 名 刺 ネットクラブ 画 面 説 明 書 1 目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5.

More information

InfoPros13_digest.key

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

More information

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

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

More information

個人住民税徴収対策会議

個人住民税徴収対策会議 個 人 住 民 税 徴 収 対 策 会 議 平 成 26 年 8 月 7 日 税 収 に 占 める 個 人 住 民 税 の 割 合 個 人 住 民 税 は 県 市 町 村 いずれも 税 収 の 約 3 割 を 占 めており 重 要 な 財 源 となっている 岡 山 県 現 年 繰 越 合 計 市 町 村 その 他 18.5% 自 動 車 税 13.1% 個 人 県 民 税 29.6% その 他 15.0%

More information

■新聞記事

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

More information

GMO MobileHomePage

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

More information

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を メールテンプレート 編 集 ユーザーマニュアル Ver1.0 2016/5/1 株 式 会 社 シャノン 1 1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-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

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <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

調 査 結 果 トピック1: 性 年 代 別 利 用 率 の 利 用 率 は 男 女 ともに 各 年 代 で 大 きく 伸 長 している 2011 年 9 月 の 調 査 では の 年 代 別 利 用 率 は 男 女 とも が 最 も 高 く が 23.9% が 20.5%だったが 今 年 の 調

調 査 結 果 トピック1: 性 年 代 別 利 用 率 の 利 用 率 は 男 女 ともに 各 年 代 で 大 きく 伸 長 している 2011 年 9 月 の 調 査 では の 年 代 別 利 用 率 は 男 女 とも が 最 も 高 く が 23.9% が 20.5%だったが 今 年 の 調 年 11 月 5 日 デジタル アドバタイジング コンソーシアム 株 式 会 社 利 用 実 態 調 査 購 買 プロセスにおけるの 利 用 率 が 伸 長 ~16-19 歳 におけるへの 依 存 度 が 増 加 ~ デジタル アドバタイジング コンソーシアム 株 式 会 社 ( 本 社 : 東 京 都 渋 谷 区 代 表 取 締 役 社 長 : 矢 嶋 弘 毅 以 下 DAC)は 子 会 社 である

More information

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム 更 新 日 :2015 年 4 月 14 日 料 金 初 期 費 用 月 額 料 金 無 料 サーバーの 初 期 セットアップ 時 以 外 または 複 数 フォームメーラーを インストールする 場 合 には 別 途 費 用 が 必 要 となります 無 料 スペック 100 個 作 成 可 能 フォーム 数 一 般 投 票 注 文 フォームに 対 応 設 置 可 能 項 目 数 100 項 目 添 付

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

法 令 の 遵 守 自 助 努 力 原 議 保 存 期 間 1 0 年 ( 平 成 3 4 年 1 2 月 3 1 日 まで) 各 管 区 警 察 局 広 域 調 整 担 当 部 長 警 察 庁 丁 保 発 第 1 0 2 号 警 察 庁 生 活 安 全 局 保 安 課 長 各 道 府 県 警 察

法 令 の 遵 守 自 助 努 力 原 議 保 存 期 間 1 0 年 ( 平 成 3 4 年 1 2 月 3 1 日 まで) 各 管 区 警 察 局 広 域 調 整 担 当 部 長 警 察 庁 丁 保 発 第 1 0 2 号 警 察 庁 生 活 安 全 局 保 安 課 長 各 道 府 県 警 察 提 案 書 株 式 会 社 P S 検 査 機 構 法 令 の 遵 守 自 助 努 力 原 議 保 存 期 間 1 0 年 ( 平 成 3 4 年 1 2 月 3 1 日 まで) 各 管 区 警 察 局 広 域 調 整 担 当 部 長 警 察 庁 丁 保 発 第 1 0 2 号 警 察 庁 生 活 安 全 局 保 安 課 長 各 道 府 県 警 察 ( 方 面 ) 本 部 長 殿 警 視 庁 生 活

More information

公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可 能 な 社 会 保 障 制 度 の 確 立 を 図 るための 改 革 の 推 進 に 関 する 法 律 に 基 づく 社 会 経 済 情

公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可 能 な 社 会 保 障 制 度 の 確 立 を 図 るための 改 革 の 推 進 に 関 する 法 律 に 基 づく 社 会 経 済 情 資 料 2-1 公 的 年 金 制 度 の 持 続 可 能 性 の 向 上 を 図 るための 国 民 年 金 法 等 の 一 部 を 改 正 する 法 律 案 の 概 要 厚 生 労 働 省 年 金 局 平 成 28 年 4 月 21 日 公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可

More information

■新聞記事

■新聞記事 PowerPoint2013 基 本 操 作 P.1 PowerPoint2013 基 本 操 作 1.PowerPoint2013 の 起 動... 2 2.スライドのサンプル... 3 3.スライドの 作 成... 4 4. 文 字 の 入 力 とテキストボックス... 5 5. 図 の 作 成 と 書 式 設 定... 5 6.グラフの 作 成... 6 7. 背 景 デザインと 配 色...

More information

Microsoft PowerPoint - 130522_リビジョンアップ案内_最終.pptx

Microsoft PowerPoint - 130522_リビジョンアップ案内_最終.pptx WaWaOfficeシリーズ バージョン8.2リビジョンアップ 2013 年 6 月 18 日 リリース 予 定 株 式 会 社 アイアットOEC ローカル 機 能 の 改 善 プレビュー 表 追 加 の 覧 表 にプレビュー 表 を 設 定 可 能 にしました 1 表 2 表 1 +プレビュー 表 から 選 択 設 定 法 個 設 定 個 設 定 基 本 設 定 PC 専 パラメータの 覧 表 時

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

ワープロソフトウェア

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

More information

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

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

More information

一般競争入札について

一般競争入札について ( 一 般 競 争 入 札 ) 総 合 評 価 落 札 方 式 ガイドライン 平 成 21 年 4 月 ( 独 ) 工 業 所 有 権 情 報 研 修 館 1.はじめに 現 在 公 共 調 達 の 透 明 性 公 正 性 をより 一 層 めることが 喫 緊 の 課 題 とな っており 独 立 行 政 法 人 も 含 めた 政 府 全 体 で 随 意 契 約 の 見 直 しに 取 り 組 んで おります

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

<6D33335F976C8EAE825081698CF6955C9770816A2E786C73>

<6D33335F976C8EAE825081698CF6955C9770816A2E786C73> 国 立 大 学 法 人 新 潟 大 学 の 役 職 員 の 報 酬 給 与 等 について Ⅰ 役 員 報 酬 等 について 1 役 員 報 酬 についての 基 本 方 針 に 関 する 事 項 1 平 成 18 年 度 における 役 員 報 酬 についての 業 績 反 映 のさせ 方 本 学 が 定 める 役 員 に 支 給 する 期 末 特 別 手 当 (ボーナス)において, 役 員 の 本 給

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

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

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

More information

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

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

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

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

More information

インターネットマガジン1997年4月号―INTERNET magazine No.27

インターネットマガジン1997年4月号―INTERNET magazine No.27 3.0 4.0 A N S W E R1 A N S W E R2 308 INTERNET magazine 1997/4 1 jhttp://www.tucows.com/ A { text-ecoration: none; } INTERNET magazine

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 (

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 ( JIS X 8341-3:2010に 基 づいた ウェブの 試 験 方 法 2010 年 9 月 22 日 富 士 通 デザイン 株 式 会 社 近 藤 真 太 郎 ウェブアクセシビリティ 基 盤 委 員 会 WG3 委 員 Copyright 2010 FUJITSU LIMITED 1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に

More information

SchITコモンズ【活用編】

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

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

More information

ができます 4. 対 象 取 引 の 範 囲 第 1 項 のポイント 付 与 の 具 体 的 な 条 件 対 象 取 引 自 体 の 条 件 は 各 加 盟 店 が 定 めます 5.ポイントサービスの 利 用 終 了 その 他 いかなる 理 由 によっても 付 与 されたポイントを 換 金 すること

ができます 4. 対 象 取 引 の 範 囲 第 1 項 のポイント 付 与 の 具 体 的 な 条 件 対 象 取 引 自 体 の 条 件 は 各 加 盟 店 が 定 めます 5.ポイントサービスの 利 用 終 了 その 他 いかなる 理 由 によっても 付 与 されたポイントを 換 金 すること 大 好 きポイント コンサドーレ 札 幌 サービス 利 用 規 約 第 1 条 ( 目 的 ) 1. 本 規 約 は フェリカポケットマーケティング 株 式 会 社 ( 以 下 当 社 )が 発 行 する 大 好 きコンサドーレ 札 幌 WAON カ ード 及 びポイントサービスの 利 用 条 件 について 定 めます 2. 利 用 者 が 大 好 きコンサドーレ 札 幌 WAON カードの 利 用

More information

Microsoft Word - 02第3期計画(元データ).doc

Microsoft Word - 02第3期計画(元データ).doc 第 3 期 長 岡 市 教 育 委 員 会 特 定 事 業 主 行 動 計 画 ( 市 職 員 ) 平 成 23 年 4 月 長 岡 市 教 育 委 員 会 Ⅰ 総 論 1 目 的 急 速 な 少 子 化 の 進 行 家 庭 地 域 を 取 巻 く 環 境 の 変 化 により 次 代 の 社 会 を 担 う 子 どもが 健 やかに 生 まれ かつ 育 成 される 社 会 の 形 成 に 資 するため

More information

ez_meishi.ppt

ez_meishi.ppt 名 刺 登 録 名 刺 登 録 ~ 目 次 ~ 1. 名 刺 登 録 とは 3 2. 準 備 2-1.まず 最 初 に 確 認 5 2-2. 新 しいアプリの 作 成 6 2-3.アプリケーションのダウンロードとインストール 8 2-4.サービス 利 用 者 登 録 10 2-5. 所 有 者 管 理 DBの 発 行 設 定 12 3. 登 録 3-1. 名 刺 情 報 を 読 み 取 る 18 3-2.

More information

PowerPoint プレゼンテーション

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

More information

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

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

More information

(1)

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

More information

2 役 員 の 報 酬 等 の 支 給 状 況 役 名 法 人 の 長 理 事 理 事 ( 非 常 勤 ) 平 成 25 年 度 年 間 報 酬 等 の 総 額 就 任 退 任 の 状 況 報 酬 ( 給 与 ) 賞 与 その 他 ( 内 容 ) 就 任 退 任 16,936 10,654 4,36

2 役 員 の 報 酬 等 の 支 給 状 況 役 名 法 人 の 長 理 事 理 事 ( 非 常 勤 ) 平 成 25 年 度 年 間 報 酬 等 の 総 額 就 任 退 任 の 状 況 報 酬 ( 給 与 ) 賞 与 その 他 ( 内 容 ) 就 任 退 任 16,936 10,654 4,36 独 立 行 政 法 人 駐 留 軍 等 労 働 者 労 務 管 理 機 構 の 役 職 員 の 報 酬 給 与 等 について Ⅰ 役 員 報 酬 等 について 1 役 員 報 酬 についての 基 本 方 針 に 関 する 事 項 1 平 成 25 年 度 における 役 員 報 酬 についての 業 績 反 映 のさせ 方 検 証 結 果 理 事 長 は 今 中 期 計 画 に 掲 げた 新 たな 要

More information

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション この 資 料 には 住 民 基 本 台 帳 法 で 規 定 された 秘 密 保 持 義 務 を 負 うべき 情 報 が 含 まれています 別 添 1 通 知 カード 等 の 送 付 に 関 する 説 明 資 料 [ 平 成 27 年 9 月 ] 地 方 公 共 団 体 情 報 システム 機 構 通 知 カード 送 付 時 の 外 観 宛 名 面 宛 名 面 うら 1 通 知 カード 送 付 封 筒

More information

<4D6963726F736F667420576F7264202D20819A837A815B83808379815B83578DEC90AC837D836A83858341838B2E646F6378>

<4D6963726F736F667420576F7264202D20819A837A815B83808379815B83578DEC90AC837D836A83858341838B2E646F6378> 2010 年 12 月 改 正 版 ビーコマース ホームページ 作 成 マニュアル 本 文 中 の 画 像 は 2010/12/06 までのものとなっておりますので 実 際 の 画 像 とは 異 なる 場 合 がございます もくじ 本 書 の 使 い 方 1 スタイル 設 定 2 自 由 ページレイアウト 設 定 3 ホームページ 作 成 画 面 説 明 4 コンテンツ 編 集 5 ( 店 舗 TOP

More information

2 役 員 の 報 酬 等 の 支 給 状 況 平 成 27 年 度 年 間 報 酬 等 の 総 額 就 任 退 任 の 状 況 役 名 報 酬 ( 給 与 ) 賞 与 その 他 ( 内 容 ) 就 任 退 任 2,142 ( 地 域 手 当 ) 17,205 11,580 3,311 4 月 1

2 役 員 の 報 酬 等 の 支 給 状 況 平 成 27 年 度 年 間 報 酬 等 の 総 額 就 任 退 任 の 状 況 役 名 報 酬 ( 給 与 ) 賞 与 その 他 ( 内 容 ) 就 任 退 任 2,142 ( 地 域 手 当 ) 17,205 11,580 3,311 4 月 1 独 立 行 政 法 人 統 計 センター( 法 人 番 号 7011105002089)の 役 職 員 の 報 酬 給 与 等 について Ⅰ 役 員 報 酬 等 について 1 役 員 報 酬 についての 基 本 方 針 に 関 する 事 項 1 役 員 報 酬 の 支 給 水 準 の 設 定 についての 考 え 方 独 立 行 政 法 人 通 則 法 第 52 条 第 3 項 の 規 定 に 基 づき

More information

リクナビ派遣様_生活ラボニュース_リリースPDFフォーマット.PPT

リクナビ派遣様_生活ラボニュース_リリースPDFフォーマット.PPT 生 活 ラボニュース Vol.10 Mar/2012 女 性 たちの お 仕 事 観 調 査 女 性 たちのお 仕 事 観 にフィット!? 派 遣 というワークスタイルのメリットとは? 今 女 性 たちが 仕 事 に 求 めていることとは? そしてそのニーズに 応 えることができる ぴったりのワークスタイルとは? やるからにはやりがいを 持 って 前 向 きにがんばりたい でも 自 由 に 使 える

More information

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

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

More information

目 次 I. はじめに... 1 1. 改 定 履 歴... 1 2. NetCommons について... 1 3. NetCommons メニューデザイン パーツとは?... 1 4. 必 要 なスキル... 1 5. この 資 料 の 目 的... 2 6. 商 標... 2 7. ライセンス

目 次 I. はじめに... 1 1. 改 定 履 歴... 1 2. NetCommons について... 1 3. NetCommons メニューデザイン パーツとは?... 1 4. 必 要 なスキル... 1 5. この 資 料 の 目 的... 2 6. 商 標... 2 7. ライセンス NetCommons メニューデザイン パーツ 使 用 説 明 書 2010-12-14 版 目 次 I. はじめに... 1 1. 改 定 履 歴... 1 2. NetCommons について... 1 3. NetCommons メニューデザイン パーツとは?... 1 4. 必 要 なスキル... 1 5. この 資 料 の 目 的... 2 6. 商 標... 2 7. ライセンス...

More information

<4D6963726F736F667420576F7264202D203032208E598BC68A8897CD82CC8DC490B68B7982D18E598BC68A8893AE82CC8A76905682C98AD682B782E993C195CA915B9275964082C98AEE82C382AD936F985E96C68B9690C582CC93C197E1915B927582CC898492B75F8E96914F955D89BF8F915F2E646F6

<4D6963726F736F667420576F7264202D203032208E598BC68A8897CD82CC8DC490B68B7982D18E598BC68A8893AE82CC8A76905682C98AD682B782E993C195CA915B9275964082C98AEE82C382AD936F985E96C68B9690C582CC93C197E1915B927582CC898492B75F8E96914F955D89BF8F915F2E646F6 様 式 租 税 特 別 措 置 等 に 係 る 政 策 の 事 前 評 価 書 1 政 策 評 価 の 対 象 とした 産 業 活 力 の 再 生 及 び 産 業 活 動 の 革 新 に 関 する 特 別 措 置 法 に 基 づく 登 録 免 租 税 特 別 措 置 等 の 名 称 許 税 の 特 例 措 置 の 延 長 ( 国 税 32)( 登 録 免 許 税 : 外 ) 2 要 望 の 内 容

More information

(3) その 他 市 長 が 必 要 と 認 める 書 類 ( 補 助 金 の 交 付 決 定 ) 第 6 条 市 長 は 前 条 の 申 請 書 を 受 理 したときは 速 やかにその 内 容 を 審 査 し 補 助 金 を 交 付 すべきものと 認 めたときは 規 則 第 7 条 に 規 定 す

(3) その 他 市 長 が 必 要 と 認 める 書 類 ( 補 助 金 の 交 付 決 定 ) 第 6 条 市 長 は 前 条 の 申 請 書 を 受 理 したときは 速 やかにその 内 容 を 審 査 し 補 助 金 を 交 付 すべきものと 認 めたときは 規 則 第 7 条 に 規 定 す 篠 山 市 防 犯 カメラ 設 置 費 補 助 金 交 付 要 綱 平 成 25 年 9 月 30 日 要 綱 第 55 号 ( 趣 旨 ) 第 1 条 この 要 綱 は 市 民 が 安 心 して 暮 らせるまちづくりを 目 指 し 自 主 防 犯 活 動 を 補 完 するため 防 犯 カメラの 設 置 に 係 る 経 費 の 一 部 を 補 助 することに 関 し 篠 山 市 補 助 金 交 付

More information

スライド 1

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

More information

PowerPoint プレゼンテーション

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

More information

Color Change

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

More information