タグ

htmlに関するHoriuchi_Hのブックマーク (38)

  • 普通のHTMLの書き方

    保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り

    Horiuchi_H
    Horiuchi_H 2018/07/23
    HTMLのベストプラクティス集。何故、そうするべきかまで書いてあるのが有用。
  • gloomyson/StarCraft · GitHub

    HTML5 version for StarCraft game Version 1.0 includes below game elements: Different units for Zerg/Terran/Protoss complete All buildings for Zerg/Terran/Protoss complete Different maps, fog cover, ZergBuilding mud Different bullets and bursts from units Almost all magic animation and effect complete All upgrade effect complete Control panel, different buttons and icons complete Same cheat code as

    Horiuchi_H
    Horiuchi_H 2015/09/30
    HTML5版の StarCraft。今のところ対戦機能はないもよう。
  • Just another WordPress site -

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

    Horiuchi_H
    Horiuchi_H 2015/09/17
    BootstrapのLint Toolがあるのか。今度使ってみよう。
  • クレジットカードフォームの解剖学 | POSTD

    オンラインでクレジットカードを使って支払うことは簡単ですよね?この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから(例:Amazon)。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ

    クレジットカードフォームの解剖学 | POSTD
  • Jadsds Engine

    The JADSDS engine was a user-friendly, tag-based JavaScript animator designed to simplify web projects by harnessing the power of HTML5. Animations are created using intuitive and easy-to-remember tags. You don't have to be a programmer; basic knowledge of HTML and JavaScript is sufficient to craft impressive animations. Even when multiple projects are running simultaneously, CPU usage remains min

    Horiuchi_H
    Horiuchi_H 2015/05/07
    これは凄い。動いているキャラクタがいい味出してる。神トラ2はなんだかマップが小さくて、微妙にコレジャナイ感が強かった。
  • Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times

    (English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか?何が違うのか?何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、9大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ

    Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
    Horiuchi_H
    Horiuchi_H 2015/03/13
    フレームワークの特徴まとめ。AngularJS2はまだα版なので、評価は保留。
  • hackforplayのダウンロード|Daiki Teramoto

    HackforPlay 最新版(2020年7月31日追記)あたらしい HackforPlay はこちら あそべるプログラミング HackforPlay ダウンロードは不要です。 旧 HackforPlay (2014年)旧 hackforplayはこちらからダウンロードできます。 ・zipファイルがダウンロードが出来たら、解凍してください。 ・hackforplayというフォルダが作られます。開いて下さい。 ・中にある、index.htmlというファイルを開いてゲームを開始できます。(アイコンは画像と異なる場合がありますが、問題ありません) ・ダウンロード版は、お好きなエディタでプレイ出来ます。(玄人向け) (Internet Explorerは非推奨です)

    hackforplayのダウンロード|Daiki Teramoto
    Horiuchi_H
    Horiuchi_H 2014/08/15
    jsをhackして進めていくゲーム。基礎を知っている必要があるけど、面白い試み。
  • Why does ng-class="ng-app" break AngularJS?

    To get AngularJS to work in IE7 and IE8, I add id="ng-app" and class="ng-app" to my ng-app element: <html id="ng-app" class="ng-app" ng-app="myApp"> <div ng-view></div> </html> This has always worked in the past, but now I've added class="ng-app" to two different projects, and in both the view no longer renders in any browser. Has the way to do IE7/8 compatibility changed? I'm using version 1.0.2

    Why does ng-class="ng-app" break AngularJS?
  • 覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita

    DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや

    覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
    Horiuchi_H
    Horiuchi_H 2014/04/18
    monitorEventsなんて便利APIがあったのか。覚えておこう。
  • HTML(.js) - Befriend the DOM!

    Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A

    Horiuchi_H
    Horiuchi_H 2013/08/30
    DOMを操作できるライブラリ。jQueryより分かりやすいかな?ただ、名前のぐぐらびりてぃの低さが気になる。
  • msto.jp - it転職 リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    Horiuchi_H
    Horiuchi_H 2013/06/10
    Android、iPhoneでの実例
  • Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita

    スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感

    Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
    Horiuchi_H
    Horiuchi_H 2013/06/10
    CSS Animationかぁ。そろそろ調べないとな。
  • Interactive iPhone 5S & iOS7 Concept | Recombu

    How to use our iPhone 5S concept 1 Wake up the iPhone 5S with either the power button or home button 2 Slide to unlock the phone, or try out the new lock screen widgets 3 Browse our iOS7 app concepts and explore the other features Try the Apple iPhone 5S and iOS 7 out before anyone else, here at Recombu We’ve created this iPhone 5S concept so that you can trial iOS 7 ahead of Apple’s official anno

    Horiuchi_H
    Horiuchi_H 2013/06/07
    HTML5で作られた、iOS7のモック。フラットデザインなのね。
  • HTML5 Boilerplate: The web’s most popular front-end template

    HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

    HTML5 Boilerplate: The web’s most popular front-end template
    Horiuchi_H
    Horiuchi_H 2013/06/03
    最初のひな形に。
  • インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応

    インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」(IDF Beijing 2013)において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール(ChromeブラウザとJavaのインストールが必要)。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販

    インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
    Horiuchi_H
    Horiuchi_H 2013/04/16
    IntelのHTML5向けのSDK。PhoneGapベースなのか。IDEまでちゃんとあるんだな。
  • HTML5で出来ないことまとめ 2012年12月版 - webとかmacとかやってみようか R

    記事は、HTML5 Advent Calendar 2012 の12日目の記事です。なんとか日中にあげれるか・・ アップできた! 業務やらイベントやらやらで死ぬほど忙しいなか、無謀にもHTML5 Advent Calendarに参加してしまった@dsuketです。こんばんわ。 先月の段階ではここまで修羅場になるとは思わなかったのですが、師走は恐ろしいものですね。年末にこんな首を絞めるイベントが山ほど各所で行われているとは、つくづくエンジニアはM属性だと思いました。 ネタは始めは「HTML5で出来ること」にしようかと思っていたのです。が、そんな話は山ほどある。もはや傷気味ですよね。そこで逆転の発想で「出来ないこと」にすればいい!と閃いたわけです。さすが良い閃きだな−、俺冴えてる!と思ったのも束の間。念のためググってみると・・・「あれ?いっぱいあるぞ・・( ̄0 ̄;)」 しかし、検索上

    HTML5で出来ないことまとめ 2012年12月版 - webとかmacとかやってみようか R
    Horiuchi_H
    Horiuchi_H 2013/04/02
    HTML5の標準仕様に色々なものが増えてきている。現在の時点で足りないものは、これくらいらしい。
  • 意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、1つだけ教えます。

    わかった!お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう

    Horiuchi_H
    Horiuchi_H 2013/03/07
    maxlengthを使っていると、ブラウザを再起動するまで入力ができなくなるバグ。これは結構致命的な問題じゃない?
  • HTML_CodeSniffer

    Check that your HTML code conforms to your coding standard HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs". To get you started, HT

  • CSS: marginの正しい理解 - kojika17

    toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基的な内容ですが、読んで頂ければ幸

    CSS: marginの正しい理解 - kojika17
    Horiuchi_H
    Horiuchi_H 2012/08/28
    CSSのmarginにはこんなルールがあったのか。今まで知らなかった。
  • Googleが正式回答したスマホサイトのSEO - ku-sukeのブログ

    こちらの記事のざっくりまとめです Google Finally Takes A Clear Stance On Mobile SEO Practices Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites (モバイル・スマホという言葉が出ますが、基どちらもスマホを指しています。) 結論から言うとレスポンシブデザインがSEO上はオススメ あくまでSEOの観点ですが、スマホにかぎらず様々な表示領域をもつデバイスに対応するため、レスポンシブデザイン(画面幅に合わせてレイアウトが変わる奴。)が適用できるならそれが一番いいとのこと。 ※レスポンシブデザインに関しては、日ではまだ定着していないため賛否両論があるようですが、個人的には気でやるなら有りかな

    Googleが正式回答したスマホサイトのSEO - ku-sukeのブログ
    Horiuchi_H
    Horiuchi_H 2012/06/12
    モバイルサイトとPCサイトの両方対応した場合の SEOについて。