タグ

*htmlに関するyamadarのブックマーク (151)

  • Sagakeen(サガケーン) - 佐賀県

    4対4でインクを撃ちあい、ナワバリを競いあうWii U専用アクションシューティングゲーム。それが「スプラトゥーン」なのだ!

    Sagakeen(サガケーン) - 佐賀県
  • そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

    帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

    そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
  • Webフロントエンド表示速度、最速化手法まとめ - Qiita

    やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序/速度

    Webフロントエンド表示速度、最速化手法まとめ - Qiita
  • HTML5から意味の変わる要素 <b>、<i>、<em>、<strong>、<small>、<hr>-HTML5リファレンス

    HTML5から意味の変わる要素 HTML4.01では、<b>は太字、<i>はイタリック体、<em>は強調、<strong>は強い強調、<small>は小さくする、<hr>は水平線、 として定義されていました。 これらの要素はHTML5でも残っていますが、 HTML4.01とは意味が変わり、単なる装飾要素からそれぞれに意味のある要素として定義されています。 タグ(要素) HTML4.01 の定義 HTML5 の定義

  • 三菱総合研究所(MRI)

    豊かで持続可能な未来の共創を使命として、 世界と共に、あるべき未来を問い続け、 社会課題を解決し、社会の変革を先駆けます 経営理念

    三菱総合研究所(MRI)
    yamadar
    yamadar 2015/08/10
    HTMLソースにやたら空白が多いんだけど、Dreamweaverか何かのオーサリングソフトのせいかな?
  • Ready to check - Nu Html Checker

    This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Ready to check Checker InputShow sourceoutlineimage reportcheck error pagesUser-Agent Accept-Language

  • HTML[select要素]プルダウンメニューを表す - TAG index

    この要素に定義されていたautofocus属性は、グローバル属性として再定義されました。 name属性について name属性は、フォーム部品を識別するための名前を指定します。 この属性の値は、選択されたoption要素の値とセットで送信されます。 <select name="pref"> <option value="Tokyo">東京</option> <option value="Osaka">大阪</option> <option value="Fukuoka">福岡</option> </select> 例えば、上記のメニューで東京が選択された場合は、pref=Tokyo といった感じで送信されることになります。 size属性について size属性は、表示される選択肢の数を指定します。 この属性の既定値は、multiple属性が指定されている場合は 4、指定されていない場合は 1

    HTML[select要素]プルダウンメニューを表す - TAG index
    yamadar
    yamadar 2015/07/27
    ちなみに、option の value を省略すると、required 属性があるときに選択しても必須チェックに引っかからない。value="" という空白の選択肢を用意してあげる。
  • disabled属性とreadonly属性の相違点 - Qiita

    Help us understand the problem. What is going on with this article?

    disabled属性とreadonly属性の相違点 - Qiita
  • input 要素の disabled 属性と readonly 属性の違い

    (X)HTML の disabled 属性と readonly 属性の違いについて、どちらの属性もユーザーが値を変更できないのは同じですが、振る舞いが異なります。 <input name="a" type="text" value="hoge" disabled="disabled" /> <input name="b" type="text" value="hoge" readonly="readonly" /> 最近、2つの属性の違いが気になって調べたので、以下、HTML 4.01仕様書(和訳)からの引用抜粋と、それぞれの違いを表にまとめました。文中の「選択不能指定」が disabled、「読み出し専用指定」がreadonly です。原文へのリンクも掲載しています。 17.12 選択不能指定と読み出し専用指定からの引用[原文] ユーザによる入力が望ましくなかったり不適切だったりする場合

  • Enterキーを無効にする方法 - Qiita

    Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam

    Enterキーを無効にする方法 - Qiita
    yamadar
    yamadar 2015/07/09
    小粋空間のコピーなんだが・・・。http://www.koikikukan.com/archives/2012/01/20-015555.php
  • keydown keypressの違い - ひらい ぶらり Hi-Library

    http://cgi14.plala.or.jp/uz/ubbs/wforum.cgi?mode=allread&pastlog=0001&no=182&page=20&act=past keydownは文字通り、なにかのキーが押されたときに反応する。keypressは「文字が入力」された時に反応する。という感じらしい。 なのでkeypressでは矢印キーなんかは反応しない。Enterで反応するのは改行コードが入力されるため。 ということかな?たぶん。

    keydown keypressの違い - ひらい ぶらり Hi-Library
    yamadar
    yamadar 2015/07/05
    keydown はキー押された時、keypress は文字入力で反応する。矢印キーは keypress は反応しない。
  • HTML/CSSヘッダー固定のスクロールテーブル - kagan’s blog

    ヘッダーを固定させたままデータ部だけスクロールさせる方法はいろいろありますが、一番簡単と思われる方法を紹介します。 ↓HTML <table> <thead class="scrollHead"> <tr><th class="no">番号</th><th class="name">お名前</th><th class="address">連絡先</th></tr> </thead> <tbody class="scrollBody"> <tr><td class="no">1</td><td class="name">半田</td><td class="address">handa@xxx.com<td></tr> <tr><td class="no">2</td><td class="name">野崎くん</td><td class="address">nozaki@xxx.com<td

    HTML/CSSヘッダー固定のスクロールテーブル - kagan’s blog
    yamadar
    yamadar 2015/06/29
    IE9の場合は、td, th に float: left; しないと display: block; にならないので、親要素への幅設定をしたり高さを揃えたりと、結構面倒くさい。
  • もう逃げない。HTMLのviewportをちゃんと理解する

    <meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す

    もう逃げない。HTMLのviewportをちゃんと理解する
  • ニトリのコードを見てニヨニヨする会(そして最後にニヨニヨできなくなった話) - Minecraftとタートルと僕

    2015-06-24 ニトリのコードを見てニヨニヨする会 雑記 情報リンク集 ニヨニヨ はじめに ニトリのECサイトであるニトリネットがリニューアルに失敗して6日も経ってから復旧したということで、 (一部の)プログラマクラスタで騒ぎになっています。 僕の率直な感想は次のようなもの。 閉鎖状態の「ニトリネット」が6/23にサイト運営を再開、不具合の主因はCPU不足 | ネットショップ担当者フォーラム ともあれ関係者の皆さまお疲れ様でした。個人の責任問題などと短絡化することなく、粛々と原因解明と、できればぜひ知見の共有公開をお願いしたい。2015/06/23 13:40 プレスリリースでは、原因としてCPU不足を挙げています。 珍しい原因ですよね。あまり聞いたこと無いのでぜひその知見を知りたいものです。 しかし雲行き怪しく 早速、ニトリのトップページ見ている。すごい8000行の中にデバックコー

    ニトリのコードを見てニヨニヨする会(そして最後にニヨニヨできなくなった話) - Minecraftとタートルと僕
    yamadar
    yamadar 2015/06/24
    cssの途中でリセット、クラス指定でスタイル振ってるなら特に問題はない筈だけどそういうレベルじゃなさそう。気になるサイトはソース読むので、凄いのは感心するし、酷いのはこういう感じでニヨニヨする。
  • HTML の a 要素に target=&#8221;_blank&#8221; をつけるのはもうやめよう

    HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた

    HTML の a 要素に target=&#8221;_blank&#8221; をつけるのはもうやめよう
    yamadar
    yamadar 2015/06/16
    判定してPCならtarget属性を付与するとか、かなー。
  • [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

    [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]

    [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
    yamadar
    yamadar 2015/05/22
    位置やサイズ系のプロパティはアクセス時に最新のレンダリング結果を計算する
  • フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ

    株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業(受託制作事業)につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日:2024年4月30日 biz@tsumikiinc.com

    フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
  • encodeURIComponentが世界基準だと誤解してた話

    URLをいじくるプログラムをいじっていて、仕様がよくわからなくて悩んだのでまとめます。 2/23: 追試部分を追記 2018/7/14: JavaScriptのURLSearchParamsと、GoのPathEscapeについて追記 ことの経緯 HTTPとはなんぞやとか、GETとPOSTがどうの、それぞれでパラメータがどういう経緯でウェブアプリケーション(とかCGI)に渡って来るのかぐらいは知っていました。で、ウェブでXHRでGETリクエストを送る場合にはJavaScriptのencodeURIComponent()で各パラメータをエンコードして、&でくっつけて、URLの末尾に?で付与すればいいんだよね?と思っていました。こんな感じに。 var finalUrl = [url, "?", encodeURIComponent("key"), "=", encodeURIComponent(

    encodeURIComponentが世界基準だと誤解してた話
  • HTML 4.1が勧告されました (エイプリルフールの嘘情報です)(追記あり) (Kanasansoft Web Lab.)

    HTMLの新しいバージョンであるHTML 4.1が勧告されました。 HTML 4.1で追加されたのはエイプリルフール用の仕様のみとなります。 たったこれだけの仕様追加でバージョンが上がってしまうのは奇妙に思われるかもしれませんが、理由を含めて解説してみたいと思います。 導入までの経緯毎年、4月1日のエイプリルフールには各サイトが創意工夫を凝らしたエイプリルフールの特設ページを作成することが慣例となっています。 多くの特設ページはエイプリルフールが終わると削除されるのですが、一部のコンテンツはインターネット上に残り続けています。 この傾向は、特に個人のブログに公開されたエイプリルフールのエントリーに顕著です。 4月1日中はインターネット利用者は警戒しつつネットを利用していますが、普段のネット利用時には多くの利用者は警戒を解いてしまいます。 このような時に偶然エイプリルフールのコンテンツに訪れ

    yamadar
    yamadar 2015/04/01
    面白くて全部読んでしまった。こういうネタは素晴らしい。
  • HTML5 と SVG で考える、これからの画像アクセシビリティ

    This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The document suggests Yarn may handle dependencies and devD

    HTML5 と SVG で考える、これからの画像アクセシビリティ
    yamadar
    yamadar 2015/03/07
    IE8が早く滅びて欲しい。あとブラウザによって微妙にプロパティーの書き方が違うのは何とかならないかな。