今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Apache Solr 5.x／crawler4j／Apache Tikaを使って、HTMLとPDFをクローリングしてインデックスを作る - CLOVER🍀
これまでに、Apache Solrとcrawler4jでHTMLをクローリングしてインデックスするのと、Apache Tikaを使ってPDFを読んでみるエントリを書いてみました。 Apache Solr 5.x＋crawler4jで、Webサイトをクロールしてインデックス化する - CLOVER Apache TikaでPDFを読む - CLOVER 今度は、これらを使ってHTMLとPDFをクローリングしてSolrのインデックスを作ってみたいと思います。 やり方 全体の流れは、以下のようにします。 VMwareのドキュメントサイトの一部（http://info.vmware.com/content/apac_jp_co_techresources）をクローリング HTMLとPDFを対象にする インデックス作成は、いきなりSolrjでドキュメントを追加するのではなく、いったんJSONをファイ
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
HTMLパーサとしてのwkhtmltoimage。js実行後のDOMが取れるよ。 - かれ4
クローラー／スクレイピング Advent Calendar 2014の12月20日です。 タイトルに書いてあることが全てではありますが、いちおうスクレイピングするにあたっての事を。 スクレイピングする時のアプローチとして、大きく2つあると思います。 1つは、完全にテキストとして正規表現で抜き出してくる方法。 もう一つが、HTMLをパースしてXPathやそれに似た(CSSのセレクタ)構文で取得する方法。 今回は後者のパースして取得する方法について書きます。 なぜパースする必要があるのか世の中のHTMLは汚い。CMSを使っていたとしても汚い。 タグがグチャグチャです。 グチャグチャのタグの構造からXPathで取得しようとすると、思った動作をしないことが多々あります。 なので、一旦パースをして、きちんとした構造を使わないと痛い目を見ることがすくなくありません。 どのパーサを選ぶべきなのかHTML
HTML5日本語訳
This Version: https://www.w3.org/TR/2018/SPSD-html5-20180327/ Latest Published Version: http://www.w3.org/TR/html5/ Latest Version of HTML: http://www.w3.org/TR/html/ Latest Editor's Draft of HTML: http://www.w3.org/html/wg/drafts/html/master/ Previous Version: http://www.w3.org/TR/2014/REC-html5-20141028/ Previous Recommendation: http://www.w3.org/TR/1999/REC-html401-19991224/ Editors: WHATWG: Ia
jsoup Java HTML Parser, with best of DOM, CSS, and jquery
jsoup: Java HTML Parser jsoup is a Java library that simplifies working with real-world HTML and XML. It offers an easy-to-use API for URL fetching, data parsing, extraction, and manipulation using DOM API methods, CSS, and xpath selectors. jsoup implements the WHATWG HTML5 specification, and parses HTML to the same DOM as modern browsers. scrape and parse HTML from a URL, file, or string find and
Card — make your credit card better in one line of code
With one line of code.. new Card({ form: 'form', container: '.card'}) You get.. Animations for 4 different card types An intuitive experience for your users Pure CSS, HTML, and Javascript (no images) 100% free and open source No need to change your form Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave everything as is. All pure CSS
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
Sticky Table Headers & Columns - ヘッダー、見出しを固定表示するHTMLテーブルライブラリ MOONGIFT
業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。 さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。 デモです。こういった感じのテーブルがあったとします。 スクロールしてもヘッダーがついてきて常に一番上に固定されます。 続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。 幅が広いテーブルでも右側にスクロールできるので問題ありません。 Sticky Ta
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ブラウザ戻るボタンのキャッシュ制御まとめ（IE、Firefox、Safari） - ポップフライ
今さらネタですが、フォーム送信後に戻るボタンでキャッシュを残さないようにするのに手こずったのでまとめておきます。 メタタグに以下を記述。 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-store"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="-1"> また、body内に以下を記述。 <iframe style="height:0px;width:0px;visibility:hidden" src="about:blank"> this frame prevents back forward cache </iframe>
JavaScript文字列の動的生成におけるエスケープ - 葉っぱ日記
「JavaScript文字列を動的生成する」と一言で言っても、例えば <html>... <script> // HTML内のscript要素内に生成 var s = "ここに動的生成される"; </script> だったり、 <div onclick='foo("ここに動的生成される");'> だったり、 <script src="external.js"></script> // external.js var s = "ここに動的生成される"; だったり、さらに複雑な組み合わせだったりといろんな状況があって、基本的には「JavaScriptとしてのエスケープ」に加えてその外側の(場合によってはネストしている)コンテキストに応じたエスケープが必要、という話。 で、面倒だったら var s = decodeURIComponent( "ここに動的生成される" ); にして、生成する側はU
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
IE8のドキュメントモードやブラウザモードについて - 残像ブログ
先日ローカル環境で作成していたwebページを社内のファイルサーバ（？）にアップしたら、なぜかサーバ上のページだけ表示が崩れるという事があった。 観覧に使用していたのはIE8だったが、どうやらIE8の互換表示によるものだったらしいので自分用に調べた。 参考 IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet Blogs ドキュメント互換性の定義 Internet Explorer 8 の開発者ツールの概要 IE8 の互換表示について - Windows 開発統括部 Blog - Site Home - MSDN Blogs ブラウザの表示はドキュメントモードで決まる ドキュメントモードとは、ページのレンダリング方法（HTMLやCSSの解釈方法）をIEのどのバージョンの方法でやるか指定するもの。 IE8のドキュメントモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
ブラウザのキャッシュを無効にする。また検索エンジンロボットにページ巡回、ページキャッシュさせないようにする。｜プログラムメモ
ブートストラップスターターテンプレート