無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHTML5/CSS3の勉強としてスキルアップにもいいですね。
見ているだけでデザインの参考になりそうな無料で使えるHTML5Webサイトテンプレート
ボリュームがあり、かつクオリティの高いHTML5Webサイトテンプレートが25個紹介されていたのでシェア。 眺めているだけでも参考になりそうなテンプレート集 実際に見ているだけでも素晴らしい。とくに最初に紹介されているFlatfyはあっちではかなり利用されている黄金パターンを採用し、かつ使いやすいのが特徴的。 1. Flatfy WordPressプレミアムでもよく見かける形のもはや海外オーソドックススタイル。 この25個の中でも最も美しいデザインとして紹介されています。テンプレートはBootstrapフレームワーク、HTML5、CSS3、そしてjQueryを駆使して作られています。 2. Yebo – Flat HTML5 CSS3 Template 彼、ピーターは無料でダウンロードできるいくつかの美しいHTML5のWebテンプレートを開発しています。これはモダンかつエレガントに見える、
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
スマホでも動く無限横スクロールアクションのブラウザゲームを作る
【Step4】タッチでくまをジャンプさせる 今度はくまをジャンプさせてみましょう。ゲームシーンのタッチイベント（現在ゲームオーバーシーンに遷移させている個所）に次の行を追加してください。 var createGameScene = function() { …省略… // シーンにタッチイベントを追加 scene.addEventListener(Event.TOUCH_START, function(e){ // くまをジャンプさせる kuma.tl.moveBy(0, -120, 12) // 12フレームかけて現在の位置から上に120px移動 .moveBy(0, 120, 12); // 12フレームかけて現在の位置から下に120px移動 // 以下はコメントアウトまたは削除 // タッチでゲームオーバーシーンに遷移(仮) // game_.pushScene(createGame
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
スマホ対応HTML5アドベンチャーゲームエンジン - Almight - スマホ対応HTML5アドベンチャーゲームエンジン - Almight
AlmightJSAlmight（オールマイト）は次世代標準技術であるHTML5で構築された、ノベル＆アドベンチャーゲームエンジンです。 プログラミング知識なしでも高機能なゲームを製作でき、作ったゲームはパソコンでもスマホでも遊べます。 最新情報 2/20Almight SDK 4.2 betaをリリースしました 11/19Almight Packager 2.0＆Almight SDK 4.1.1 betaをリリースしました 11/12Almight SDK 4.1 Betaをリリースしました 9/20Windows向け 機能デモゲームがダウンロード出来ます 9/20サイトをリニューアルしました // 背景を1秒かけてフェードイン [show_bg file="sky.jpg"] [action time=1000] // BGMを再生 [play_bgm file="sunnyday.
「Spelunky」のHTML5版が公開：フリーゲームレビュー
【Spelunky HTML5】のサイトへ行く 2008年の初公開以来、海外で「洞窟物語」などと並び人気が高い、フリーゲーム「Spelunky」のHTML5版が公開された。 HTML5とjavascriptでゲームが動作するので、IE、Firefox、Google Chrome等の主要ブラウザですぐにゲームを始めることができる。 「Spelunky」はローグライクアクションゲームで、毎回ランダムに生成されるダンジョンの最下層を目指すゲーム。 プレイの度にダンジョンの形、出現する敵やアイテムなどが変わり、一度死ぬと再び1階からやり直しになるなど、何度も死にながら、プレイヤー自身のテクニックを磨いて攻略していく。 今年の7月にはXbox Live Arcadeにて、日本語ローカライズや、最大4人のマルチプレイなどが追加された商用版も公開されたが、こちらは全編英語なので、基本操作などは日本語解説
enchant.js使い方辞典 (v0.6.2)
このページはenchant.jsの用例/サンプルを扱っています。ここではenchant.js ver 0.6.2を使用しています。v0.4.3のサンプルを流用していますのでv0.4.3からv0.6.2へ移行した場合の注意点やメモなどを読んでから実行してください。一部動作しなくなったものに関しては掲載していません。 ＊勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい／間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。 ちなみにHTML5 (Canvas)を使ったゲームのプログラムについて解説付きで読んでみたい人は拙著「10日でおぼえるHTML5入門教室」の10章およびダウンロードファイル内の補習講義にて以下のゲームプログラムの解説と実際のコードが入っていますので参考にしてみてください。 ※収録されているもの
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
HTML5KARUTAが届いてたので遊んだよ！ | Hal-Cana
WEBCRE8.jpの中の人こと酒井優さん（@glatyou）が作ったHTML5カルタが届いてたのを思い出して早速遊んでみました。 はこです 僕はCAMPFIREのアレで早々にパトロンとして金を出したので、初級・中級・上級の3種類のセットを頂くことが出来ました。 かね の ちから って すげー 。 中身を見てみる カルタの他に簡単な解説も入ってました。 カルタですね。カルタです。こんなにカルタなものは見たことないくらいカルタ。 早速遊んでみよう！ というわけで、早速カルタで遊んでみようと思ったんですけど、よく考えたら僕には一緒にカルタを楽しめる友達がいませんでした。 友達が、いませんでした。 おわり。 以下、泣きながら全力で一人カルタを楽しむ僕の努力をお楽しみください わ、わーい。 僕のID、halcanaができたよー。カルタってすごーい。たのしーい。 続いてカルタの制作者、酒井優さんのI
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
ゲームのつぼ for HTML5 | PCスマホ無料ゲーム集
ナンプレ ナンプレ。 リバーシ 定番リバーシゲーム！ さめがめ 連結している同じ色のブロックをまとめて消して、全部消せたらクリアです。 四川省 2回以内に曲がった線で繋がる、同じ種類の麻雀牌をクリックして消していくゲーム。 将棋 将棋です。そんなに強くないので、練習台にどうぞ。 麻雀 シンプルな麻雀ゲームです。 五目並べ シンプルな五目並べです。 神経衰弱 神経衰弱です。記憶力の限界に挑戦！ セルソリティア トランプゲームの定番、ソリティアの一種です。 ソリティア 定番中の定番ソリティア。13になるまで台札を重ねるとクリアです。 落ちゲー 同じ色のブロックを、縦・横・斜めに3つ以上並べて消していくゲームです。 マインスイーパ 爆弾を避けて全てのマス目を開けるゲームです。 7並べ これも定番。7並べです。 マッチ棒パズル 定番パズルで脳トレ! 麻雀スパイダー 同じ種類の麻雀牌を1～9まで重ね
実直なHTML5/CSS3でつくられたモバイルファーストのフレームワーク -Markup Framework
商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。 ウェブサイトを構築する際に、ベースとして利用するのによさそうです。 Markup Framework Markup Frameworkの特徴 Markup Frameworkのサポートブラウザ Markup Frameworkのデモ Markup Frameworkの特徴 レスポンシブ対応、モバイルファーストのレイアウト。 再利用可能なUIエレメントのライブラリ。 最新のスタンダードなHTML5/CSS3を使用。 ピュアなHTMLとCSSで、Hackなし、JavaScriptなしです。 ミニマルなマークアップ。 ページの容量は小さめ。 サーチエンジンにフレンドリー。 アクセシブル。 セマンティックスとスタイルの明確な分離。 モジュー
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
新しいCSSの仕様を色々調べてみた
Chrome+HTML5 Developers Live Japan #5
