HTMLに恋したい！「コーディング推薦」はじめました！
好きなプロパティは「-webkit-animation-delay」の渕上です。 昨年、卒制採用にのっかって行った「コーディング推薦」。今年もやることになりました！ コーディング推薦って？ KAYACの採用キャンペーンの一つです。 コーディング推薦用の課題にHTML・CSS・JavaScriptで回答していただき、弊社のHTMLファイ部のメンバーが「キュン」としたコードを書いた方を全力で推薦します！就活よりも卒業制作よりもコーディングを頑張ってしまった学生さん、履歴書よりもHTMLを書いていたい求職中のコーダーさんにぜひオススメしたいキャンペーンです！！ 課題 以下の原稿をあなたらしくマークアップ・装飾してください！ HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS 「写真袋」というiPhoneアプリのランディ
HTML5の中でも使える、使わない方が良い機能を学ぶ·HTML5 Please MOONGIFT
HTML5 PleaseはHTML5の利用推奨度を機能ごとに検索できるソフトウェアです。 HTML5が登場してしばし経ちましたが、それでも積極的に使っていくのを躊躇している人も多いのではないでしょうか。そこでHTML5の中でもどの機能を使っていくべきか、または避けるべきかを教えてくれるのがHTML5 Pleaseです。 トップページです。HTML5対応Webブラウザで見てみましょう。 インクリメンタルなフィルタリングもできます。 使えるか使えないかは色分けして表示されます。 やはり全ての機能が使えるという訳ではありません。 各機能からWebブラウザのバージョンごとのサポート具合が一覧できます。 APIに関連したものだけを抽出して対応状況が見られます。同様にCSS、HTML、JavaScriptといった具合に指定できます。 IEのバージョンごとの指定もできます。 HTML5 Pleaseでは
15秒でHTML5のテンプレを作成出来るWebツール・InitializrがTwitter Bootstrap 2にも対応した模様です - かちびと.net
InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる！と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた！Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか？Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
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」
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
HTML5の基本的なシンプルテンプレート「HTML5 Reset」
ブラウザなどの制約によってまだまだ全ての現場で利用できるとは言いがたい状況ではありますが、国内でも徐々に利用されてきているHTML5。そろそろ手をつけようと思っているWEBクリエイターの皆様も多いと思います。そこで今回紹介するのはHTML5+CSS3を利用した汎用テンプレート「HTML5 Reset」。 こちらのテンプレートは基本的なCSS、リセットCSSなど非常に分かりやすい構成で組み込まれており、カスタマイズして利用したり、構造を学んだりすることができるようになっています。 詳しくは以下 こちらのテンプレートは2010年から公開がスタートし、バージョンアップが続けられれ、現在はV2としてリリースされています。 本を読み解いて覚えるのは確実ですが、時間がかかりますし、HTMLの基礎ができている方であれば、習うより慣れろで、こう行ったテンプレートを触っていったほうが、遥かに学習効率がよさそ
DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
50代でも分かったHTML5の基礎知識
おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
ゼロからはじめるHTML5でのサイト制作／第9回 XHTML1.0とHTML5のコーディングの違いを確認してみよう - MdN Design Interactive
これまでの連載では、HTML5での新要素の説明やHTMLから使用方法が変更になった要素、ブロックレベル要素とインライン要素の変わりとなった「コンテンツ・モデル」や「アウトライン」などについてまとめてきましたが、ここからは今まで解説したことのまとめとして、簡単なレイアウトをxhtmlとHTML5でのマークアップを比較しながら実際に作成してみたいと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 ●HTML5の基本の書き方 XHTML1.0とHTML5の基本のHTMLの違いを再確認してみましょう。HTML5といっても基本の書き方が大きく変わるわけではありません。極端なことを言えば、DOCTYPE宣言だけをHTML5の書き方にし、コンテンツのコードを既存のままにしてもHTML5になります。今回は新要素などを適切に使用して「コンテンツ・モデル」や「アウトライン」を意識してマークアップして
HTML5: img 要素の alt 属性 の仕様 – attosoft.info
概要 alt 属性に指定する代替テキスト 空文字列の代替テキスト alt 属性の省略 関連リンク 訂正：HTML4/XHTML の alt 属性について 概要 HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。 HTML5 における alt 属性 の仕様を概略すると次のようになる。 alt 属性には画像を置換可能な詳細な代替テキストを指定する HTML4/XHTML の alt 属性は短い説明 (alt テキスト) だったが HTML5 の alt 属性は長い説明 (title 属性よりは longdesc 属性に近い (※)) 画像の情報量 ≒ alt 属性に指定する代替テキストの情報量 特定の条件を満たせば alt 属性を省略することができる ※ HTML5 の仕様はワーキングドラフトでまだ勧告されて
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト2011.11.14 14:00 mayumine ｢One Milionth Tower｣は高層建築が社会に与えてきたストーリーをミニドキュメンタリーとして紹介するプロジェクト。 ｢One Milionth Tower ｣の注目すべきところは、世界初の、完全にHTML 5と WebGL、Javascriptだけで作られた、高度なインタラクティブなサイトになっているところです。 3Dのビルや写真（そして音も）のドキュメンタリーグラフィックスは、すべてWeb GL（2D/3Dグラフィックスをウェブブラウザだけで表現できるAPI）で表現されています。 さらに｢One Milionth Tower｣では、｢Popcorn｣と呼ばれる、WebのAPIとHTMLのビデオ属性を統合する特殊なJavascriptツール
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全て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
XHTMLベースの既存のWordPressのテーマファイルをHTML5にするチュートリアル
XHTMLで作成された既存のWordPressのテーマファイルをHTML5にするチュートリアルを紹介します。 Converting XHTML WordPress Theme To HTML5 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに header.phpをHTML5に変更 index.phpをHTML5に変更 single.phpをHTML5に変更 footer.phpをHTML5に変更 補足：IE6/7/8への対応 はじめに はじめに、なぜHTML5を使うのかを理解する必要があります。私が考えるHTML5を使う大きな理由は、HTML5がセマンティックなマークアップだからです。 HTML5ではheader, footer, nav, section, articleなどを正確に使用する必要があります。 ここでは、XHTMLベースの既存のWordPressのテーマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Loading...
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
