内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
ariaの意味とその関連用語 | ウェブプラスα
概要 今回は用語の勉強をしました。 先日「aria-hidden=”true”」というタグを使いましたが、areaってなんの略かなというところから関連する用語を調べたので記事としてまとめます。 aria-hiddenのariaについて Accessible Rich Internet Applicationsの略でハンディキャップを持つ人々も不自由なく利用できるように実装されているWebコンテンツやアプリケーションのことです。 WAIによってARIAを実現する各種機能を定義した仕様がWAI-ARIAと呼ばれています。 この仕様で定義された機能を実装することで誰でも使いやすいWebアプリケーションを実装することができます。 以下で定義されていますが機能が多すぎて習得することは非常に困難だとは思いますが、基本だけでも習得することで大幅にアクセシブルにはなることはわかりました。 アクセシブル な
label で input[type="file"] を装飾するな
input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている（しようとしている）人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto
![label で input[type="file"] を装飾するな](https://cdn-ak-scissors.b.st-hatena.com/image/square/abcddc7bb77ffd423240f83b7922f8b6d66776fc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fjF5h3Vm--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Alabel%252520%2525E3%252581%2525A7%252520input%25255Btype%25253D%252522file%252522%25255D%252520%2525E3%252582%252592%2525E8%2525A3%252585%2525E9%2525A3%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adqn%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxMjZlNDcxNWEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
HTMLで「table-layout:fixed」つかってもTableが崩れる場合の対応方法 | 蒼いねずみのお仕事
ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す
Links to cross-origin destinations are unsafe - Chrome for Developers
Links to cross-origin destinations are unsafe Published on Thursday, May 2, 2019 • Updated on Wednesday, August 28, 2019 Translated to: Español, 한국어, 中文, Pусский, 日本語 When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues: The other page may run on the same process as your page. If the other page is running a lot of
【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する
こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 （さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の
HTML 5.1
HTML 5.1はHTML5の最初のマイナーバージョンアップであり、Webアプリ開発に役立つさまざまな機能が追加されている。 連載目次 HTML 5.1とは HTML 5.1*1は2016年11月1日にW3Cによって勧告されたHTMLの言語仕様。 現在ではHTMLの言語仕様自体はWHATWGとW3Cによって策定が進められているが、前者はWebの進化を推進するためのもの（HTML Living Standard）、後者は「HTML Living Standard」を基にW3Cの仕様策定プロセスにのっとった言語仕様の安定的なスナップショットとなる点が異なる*2。最新のWeb標準をフォローするには前者をチェックするのがよい。 HTML 5.1で仕様に追加された機能としては、以下のようなものがある（抜粋）。 <picture>要素、srcset属性： デバイスの画面特性に応じて表示する画像ファイル
イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた | BUN:Log
そもそも採用する機会自体が減っているものの、定期的な更新作業でたまに必要になるイメージマップ。 これまでは Dreamweaver を起動して、作成していました。 ただ、使用頻度の低下を理由に Adobe Creative Cloud から illustrator / Photoshop だけの単体サブスクリプションに切り替えようかと悩んでいた時期でもあり、自分でツールを作ることにしました。 正月休みの空いた時間にひっそり公開していたのですが、自分と同じように「Dreamweaver をスポット的に利用している」という方がいらっしゃったので、改めて記事にまとめてみます。 使い方HTML Imagemap Generator： https://labs.d-s-b.jp/ImagemapGenerator/ 上記 URL へアクセスして、ローカルにある画像ファイルをドラッグ＆ドロップします。
気づいてた？ アップルが美タイポグラフィーで回避した｢ClickDick問題｣
気づいてた？ アップルが美タイポグラフィーで回避した｢ClickDick問題｣2016.03.01 08:00 そうこ クリックディック。 今、アップルが抱える大きな問題と言えば、FBIとのセキュリティを巡る争い。が、その裏で人知れず、浮上し、解決されていた問題がありました。それが｢ClickDick問題｣。ツイッターユーザーのDan Leechさんが、アップルのウェブサイトで、OS Xのページのソースコードを見ていて発覚しました。 Apple wrapped a span around the word “click” to apply more generous letter spacing, so it doesn’t look like “dick.” pic.twitter.com/oiVj3KV5xJ — Dan Leech (@bathtype) February 23, 2
HTMLコーダーにやめてほしい10のこと｜TechRacho by BPS株式会社
システム開発の際、デザインとHTMLコーディングは別会社で! 受け取ったHTMLの組み込みはお願いします! ということが結構あるのですが、その時もらったHTMLを見て、ここはやめてほしいという点をまとめて書いていこうと思います。 インデントがバラバラ プログラム書くときもそうですが、インデントがバラバラだと見づらいです。 ※弊社ではHTML/CSSともにインデントはスペース2つです。 タブ/スペースが混じっている インデントが崩れているときは大体、タブ/スペースが混じってますね。見づらいです。 ※弊社ではタブは使わないようにしています。 JSが意図した動作になっていない/動かない JSまで対応となっているにもかかわらず、動かないというのは論外ですね。 「JSが意図した動作になっていない」これも結構ありました。 例 全選択/全解除というところをチェックすると、下にある項目が全部選択されるとこ
挙動が大事！ JavaScriptでWindow.closeする時のブラウザ別対応まとめ - TechNote
社内用のWebシステムにこれまで設置してなかった「閉じる」ボタンを設置することになった際、少々ブラウザ問題でつまずいた点があった。ググっても最近のwindow.close周辺の情報を見つけることができなかったのでまとめておく。 photo credit: flod via photopin cc １．まず、閉じるボタンの必要性 ２．IE（シェア：57.8%） ３．Firefox（シェア：18.9%） ４．Chrome（シェア：16.0%） ５．safari（シェア：5.6%） ６．まとめ あわせて読みたい ※ちなみにバージョンはie10、firefox26.0、chrome 31、safari 5.1.7です。 １．まず、閉じるボタンの必要性 ブラウザには標準で×（閉じる）ボタンがついているのに、どうして閉じるボタンを自作する必要が生じるのか？ 一般的には、システム終了のタイミングで何らか
UIWebViewで表示中のHTMLコンテンツを取得する - その後のその後
UIWebView や UIWebViewDelegate には、ロードしてきたHTMLの内容を取得するためのプロパティやメソッドが見当たりません。 で、どうすればいいかというと、stringByEvaluatingJavaScriptFromString: メソッドで JavaScript を実行して、現在 UIWebView で表示中のHTMLの内容を取得することができます。 たとえば webViewDidFinishLoad: の中で下記を実行すると、 NSString *head = [self.myWebView stringByEvaluatingJavaScriptFromString: @"document.head.innerHTML"]; HTMLの タグの中身を NSString 型で取得できます。 同様に、 タグの中身は NSString *body = [self
[XCODE] UIWebView上のフォームにObjective-Cから書き込んで、サブミットも行う - YoheiM .NET
[XCODE] UIWebView上のフォームにObjective-Cから書き込んで、サブミットも行う こんにちは、@yoheiMuneです。 以前お仕事でご一緒させて頂いた方からObjective-Cに関する質問を頂いて、実装する機会があったので、掲題の件についてブログを書きたいと思います。 今回頂いた質問内容 以下のようなご質問を頂きました。 ネイティブアプリ内に内部的に表示しているUIWebViewで、ログインフォームなどのフォームに、Objective-Cからログイン名やパスワードなどを書き込んでサブミットまでする、とかって実現できる？ という内容でした。UIWebViewではJSを実行出来るので、その仕組みを使えばいい感じに実現出来そうだなぁということで、実際に試してみました。 今回のブログではその実装を紹介する内容となります。 まずは、UIWebView上で表示するフォーム内容
![[XCODE] UIWebView上のフォームにObjective-Cから書き込んで、サブミットも行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53ab8ac461d3052d7882176e77f9da56f1b9d955/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F251.jpg)
Big Sky :: html をコマンドラインからパースするなら pup が便利
2014年でも html を解析してゴニョゴニョするなんて要件はまだまだある訳で、そんな時に便利なのが pup というコマンドです。 EricChiang/pup - GitHub README.md pup pup is a command line tool for processing HTML. It reads from stdin, prints to stdout,... https://github.com/EricChiang/pup 通常、こういったツールは perl や ruby、python 等で提供されランタイムがインストールされていない環境で動かすのはちょっとした手間が発生していました。しかし pup ならば golang で出来ているのでバイナリ1つあれば動かせます。 使い方は、例えばこのサイトのパーマリンクのHTMLを得たいならば curl -s http:
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
nico0927.net
nico0927.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
VimでMarkdown出力してみた - Archiva
Make a note of it: Web tech, montaineering, and so on. 素の状態でもカッコ良いテキスト記法、Markdownを実用するアレコレ。あるいは如何にして私はMarkdown形式の実用化に至ったか。 Markdownに関しては前回のSugamoでも触れたけれど、まあかっこ良い「はてな記法」と考えて差し支えない。Vimで使うと、HTMLほど気合い入れなくても色分け表示できるし、ちょっとしたメモ書きやブログの下書きとして重宝してます。HTML直書きも許容するゆるーい記法ってのもポイント高いね そして俺は思った。これ使って「gf」していけば、VimWiki要らないんじゃね？ まずは王道から Hack #52: Markdown形式の文書を書く Hack #7: 編集中ファイルを実行し、結果を表示したままにする ここら辺を参考にゴニョゴニョやってみたの
Internet Explorer 11におけるtitle属性 - Unreviewed
お断り：この記事はInternet Explorer Advent Calendar 2013、あるいはYet Another Internet Explorer Advent Calendar 2013のゲリラ投稿、ではありません。 Internet Explorer 9以降といえば、HTML5やCSS、SVGといったものへの対応が注目されがちですが、他のブラウザーが長い間対応してこなかった基礎的な部分への対応も進んでいます。この記事ではInternet Explorer 11（IE11）におけるtitle属性について書きます*1。 title属性 HTMLにはtitle属性という謎の属性があります。多くのブラウザーではtitle属性を設定した要素にマウスを重ねると値をツールチップとして表示します。しかし、ほとんどのブラウザーは、キーボードだけを使ってtitle属性を表示する方法をユーザ
SyntaxHighlighterでソースを読みやすく掲載する方法 [ホームページ作成] All About
HTMLやCSS、JavaScript、PHPなど様々な言語のソースコードを、ウェブ上で読みやすく表示してくれる「SyntaxHighlighter」というツールがあります。JavaScriptとCSSで作られており、右図のように、行番号を付けて綺麗に装飾し、ソースを見やすく表示してくれます。また、ソース部分だけを一括コピーしやすくする機能もあり、便利です。 この「SyntaxHighlighter」は、IT系の技術解説サイトなどでもよく使われているので、目にしたことのある方々も多いのではないでしょうか。標準の配色（テーマ）のほか、右図のように様々な配色が用意されており、好みのデザインで表示できます。CSSを編集すれば、自分で配色セットを作ることもできます。 今回は、ウェブ上でのソース表示に便利な「SyntaxHighlighter」について、そのメリットと使い方をご紹介致します。 Syn
![SyntaxHighlighterでソースを読みやすく掲載する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
