HTML5.JP は、HTML5 の国内での普及を目指し、2007 年に個人プロジェクトとして運営が開始されました。2019 年現在、すでに HTML5 は当たり前のように活用され、多くの情報がネットから入手することができるようになりました。 当サイトの役割は終えたことに加え、当サイトの更新もままならず情報も古いままであったことから、当サイトを閉鎖することにいたしました。これまで当サイトをご支援頂きました皆様には心より御礼申し上げます。 2019 年 8 月 15 日 管理人より
「マークダウン記法」というのをご存知でしょうか。 例えばHTMLで文字を強調しようと思うと、文字をstrongで囲うと思います。ですが、いちいちコードを書くのは面倒ですよね。パソコンならスニペットを使えばいいでしょうが、iPhoneなどのモバイル端末では面倒極まりない作業です。 そこで「マークダウン記法」。これは、ある法則に従って記号を使えば、後からHTMLに変換される。文字装飾が行える。そんな簡易文字装飾フォーマットなのです。 ちなみにWikipediaによると… Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、John GruberとAaron Swartzによって考案された。[1] Markdownの記法の多くは、電子
With the advent of HTML5, jQuery and CSS3, designing and development were totally revolutionized. They are far more advanced and offer many features and various techniques can be applied using them. They are quite easy and quick to manage too. Using these languages you can create a plethora of amazing effects and looks with ease, which were extremely tough to achieve before them. Amateur and profe
ゼロからあなた自身のページを作る時のガイドとして利用されることを目的とし、最小限の要素で構成されたHTML5の基本に忠実に作成したテンプレートを紹介します。 HTML5 Bones HTML5 Bones -GitHub HTML5 Bonesの構成 HTML5 Bonesは非常にシンプルで、jQuery, Modernizeなどは含まれていません。含まれている外部のライブラリは、クロスブラウザ用にNormalize.css、IE8以下用にHTML5をレンダリングさせるためのhtml5shivだけです。 使用している要素もページを作成する最小限の要素で構成されており、テンプレートを利用するにあたり各要素をどのように使うべきか、インラインでコメントで細かく説明されています。 下記に、そのインラインコメントを翻訳しました。 年末年始をまたいで制作者のIanさんとやり取りをしていたので、公開に時
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
JavaScriptのスマホ対応時に知らないと損する16のコト:スマホ向けサイト制作で泣かないための秘伝ノウハウ(3)(1/3 ページ) スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS/機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit(クロスフィット)の開発・販売や、実機での
最近上京してきたんだけど、入谷から会社までくるのに徒歩10分の道のりで迷子になっちゃって、なんか知らない間に浅草の方まで行っちゃって、会社に遅刻しちゃって、東京ってマジ迷路だよね。あ、どうも、僕です。 今日はWebサービスを開発する上で最低限おさえておきたいセキュリティ対策について書こうと思うよ! セキュリティホールって、 案外簡単な見逃しでできちゃうんだよね。 バリバリのハッカーしかハッキングなんてしないから、 うちのサイトは安全だなんて思ってたら大間違いだよ! 今回は、その攻撃方法と、 それを防ぐための対策方法をセットにして書こうと思うよ! 最低限、これだけは守っとかないと、 あなたのWebサービス、攻撃されちゃうよ! ちなみに、言語はPHPを例とするよ! ほかの言語にも当てはまるから、 攻撃方法と対策をセットで頭に入れておくこと! クロスサイトスクリプティング (XSS) よくきくよ
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします! 「HTMLファイ部」創立1周年! 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ!・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます! ツール系のサイト
こんにちは。ShareWisの福田です。 かっこいいスライドやインパクトのあるスライドを作りたいと思ったことはありませんか? 現在、プレゼンテーションのツールとして、PowerPointやKeynoteが主流だと思います。 その他にHTMLやCSSを用いてスライドを作れることをご存知でしょうか? もちろん、ゼロから作ることもできますが、便利なライブラリが多数公開されています。 それらを使うと、PowerPointやKeynoteでは表現できないようなスライドを作ることができます。 今回は「impress.js」というツールを紹介したいと思います。 impress.jsはスライドに回転・拡大・縮小などのアニメーションをつけることができます。 百聞は一見に如かずですので、是非、下記リンクより、デモをご覧になってください。 ダウンロード:bartaz/impress.js – GitHub 簡単
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
現地時間の2012年10月1日、日本時間では10月2日にGoogleから新たなWebサイト向けツール「Google Tag ManagerTM」が公開されました。 これはGoogleアナリティクスTMやコンバージョンタグなどといった「HTMLに差し込んで使用するコード」をHTMLから外部化して、一元管理するためのいわゆるタグマネジメントツールです。 今までのGoogleのツールと比較すると少々使い方などが特殊で、人によっては分かりづらく感じる方もいらっしゃるかと思いますのでざっくりとした紹介をしてみようと思います。 「HTMLに埋め込むコード」を一元管理するためのツール 具体的には、外部ツールが生成したコードをまとめる 実際に使ってみよう 使用準備(初期設定) Google Tag Managerコードの埋め込み 既存HTMLから埋め込んでいる他ツールのコードを切り出し 「タグ」と「ルール
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味(機能)を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ!」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ&ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く