少しの記述でユーザビリティやアクセシビリティを向上させる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"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
商用OKの無料HTMLテンプレート120個以上をダウンロードできる Templates Jungle
だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。 この時に必要になるのが、レスポンシブWebサイトの制作です。 しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。 あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。 今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。 ライセンスについて 素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。 HTMLテンプレートは、フッターに表示してあるクレ
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画
NTT 東日本 - IPA 「シン・テレワークシステム」 - HTML5 版 Web クライアントの公開について
NTT 東日本 - IPA 「シン・テレワークシステム」 Beta 7 および HTML5 版 Web クライアントの公開について トップ | 中間報告 | 自治体テレワーク for LGWAN | HTML5 Web 版クライアント (Mac, Chromebook 対応) | バージョン履歴 | ダウンロード | ユーザー数グラフ 入門 - 今すぐ使ってみよう | クライアント検疫機能・MAC アドレス認証機能 | 二要素認証・ワンタイムパスワード (OTP) 機能 | マイナンバーカードを用いたユーザー認証機能 | 仮想マルチディスプレイ機能 行政情報システムでの利用 | 組織 LAN におけるポリシー規制サーバー設置 | 企業システムにおける VM・HDD クローン対応 | Wake on LAN リモート電源 ON 機能 | 画面撮影・キャプチャ防止のための電子透かし機能 FAQ
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
PythonやHTMLなどの基礎文法の講座が無料に | Ledge.ai
画像は「巣ごもりDXステップ講座情報ナビ」より 経済産業省は、人工知能（AI）やデータサイエンスなどのデジタルスキルを学べる、無料オンライン講座を紹介する「巣ごもりDXステップ講座情報ナビ」を公開している。 この記事では、同サイトに載っている無料の学習コンテンツのなかから、AIおよびデータサイエンス関連の基礎講座を5つ抜粋して紹介する。 1.松尾豊教授監修のディープラーニング講座が一部無料に 株式会社zero to oneが提供する「E資格試験対策・体験コース」では、東北大学大学院岡谷貴之教授が監修したJDLA認定プログラム「機械学習」および、東京大学大学院松尾豊教授が監修した「ディープラーニング」の一部を体験できる。 無償提供期間は2021年7月2日まで。前提知識はPythonプログラミングの基礎知識、理系の大学1年生のレベルの数学の基礎（微分積分、確率統計、線形代数）。標準受講時間は2
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
