JavaScript、HTML、CSSを使って画面切り替えをつくろう！ - Qiita
はじめに 下記画像のように、「Aボタン」をクリックすると「A画面」が、 「Bボタン」をクリックすると「B画面」が表示されるような 画面切り替えをJavaScript、HTML、CSS を使って作成していきます。 JavaScript、HTML、CSS ファイルの作成 ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。 HTML の作成 ヘッダーの作成 次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。 <link rel="stylesheet" href="./style.css" /> で style.css に連携。 <script src="./script.js" defer></script> で scr
HTML,CSS超初心者向け クラス名の付け方 - Qiita
CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
【小ネタ】HTMLのみでサイト内検索を実現する - Qiita
.search-form { display: flex; align-items: center; gap: 0 10px; width: 400px; } .search-form input { width: 100%; height: 34px; padding: 1px 5px 1px 8px; border: 1px solid #999999; box-sizing: border-box; color: #000; outline: none; } .search-form button { display: flex; justify-content: center; align-items: center; width: 30%; max-width: 140px; height: 34px; border: none; background-color: #4070f
AWSの公式ドキュメントが修正されるに至った経緯 - Qiita
ことのはじまり @kohki_takatama さんの記事 XMLのイメージを掴む が投稿される HTML / XML のリリースされた年 が 1998 / 1993 となっておりおかしいことに気が付いてコメントする HTML XML 逆では？ June 1993 https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt 1993年にはIETFからHTML仕様書バージョン1.0が公開され、SGMLからの拡張として文法定義のDTDを持つようになった。 https://ja.wikipedia.org/wiki/HyperText_Markup_Language XML の仕様は、World Wide Web Consortium (W3C) により策定・勧告されている。1998年2月に XML 1.0 が勧告された。 https://ja.w
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
半角スペースを表示したいなら ではなくwhite-space: pre;を使いましょうという話 - Qiita
はじめに 連続する複数の半角スペースは1つにまとめられたり、先頭末尾の半角スペースは省略される これははじめてHTMLに触れた人が戸惑う部分だと思います。 ではその半角スペース分の空白をどのようにして表示すればいいのかと調べれば、 などの特殊文字を紹介する記事が数多くヒットします。 HTMLでの半角スペースは なんだと強引に表現するサイトもありますが、半角スペースと が異なることは調べればすぐわかります。 もう文字コードから違います。 半角スペースと は別物なのに、半角スペースを表示するために を使っていいのでしょうか？ 答えはNoだと思います。 結論 半角スペースを半角スペースとして表示するにはwhite-space: pre;を使います。 preはおそらくpre要素のpreですね。 white-spaceはCSSプロパティです。 つまり
HTMLを実装したときに閲覧したページ - Qiita
+* HTML *+ 要素と属性 https://so-zou.jp/web-app/tech/html/specification/element-attribute.htm idとclassとの違い https://www.sejuku.net/blog/85629 +* CSS *+ IDを指定 https://www.tagindex.com/stylesheet/basic/format3.html CSSの無効化 https://magazine.techacademy.jp/magazine/38815 +* JavaScript *+ タグを追加 https://www.javadrive.jp/javascript/before/index2.html タグに属性を追加 https://kasumiblog.org/javascript-setattribute/ +*
aタグのrel=”noopener noreferrer”の意味とは？
rel=”noopener noreferrer”とは？ 勉強中に気になって調べたことの備忘録です。 以前、Next.jsを勉強している際に、<a></a>タグが下記のようになっていた。 (hrefの中身は私のgithubのリンクですのでお気になさらず、、、) <a href="https://github.com/funayamateppei?tab=repositories" target="_blank" rel="noopener noreferrer" > rel="noopener" とは？ noopenerについては新しいタブで開く場合に効果を発揮します。 今回は target="_blank" だったので書かれていました。 rel属性にnoopenerを付けることで、新しいタブを別スレッドで開くことができる。 rel="noreferrer" とは？ rel属性にnoref
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.3.3?bundle&target=esnext"; import {minify_sync} from "https://esm.sh/terser@5.27.0?bundle&target=esnext"; for(const {type, textContent} of document.getElementsByTagName("script")){ if(type !== "text/typescript" || !textContent){ continue; } const js = transpile(tex
プログラミング言語 HTML 入門
はじめに 以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。 この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名な B
【HTML＆CSS】初心者が躓きがちなスタイリングについて解説してみた - Qiita
はじめに はじめまして！ DMM WEBCAMP Advent Calendar 🎄 7 日目を担当することになりました、@k_uki512と申します！ Webアプリケーション開発において、HTML＆CSSを使用したフロントエンド開発は避けて通れません！ですが、実際にCSSを書いてみると自分の思ったようなスタイリングができないことも多いと思います。 そこで今回は、初心者が躓きがちなスタイルの事例とその解決策をいくつか紹介していきたいと思います！🙌 対象者 CSS（SCSS）によるスタイリングに苦手意識がある方 ホームページ制作,LP制作（web制作） にも興味がある方 基本的な HTML&CSS を学習後、更にステップアップしたい方 簡単なFlexBoxのスタイリングについて知っていると更に良い（横並び、中央揃え程度でOK） 本記事では、Bootstrap や Tailwind CSS
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
