レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
これぞ近未来…！最新技術をふんだんに使ったサイト「モーグリのツイートキャッチ」の知られざる裏側 FINAL FANTASY XIII-2のキャンペーンとして作られたサイト「モーグリのツイートキャッチ」。見てみるとサウンドや動画、アニメーションなどの最新技術がふんだんに使われていますが、なんとこれ、Flashを使わずに次世代のweb規格「HTML5」だけで作られたのだとか。スゲェ…！ このサイトではどんなテクノロジーが使われているのか、そして、それはどうやって作るのか？マイクロソフトの特設サイト 「 Start Something! 」で、その詳細が明かされていました。 マイクロソフトの特設サイト「Start Something!」は、もっと手軽に開発を楽しんで貰うために立ち上げられた特設サイト。 Start Something! つくりたいを誰でもすぐに 〜 MSDN その中で、FINAL
6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 （WHATWG HTMLのみ）などが争 点。 HTML5マークアップ 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HT
私は現在、就活活動を行っている大学生です。メガバンクや地元の地方銀行に就職希望しているのですが、最近友人から親や自分が借金があると、金融機関には就職できないと聞きました。私の両親は金融機関から借金があります。この場合かなり不利なのでしょうか。 借金があるから銀行に就職できないことはない 借金といっても今やたいていの家庭で、車や住宅ローンはあるものです。家庭に借金があるから金融機関に就職できないということはないでしょう。 だって、ローンを組むことは悪いことをしているのではないですよね。むしろ社会的に信用があるからできることですよね。銀行から個人にお金を貸出すのは、与信行為ですので、信用されているということです。逆に言えば社会人として評価されているようなものです。そんな家庭の子供を選考から外す理由が見当たりません。また、大手の消費者金融の会社だってマガバンクの傘下だったりと関連がある時代ですの
border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。 CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。 このライブラリーは、指定のブロックボックス要素の上下に角を追加します。Internet Explorerの場合はVMLを、それ以外のブラウザーではCanvas（Canvasがサポートされていれば）を使っています。 ダウンロード Release Date Size (byte) Download
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
Ext CoreはダイナミックなWebサイト構築に最適な軽量かつ高機能なクロスブラウザー対応のJavaScriptライブラリです。その特徴は： ファイルサイズがコンパクトな約25kb (ext-core.jsをgzip圧縮した場合) 柔軟かつ利用しやすいオープンソースライセンスのMITライセンス Ext開発メンバーにより執筆された体系的かつ網羅的な75ページのマニュアル これまでのExt JSを同じ使い慣れた直感的なAPI Ext JS 2.2 Ext JSはリッチインターネットアプリケーション開発のためのクロスブラウザ対応JavaScriptライブラリです。 高性能でカスタマイズ可能なユーザーインターフェイス 優れた設計、文書が豊富、拡張性の高いコンポーネントモデル 商用ランセンスとオープンソースライセンスが利用できます Ext JS 3.0とExt GWT 2.0が
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
