新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。




業務や学校など様々な場所で活躍するプレゼンテーションソフト「PowerPoint」
これをJQUeryを使用しており、JavaScriptのみでパワポを実装してしまいます。
シンプルなインタフェースで実装されているため誰にでも使いやすい設計となっており,実装もとても簡単です。



simpleSlide.jpg




簡単なSimpleSlide.jsの実装方法を紹介します。

ページ分割

sectionクラスで分けることでパワポを分割できます。

ページのタイトル

sectionクラスのh?タグがページのタイトルとなります。

本文の作成

sectionクラスの中に自由に本文を記述します。

外部ファイルの読み込み

必要なファイルを読み込むことでSimpleSlide.jsが使用可能となります。
以下サイトからダウンロードできます。

続きを読む
スポンサーサイト

テーマ:Webサービス - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


以下のスクリプトを現在表示しているブラウザのアドレスバーに貼り付けてみてください。



ウゴウゴルーガみたいにリンク文字が躍り出します。

JavaScriptってとても面白いことができるんだなとしみじみ思いました。

ウゴウゴルーガとは

2人の子役が扮した『ウゴウゴ』と『ルーガ』をメインに据え、当時としては珍しいCGで作成されたバーチャルセットやキャラクター、たたみかけるような数秒間のコーナー
子供番組とは思えない破天荒でシュールなギャグが連発し、時には番組スタッフに関する楽屋オチや、発言に「ピー」がかかる過激な内容もあった。
番組の合言葉「おきらくごくらく」は流行語にもなった。
DVDボックスでの当時のチーフディレクターの書いたライナーノートによれば、純粋な子供番組として制作されたものの、その内容から視聴者には出勤前や通学前の若者も多かったと言われている。

Wikipediaより

テーマ:web(ホームページ) - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


JavaScriptのimport

CSSが複数ファイル存在する場合

HTMLの中に書くと



と量が多くわかりずらくなります

しかしCSSには以下の機能が存在します

@import

cssファイルの中に以下の形式でインポートします。

@import "css/base.css";

これによりHTMLファイルに書くCSSファイルは1つだけで良くなります。



ここからが本題です。

Javascriptで@importを実装するにはどうすればいいでしょうか?

Javascriptを@importしてみた


HTMLファイルに以下を記述します。



以下がimport.jsの中身です。

このようにJavascriptで記述することで、実装することができます。

ライブラリを使用した複雑なWebページになると、importするJSファイルも多くなってしまいます。

そのときはこれを使用してみるのも良いかと思います。

テーマ:プログラミング - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。




ブログを書いてて、コードを記述すると < とか > とかがタグとして認識されてしまって消えてしまいます。

そこで、< や > を文字としてブログに出力することができます。

それは
< を &lt;
> を &gt;
と記述することです。

ただことを毎回、テキストエディタで置換していたらめんどくさかったので

JavaScriptで変換ツールを作成してみました。

http://smileboys.fc2web.com/WebUtility/javascript/jsConvert.html

上のフォームに変換したいコードを記述

変換ボタンを押下すると

下のフォームに置換後のコードがでてきます。

これをブログにはっちゃいましょう!

テーマ:JavaScript - ジャンル:コンピュータ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。