総務省では、利用者が安心してウェブサイトやアプリを利用できるよう、透明性を高めるルールを設けました。具体的には、ウェブサイトやアプリを利用する際に、利用者の意思によらず、第三者に自身の情報が送信されている場合があります。利用者に関する情報が第三者に送信される場合に、利用者自身で確認できるようになります。 〈イメージ図(ウェブサイトの場合)〉 〈イメージ図(アプリの場合)〉 1 外部送信規律の趣旨 近年、SNS、動画共有、ニュース配信、検索等のサービスを通じ、多くの情報流通がスマートフォン等を経由して行われてきているところです。 このような様々なサービスを無料で提供するプラットフォーム事業者において、利用者に関する情報が取得・集積される傾向が強まっています。 利用者にとっての利便性が高まる側面もある一方で、利用者が知らないうちに影響される可能性も高まっています。 特に、ウェブサイトやアプリケ

CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode ColorSwitching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は? light-dark()関数のブラウザサポート light-dark

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です! A (more) ModernCSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) ModernCSS Resetの前のバージョンも解説しています。2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説

Livewire v3 has been released!Go checkit out on livewire.laravel.com!Building modern web apps is hard. Tools likeVue andReact are extremely powerful, but the complexity they add to a full-stack developer'sworkflow is insane.It doesn’t have to be this way... Ok, I'm listening... Say hello to Livewire. Hi Livewire! Livewire is a full-stack framework forLaravel that makesbuilding dynamic int

Sass is the most mature, stable, and powerful professional gradeCSS extension language in the world.CSS Compatible Sass is completely compatible with all versions ofCSS. We take this compatibility seriously, so that you can seamlessly use any availableCSS libraries. Feature Rich Sass boasts more features and abilities than any otherCSS extension language out there. The Sass Core Team has work
HTMLやCSSには、ユーザーインタラクション(ユーザー操作)を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス(UI)では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert

"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
少しのコードで実装可能なHTML小技集これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン!知っていると使い勝手がちょっとよくなる小技を集めました! 少しのコードで実装可能な 10 のCSS 小技集 目次セレクトメニューの選択肢をグループ化type 属性値によって入力欄が変化スマートフォンでエンターキーのテキストを変える画像の遅延読み込みテキストの折り返し位置を指定する番号付きリストの順番を変更する簡単アコーディオン任意のテキストを自動翻訳させないリンク先のテキストを指定してスクロールさせる1. セレクトメニューの選択肢をグループ化複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多い場
これまでとは異なるCSSフレームワークが登場しました!TailwindCSSのようにユーティリティファーストで、すべての値がCSS変数(カスタムプロパティ)で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数(カスタムプロパティ)ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実

W3C Recommendation 11 December 2008This version: http://www.w3.org/TR/2008/REC-WCAG20-20081211/ Latest version: http://www.w3.org/TR/WCAG20/ Previous version: http://www.w3.org/TR/2008/PR-WCAG20-20081103/ Editors:Ben Caldwell, Trace R&D Center, University of Wisconsin-MadisonMichael Cooper, W3CLoretta Guarino Reid,Google, Inc.Gregg Vanderheiden, Trace R&D Center, University of Wisconsin-MadisonPr

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役? floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う

The ProgressiveJavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。Vue を使う理由 はじめる インストールVue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的なAPI とワールドクラスのドキュメントを使用して、標準的なHTML、CSS、JavaScript をもとに構築します。

This website usescookies to analyze our traffic and only share that information with our analytics partners. Accept OWASP Japanチャプターのホームページへようこそ。 OWASP - Open Worldwide ApplicationSecurity Project とは、Webをはじめとするソフトウェアのセキュリティ環境の現状、またセキュアなソフトウェア開発を促進する技術・プロセスに関する情報共有と普及啓発を目的としたプロフェッショナルの集まる、オープンソース・ソフトウェアコミュニティです。The OWASP Foundationは、NPO団体として全世界のOWASPの活動を支えています。 OWASP Japanチャプターは、首都圏のみならず、国内全域における
HOMESEOAMP【AMP】Googleが推進するAMPとは?概要と対応方法まとめ 【AMP】Googleが推進するAMPとは?概要と対応方法まとめ 突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか? 赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMPHTMLで構築されたWebページに遷移します。 リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。 これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。 「最近よく聞くけど、AMPってなんなの?」と疑問をお持ちの方も多いのではないかと思います。SEO界隈で何かと話題のAMPについて、概要

jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといった、マウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますが、マウス動作が止まった時「mousestop」のようなものは存在しません。 そんな要素の上でマウス動作が止まった時を判別して判別処理を行うサンプルを作ってみたので紹介してみます。 「jQueryでマウス動作がストップした時を判別して処理する方法」サンプルを別枠で表示 サンプルではページ上にある灰色の四角のエリアを配置し、その上でマウスカーソルの動きがストップした時を判別します。 灰色の四角のエリアの上にマウスを移動させ、移動させている間(マウスカーソルが動いている間)は何も起こらず、灰色の四角のエリアの上でマウスの動きを止めると同時に背景が黒に変わります。 この様にマウス動作が止ま

2013年のいま、API界隈が熱い! 今年に入り、官公庁の統計データやNHKの番組情報など、今までなかなか利用できなかったデータがAPIとして扱えるようになってきました。このエントリでは現在公開されているAPIを一覧でまとめます。いま使えるAPIはこれだけ読めば大丈夫。2013年の最新マッシュアップ事情をあますとこなく網羅します! HOT!API 総務省 次世代統計利用システム(国勢調査、人口推計、就業構造、企業統計、物価統計etc.)NHK番組表(※未公開) 行政・自治体・公共サービス郵便番号郵便番号検索API(郵便番号 → 住所)郵便専門ネット(郵便番号 → 住所、郵便番号の簡易存在チェック) ぽすたん(郵便番号 → 住所、住所 →郵便番号) IW3 PROJECT(郵便番号 → 住所、住所 →郵便番号) 宇宙Google+ JAXA PR(※現在一部の学生に限定公開

リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く