Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
Web Design and Web Development : うやむやだったHTML5の文書論理構造をきちんと考えてみる | mnemoniqs’log.
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか？ Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
HTML5リファレンス（旧仕様）
<p> …… ひとつの段落（パラグラフ）であることを表す <hr> …… テーマや話題の区切りを表す <pre> …… 半角スペースや改行をそのまま表示する <blockquote> …… 引用・転載セクションであることを表す <ol> …… 順序のあるリストを表示する <ul> …… 順序のないリストを表示する <li> …… リストの項目を記述する <dl> …… 定義・説明リストを表す <dt> …… 定義・説明される言葉を表す <dd> …… 定義用語や言葉の説明をする <figure> …… 図表であることを示す <figcaption> …… 図表のキャプションを示す <div> ……ひとかたまりの範囲として定義する <main> …… メインコンテンツであることを示す <a> …… ハイパーリンクを指定する <em> …… 強勢する（アクセントを付ける）箇所を表す <stro
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
Another HTML Lint 5
Another HTML-lint 5 is a free checker tool for HTML syntax. You may freely reuse and repost this as long as it is for non-profits. Please make sure to link to this website and specify explicitly your (website manager's) location and contact details. Advertising or any service associated with advertising is forbidden. Note: This is currently Beta version. Please contact us at the following e-mail i
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building a Rock Solid Auto GridExplore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project. Hosting a ComfyUI Workflow via APIBasic WebSoc
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム（回転／拡大縮小／移動）やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連：[CSS]GoodDesign賞にノミネートされて落選するこ
HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！ | HTML5でサイトをつくろう
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編 第2回：HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML５の違いを比較しながら理解を深めていきたいと思います。 アウトラインとは まずはアウトラインに
Page not found. Nike.com
Nike asks you to accept cookies for performance, social media and advertising purposes. Social media and advertising cookies of third parties are used to offer you social media functionalities and personalized ads. To get more information or amend your preferences, press the ‘more information’ button or visit "Cookie Settings" at the bottom of the website. To get more information about these cooki
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
SLOT88 Situs Judi Slot Online Gacor 100% Jackpot Hari ini Hadir sebagai situs judi slot online terbaru, SLOT88 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui HP berbasis android dan io
HTML5で制作された国内企業サイト!! - ロゴ・名刺・Facebookページ制作代行・ホームページ制作など各種デザイン制作 静岡のデザイン研究所｜ステージゼロワンラボ
HTML5について 最近、HTML5のコーディング案件についての問い合わせや質問があります。そこで早速、HTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 それともう１つ、今回調べて気づいたのですが多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。 私も取り残されないように日々精進したいと思います。 ○アップル このサイトは説明不要ですよね。アップルの特設サイトです。アップルが提供する「Apple HTML5 Showcase」 http://www.apple.com/html5/ ○Google Google「ウェブの進化」 Google Chromeのリリース３周年を記念して制作されたコンテンツで、Web技術やブラウザの進化の歴史を視覚化。1990年から現在まで約20年に渡る年表を色鮮やかなインフォグラフィックとしてHT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5時代のWebデザイン
くらげごはん。
ultranoir, Digital Agency, Paris
Loading...
HTML5.JP - 次世代HTML標準 HTML5情報サイト