タグ

htmlに関するgan2のブックマーク (15)

  • 簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life

    EmacsWiki: Zen Codingより。 ZenCoding-modeというHTMLを簡単に入力できるモードがある。 これを活用する事で、Emacs上でタグを簡単な記法で書いた後、C-とする事でHTMLに展開する事が可能になる。 このメリットとして、文字入力が少なくなる上に、タグの閉じ忘れもなくなるので早くて正確にHTMLが生成できる。 このHTML化できるというのが重要。Hamlのような独自記法だと、プログラマーに取っては楽に記述、編集ができるという便利なフォーマットなのだが、デザイナーにとっては、使いなれたデザインソフトが使えないという、非常に不便なフォーマット、という事になる。 しかし、ZenCodingだと最終的にはHTMLに変換されるので、プログラマは簡単に記述できる。デザイナーはあとで楽に編集できるという、何方にもメリットとなる。 サンプル どのような入力で、どのように

  • HTMLDocument の動的な作成: Days on the Moon

    ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre

  • HTML のマークアップが楽になる(?) html-key-chord-mode を作った。 - 日々、とんは語る。

    以前日記で、HTMLをすんごい速さで書ける Emacs のモードの構想。とか書いたのですが、とりあえず形になったので紹介します。僕のEmacsモード(正確にはマイナーモードですが)処女作です。 公開場所 これまた初めて GitHub 使いました。 html-key-chord-mode - GitHub みんないじいじしたりアドバイスください。 想定している使い方。 メジャーモードじゃないのは、色分けとか、インデントとか、そういうのは他の昔からあるモードに任せてしまおうと言う考えです。 んでもって、一から文書構造を考える場合よりも、既にある程度構造が決まっていて、そこに文章を流し込む場合のマークアップを最強に高速に行なうための機能を提供するという感じです。 インストール。 elisp のインストールを一から書こうかと思ったのですが、それだけで記事ひとつになりそうだったので、涙を飲んで省略し

    HTML のマークアップが楽になる(?) html-key-chord-mode を作った。 - 日々、とんは語る。
  • emacsでHTMLを編集するモードを比較してみた。 - shortcut

    webのいろんなデザインを生業にしている人間のちょっとしたTipsだったりメモだったり。 webのフロント技術について書く事が多いです。 もう5年以上使っているにも関わらず前々使い方を知らなかったりするemacsですが、ようやくきちんと勉強しようと言う気になったので調べてみました。 いままでも、HTMLとかCSSを書くときにもっとemacs使おうと思いつつ、テキストエディタのHTML編集モードやDreamWeaverといった分かりやすいエディタにフラフラ逃げていた訳ですが、今年はモヒカン度合いを高めようと思い、積極的に使って行こうと思います。 なぜviでないかというのはおいておいて。 という訳で、まずはHTMLemacsでHTMLを書くためのモードはいくつかあり、 html-mode html-helper-mode psgml-mode(xml-mode or sgml-mod

  • Win、Mac、HTMLでの特殊記号文字の入力方法をまとめたチートシート

    「©(コピーライト)」「€(ユーロ)」「π(パイ)」「µ(マイクロ)」「∞(無限大)」など特殊記号文字を入力する際の、WindowsMac環境でのキーボードの入力方法やHTMLでの入力方法をまとめたPDFファイルを紹介します。 Special Character Shortcuts Special Character Shortcutsの各特殊記号文字は、アクセントのある文字、数学記号、シンボル、マーク、記号、QuarkXPress用とカテゴリごとにまとめられています。

  • クリーンなHTML、CSSとjQueryで作るFlickrみたいなメニュー « moto-mono

  • HTMLを小綺麗にするための4つの方法 | エンタープライズ | マイコミジャーナル

    HTMLを規約にそった記述にすることは最低条件として要求されることだが、最後の状態ではない。まずHTMLを規約にそった記述にし、さらに次の段階でアクセサビリティに対応できる形式であったり、必要になる情報を追加したり、もっと小ざっぱりとさせてブラッシュアップさせた方がいい。 Kevin Yank氏がSitePointにアップした4 Easy Ways To Spruce Up Your HTML Markupはその点でかなり興味深いドキュメントだ。同氏はこれまでの経験からHTMLドキュメントを小ざっぱりとさせるための4つの方法を紹介している。要約すると次のとおり。 h1、h2、 h3などのヘッダ要素を厳密に階層化する。h2のあとでh3を飛ばしてh4をつけるといったことをしない。ヘッダ要素による階層化はFirefoxのエクステンションWeb Developerを使うとわかりやすい。Inform

    gan2
    gan2 2008/07/05
    「文書内リンクにname属性ではなくid属性を使う。」など
  • クロスブラウザのためのHTML/CSSのテクニック集 | コリス

    anthonyshortのエントリーから、クロスブラウザのためのHTMLCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ

    クロスブラウザのためのHTML/CSSのテクニック集 | コリス
    gan2
    gan2 2008/06/30
  • URLなど、長い英字を折り返して表示する方法 - kaeruspoon

    webサイトを作っているとよく出会う問題です。日語は指定された幅を越えると勝手に行を折り返してくれるけど、URLみたいに長い英文は折り返さずに指定した幅を越えて右側に伸びてしまいます。これはカッコ悪いし読みにくい。 一番簡単な解決方法は、一文字ごとに </wbr>タグを入れてあげるというもの。Rubyで書くなら

    gan2
    gan2 2008/05/23
    一文字ごとに <wbr /> を付ける
  • 新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife

    08年6月4日追記: コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記: contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ!じょぐ!!!すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう

    新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife
  • 新規サイト制作セット(CSSライブラリ+基本フォルダ構造+HTMLテンプレート)、一式zipでダウンロードできるようにしました

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

  • Mozilla Developer Center

    オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。 ウェブ開発者ガイド ウェブ開発者ガイドは、ウェブ技術を実際に使用して、やりたいことや必要なことを実現するために役立つハウツーコンテンツを提供しています。 ウェブ開発者向けチュートリアル HTMLCSSJavaScript、Web API の学習を段階的に進めるためのチュートリアルです。 アクセシビリティ ウェブサイトを使用する人に何らかの制約があっても、できるだけ多くの人が使用できるようにすることです。 パフォーマンス コンテンツをできるだけ早く利用できるように、操作できるようにすることです。 セキュリティ データ漏洩やデータ盗難、サイドチャンネル攻撃、クロスサイトスクリプティング、コンテンツインジェク

    Mozilla Developer Center
    gan2
    gan2 2007/07/08
    Firefoxのドキュメント。色々のってる。
  • 【特集】業務で使える! 無料Webサイト作成ツール集(1/3) - @IT

    上記ツールの詳細や、ほかのさまざまな無料Webサイト作成ツールについて知りたい読者は稿に併せて、連載「どこまでできる? 無料ツールでWebサイト作成」もぜひご参照ください。 Webサイト開発はテキストエディタだけで行えるのか? ■ 今後もWebサイト開発にHTMLコーディングは必要なのか? Web標準にのっとった制作、CSSによるレイアウト、Ajaxなど、HTMLCSSJavaScriptなどで実現可能なことは意外と多いものだ。その中でも、特にAjaxはこれまでシステム開発をしてきたプログラマが得意とする部分だろうし、世の中のデザイナーには、デザインだけではなくこれからはHTML制作に進もうと考えている人もいることだろう。 こういったことから、たとえ世の中がリッチなコンテンツ、Web 2.0、CMSという方向に進んでいったとしても、HTMLベースのWebサイト構築というものは、尽きる

  • Greenbear Laboratory - Hpricot Showcase-Ja

    GitHubindexHello source: index.md View on github | Report issue Generated by middleman 3.1.6. Powered by Ruby 2.2.2.

  • HTML/CSSの構文チェックができる便利な無料ツール『bkhvalid』 | P O P * P O P

    窓の杜で紹介されていた「bkhvalid」を使ってみました。HTML/CSSの一括構文チェックができるツールです。 » 窓の杜 – 【NEWS】ローカルやWebサイト上の複数HTML/CSSを一括して文法チェック「bkhvalid」 ひとつ上のウェブサイトつくりを目指している方には便利ではないでしょうか。正しいコードで誰でも更新できるようなサイトを目指したいですよね。 以下に使い方を簡単にご紹介。 ↑ 起動したらチェックしたいファイルを追加していきます。フォルダを指定して追加したり、ドラッグ&ドロップで追加可能です。 ↑ 全部追加したら右上のアイコンをクリック。解析開始です。 ↑ 下に警告がずらずらと。そこをクリックすると該当ファイルにジャンプ、その場で編集できます。 ↑ 警告されたい項目を細かく指定できます。 ↑ 画面は縦に並べることも可能。 自分が作ったサイトなどをチェックしてみると次

    HTML/CSSの構文チェックができる便利な無料ツール『bkhvalid』 | P O P * P O P
  • 1