誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
HTML5 and CSS3 - Adobe - The Expressive Web - Beta
The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版
ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
自慢のWebデザインをもっと広めたい！自薦で登録できるWebデザインギャラリーサイト
自慢のWebデザインをもっと広めたい！自薦で登録できるWebデザインギャラリーサイトデザインの参考になるのはもちろん、見ているだけで楽しくなるWebデザインのギャラリーサイト。海外のギャラリーサイトでは英語圏以外の国のサイトも多数紹介されていますが、日本語サイトを見かけることが少ないですね。そこで今回は自薦・他薦問わずおすすめサイトの申請ができる国内外のギャラリーサイトをいくつか紹介します。 英語サイトでは「Submit」と書いているページから登録できます。もちろん中の人のチェックが入るため、登録したサイトが全て掲載するわけではありません。また、スクリーンショット画像は掲載決定時に中の人が用意するパターンと、登録時にこちらで用意しておくパターンがあります。こちらで用意する場合はサイズやファイル形式の指定があると思うので、注意事項をよくよんで準備しましょう。 海外サイトCSS Winner
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
すぐに使いたい！レスポンシブWebデザイン対応の無料HTMLテンプレート10選 | TechAcademyマガジン
ELLIE GOULDING
浜 俊太朗のHTML5マークアップ移行ガイド
HTML5で制作されたサイトをまとめたギャラリーのまとめ
Validator.nu
cmmntr.com