:user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va
AdobeXDを使って開発したら地獄を見た件について - Qiita
AdobeXDとは Adobe XDは、共同作業を促進するパワフルで使いやすいプラットフォーム。webサイトやモバイルアプリ、音声インターフェイス、ゲームなどのデザイン制作をチーム全体でスムーズにおこなうことができます。 引用：https://www.adobe.com/jp/products/xd.html?sdid=19SCDRPN&mv=search&ef_id=CjwKCAiAjMHwBRAVEiwAzdLWGAVvSherY4n7ES1kvKK6kgpKy_Fb3dgE0USmjhwRWQsSpvJL-GEpgRoCGWIQAvD_BwE:G:s&s_kwcid=AL!3085!3!380840905165!e!!g!!adobexd 簡単に言うと、 GUI操作でWebサイトを作れちゃう という優れものです。 なにをしたら地獄を見たのか 登場人物は三人。僕とH君とO君。 文化祭で
IE11のドキュメントモードのフローチャート
Internet Explorer 11には過去のIEとの後方互換性のために、それぞれのレンダリングのルールを切り替えるための仕組みとして「ドキュメントモード」という機能を搭載しています。 このドキュメントモードは、ツールメニューの互換表示設定、もしくはF12開発者ツールのエミュレーションから指定することができますが、一般的なユーザーが自ら切り替えることはあまりないでしょう。ほとんどの場合は、Webの提供者が指定されることになると思いますが、その場合はHTMLのドキュメント内、もしくは、WebサーバーのHTTPレスポンスヘッダにX-UA-Compatibleで指定します。 [caption id="attachment_192" align="aligncenter" width="879"] 日本マイクロソフトのWebサイトでのX-UA-Compatibleの指定[/caption] ド
アクセシビリティの専門家の言うことは唯一の正解ではない | 水無月ばけらのえび日記
公開: 2017年10月25日22時5分頃 11月発売予定の「インクルーシブHTML+CSS&JavaScript - 多様なユーザーニーズに応えるフロントエンドデザインパターン (www.amazon.co.jp)」という書籍には、こんな一節があります。 選択肢は、視覚的にも非視覚的にもユーザーにわかりやすく表示することが重要です。音声によるアクセシビリティの専門家は違うことを言っているかもしれませんが、実際のところ、このやり方は間違っている、このやり方でなければならない、というようなことは言えません。何が最も効果的なソリューションなのか考えることは、みなさんのデザイナーとしての判断になります。 正直ちょっと何を言っているのか分かりにくいかもしれませんが、アクセシビリティを向上させるための方法は一つではないということ、特に、専門家の言っていることが唯一の正解ではない、ということを言ってい
W3C HTML 5.0仕様とそれ以前の(X)HTML仕様に対する廃止勧告の提案 - 水底の血
今年の春に書いたObsolete Recommendationという話に関して、(X)HTMLに適用してはどうかという提案をW3C Advisory Committee Representativesが受理したとアナウンスされている。（提案したのはどうやらWeb Platform WGの模様。該当issueがGitHubにある。） 廃止勧告（Obsolete Recommendations）として提案されている勧告は、HTML 3.2、HTML 4.01、HTML 5.0、XHTML 1.0、XHTML 1.1を含む、次の17の勧告。 HTML 3.2 HTML 4.0 HTML 4.0 Revised HTML 4.01 HTML 5.0 XHTML Basic XHTML 1.0 Modularization of XHTML Module Based XHTML XHTML 1.0
「HTMLのcolspanで、セルの幅が意図したとおりに一定の幅をとってくれない」という質問です。…
「HTMLのcolspanで、セルの幅が意図したとおりに一定の幅をとってくれない」という質問です。 以下のHTMLだと、意図どおりにどのセルもだいたい同じ幅で表示されるのに(上図)、 先頭の1行(xのセル)を削除すると、とたんにBのセル幅が縮まる(下図)のを回避する方法を教えていただけないでしょうか。 <td>タグで1つ1つに広さを指定する方法以外でお願いいたします。 ※なお回答者が過去の質問の様子からポイントゲッター的であると判断した場合、回答をオープンしません。あしからずご了承ください。 <html> <head></head> <body> <table border=1 width=50%> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td rowspan=3>A</td> <td
ＪＲ新駅名称は「西熊本駅」 熊本－川尻間
メインコンテンツに移動 購読申し込み ７日間無料お試し close QRコードリーダーを QRコード読み込み結果 `{f�,V P�k�,V 0�;�,V �h��,V 熊日からのお知らせ くまもとジュニア プログラミングアワード 2023 第71回 球磨一周市町村対抗熊日駅伝 第64回 熊日書道展《作品募集》 熊日情報文化懇話会 12日に例会 「これからの経済と私たちの暮らし」 経済ジャーナリスト・荻原博子さん 熊本善銀 「歳末助け合い募金」のお願い 28日まで受け付け ホーム ニュース トップ 熊本 全国 エンタメ 動画 地方選速報 天気・気象 防災・災害 トップニュース 甘～くなーれ!! 干し柿づくり最盛期 熊本県宇城市 年末年始の贈答向け バンペイユ風呂「お肌すべすべ」 熊本・日奈久温泉で1月末まで 八代農業高（八代市境町） 専門知識と技術、楽しく身につける【くまもと高校図鑑】 献
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
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
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance
HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance First Draft of HTML 5.1 Offers Glimpse at Next Round of Standardization Read below what W3C Members have to say about HTML5 17 December 2012 — The World Wide Web Consortium (W3C) published today the complete definition of the HTML5 and Canvas 2D specifications. Though not yet W3C standards, these specifications are no
『IE6とIE7でcolspanがきかない』
IE6とIE7でcolspanがきかないという現象に久々に出会ってしまった。 確かcolspanで結合していれば、横幅を個別に指定してもきかないというバグは頭に入っていたが、colspan自体がきかないとは思っていなかったので少々焦ってしまった。 調べてみると、td自体にwidthでpx指定した時に起きるバグのようである。 pxではなく％で指定すれば、OK。 これもIEのバグなんでしょうねぇ。 IEはバグが多くて嫌になります。
深圳普好信息技术有限公司
X8.cn ￥52888 秀吧/小8 8P.cn ￥36888 八品/8铺 5Z.Net ￥45888 五洲 6i.Net ￥36888 乐爱 7H.com.cn ￥8888 七禾 8H.com.cn ￥8888 8号 E51.com ￥28888 医无忧 51P.com ￥48888 我要拍 C7C.com ￥28888 c7c 3BW.com ￥48888 3百万 BW1.com ￥23888 百万 82W.com ￥48888 八二网 82P.com ￥38888 P=PJ 81P.com ￥38888 P=PJ 81K.com ￥38888 K=K3 65D.com ￥38888 D=DF 59D.com ￥38888 D=DF U76.com ￥38888 U=游戏 U71.com ￥25888 游企业 U91.com ￥28888 91系 W61.com ￥38888 W=WN
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メニューボタンを span だけで実装するのは良くないのでやめた話
Only Firefox ignoring 100% height with display: table-cell
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
