あなたが教わってるそのCSSテクニックはもう古い – TAKLOGXの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
一般ユーザに払い出すと危険なサブドメインやメールアドレス - ASnoKaze blog
ユーザに対して、そのユーザ名のサブドメインやメールアドレスを払い出すWebサービスがあります。 しかし、特定のサブドメインやメールアドレスは特別な用途で使われているものもあります。そのようなサブドメインやメールアドレスを一般ユーザに払い出してしまうと危険です。 現在、IETFでは仕様上利用用途が決められている、それらのラベルをとりまとめる「Dangerous Labels in DNS and E-mail」というdraftが提出されています。 今回はそれを眺めていきます。 （あくまでIETFの取り組みであり、仕様上定義されているものをとりまとめています。クラウドサービスや特定ベンダーで特別利用しているものは現在含まれていません。） サブドメイン ここでとりあげるサブドメインは、利用用途が決まってるため一般ユーザに払い出すべきではありません。(例: mta-sts.example.com)
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
「おたくでホームページ作るといくら！」と大阪弁のお爺さんから元気な電話が長野のwebサイト制作会社にかかってきた
稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h 「おたくでホームページ作るといくら！」と大阪弁のお爺さんから元気な電話。 ぼく「ど、どちら様ですか」 じじ「大阪の◯◯という会社ですわ。そんなんどっちゃでもいいんで、おたくでホームページ作るといくら！」 ぼく「何のWebサイトを作るご予定ですか？」 じじ「00ページだといくら！」 ↓ 稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h BtoBのWebサイト戦略策定、制作、Web活用支援とコンテンツ支援を担当／Web制作会社『JBN』に所属／jbnet.jp／ミッション＝「伝わる」をふやす／HubSpot プラチナ パートナー／ユーザー・企業・社会の三方良しにWeb活用で役立ちたいです／note.com/inada123 inada
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
ナビゲーションの3クリックルールは誤り
重要な情報にアクセスしやすくすることは重要だが、3クリックルールはデータの裏づけのない恣意的な目安である。 The 3-Click Rule for Navigation Is False by Page Laubheimer on August 11, 2019 日本語版2020年4月9日公開 3クリックルール どんなページもアクセスするのに3回以上のクリック（またはタッチスクリーンでのタップ）を必要としてはならない、という3クリックルールは、根強く残る、正式には認められていないヒューリスティックである。このバリエーションに、最も重要な情報には3クリック以下で到達しなければならない、というのもある。デザイナーはこのルールをWebサイトのナビゲーションや情報探索タスクによく適用するが、中には、（フォームやウィザードの入力など）他の種類のタスクにもこのルールを用いるデザイナーもいる。 タスク
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla
Webアプリケーションフレームワークの作り方 in Python — c-bata.link
こんにちは、芝田 将 ( @c_bata_ ) です。 この資料はPyCon JP 2016で行った 「基礎から学ぶWebアプリケーションフレームワークの作り方」 の書き起こし資料です。 誤字等があれば、Issue or PRをお待ちしております。 はじめに¶ この資料では200行に満たないシンプルなWebフレームワークの作り方をボトムアップで解説します。 テンプレートエンジンとしてJinja2を使ったりもしますが、基本的にはPythonの標準ライブラリのみを使っています。 FlaskやDjango等を使ったWeb開発の経験があり、基本的なHTTPの知識があれば読み進められるんじゃないかなと思うのでぜひチャレンジしてみてください。 本資料を読み終えた方はBottleやDjango、筆者の公開している Kobin というフレームワークのコードを 読んでみたり、自分でWSGIフレームワークを実
シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール
最近のWebデザインには使用される要素には、さまざまなカラーが使用されています。それらの要素にシャドウを与える際には、シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです。 さまざまなカラーにあった適切なシャドウの色が分かるオンラインツールを紹介します。
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは？ | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作時に便利なHTML, CSS, JavaScriptのツール、文字抽出ツールなどがまとめて利用できる -Href Tools
