タグ

htmlに関するnitoyonのブックマーク (34)

  • スマートフォン対応でよく使うhtml、css、javascriptのまとめ

    スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtmlcssjavascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon

    nitoyon
    nitoyon 2013/02/18
    スマホ Web デザインの定型文、細かなバグ色々。
  • MathJax Sublime Text Markdown

    Consultancy MathJax is highly flexible and can be tailored to the needs of your institution by creating customized configurations and specialized software workflows. Content Transformation MathJax can help you with the conversion of math documents from legacy sources and print content as well as with the generation of novel content that is online ready and fully accessible for readers with special

    nitoyon
    nitoyon 2012/08/10
    Web フォントで TeX や MathML を表示できるライブラリ。(デモ) http://www.mathjax.org/demos/tex-samples/
  • Google HTML/CSS Style Guide

    Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML

    nitoyon
    nitoyon 2012/04/25
    Google の HTML, CSS のコーディングルール。見やすく、無駄を省く。
  • HTML5 で書道が楽しめる The Shodo の完成度がすごい - てっく煮ブログ

    ちまたでは HTML5 が話題ですね。「HTML5 ではこんなこともできます」といった紹介はいろんなところでみかけますが、「じゃあ、ぶっちゃけ、どんなサイトが作れるのよ」がいまいち見えてない人も多いのではないでしょうか。そんな中、HTML5 の機能を活用した完成度の高いサイトが登場していました。その名も The Shodo。 The Shodo (http://www.theshodo.com/)ブラウザ上で書道体験The Shodo ではこんな感じにブラウザ上で書道を楽しむことができます。書くときにカーソルの位置に手が大きめに表示されるのが当に書道している気分にさせてくれます。硯をクリックして色の濃さを選んだり、筆をクリックして筆の太さを選んだりもできます。ちょっとした動画や BGM が雰囲気を盛り立てるトップページで [Write] を選ぶと書き始められるのですが、最初に動画で墨を擦

    nitoyon
    nitoyon 2010/09/28
    ブログ書いた。
  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

    nitoyon
    nitoyon 2010/02/23
    CSSっぽい記法をHTMLに展開。div#header→<div id="header"></div> など。
  • 岐阜&山形セフレと出会い系の掲示板でママ活しよう

    岐阜( ´▽ `)ノ さまざまなものがなくなっています。 | Ω・ `) この日記は… 岐阜はつま​​らない日記です 岐阜でセフレ 鈍い顔だから( ‘-ω-`) そして、岐阜があります&#8230…

    nitoyon
    nitoyon 2009/05/07
    HTMLやPHP、JSなどの複数言語が混じったファイルにも対応した Windows 向けエディタ。ノーリツ子会社の製品。2,500円~10,000円。
  • Ring

    Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や

    nitoyon
    nitoyon 2009/01/24
    CSVで ="090" として強制文字列、tableタグには<td style="mso-number-format:'\@>でコピペにも対応、Webクエリ(!)にも対応。
  • フォームコントロールのデフォルト値: Days on the Moon

    WebKit のコントロール値キャッシュ対策 「日野望の会-Yabooo.org > Safari/Webkitのおせっかいキャッシュとその対策。」にコメントしたはずなのですが、いつの間にかコメントが消えているようなので推敲の上再掲。 上記のページで問題にしているのは、Safari において bfcache を無効にしていても、動的に追加したフォームコントロールの値がキャッシュされた値に書き換えられてしまうことです。これに対し、文書中のコントロールをすべて記憶し、文書のアンロード時にそれらの名前 (name 属性の値) を変更することで解決を図っています。 しかし、書き換えられるのは一時的な値のみで、コントロールのデフォルト値 (フォームをリセットしたときに設定される値) まで変化するわけではありません。ならば、コントロールが文書中に挿入されたときに、その値をデフォルト値に設定してやれば

    nitoyon
    nitoyon 2009/01/20
    defaultValue で reset 後の値を取得できる。DOMから作ったときは defaultValue が設定されないので注意。
  • http://blog.crara.cc/archives/492

    nitoyon
    nitoyon 2009/01/09
    HTML のソースで CUI なタイトル表示。
  • 送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記

    いいね! 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか?tabで移動しますか? 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか? 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って

    nitoyon
    nitoyon 2009/01/03
    Tab+Enter で投稿する人を悩まさないために。/ mixi で日記書いたときにこれで消えてしまって悲しかった。
  • マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)

    しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト(ユーザ行動観察調査)で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス(ハイライト)が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル

    nitoyon
    nitoyon 2008/03/18
    ホイールによる意図しない挙動を防ぐためには。本来なら、ブラウザ側で対策すべきなんだろけどね…。
  • Google Code Archive - Long-term storage for Google Code Project Hosting.

    Code Archive Skip to content Google About Google Privacy Terms

    nitoyon
    nitoyon 2008/01/12
    AS3で書かれたHTML/CSSレンダラ。これを使えば、面白いことができそう。 → 試してみたが、HTMLのパースを XML でやっているので、かなり厳しい。
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    nitoyon
    nitoyon 2007/11/18
    HTML文字列をパースして、DOMノードに変換するパーサー。<br/>のように/は必須。
  • void GraphicWizardsLair( void ); // 「LDRizeのxFolk対応」と「カトゆー家断絶テストページやfooo.nameがxFolk化」が合わさるだけで、いろんなWebページがものすごく便利になるのもmicroformatsの大きな利点

    nitoyon
    nitoyon 2007/11/09
    xFolk SITEINFOを作るだけで、xFolk に対応したサイトの全てに対応させることができた。HTMLにちょっと手を加えるだけ、というmicroformats の利点。
  • HTML崩壊 meltdown.js - KAZUMiX memo

    #ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ

    HTML崩壊 meltdown.js - KAZUMiX memo
    nitoyon
    nitoyon 2007/11/08
    HTMLが崩壊するブックマークレット。全エレメントをいったんabsoluteにしてからアニメーションさせている。
  • HTML書くのに便利な秀丸マクロ | Takazudo Clipping*

    自分は、いっつも秀丸というテキストエディタを使ってます。 マクロ機能がすごい便利なので。マクロは、個人が作ったものが、たくさんWebで公開されています。 メモもかねて、HTMLを書くときに便利なものを紹介。 すぐおせるところに置いておく系 とにかく自分の押しやすいキーにこれらのマクロをバインドしておくと、ぺこぺこHTMLが書けるかと思います。(これは、FPSやRTSというジャンルのPCゲームをバカみたいにやっていて学んだ大切なことです。操作が遅いとやられちゃうんです・・・) 具体的には、alt+Qとか、Ctrl+Eとか、左手でちょちょいと押せる部分に割り当てておきます。はっきり言って、最初にこれらを設定するのは、相当めんどくさいですが、慣れてしまえば、Dreamweaverとか使うより相当速いです。 終了タグ挿入・タグ削除等 閉じタグいれたりタグ部分だけ消したり。 XML/HTML編集

    nitoyon
    nitoyon 2007/11/07
    秀丸+htmlの便利なマクロ紹介。閉じタグ補完など。
  • Webページの本文抽出 (nakatani @ cybozu labs)

    Webページの自動カテゴライズ の続き。 前回書いたとおり、パストラックで行っている Web ページのカテゴライズでは、Web ページの文抽出がひとつの鍵になっています。今回はその文抽出モジュールを公開しつつ、使っている技法をざっくり解説などしてみます。 モジュールの利用は至極簡単。require して analyse メソッドに解析したい html を与えるだけ。文字コードは UTF-8 です。 【追記】大事なこと書き忘れ。モジュールは Ruby1.8.5 で動作確認していますが、特別なことはしていないので、1.8.x なら動くと思います。 $KCODE="u" # 文字コードは utf-8 require 'extractcontent.rb' # オプション値の指定 opt = {:waste_expressions => /お問い合わせ|会社概要/} ExtractCont

    nitoyon
    nitoyon 2007/10/30
    本文抽出ライブラリ公開。同様のライブラリへのリンク。
  • OperaのFast Forwardはどうやって次のページを決定しているのか - bits and bytes

    Operaはその独特なUIになじめなくてほとんどつかったことがないのですが、先日OperaにはFast Forwardという他のブラウザにはない機能があるのを知りました。 Fast Forwardはおおざっぱにいうと、ページが一番下までスクロールしているときにスペースキーを押すと、自動的にページの中から次のページだと思われるリンクを探してそのリンクの先をロードするという機能です。ひとが各サイトごとに手で記述したSITEINFOを外部から持ってきるAutoPagerizeとは違って、Operaに組み込まれたプログラムとデータを用いて次のページを表示するので、すべてのページで機能します。ただしAutoPagerizeのようにページが継ぎ足されていくのではなく、次のページ全体が今見ているウインドウにロードされます。 Fast Forwardについて詳しいことはFast Forward for q

    nitoyon
    nitoyon 2007/10/25
    OperaネイティブのAutoPagerize風機能の実現方法。 <link rel="next">がなければ、「Next」「次へ」といったリンクを拾っている。意外といけてるらしい。
  • 秋元@サイボウズラボ・プログラマー・ブログ: YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン

    via Ajaxian Yahoo! Developer NetworkからリリースされたYSlowは、Firefox+Firebugのアドオンとして、ページの表示速度の改善点を列挙してくれるというツールだ。 ここのところ、ウェブサイトのパフォーマンス改善で積極的に資料を公開しているYahoo!が、ツールも出してきた。今日のOSConにて発表されたもののようだ。 アドオンをインストールして任意のページを開くと、Firebugのメニューの中にYSlowが追加される。Performanceのタブには、パフォーマンスの点数(下記では「C(71)」)と、13の項目のそれぞれについてパフォーマンス対策がされているかどうかを、A~Fのグレードで表示してくれる。 それぞれの指摘をクリックすると、Yahooの解説ページに飛んで、何がパフォーマンスの障害になっているのか、何をどう直すと改善されるのか、が読め

    秋元@サイボウズラボ・プログラマー・ブログ: YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン
    nitoyon
    nitoyon 2007/07/29
    Firebug のアドオンでパフォーマンスチューニング。
  • モバイルでのXHTMLとCSS

    ちょっと脱線#2 次々と賛同者が! iアプリとかで良かったら喋るよー♪by yoshiori モバイルってなかなか知識得る機会ないから興味あるよ!by tobetchi なんかしゃべりましょうか?むしろ最近の話に弱いですが、準備しますよby tmtysk いきたいby fshin2000 高まる期待(*'∀`)=3ワクワクby cafistar モバイル勉強会興味津々!by clearether モバイル勉強会期待してます。by kaoritter これに対して携帯から全レスするみにたぼ (`・ω・´) シャキーン

    nitoyon
    nitoyon 2007/06/18
    モバイルの XHTML/CSS 仕様とキャリアの対応状況。