自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

Size: px
Start display at page:

Download "自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )"

Transcription

1 スマートフォンオプションのご紹介とスマートフォン対応テーマ解説 カスタマイズ 2011 年 11 月 9 日シックス アパート株式会社 内毅志

2 自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

3 本日のサマリ スマートフォンオプションとは テーマのおさらい スマートフォンオプション用テーマの内容ご紹介

4 スマートフォンオプションとは

5 スマートフォンオプションとは MT の管理画 を 最適化 スマホ用テーマを バンドル +

6 管理画 用 プラグイン

7 プラグイン ビジネスに必要な運用機能を 手のひらに

8 特徴 カスタムフィールド の操作

9 特徴 パソコン版に近い 操作感

10 特徴 リアルプレビュー

11 テーマ

12 テーマ スマートフォン PC 両対応

13 PC スマートフォン両用 デザインカスタマイズのベースとして提供 そのままでも ブログとして利用可能

14 テーマの構成 理解しやすく 適度なシンプルさ

15 DynamicMTML を採用 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="htmlヘッダー "$> <mtml tag="/mt:ifuseragent">

16 DynamicMTML とは Movable Typeのタグ (MTタグ) を リアルタイムに解釈して出 する仕組みページをダイナミック ( 動的 ) 生成

17 ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

18 詳細は次のセッションで

19 リリース日 他 2011 年 11 月 16 日 ( 水 ) 個人無償版もあります

20 無料配布 テーマは無料配布も います (OSS)

21 テーマの詳細 テーマの詳細

22 その前に その前に

23 改めて MT のテーマ ご存知ですか? What is Theme?

24 テーマのおさらい

25 テーマとは 入れ替え可能なテンプレートセット

26 配布もしています

27 商用テーマもあります

28 構成 テーマに利用する CSS JavaScript 画像など テーマで利用する各種テンプレートのソースコード テーマの構成情報 ( 設定ファイル ) テーマのサムネイル ( 管理画 で表 )

29 インストール MT インストールフォルダ /themes/ に テーマ名フォルダをアップロード

30 テーマの切替 テーマインストール後 管理画 から 適用 ボタンを押す

31 テンプレートが入れ替わる

32 出 もできる

33 詳しくはウェブで

34 リファレンスブックもあります

35 テーマ募集中

36 スマートフォンオプション用テーマの内容ご紹介

37 スマホテーマに戻る

38 テーマ名 Smart Blog

39 スマホ &PC 両対応 CSS JS をダイナミックに切替

40 ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

41 ヘッダー部分のソース <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

42 パソコン用 <link rel="stylesheet" href=" <script src=" <script src=

43 <link rel="apple-touch-icon-precomposed" href=" <link rel="stylesheet" href=" <link rel="stylesheet" href=" <link rel="stylesheet" href=" <script src=" <script src=" <script src=" <script src="

44 CSS の構成

45 CSS の構造 共通 base.css( 構造 ) screen.css( 配色など ) スマートフォン用 smartphone.css( スマホ用 )

46 全体の構造管理 base.css /* - Layout */.content,.page-header,.page-footer { padding: 1px 10px; }.main-content { float: left; width: 640px; overflow: hidden; }.related-content { float: right; width: 280px; margin-left: 10px; }.inner { width: 960px; margin: 0 auto; }.content-inner { margin: 1.62em auto; }

47 配色 トーン & マナーの管理 screen.css.ui-bar-a,.page-header,.page-footer,.header-menu.detail { border: 0; background: #007bbb; color: #fff; text-shadow: none; font-weight: normal; }

48 スマートフォン用のデザイン smartphone.css /* - Layout */.inner { width: auto; max-width: 100%; margin: 0; }.content,.page-header,.page-footer { padding: 0; }.content-inner { padding: 0 9px; }.main-content { float: none; width: auto; overflow: visible; }

49 Smart Blog 独自の項目

50 Smart Blog 独自項目 スマートフォン用 CSS viewport jquery.mobile touch icon

51 viewport <meta name="viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

52 jquery Mobile jquery Mobile を活用 /* for jquery Mobile */ $(document).bind("mobileinit", function(){ $.mobile.ajaxenabled = false; $.mobile.hashlisteningenabled = false; }); /* Tabs */ jquery(function() { $('.menu.widget').hide(); $('.menu.widget:first').show(); $('.tabs >.tab:first').addclass('active');

53 touch icon <mt:assets type="image" limit="1"> <link rel="apple-touch-icon-precomposed" href="<$mt:assetthumbnailurl width="114" square="1"$>"> <mt:else> <link rel="apple-touch-icon-precomposed" href="<$mtstaticwebpath$>support/theme_static/ smart_blog/images/touch-icon-default.png"> </mt:assets>

54 タッチアイコンの変更 デフォルト

55

56 から始まるタグを利用 タグ一覧 など htmlとしては出 されない タグの有無により テンプレート分岐ができる

57 解説 MovableType.jp で記事公開中

58 その他

59 ヘッダーの切替 プライベートタグで挿入可能 <mt:assets limit="1"> <img src="<$mt:assetthumbnailurl width="1024"$>"> <mt:else> <img src="<$mtstaticwebpath$>support/theme_static /smart_blog/images/banner.jpg"> </mt:assets>

60 ロゴの切替 <h1 class= title page-title > <a href= <$mt:blogurl$> > <mt:assets limit= 1 > <img alt= <$mt:blogname encode_html= 1 $> src= <$mt:assetthumbnailurl$> class="page-logo"> <mt:else> <$mt:blogname$> </mt:assets> </a> </h1>

61 デモ

62 活用例

63 ご活用のほど お願い申し上げます

PowerPoint プレゼンテーション

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

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

Web

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

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

Movable Type CMS Movable Type Movable Type 5.2 CMS

Movable Type CMS Movable Type Movable Type 5.2 CMS ( Movable Type CMS 11 2001 2012 2001 Movable Type 1.0 2012 Movable Type 5.2 CMS Movable Type 5 Movable Type CMS 5 New! ü ü CMS ü 9,975 ü ü ü CMS 1 5 63,000 3 PDF CMS Movable Type html css Flash JavaScript

More information

Moshimo Challenge Report

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

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

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

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

経営論集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

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

CodeGear Developer Camp

CodeGear Developer Camp T4 PHP チュートリアルセッション はじめての Delphi for PHP CodeGear エヴァンジェリスト高橋智宏 1 アジェンダ ハンズオントレーニングに必要なもの Delphi for PHP V2.0 の環境設定 VCL for PHP の基本的な動作を確認 フォトギャラリの製作 マスターページ 画像アップロード カスタムコンポーネントの導入 など 2 ハンズオントレーニングに必要なもの

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

1. MT5 BETA 2. 5.0 : CMS 3. MT5

1. MT5 BETA 2. 5.0 : CMS 3. MT5 1. MT5 BETA 2. 5.0 : CMS 3. MT5 BETA QA BETA movabletype.jp Website CMS Theme Website CMS Theme Blog A Blog B Blog D Blog C Website Blog A Blog B Pro Website index.html /contact/ index.html /about/ index.html

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

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

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

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

(Microsoft PowerPoint - Movable Type\202\314\214g\221\321\221\316\211\ ppt)

(Microsoft PowerPoint - Movable Type\202\314\214g\221\321\221\316\211\ ppt) Movable Type の携帯対応 ~ 携帯対応プラグイン ケータイキット for Movable Type のご紹介 ~ アイデアマンズ株式会社 宮永邦彦 アイデアマンズ株式会社 ごあいさつ 2005 年 11 月設立 ProNet MTE パートナー 商用としては国内で唯一の Movable Type 携帯対応プラグイン ケータイキット for Movable Type を開発 販売 Web

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

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

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS

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

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS:

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

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

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

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

スライド 1

スライド 1 ( おやまだあきひろ ) 小山田晃浩 ( 株 ) ピクセルグリッド フロントエンドエンジニア (HTML, CSS, JavaScript, SVG) twitter@yomotsu HTML5 と CSS3 と Dreameraer ネタ 連載してます http://goo.gl/8cpxb このセッションの流れ 1. 事例について 2. メディアクエリーを利用した振り分け 3. 振り分け後のスタイル適用

More information

3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to

3 top#index 1 web router.ex web/router.ex 12 scope /, NanoPlanner do 13 pipe_through browser get /, TopController, index 16 end URL / to 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 ( 画像変更 ) 5 トップFlashの内容変更 ( 設定変更 ) 6 おすすめ情報 ( カタログギフト等 ) 7 サイドバー バナー部分 8

Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 ( 画像変更 ) 5 トップFlashの内容変更 ( 設定変更 ) 6 おすすめ情報 ( カタログギフト等 ) 7 サイドバー バナー部分 8 アークスグループ事業会社各社 Web サイト編集マニュアル 株式会社ユニバース様 http://www.arcs-g.co.jp/group/universe/ Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 ( 画像変更 ) 5 トップFlashの内容変更 ( 設定変更 ) 6 おすすめ情報

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

大メニューをマウスカーソルで 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

演習室の 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

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

はじめに このマニュアルは 2 ch まとめブログに色々なパーツを盛り込み 魅力的なデザインにするための マニュアルです 2 ちゃんまとめブログに相互 RSS を入れたい 2ch キャラクターのアニメーション画像を入れたい という方のために このマニュアルを用意させていただきました! 魅力的なデザイ

はじめに このマニュアルは 2 ch まとめブログに色々なパーツを盛り込み 魅力的なデザインにするための マニュアルです 2 ちゃんまとめブログに相互 RSS を入れたい 2ch キャラクターのアニメーション画像を入れたい という方のために このマニュアルを用意させていただきました! 魅力的なデザイ 2ch まとめブログデザインガイド デザインカスタマイズマニュアル 2 ちゃんまとめブログに 色々なパーツを組み込み 魅力的なデザインに! 1 はじめに このマニュアルは 2 ch まとめブログに色々なパーツを盛り込み 魅力的なデザインにするための マニュアルです 2 ちゃんまとめブログに相互 RSS を入れたい 2ch キャラクターのアニメーション画像を入れたい という方のために このマニュアルを用意させていただきました!

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

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

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

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

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

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

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

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/ 1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので

More information

2,700,000 26,800,000 5 - - jquery Mobile - - - - jquery Mobile - - Objective-C / 30% Android - - jquery Mobile - - - - jquery Mobile - - iphone ipod UI jquery Mobile Gallery http://www.jqmgallery.com/

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ST&E API 導入手順書 ver1.0.1 Save Time & Effort! -1- - 目次 - P3 前提 P4 Step1 P5 Step2 P6 Step3 P7. P8 導入の前提条件導入対象のHTMLにリンクを設定導入対象のHTMLにhidden 項目を設定 Step1で命名したjsファイルとその中身を作成アップロードお問い合わせ -2- 前提条件 1. ST&E APIのお申込みがしていること

More information

2

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 26 27 28 29 30 31 32 /* CSS */ font-size: 14px; /* */ @media screen and (max-width:760) { font-size: 12px; } /* HD */ @media screen and

More information

2

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 26 27 28 29 30 31 32 33 /* CSS */ font-size: 14px; /* */ @media screen and (max-width:760) { font-size: 12px; } /* HD */ @media screen

More information

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

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

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

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

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

2016 IP 1 1 1 1.1............................................. 1 1.2.............................................. 1 1.3............................................. 1 1.4.............................................

More information

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

More information

JavaScript の使い方

JavaScript の使い方 JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static

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

目次 3 14P Wordpressテンプレートの設定方法 15P 17P livedoorテンプレートの設定方法 18P 21P FC2テンプレートの設定方法

目次 3 14P Wordpressテンプレートの設定方法 15P 17P livedoorテンプレートの設定方法 18P 21P FC2テンプレートの設定方法 特典テンプレートの設定方法 目次 3 14P Wordpressテンプレートの設定方法 15P 17P livedoorテンプレートの設定方法 18P 21P FC2テンプレートの設定方法 Wordpressテンプレートの設定方法 Wordpressテンプレートの設定方法 この作業を行う前に wordpressのインストールを済ませておいてください 1.テーマのインストール wordpressのインストール後

More information

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

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

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

目次一括管理 _ 設定編 サムネイル管理... 3 サムネイル管理 _ 設定編... サムネイル表示事前設定 店舗ページ サムネイル用置換タグ ライトボックス設定 店舗ページ ライトボックス用置換タグ

目次一括管理 _ 設定編 サムネイル管理... 3 サムネイル管理 _ 設定編... サムネイル表示事前設定 店舗ページ サムネイル用置換タグ ライトボックス設定 店舗ページ ライトボックス用置換タグ サムネイル管理編 Ver 1.03 2018/01/24 お問合せに関して不明点や疑問点があれば 下記サポートセンターにご連絡いただくか 当社システムの管理ページ ( トップページ ) の左端メニューにある お問合せ の項目をクリックして表示される お問合せフォームからご連絡ください 電話サポート窓口電話番号 :03-5577-4355 電話サポート受付時間 10:00~12:00 13:00~18:00(

More information

6 章 付録 マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N

6 章 付録 マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N 2017/02/23 開発環境バージョンアップ対応手順書 はじめに本書では ソフトウェアのインストール時にバージョンを指定することで 書籍の記述との違いや不具合を最小限に抑えてきました 今月 Angular CLI の指定バージョン 1.0.0-beta.17 の配布が終了したため 新しいバージョンへの対応を行います この手順書は 本書が現時点で最新の開発環境へ対応する方法をまとめたものです 不具合発生への対応今回指定する最新バージョンも

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

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

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

More information

6 2 1

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

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

要素にフォーカスが当たったときは 例えば以下のように記述する 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

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

追加する方法は以下の 2 つです 書き出し後にヘッダーを追加する (1 冊だけヘッダーを適用する場合に向く ) 書き出し形式を追加する ( 何冊も同じヘッダーを適用する場合に向く ) 注意 HTML の知識が必要です ロゴスウェアでは HTML の書き方についてのサポートはお受けしておりませんのでご

追加する方法は以下の 2 つです 書き出し後にヘッダーを追加する (1 冊だけヘッダーを適用する場合に向く ) 書き出し形式を追加する ( 何冊も同じヘッダーを適用する場合に向く ) 注意 HTML の知識が必要です ロゴスウェアでは HTML の書き方についてのサポートはお受けしておりませんのでご [ Tips ] FLIPPER U HTML でヘッダーを追加する方法 文書番号第 6 版対象製品対象ユーザー : 12 製 -FL030290-06 : 2016 年 4 月 25 日 : FLIPPER U 4.3.0 以降 : FLIPPER U をご利用中の方 概要 ロゴを配置した HTML を iframe でデジタルブックと組み合わせることで オリジナルロゴ入りのデザインに見せることができます

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 デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

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

PostgreSQL iphone/

PostgreSQL iphone/ iphone/ PostgreSQL irubysystems PostgreSQL iphone/ FUKUI Osamu (ir3) Ruby http://d.hatena.ne.jp/ir3 http://twitter.com/ir3 CSK Fsys SOHO 2005 itest 2006 CTO 2007 2009 irubysystems Ruby@ DB 1986~9 M IBM

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

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章 2017/04/07 Angular4.0 バージョンアップ対応手順書 Angular2 によるモダン Web 開発 TypeScript を使った基本プログラミング ( 以下 本書 と記載します ) の対象である Angular2 は 2017 年 3 月 23 日にメジャーバージョンアップ を行い Angular4.0 になりました Angular4.0 への対応をまとめたのがこの手順書です Angular

More information

高度デザインカスタマイズの制作フロー CSS と画像を利用した高度デザインカスタマイズは下記の流れで制作を進めます 1. 高度デザインカスタマイズ対応のコンテンツデータを一旦 STORM V で書き出す 2. 書き出したコンテンツデータ内のカスタマイズ CSS ファイルを編集してデザインを確定する

高度デザインカスタマイズの制作フロー CSS と画像を利用した高度デザインカスタマイズは下記の流れで制作を進めます 1. 高度デザインカスタマイズ対応のコンテンツデータを一旦 STORM V で書き出す 2. 書き出したコンテンツデータ内のカスタマイズ CSS ファイルを編集してデザインを確定する [ Tips ] STORM V 高度デザインカスタマイズの利用方法 文書番号 第 1 版 : 17 製 -ST030652-01 : 2017 年 9 月 15 日 対象製品 : STORM V 2.1.0 以降 ( グレード : エキスパート ) 対象ユーザー : STORM V エキスパートをご利用中の方 CSS 画像作成の知識がある方 概要 CSS と画像を利用して プレイヤースキンデザインをカスタマイズできます

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

治療院ワードプレステンプレートについて 著作権情報 : このテンプレートはビズベクトルさんの無償テンプレートを寺田さん 浜田さんが治療院様用にカスタマイズしたものです 導入サポートはついておりませんが ビズベクトルさんのHPにワードプレスのインストール方法 有償サポートが掲載されておりますのでご参照

治療院ワードプレステンプレートについて 著作権情報 : このテンプレートはビズベクトルさんの無償テンプレートを寺田さん 浜田さんが治療院様用にカスタマイズしたものです 導入サポートはついておりませんが ビズベクトルさんのHPにワードプレスのインストール方法 有償サポートが掲載されておりますのでご参照 ご注意と免責事項このテンプレートは 既存のホームページにはインポートしないでください すでにあるコンテンツがすべて上書きされ 元に戻せなくなります インポートはまっさらな状態のワードプレスにお願いします このテンプレートの使用における一切のトラブルに責任を負いかねますのでご了承ください 1 治療院ワードプレステンプレートについて 著作権情報 : このテンプレートはビズベクトルさんの無償テンプレートを寺田さん

More information

次 アップデート... 1 サイトデータのコンバート... 3 スマートフォン設定... 5 モジュールの設定 アップロード... 6 スマートフォンでの確認 アクセス解析 補 資料 1 モジュールの表 について 補 資料 2 モジュールの詳細設定について...

次 アップデート... 1 サイトデータのコンバート... 3 スマートフォン設定... 5 モジュールの設定 アップロード... 6 スマートフォンでの確認 アクセス解析 補 資料 1 モジュールの表 について 補 資料 2 モジュールの詳細設定について... TieredWorks スマートフォンサイト書き出し機能ユーザーマニュアル 2011 年 9 20 作成 次 アップデート... 1 サイトデータのコンバート... 3 スマートフォン設定... 5 モジュールの設定 アップロード... 6 スマートフォンでの確認... 10 アクセス解析... 11 補 資料 1 モジュールの表 について... 13 補 資料 2 モジュールの詳細設定について...

More information

extCountdown.pdf

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

More information

Microsoft PowerPoint - kaneko-businessblog ppt

Microsoft PowerPoint - kaneko-businessblog ppt シックス アパート製品紹介ブログを超えた ウェブサイト管理ツールとして シックス アパート株式会社 1 ブログの本格普及から 5 年 ブログ = 日記 を超えて 社会の色々な場面に普及しています イベント 発表会 イントラネット EC メディア連携 ブログ 企業サイト構築 拡大するブログ ワールドを ご紹介します ウェブサイトを構成する三大要素 シックスアパート製品では このすべてを効率的に管理が可能

More information

CSSNite-LP54-kubo-ito.key

CSSNite-LP54-kubo-ito.key div { div { width: ; div { width: 100%; div { width: 100%; div { width: 100%!important; a { color: #000!important; .box { padding: 20px; border: 4px solid #666; h1 { color:

More information

ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問

ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問 HTTP 通信において GET は HTTP メッセージヘッダの第 2 行目に記される 第 4 問 HTML 5.2 では hgroup 要素を使用できる

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ

More information

スライド 1

スライド 1 XPages.JP はこう作られた! - テクテク Lotus 技術者夜会 -(2016 年 6 月 17 日 ) 株式会社エフ御代政彦ケートリック株式会社田付和慶 AGENDA テーマの選定 サイトマップ機能 サンプルAPP ギャラリー機能 管理機能 おまけ テーマの選定 < 選定基準 > 1. XPAGES だなってバレないクールなデザイン 2. フリーのデザインテンプレートから探す 3. Bootstrapを標準で搭載

More information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される

More information

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

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=spaceorbitanime.css> 1346-5 応用 2 Space Trip 宇宙船が地球を周回するアニメーションと宇宙旅行へ出発するアニメーションを作ってみ ましょう 宇宙船が地球を周回するアニメーション サンプル CSS1 スペースシャトルは円軌道で USS エンタープライズ号は楕円軌道で地球を周回します SpaceOrbitAnime の説明 HTML の記述 (SpaceOrbitAnime.html) id 属性 stage

More information

jquery Hands-On Guide WD jquery Lab. 22 Index 002 006 010 014 018 022 026 030 034 038 042 reveal.js 046 Web jquery 050 Web Designing 2012 12 2014 1 jquery Lab. URL DOWNLOAD ZIP ID IDwdlibjq http://book.mynavi.jp/wd/wdlib/wdlib04/

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

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

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

More information

スライド 1

スライド 1 Sencha Touch 入門 2011/11 伊藤雄大 ( 株 ) コア北海道カンパニー ビジネスソリューション部 IT ビジネスチーム アジェンダ 1. 会社紹介 自己紹介 2. なぜWebUI? 3. Sencha Touch ってどんな感じ? 4. Sencha Touch デモ 5. どうやって実装するの?- 基礎編 6. どうやって実装するの?- 応用編 7. 今回の開発で困ったこと 会社紹介

More information

データ解析

データ解析 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30

More information

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン ジーンコード 設 計 要 件 定 義 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザインコンポーネントで

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

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ 目次 1. はじめに... 2 2. カスタマイズ方法... 4 2.1. 静的テーブルを使ったカスタマイズ方法... 4 2.2. 動的テーブルを使ったカスタマイズ方法... 6 2.3. 動的テーブルを使ったカスタマイズ方法 ( あいまい検索の実装 )... 8 2.4. ヘッダーを固定したスクロール テーブルのカスタマイズ方法... 12 2.5. テーブル内のデータを axes カスタマイズ画面で使用する方法...

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

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

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

More information

Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 5 おすすめ情報 ( カタログギフト等 ) 6 サイドバー バナー部分 7 サイドバー バナー部分事業会社レイアウト用 8 サイドバー バナー部

Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 5 おすすめ情報 ( カタログギフト等 ) 6 サイドバー バナー部分 7 サイドバー バナー部分事業会社レイアウト用 8 サイドバー バナー部 アークスグループ事業会社各社 Web サイト編集マニュアル 株式会社ライフポート様 http://www.arcs-g.co.jp/group/lifeport/ Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 5 おすすめ情報 ( カタログギフト等 ) 6 サイドバー バナー部分 7 サイドバー

More information

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

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

More information

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ [SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18

More information