HTML ReferenceHTML Reference is free and always will be! Please whitelist us in your ad blocker. Thank you! A free guide to HTML Learn by example: htmlreference.io is a free guide to HTML. It features all elements and attributes.
Reactでaタグの中にtarget='_blank'を書いたらESLintに怒られた話 - Qiita
経緯 適当に別タブを開くリンクをjsxで書いたら eslint-plugin-react の jsx-no-target-blank で怒られいました。 ほんとに知らなかったし、気軽にできちゃうからやばいな。っと思ったのでメモしておきます。 import React from 'react'; import ReactDOM from 'react-dom'; class Index extends React.Component { render() { return ( <a href="http://example.com" target="_blank" > アンカーリンク </a> ); } } ReactDOM.render( <Index />, document.getElementById('root') );
role 属性を正しく設定してアクセシビリティを高める
role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application
OverReact - React File & QR Generator, Social Media Integration
The React File Generator Wireframe React components, download starter files with one click and create an app to stream posts from social media platforms (Twitter, etc.). This tool not only allows users to wireframe React components and stream posts from social platforms like Twitter, but it also integrates seamlessly with a generator to create QR code linking directly to the developed applications
なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes
注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTMLタグ/テキスト・フォントタグ/削除に関連する情報を示す - TAG index
変更の日時は、以下の形式で指定します。 datetime="2008-08-10T00:00:00+09:00" YYYY-MM-DDThh:mm:ssTZD YYYY = 年 MM = 月 DD = 日 T = （固定） hh = 時 mm = 分 ss = 秒 TZD = +09:00 （日本時間の場合） 日時を日本時間で示す場合は、TZD（タイムゾーン）の部分に+09:00と記述します。また、時・分・秒が不明の場合は、hh:mm:ssの部分に00:00:00と記述しておきます。 この2つの属性で示された情報は、例えばFirefoxなどでは要素のプロパティで以下のように表示されます。 （Firefox 2 の表示例） Firefox 3では要素のプロパティを表示できなくなってしまったようです。 使用例 <p><del cite="http://www.example.com/" dat
spanタグの幅を指定してすることはできますか？ - ----------<divstyle="margin-left:20px;... - Yahoo!知恵袋
・・・・・当たり前のことです・・・・。 HTMLでのspanはインライン要素です・・・・・・。 CSSでspan要素に適用されるdisplayプロパティは、初期値inlineです。 CSSでインラインボックスには、 幅と高さの概念はありません。 W3Cで明確に定義されております。 インラインボックスには、 行内ボックスがあり、ここには内容域＋パディング＋ボーダーが適用されます（背景が適用される部分。） しかし、幅と高さの概念はありません。ブロックボックスのパディングとボーダーと違い、高さにならない。 そのため隣の行に割り込むように表示される。 その外にある、インラインボックスには、左右マージン、line-heightが適用されてます。 インラインボックスには幅と高さの概念はないですが、インライン要素はブロック要素で囲まれていると思うので、そのブロックボックスのline-heightがインラ
DOCTYPE はなぜあるのか - 若葉もすなる☆日記というもの
DOCTYPE 宣言はなぜ作られたのですかという質問がありました。 HTML 文書の先頭には必ず DOCTYPE がなければならないとされています。しかし確かに DOCTYPE は一見何の役割も果たしておらず、無駄な行にしか見えません。なぜそんな DOCTYPE が作られ、今も必要とされているのかを理解するためには、少し昔の話をする必要があります。 SGML になりたかった HTML HTML は元々 SGML と呼ばれるマーク付け言語を参考に作られました。正確には SGML はマーク付け言語ではなく、マーク付け言語を定義するための枠組み、メタマーク付け言語とでも言うべきもので、どのような要素や属性、タグや実体参照を組み合わせてマーク付け言語を構成するかを SGML の規定に従って記述することになっていました。これが文書型定義 (DTD) であり、 DTD を宣言・参照するのが DOCTY
既存のHTMLやURLからMarkdownへ変換·html2text MOONGIFT
html2textはHTMLをMarkdownフォーマットに変換するPythonスクリプトです。 html2textを使うと普段見ているWebサイトや既存のHTMLページをMarkdownフォーマットに変換できます。Markdownの練習にも良さそうです。 実行しました。引数にURLを渡すだけの簡単実行。確かにMarkdownのテキストが出力されています。 ちょっと余計な情報も出ていますが、きちんとテキスト化されています。 コマンドオプションです。画像やリンクを除いたりすることもできます。 html2textを使うとHTMLをシンプルなテキストにしてくれるのはもとより、Markdown記法であるために可逆的にHTMLにすることもできます（class指定などは飛んでいるのでデザインは戻りませんが）。HTMLで書いてしまったためにメンテナンス性が悪くなった文書を再利用したりするのにも使えそうで
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
yebo blog: Googleの404ページ
2011/11/28 Googleの404ページ Excuperoで、Googleの404ページ (URL: http://www.google.com/whats-up-with-the-source-on-the-404-page)のソースは一見すると風変わりだと指摘されている[hackernews]。HTML5で書かれており、<head>や<body>タグが無く、meta、title、style、anchorなどはタグ属性の値に引用符が無いし、<img>タグはself-closeしていない上、<html>や全ての<p>タグが終了タグが無い。これはページロードのスピードを上げるためだろうとの事。そして、驚くことに、W3C Validatorが適正証明を与えるという点だという。コメントでは、Paul Irishが「The Primitives of the HTML5 Foundatio
<img src=""/> の挙動 - hogehoge @teramako
firefox4,5における空のimgタグの挙動 - 技術記録 firefox4か5で、 <img src=""/> みたいな感じで、srcを空にしたimgタグを書いてると、imgタグが現在開いているページ自体を読み込むようだ。 firefox4,5における空のimgタグの挙動 - 技術記録 という問題。気になったのでローカルのWebサーバで検証してみた。 何が気になったか言うと、 で Return the img element to the unavailable state. If an instance of the fetching algorithm is still running for this element, then abort that algorithm, discarding any pending tasks generated by that algori
にひりずむ::しんぷる - HTML::Filter::Callbacks の紹介
追記あり Yuji Shimada / HTML-Filter-Callbacks - search.cpan.org charsbar さんにパッチを送ったら、「commit bit 付けたから自分でリリースしてちょ」って言われたので、先ほど 0.07 をリリースしました。 それはさておき、このモジュールについての情報があんまり世の中に無いようなので、いい機会なので紹介しようかと思います。 このモジュールを使えば 不要なタグの除去 url の変換 属性の追加、削除 text の置き換え などなどが簡単にできます。 似たようなモジュールとして、HTML::Scrubber というのが昔からあって、よく使われてますが、長年メンテされていなかったり*1、インターフェースがとてもわかりにくかったり*2して、今から使うのは気が引けますが、HTML::Filter::Callbacks は大変直感的
＆nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)
いかがでしょう？ WEBブラウザにもよりますが、結構実際の見た目も違うように思います。 で、冒頭の「半角スペースと 」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。 「 を半角スペース (0x20) に置き換える」プログラムがあるように、「 を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。 冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした おまけとして、 を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。 use HTML::Entities; use Encode; use Data::Dumpe
【コラム】攻略! ツール・ド・プログラミング (55) 直感的なHTMLコードの生成が可能な「renderSnake」 | エンタープライズ | マイコミジャーナル
renderSnakeとは 「renderSnake」は、JavaプログラムでHTMLコードを生成するためのライブラリである。複雑な手続きを必要とせずに、単純メソッド呼び出しだけで直感的にタグを出力できることや、少ないメモリ使用量で軽量に動作するため様々なアプリケーションに組み込んで利用できることなどが大きな特徴。Webアプリケーション開発での利用も積極的にサポートしており、ServletやJSP、Spring MVC、Google Guiceなどとの連携にも対応している他、フォームからの入力処理を簡略化する機能などが用意されている。 renderSnakeはApache License Version 2.0にもとづいて公開されており、Google Codeに開設されたプロジェクトサイトよりダウンロードすることができる。本稿執筆時点における最新版はバージョン1.1。HTML5で追加された
HTMLとよく使うJSの雛形 - hitode909の日記
ページ1枚で動くようなちょっとしたアプリケーションを作るときに，最近はjQueryとJSDeferredと960.cssをロードしてから何か作ることが多くて，毎回コピーしてきてたけど，めんどうなので，スクリプトを実行すると雛形を作ってくれるようにした． https://gist.github.com/1024417 アプリケーション名を引数にbuilder.rbを実行すると，雛形みたいなのを作ってくれる． % ruby ~/co/gist/1024417/builder.rb test_app test_app created % tree test_app test_app ├── 960.css ├── index.html ├── jquery-1.6.1.min.js ├── jsdeferred.js ├── reset.css ├── test_app.coffee ├── t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
HTML 5: Is it <br>, <br/>, or <br />?
