ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには：enchant.jsでHTML5＋JavaScriptゲーム開発入門（4）（1/3 ページ） 大人気のHTML5＋JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく連載。今回は、手軽にアニメーションを作れるtl.enchant.jsの使い方や、スマホ向けアニメーションのチューニングポイント6つを解説する。 これが、JavaScriptのゲーム…… だと……？ 前回の「enchant.jsで重要なスプライトとシーンを使うには」では、ゲームの流れとなる部分を駆け足で解説いたしました。 今回は、よりゲームをリッチに見せる、複雑なアニメーションの作り方を理解していきましょう。この機能を使うと、こんなもの（サンプル）を簡単に作ることができます。ぜひ「JavaSc
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」:phpspot開発日誌
Vertical Icon Menu | Codrops 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」。 次のような左側にアイコンメニューがあって、position:fixedで固定されているだけなのですが、ダウンロードして使えるサンプルがカッコ良かったのでご紹介。 メニューにカーソルを合わせた時に、きちんとアイコン色と背景色がアニメーションしつつ変化するあたりがいい感じです。 Windows8っぽいデザインというんでしょうか。すっきりして見やすいですね 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」 HTML5＆CSS3な
オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた. | TM Life
昨日, コリスさんの記事で紹介されていた reveal.js に一目惚れしてしまったので使い方をまとめてみました. reveal.js の使い方を reveal.js を使って解説しています. 簡単にオシャレでシンプルなプレゼンを作れるのでぜひ遊んでみてください. 追記: 『reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた』というエントリーを公開しました. とても便利なので, よかったらこちらも参考にしてくださいな♪ Sample reveal.js を解説しているサンプルはこちらです. また, 最小サンプルも作ってみました.(こちら) Download 今回制作したサンプルはこちらでダウンロードできます. index.html が 解説しているサンプル, sample.html が最小サンプルになります.
より効果的で魅力的なヘッダをデザインする方法
ヘッダはウェブサイトやブログに訪れるユーザーが最初に目にするであろう大切な存在です。 ヘッダの可能性をフルに活用する非常に効果的なデザインにする際、アイデアとなる3つのスタイルを紹介します。 How To Design A More Effective Website Header 下記は各ポイントを意訳したものです。 1. シンプルなヘッダ 2. アートを加えたヘッダ 3. インタラクティブなヘッダ おわりに 1. シンプルなヘッダ ヘッダをシンプルにしておくことで、ユーザーにあまりにも多い情報で圧倒させないようにすることができます。シンプルなヘッダで大切なことは、ぱっと見でサイトの雰囲気を伝えることです。 明確 Sailthru 明確なヘッダはユーザーの印象を方向付けるために非常に有用です。Sailthruではグラフィックでビジネスのアイデアをユーザーに伝えています。そのデザインは非常
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
CSS3で画像を使った風の3Dボタンを実装したサンプル:phpspot開発日誌
Crafting Minimal Circular 3D Buttons with CSS | CSS-Tricks CSS3で画像を使った風の3Dボタンを実装したサンプル。 次のような一見画像を使っているように見えて使っていない（アイコンもフォント）ボタンを実装したデモとチュートリアル記事。 マウスオーバーするとハイライトされたりと、CSS3による利点を生かしてます。 こういう物もフルに生かしたTwitterBootstrapみたいなUIフレームワークが将来的に出てくる予感。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 CSS3で出来たクールなLightBox実装チュートリアル CSS3でクールな角丸テーブルを作る例
jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門 | TM Life
またまた昔書いたエントリーのサンプルを jsdo.it に移植しました. 元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています. Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます. jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!! ※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!! Demo Download サンプルについて オリジナル時同様, 指摘されそうな点を自分で予め指摘しておきます. CSS3 を無理くり使いまくってる(面白いのでw) 画像を使っていない(のは個人的なこだわりです.
使いこなすためのFlashデザイン
web creators 2004年7月号 巻頭特集 今日から使える多彩な応用テクニック WEBデザイン『動き』のパターン サンプルデータダウンロード 本特集で解説している記事のサンプルデータの閲覧とダウンロードができます。 記事をよりよく理解するための参考用としてご覧ください。 第1章 押さえておかなければならない基本表現 第2章 知っておきたいWebデザイン必要表現 第3章 覚えておきたいデザインの幅を広げる表現 本ページのデータはすべて記事をよりよく理解するための参考用として公開しているものです。HTMLファイルやCSSファイル、画像ファイルをはじめ、FLAファイルやSWFファイル、それらのソースコードを含む、公開しているすべてのデータの著作権は、それぞれのサンプルデータを制作した各制作者にすべてあります。したがって、著作権者の許可なく参考以外の目的や、譲渡、販売、営利目的で使用する
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った - かちびと.net
なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね？こういう動きは個人的に歓迎ですけど、問題は派生ラ
Index :: Webデザイナーズレシピ
Sample Design Webデザインのサンプルです。 DropDown Navi jQuery を使ったドロップダウンメニューです。 Contents Slider jQuery Cycle Plugin を使ったスライダーです。 Form Validation フォームに入力された値を、送信前にその場でチェックします。jQueryプラグイン使用。 Form UI Elements チェックボックスやラジオボタン、セレクトボックスを画像で装飾！セレクトボックスにはjQueryプラグインを使用しています。 jQuery UI Accordion & Tabs jQuery UI を使ったアコーディオンとタブです。 Box Equal Heights コンテンツの量によって、バラバラだったボックスの高さを jQuery で揃えています。 Masonry jQueryプラグイン、Mason
webサイトの企画書や提案書のサンプルを見たいのですが、提案書や企画書がまとめられているサイト等知っている方がいましたら教えていただけないでしょうか？
webサイトの企画書や提案書のサンプルを見たいのですが、提案書や企画書がまとめられているサイト等知っている方がいましたら教えていただけないでしょうか？
電子書籍を自分で出版してみよう！
2016年6月8日 Web関連記事, ダウンロード, 便利ツール スティーブ・ジョブズ氏の公式伝記が販売されて、各書店を賑わせてますね。この本は紙の書籍だけでなく電子書籍でも販売されています。iTunesストアでは本日もちろん一位に輝いています。そんな電子書籍を読みながら「電子書籍ってどうやって作れるのかなー？」なんて疑問に思ったので調べてみました。出版業界の人でなくても、「自分の本を出版する」ってなんだかワクワクしますよね。さっそく見てみましょう！ ↑私が10年以上利用している会計ソフト！ 電子書籍ってどんなもの？ 電子書籍とは、PC・MacやAppleのiPhoneやiPad、AmazonのKindleなどのディスプレイで読める書籍のこと。書籍はインターネット上で購入、ダウンロードします。ファイルを用意するだけでコンテンツを提供できるので、紙の書籍よりも低コストで手軽に作成できます。デ
ITクオリティ クールでクリエイティブな名刺集50
一風変わった名刺、印象に残る名刺、遊び心のある名刺。様々な名刺のなかでも、非常にクリエイティブな名刺ばかりを集めたまとめエントリー。 特にフリーランスの方の名刺はすさまじく感動するものもありますな・・・。 オリジナリティがあってクリエイティブな名刺集 50+ Cool & Creative Business Cards Design ジーンズにおさまったような名刺。 焼けた後が印象的な名刺。マークをいかして形まで変えるとか素敵です。 ロゴマークを効果的にいかした名刺。 ミシン目の質感をそのままに高級感あふれる名刺。 中からカードを引っ張れば普通の名刺ですが、そのまえの時点で検索窓に収めているところがなんともクール！ オリジナリティがあってクリエイティブな名刺集 50+ Cool & Creative Business Cards Design 2011/10/24(月) 11:30:04|
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlife.net
WordPressで一般的な企業サイトを作るときに参考になる記事
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～