編集中のHTML+CSSをリアルタイムに共有できるオンラインサービス -Cssizer発行されたURLを元に、他の人とリアルタイムに編集中のHTML+CSSを共有できるオンラインサービスを紹介します。 共有の状態は、Read/Write、Read Onlyを選択できます。 Cssizer [ad#ad-2] CssizerはオンラインのCSSのSandboxのようなもので、CSSとHTMLのコードを編集し、リアルタイムに共有できます。 画面は左が編集、右がプレビューです。
mPDF
A PHP class to generate PDF files from HTML with Unicode/UTF-8 and CJK supportA PHP class to generate PDF files from HTML with Unicode/UTF-8 and CJK support Updated 2/3/2011 Version 5.1 has been released (2/3/11) which reads directly from .ttf TrueType font files (see post in the Forum for more information) Change of domain/URLs I have recently moved the domain for this mPDF site and the Forum. M
要注目！HTMLからPDFを生成するPHPライブラリ·mPDF MOONGIFT
Webシステムを開発する際に問題になりやすいのが帳票やレポートの扱いだ。そのレイアウトを含めて柔軟に変更できる必要があり、それでいて開発工数を低くする必要がある。PDFはHTMLとは異なるので、柔軟なレイアウト設計を可能にするライブラリはとても貴重だ。 元HTMLファイル そう、レイアウトがHTMLと異なるのが問題なのだ。それを一緒にできれば、どれだけ幸せになれるだろう。 今回紹介するオープンソース・ソフトウェアはmPDF、HTMLからPDFを生成するソフトウェアだ。 mPDFは現状では日本語には対応していないが、UTF-8に対応しているのでフォントや設定を行えば問題なく表示できると思われる。実際アラビア語も表示できている。HTMLをテンプレートとしてPDFを生成するのが特徴だ。 PDF化されたファイル 画像や外部リンク、CSSによるレイアウト設計をある程度PDFとして実現してくれる。テー
jQuery Mobile と jQTouch と Sencha Touch の事など - 牌語備忘録 -pygo
結果から言うと取り敢えず jQuery Mobile でやって、物足りないなら Sencha Touch でって感じかな jQuery Mobile jQuery Mobile jQuery Mobile の紹介 Good 本家jQueryから公式リリース 将来期待できる（気がする） 比較的導入の敷居が低そう MITライセンス 多くのモバイル環境、PCのブラウザで表示できる。(SafariやFirefoxなど) Bad まだbetaで不安定？ 重い？ デザインのカスタムしずらそう（将来改善される？） カスタム色はできそうだけど jQMのカスタムテーマについて - TECHNOPOLIS-テクノポリス- jQTouchみたいにAppleテーマあったらいいかも。 jQTouch jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile we
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
HTML5でWebアプリ！マークアップエンジニアがつくるToDo管理アプリ
「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。 はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。 今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。 話の内容は、最近なにかと目にする「HTML5」について。 その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。 HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。 これを利用して
長い単語やURLの改行をコントロールするword-wrapプロパティ - builder by ZDNet Japan
欧文のテキストは半角スペースの位置で改行される。そのため、半角スペースが入らない長い単語は途中で改行されることがない。レイアウトスペースの横幅が狭い場合、長い単語ははみ出してしまい、レイアウトを崩す原因となる。 とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長いURLを表記した場合だ。 URLは半角スペースを含まないので、ブラウザにとっては1つの長い単語と同じ扱いになる。特に、ブログなどのコメントで長いURLを記述されると、制作者の予期しないところでレイアウトが崩れる原因になってしまう。 そこで今回は、ブラウザごとのURLの改行処理の違いを確認して、長い単語やURLの改行をコントロールするword-wrapプロパティを紹介したい。 ブラウザごとのURLの改行処理 次のサンプルは、横幅が300ピクセルのボックス内に長い単語やUR
label のススメ | d-spica
label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて，ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。 label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが
HTMLの特殊文字 ： IT用語辞典
HTMLの文字実体参照 ASCII文字コード 記号・特殊キーの読み方 ギリシャ文字・キリル文字 HTMLで使われる文字実体参照の表記一覧です。OSやWebブラウザの種類によって一部正しく表示できない場合があります。 一般的な記号など 字実体参照数値参照名称・解説 &&&アンパサンド ¦¦¦破断縦線 µµµマイクロ記号 ‰‰‰パーミル ¤¤¤一般通貨記号 €€€ユーロ記号 ¢¢¢セント記号 £££ポンド記号 ¥¥¥円記号 ©©©著作権記号 ®®®登録商標記号 ™™™商標記号 ↑↑↑上向き矢印 →→→
HTML構造を視覚的に超分かりやすく出来るスクリプト「stylizator」:phpspot開発日誌
Corunet. El blog Automatic CSS: The stylizator We’re going to write a simple script that takes an HTML file as input and gives us two things: HTML構造を視覚的に超分かりやすく出来るスクリプト「stylizator」。 stylizatorを使えば、例えば、次の図の左のようなHTMLがあったとすると、図の右のような階層的で、構造が分かりやすいHTMLに変換することが出来ます。 変換されたHTMLのブロック要素には、次のようにブロックのID要素が赤の点線で分かりやすく表示されます。 利用には、Perl環境が必要です(ActivePerlでもOK)。 実行は、次のようにコマンドラインで行います。 perl stylizator.pl <変換を行いたいH
最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet
- 全てのDOMノードを列挙する - ノードは次のように文字列化される。 0: /html[0]/body[0]/div 1: /html[0]/body[0]/div[0]/div 2: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 3: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 4: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 5: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 直前の階層までは添え字つき、最後のノードはタグ名のみにする。 class名、id名は排除する。各々のサイトのルールで記述されたruleよりも タグのネスト構造の方が変化に強いし機械的に抽出しやすいのではないか？ 出現回数でソートする。li要素2-5はループであることが分か
HTMLの特殊文字【Web関連一般】 / Studio Rikiy
特殊文字とは、別名フォント、文字コードの違いなどにより表示できない一部の文字、いわゆる機種依存文字のことだ。 ブラウザではこれを&で始まり;で終わる文字列を使うことよって表示が可能である。有名なところでは&（アンパサンド）、 （スペース）などがそれにあたるが、使われているのはこういった一部の文字のみで、その他はその存在すら知られていない。 一体どれくらいの種類の特殊文字があるのかとWeb上で調べてみたのだが満足いくページを見つけることができなかったため、自分でまとめてみた。 調べてみると相当な種類があるのだが、これらが一般的に浸透していない理由の1つとしては特殊文字も万能ではなく、UAやフォントの種類によって表示できないものが数多くあるからだろう。だがその中でもほとんどの標準環境では表示可能で、あると便利なものも数多くあるのでそういうものについては積極的に使うべきだとRi
Web デザイナーが知っておくと良いかもしれない DTP 脳
2006-12-16T04:05:56+09:00 よく聞く意見として、Web デザイナーは DTP 的感覚を捨てるべきだ。といったものがありますが、僕は一概にそうは言えないと思っています。もちろん Web は紙媒体と違う点が多く、表示が環境に依存する部分があるので考え方に変化の必要な部分もありますが、それらは脱するというよりは、むしろ理解を深めていくべき点なのかもしれません。 ならば、どういった意識を持つのかというと、Web も DTP と同じように、文書に意味付け、構造化を行うという共通点があります。 HTML は文書に意味付けを行う言語 そもそも HTML とはなんぞや。という質問に『文書に意味付けを行う言語』という解答をすることがあります。例えばその文書の中で一番大きい見出しには h1 を。その一番大きい見出しの次に大きい見出しには h2 を。という風に単なるテキストに意味付けを行
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (25) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (402) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (42) TypeScript (1) Java (26) Perl (6) PHP (14) Ruby (11) Python (14) Go言語
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
30 HTML Best Practices for Beginners | Envato Tuts+
http://mh.at-g.net/memo/mh0028.htm
HTMLPlayGround: Online HTML/CSS/JS Editor with Live Preview