Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

タグ

関連タグで絞り込む (39)

タグの絞り込みを解除

htmlに関するlovelyのブックマーク (65)

  • :user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス

    入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va

    :user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
    • 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君。文化祭で

      AdobeXDを使って開発したら地獄を見た件について - Qiita
      lovely
      lovely2020/02/04非公開
      便利なツール=知らなくても作れる ではないんだよな……
      • 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] ド

        IE11のドキュメントモードのフローチャート
        • アクセシビリティの専門家の言うことは唯一の正解ではない | 水無月ばけらのえび日記

          公開: 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.2HTML 4.0HTML 4.0 RevisedHTML 4.01HTML 5.0 XHTML Basic XHTML 1.0 Modularization of XHTML Module Based XHTML XHTML 1.0

            W3C HTML 5.0仕様とそれ以前の(X)HTML仕様に対する廃止勧告の提案 - 水底の血
            • 「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

              「HTMLのcolspanで、セルの幅が意図したとおりに一定の幅をとってくれない」という質問です。…
              • メニューボタンを span だけで実装するのは良くないのでやめた話

                旧ブログの画面左上にあるボタンをbuttonではなくspanで書いており、アクセシビリティの観点から問題があるとアドバイスいただき変更しました。ということで、自分への戒めも込め、経緯と改善内容をまとめ...

                メニューボタンを span だけで実装するのは良くないのでやめた話
                • JR新駅名称は「西熊本駅」 熊本-川尻間

                  メインコンテンツに移動 購読申し込み 7日間無料お試し closeQRコードリーダーをQRコード読み込み結果 `{f�,V P�k�,V 0�;�,V �h��,V 熊日からのお知らせ くまもとジュニア プログラミングアワード2023 第71回 球磨一周市町村対抗熊日駅伝 第64回 熊日書道展《作品募集》 熊日情報文化懇話会 12日に例会 「これからの経済と私たちの暮らし」 経済ジャーナリスト・荻原博子さん 熊善銀 「歳末助け合い募金」のお願い 28日まで受け付け ホーム ニュース トップ 熊 全国 エンタメ 動画 地方選速報 天気・気象 防災・災害 トップニュース 甘~くなーれ!! 干し柿づくり最盛期 熊県宇城市 年末年始の贈答向け バンペイユ風呂「お肌すべすべ」 熊・日奈久温泉で1月末まで 八代農業高(八代市境町) 専門知識と技術、楽しく身につける【くまもと高校図鑑】 献

                  JR新駅名称は「西熊本駅」 熊本-川尻間
                  lovely
                  lovely2016/02/22非公開
                  2枚目の写真からパラダイス山元さん(サンタ)が見切れている / 拡張子xhtmlとは??ぐぐると「xhtmlで書かれたファイル」みたいな説明だけどDOCTYPEはHTML 4.01 Transitionalという謎
                    • Bootstrapの使い方超入門 (1/4) - @IT

                      話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく連載「HTML5アプリ作ろうぜ!」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。Bootstrapは最近

                      Bootstrapの使い方超入門 (1/4) - @IT
                      lovely
                      lovely2015/06/04非公開
                      2ページ目にgridの話
                      • これでよくない? レスポンシブテーブルの話

                        レスポンシブテーブルという言葉をご存知でしょうか。テーブル(表組み)に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている

                        これでよくない? レスポンシブテーブルの話
                        • ブラウザにやさしいHTML/CSS

                          新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?

                          ブラウザにやさしいHTML/CSS
                          • 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 thedomain owner maintain any relationship with the advertisers. In case of trademark issues please contact thedomain owner directly (contact information can be found in whois).Privacy Policy

                            lovely
                            lovely2014/05/20非公開
                            「アンダースコアハックがいたるところで使われている」というのがちょっと面白い
                            • Googleが推薦するHTMLとCSSのコーディング方法

                              2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTMLCSS のコーディングガイドライン」で紹介されていた「GoogleHTML/CSS StyleGuide」に書いてあるコーディング方法と感想を紹介します。GoogleHTML/CSS StyleGuideの日語翻訳GoogleHTML/CSS StyleGuideは英語なのでGoogleChromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。GoogleHTML/CSS StyleGuideを翻訳してある記事「GoogleHTML/CSS StyleGuide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogleHTML/CSS StyleGuideに書いてあるHTMLCSSのコ

                              Googleが推薦するHTMLとCSSのコーディング方法
                              • イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17

                                数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLCSSでアイコンを模写してみました。HTMLCSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLCSSで書いたものになります。 ソ

                                イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
                                lovely
                                lovely2013/08/07非公開
                                『ソースを見るまでが、ネタです。』
                                • HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance

                                  HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance First Draft ofHTML 5.1 Offers Glimpse at Next Round of Standardization Read below what W3C Members have to say aboutHTML5 17 December 2012 — The World Wide Web Consortium (W3C) published today the complete definition of theHTML5 and Canvas 2D specifications. Though not yet W3C standards, these specifications are no

                                  HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance
                                  • 『IE6とIE7でcolspanがきかない』

                                    IE6とIE7でcolspanがきかないという現象に久々に出会ってしまった。 確かcolspanで結合していれば、横幅を個別に指定してもきかないというバグは頭に入っていたが、colspan自体がきかないとは思っていなかったので少々焦ってしまった。 調べてみると、td自体にwidthでpx指定した時に起きるバグのようである。 pxではなく%で指定すれば、OK。 これもIEのバグなんでしょうねぇ。 IEはバグが多くて嫌になります。

                                    『IE6とIE7でcolspanがきかない』
                                    • HTML5マークアップ珍プレー集 - HTML5 Conference 2012

                                      近年、個人や企業を問わず、HTML5でマークアップされたサイトが数多く登場しています。しかし、HTML5が浸透してから年月が浅いこともあり、有名な大企業のサイトですら、不適切なマークアップが見受けられます。セッションでは、そのような不適切なマークアップを紹介し、どう直すべきかをみなさんと一緒に考察していきます。

                                      HTML5マークアップ珍プレー集 - HTML5 Conference 2012
                                      • 深圳普好信息技术有限公司

                                        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

                                        lovely
                                        lovely2011/06/13非公開
                                        HTML5関係ない
                                        • ブレないワイヤーフレームを作るコツ

                                          すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の5つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは4つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特

                                          ブレないワイヤーフレームを作るコツ

                                          お知らせ

                                          公式Twitter

                                          • @HatenaBookmark

                                            リリース、障害情報などのサービスのお知らせ

                                          • @hatebu

                                            最新の人気エントリーの配信

                                          処理を実行中です

                                          キーボードショートカット一覧

                                          j次のブックマーク

                                          k前のブックマーク

                                          lあとで読む

                                          eコメント一覧を開く

                                          oページを開く

                                          はてなブックマーク

                                          公式Twitter

                                          はてなのサービス

                                          • App Storeからダウンロード
                                          • Google Playで手に入れよう
                                          Copyright © 2005-2025Hatena. All Rights Reserved.
                                          設定を変更しましたx

                                          [8]ページ先頭

                                          ©2009-2025 Movatter.jp