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

Size: px
Start display at page:

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

Transcription

1 HTML5 CSS3 コーディング

2 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8 CSS 9 CSS について... 9 CSS とは 9 CSS の適用方法 9 セレクタの種類 11 CSS の記述方法 12 DREAMWEAVER について 14 DREAMWEAVER について Dreamweaver とは 14 Dreamweaver の起動 14 新規 HTML ファイルを作る 15 新規 CSS ファイルを作る 16 DREAMWEAVERのインターフェイス ( 操作画面 ) 画面各部の名称 18 ドキュメントウィンドウの操作 19 パネルグループの操作 20 ワークスペースの操作 22 サイトの管理 Web サイトのフォルダー ( ディレクトリ ) 構造を考える 23 サイトの管理でサイトを設定する 24 サイト管理のメリット 25 HTML タグと CSS( 基本 ) 26 学習の準備 学習の準備 26 CSS ファイルを作る 26 文章を入力する (P タグ BR タグ ) p( 段落 ) br( 改行 ) 27 CSS での装飾 (FONT-FAMILY FONT-SIZE LINE-HEIGHT) CSS デザイナーパネルの使用方法 27 CSS ファイルへの直接入力 29 セレクタの確認 30 font-size( フォントサイズ ) 30 line-height( 行間 ) 31 font-family( フォントの種類 ) 31 CSS の編集について 32 語句の強調 (STRONG タグ EM タグ ) strong( 重要性を表す ) em( アクセントをつける ) 33 CSS での装飾 (COLOR FONT-WEIGHT TEXT-DECOLATION) color( 文字色 ) 34 font-weight( フォントの太さ ) 35 text-decolation( 文字装飾 ) 35 見出し ( タイトル ) を付ける (H タグ ) h1~h6( 見出し ) 36 CSS での装飾 (BORDER MARGIN PADDING) border( ボーダー ) 37 padding( 内部余白 ) 38 margin( 外部余白 ) 39 リンクをはる (A タグ ) a( リンク ) 40 相対パスと絶対パス 42 CSS での装飾 (TEXT-ALIGN - 1 -

3 BACKGROUND BORDER-RADIUS) 疑似クラス 43 text-align( 横方向の文字揃え ) 43 background( 背景 ) 44 border-radius( 角の丸め ) 45 リストを作る (UL/OL/LI タグ ) ul/ol/li( リスト ) 46 CSS での装飾 (LIST-STYLE) リストマーカーの位置 :list-style-position 47 リストマーカーの形 :list-style-type 47 画像のリストマーカー :list-style-image 47 一括指定 :list-style 47 定義リストを作る (DL,DT,DD タグ ) dl/dt/dd( 定義リスト ) 48 CSS での装飾 (WIDTH HEIGHT OVERFLOW) width( 要素の幅 ) height( 要素の高さ ) 49 overflow( はみ出る内容の表示方法 ) 49 CSS の応用 (BACKGROUND TEXT-SHADOW) background( 背景 ) 50 text-shadow( 文字の影 ) 51 共通のマージン設定 51 HTML タグと CSS( 画像とメディア ) 52 画像を挿入する (IMG タグ ) img( 画像 ) 52 CSS での装飾 (BOX-SHADOW) 要素を中央に揃える方法 (margin の応用 ) 53 box-shadow( ボックスの影 ) 53 メディアを挿入する (AUDIO タグ VIDEO タグ SOURCE タグ ) video( 映像 ) source( メディアのファイルを指定 ) 54 audio( 音声 ) 55 HTML タグと CSS( テーブル ) 57 テーブルを作る (TABLE タグ ) table/tbody( テーブル ) 57 caption( キャプション ) 57 tr/th/td( 行とセル ) 58 セルの選択と文字の入力 デザインビューでのセルの選択 59 テーブルの編集 行 列の追加と削除 60 セルのマージ 61 CSS での装飾 (BORDER-COLLAPSE VERTICAL-ALIGN) border-collapse( セルのボーダー表示方法 ) 62 vertical-align( 縦方向の文字揃え ) 62 HTML タグと CSS( フォーム ) 63 フォームを作る (FORM タグ ) フォームについて 63 form( フォーム ) 64 テキストフィールドの挿入 (INPUT) input( テキストフィールド ) 65 テキストフィールド :<input type="text"> 65 チェックボックスとラジオボタンの挿入 (CHECKBOX RADIO) checkbox( チェックボックス ) 67 label タグ 68 radio( ラジオボタン )

4 プルダウンメニューの挿入 (SELECT OPTION) select/option( プルダウンメニュー ) 69 テキストエリアの挿入 (TEXTAREA) textarea( テキストエリア ) 70 ボタンの挿入 (BUTTON) button( ボタン ) 71 CSS での装飾 ( 実習 ) 実習の解答 72 HTML タグと CSS( その他 ) 76 コメントの入力 HTML のコメント入力 76 CSS のコメント入力 76 インデント インデントについて 77 その他のタグ (META SCRIPT) DOCTYPE 宣言文 78 head( ヘッダー情報 ) 78 meta( メタデータ ) 79 title( タイトル ) 79 link( 外部ソース ) 80 script( スクリプト ) 80 HTML タグの分類 81 ブロックレベル要素とインライン要素 ブロックレベル要素とインライン要素 81 div( ブロックレベル要素 ) 82 span( インライン要素 ) 82 ボックスモデル 82 HTML5 におけるタグの分類 ( コンテンツモデル ) HTML5 におけるタグの分類 84 article( 記事 ) と section( セクション ) 85 ページ全体の構成を確認する ページを構成する要素 87 大枠をレイアウトする 事前準備 88 共通プロパティの設定 88 display( 要素の表示形式 ) 90 レイアウト要素を配置する (HTML) 91 レイアウト要素を配置する (CSS) 94 要素を横並びにする (float) 96 要素を横並びを解除する (clear) 97 ヘッダーの作成 ヘッダーの全体像を確認する 98 address( 問い合わせ先 ) 98 ヘッダーの要素を配置する (HTML) 98 ヘッダーを仕上げる (CSS) 99 position( ボックスの配置方法 ) 99 font-style( イタリック 斜体 ) 100 電話番号とフォームへのリンクを横並びにする (display:inline-block) 101 グローバルナビゲーションの作成 グローバルナビゲーションの全体像と要素の配置 103 Emmet を使ったタグの挿入 103 グローバルナビゲーションを仕上げる (CSS) 105 vertical-align( 縦方向の位置揃え ) 105 display( 要素をテーブルに変換する ) 105 サイドメニューとフッターの作成 サイドメニューの全体像と要素の配置 107 サイドメニューを仕上げる (CSS) 109 background:linear-gradient( 背景のグラデーション ) 109 CSS デザイナーパネルを使ったグラデーションの設定 110 ナビゲーション部分の装飾 111 問い合わせ枠の装飾 113 フッターを仕上げる 115 サイトを仕上げる 作業の流れと事前準備 116 各ページを仕上げる 119 WEB サイトのレイアウト

5 WEB サーバーへのアップロード 121 FTP アップロード サーバーとは 121 FTP とは 121 Dreamweaver を使った FTP アップロード方法 122 データの PUT と GET 123 サイトの同期 サーバーのファイルとローカルのファイルの同期

ホームページ制作 基礎編 (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

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 オリエンテーション 約 40 分 01_ 学習の進め方 02_ リファレンスの紹介 約 09 分 03_

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

■新聞記事

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

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

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

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

More information

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

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

More information

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

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 - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

第21章 表計算

第21章 表計算 第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます

More information

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ 1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

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

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi

More information

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt(

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt( 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 HTML+CSS (4) (2 章 ) 2013/5/15( 水 ) 演習名 使用するフォルダ 演習 1 Z: Webプログラミング1 20130515 演習

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

More information

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックワーク 閲覧チェック 動画タイトル 時間 ( 計 22 時 33 分 ) 名刺 約 56 分 デザインコンセプト説明 約 04 分 01 新規フ

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックワーク 閲覧チェック 動画タイトル 時間 ( 計 22 時 33 分 ) 名刺 約 56 分 デザインコンセプト説明 約 04 分 01 新規フ [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックワーク ( 計 22 時 33 分 ) 01-01. 名刺 約 56 分 デザインコンセプト説明 約 04 分 01 新規ファイル作成 (1) 約 08 分 01 新規ファイル作成 (2) 約 10 分 02 名刺のおもて面 ( ロゴとURL) の作成 約 13

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

Color Change

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

More information

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========> 1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html

More information

PowerPoint プレゼンテーション

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

More information

Microsoft PowerPoint - css-3days 互換モード

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

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

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

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

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

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

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

Microsoft PowerPoint - css-3days 互換モード

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

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

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

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

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

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

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

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

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

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

More information

Moshimo Challenge Report

Moshimo Challenge Report このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー

More information

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

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

More information

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

More information

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字 コンピュータ基礎実習 ( 上級 ) 第 12 週 コンピュータ基礎実習 ( 上級 ) 第 12 週スタイルシートの基礎今回の授業は スタイルシート (CSS) の使い方を解説します 1. CSS の基本 ( 教科書第 3 章 ) 1.1. CSS とは CSS は Cascading Style Sheets の略で ウェブページの見栄えを設定するための言語です CSS はウェブページにとって比較的新しい規格ですが

More information

HTML5&CSS3 レッスンブック

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

More information

それぞれの要素がどのようなデザインで表示されるか確認しよう ファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css

それぞれの要素がどのようなデザインで表示されるか確認しよう ファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title> デフォルトスタイルシートの確認 </title> <link href=css Web デザイン基礎授業ノート 8 < テーマ > HTML の役割 (3) 1 見出しと段落 (1) 要素 Web サイト全体の総合的な主題 ( テーマ タイトル ) 最重要人間にもコンピューターにも主題が伝わること ~ ページ内の情報に対する見出し階層構造にする ブロックレベルの性質前後で改行され 縦に積まれる (2)p

More information

brieart変換設定画面マニュアル

brieart変換設定画面マニュアル 変換設定画面マニュアル Ver. 1.1 更新日 :2012/11/19 株式会社アイ エヌ ジーシステム Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項 制限事項など 4 ボタン 35 パネル

More information

インターネット社会の発展

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

[ ]スマートセミナーバージョンアップリリースノート

[ ]スマートセミナーバージョンアップリリースノート スマートセミナー 2.0 バージョンアップリリースノート 株式会社シャノン 2010/7/27 1 Copyright SHANON Co., Ltd. All Rights Reserved. 1. はじめに...3 本リリースノートについて... 3 追加 修正される機能とユーザーへの影響について... 3 2. 今回追加された新機能のご紹介...4 HTML エディタの機能改善... 4 アンケートのラジオボタン

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

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

extChatText.pdf

extChatText.pdf 拡張機能ユニット チャット風テキストユニット マニュアル シフトテック株式会社 発行 :2018/12/19 チャット風テキストユニット マニュアル - 1 概要 チャットのような会話形式でテキストを表示するユニットです ール ー ア ン ンテ ー 特徴 アイコン用画像 + 名前 + 吹き出し付テキストで構成されたユニットです 表示位置を左右に出し分けることで チャットのような会話形式でテキストを表示できます

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

vi 目次 画像のサイズ設定 画像の効果 画面の取り込みとトリミング Office の共通基本操作 図形 図形の挿入と削除 図形の編集 図形の背景色の透過 Office

vi 目次 画像のサイズ設定 画像の効果 画面の取り込みとトリミング Office の共通基本操作 図形 図形の挿入と削除 図形の編集 図形の背景色の透過 Office 目 次 1.Windows と Office の基礎 1 1.1 コンピューターの基礎 1 1.1.1 コンピューターの構成 1 1.1.2 コンピューターの種類 2 1.1.3 ソフトウェア 2 1.2 Windows の基本操作 3 1.2.1 Windows の初期画面 3 1.2.2 Windows の起動と終了 4 1.2.3 アプリケーションの起動 5 1.2.4 アプリケーションの切り替え

More information

Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用

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

More information

extCountdown.pdf

extCountdown.pdf 拡張機能ユニット カウントダウンユニット マニュアルシフトテック株式会社 発行 :2018/11/21 改定 :2018/12/13 カウントダウンユニット マニュアル - 1 概要 指定された日時までカウントダウンを行うユニットです ール ー ア ン ンテ ー 特徴 指定した日時までカウントダウンし 終了後は自動で停止します 任意の URL を設定すると カウント終了後にページにアクセスがあった場合

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

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

More information

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

More information

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

More information

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

ホームページの作成

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

More information

Color Change

Color Change 1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します

More information

スライド 1

スライド 1 第 5 章ワープロ A(Word2010/2007 共通 ) ( 解答と解説 ) 5A-1. 文書の編集 1 スタイルの設定 ( ア )= く スタイルとは さまざまな書式を組み合わせて名前を付けて登録したものです あらかじめ用意してあるもの以外に新規に登録することもできます ここでは 後で使う目次の項目として 3 箇所に 見出し 1 を設定します 2 段落 ダイアログボックス インデントと行間隔

More information

Microsoft PowerPoint - 04WWWとHTML.pptx

Microsoft PowerPoint - 04WWWとHTML.pptx 船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet

More information

2. 以下の設問に答えよ 第 11 問 アンシャープマスクの説明として最も適切なものを 以下より 1 つ選択しなさい 1. ピクセル間の色の差を強調するフィルタ 2. 画像全体をぼかすフィルタ 3. 隣接するピクセルの色を同じにするフィルタ 4. 画像全体を暗くするフィルタ 第 12 問 ウェブペー

2. 以下の設問に答えよ 第 11 問 アンシャープマスクの説明として最も適切なものを 以下より 1 つ選択しなさい 1. ピクセル間の色の差を強調するフィルタ 2. 画像全体をぼかすフィルタ 3. 隣接するピクセルの色を同じにするフィルタ 4. 画像全体を暗くするフィルタ 第 12 問 ウェブペー 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 いかなる環境においても インターネットにおける通信速度に差異はない 第 2 問 動画ファイルであっても 拡張子が jpeg であれば静止画として表示できる 第 3 問 CSS の仕様上 ボックスのマージン領域は常に透明であり 背景を表示させることはできない 第 4 問 著作権法において ウェブサイト内にコピーライトの記載を行わなかった場合

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 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) (1) 書式設定左から フォント サイズ スタイル を設定するためのプルダウンメニューです

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

More information

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00 design de sign coration デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ CSS CSS CSS CSS デザイン 線や色でサイン 情報をイイトコロに配置 CSS CSS CSS { : ; { : ; { : ; { : ; CSS

More information

競技課題|ホームページ

競技課題|ホームページ 平成 28 年度埼玉県障害者技能競技大会ホームページ競技課題 A 1 競技の概要 (1) 競技課題競技課題 Aは課題の傾向を示した公開課題であり 競技課題 Bは競技当日用である (2) 課題の概要 ネットワークセキュリティ のホームページとして スタイルシートと次のページを作成する ネットワークセキュリティ コンピュータウィルス 無線 LAN のセキュリティ ファイヤーウォール (3) 競技時間競技時間は

More information

【インターネットビルダー2】投稿マニュアル

【インターネットビルダー2】投稿マニュアル インターネットビルダー 2 投稿マニュアル 第 1 版 株式会社サイネックス 1 / 34 Copyright 2016 SCINEX CO.,LTD. All Rights Reserved. 目次 表紙... 1 目次... 2 Ⅰ. 管理画面へのログインについて... 3 1-1. 管理画面にログインする... 3 Ⅱ. 最新ニュース について... 4 2-1. 最新ニュース を新規追加するには...

More information

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

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

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

超簡単にWebページを作成

超簡単にWebページを作成 Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Page 1/ 13 講義一覧講義回講義タイトル講義概要 第 1 回 3 級実技試験について ガイダンス 第 2 回 HTMLによる文書構造化 HTML 言語の復習 第 3 回 CSSスタイルシートのプロパティ 値 CSSスタイルシートの復習 第 4 回 実技実習作業 1 問題 1 ディレクトリとファイルの配置位置に関する問題 第 5 回 実技実習作業 2 問題 2 HTMLファイルの修正 ( リンク設定

More information

ISコースプロジェクト実習 前期(第1回 ガイダンス)

ISコースプロジェクト実習 前期(第1回 ガイダンス) プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/) 1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり,

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックリファレンス 閲覧チェック 動画タイトル 時間 ( 計 20 時 10 分 ) Step1 Illustratorの基本操作 Illustratorの起動と基

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックリファレンス 閲覧チェック 動画タイトル 時間 ( 計 20 時 10 分 ) Step1 Illustratorの基本操作 Illustratorの起動と基 [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! Step1 Illustratorの基本操作 Illustratorの起動と基本画面についてツールパネルやパネルの使い方作業画面を拡大 縮小する / 表示位置を変更する表示方法を変更するオブジェクトを選択 移動するオブジェクトを削除する / 作業の取り消しとやり直しドキュメントの保存と閉じ方

More information

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 11 回 CSS によるレイアウトデザイン (1) D.Mitsuhashi 1 擬似クラスと疑似要素 D.Mitsuhashi 2 擬似クラス 要素名のセレクタだけでは指定できない特定の状況下でのデザインを指定するには擬似クラスを用いる ポインタが重なった時 クリックした時 N 番目の小要素 a:hover li:last-child :root

More information

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

Microsoft PowerPoint - makeweb2017.ppt [互換モード] Web ページ制作の流れ ページ全体の構成 プランニング 線形構造 公開する情報と目的の設定 資料 情報の収集 ページのデザイン ページ全体の構成 各ページのデザイン スタイル 階層構造 素材の制作 画像の製作 グラフ構造 オーサリング HTML ファイル スタイルシートの記述 動作確認 評価 修正 各ページのデザイン スタイル 視覚的統一性 共通の画像 ( 写真 イラスト ) を利用する アイコンを共通のものにする

More information

スライド 1

スライド 1 第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1 CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて 教科書で言う スタイルシート とは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2 まず Region_page.h tml を開く

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63> 1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

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

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

フォト アルバム

フォト アルバム 操作説明書 ESCORT 目次 ESCORT 目次 ESCORT 操作の流れログイン / ログアウト方法ホーム ( メニュー ) ユーザー管理 ユーザー登録 / ユーザー修正方法 ユーザー削除方法ディレクトリ管理 ディレクトリ登録 / ディレクトリ修正方法 ディレクトリ削除方法ディレクトリ切替テンプレート管理 テンプレート登録 / テンプレート再設定方法 テンプレート削除方法 特殊タグ設定方法定数タグ設定

More information

<48746D6C8AEE91628D758DC02E786C73>

<48746D6C8AEE91628D758DC02E786C73> HTML 基礎講座 目次 1.HTML 紹介 1-1 HTMLとは 1-2 HTMLの基本的な構成 1-3 HTMLのソースの表示方法 2.HTMLタグ紹介 2-1 リンクする 2-2 改行 水平罫線 2-3 段落 2-4 見出し ~, ~ 2-5 画像 2-6 テーブル 2-7 フォーム 2009.10.16

More information