img要素の「画像がないことを表すマーク」の表示/非表示 - Qiita
背景 img要素で指定した画像が存在しないとき、「画像がないことを表すマーク」が表示されます。 IEではバツ印で表示されるので、このマークを便宜上「バツ印」と呼びます。 このバツ印のおかげで、ユーザは「画像が本来表示されるはずだけど、何かエラーで画像が表示されていないんだ」と気づくことができます。 しかしバツ印を表示させたくない場合もあります。 たとえば、以下の場合です。 画像パスはkeyから決まるんだけど、画像があるかどうかは分からない。とりあえず画像があれば表示したい 画像の有無は調べず、とりあえずimg要素のsrc属性にkeyから決まるパスを設定しよう！ この場合、「画像が表示されない」ことも正常なので、バツ印を非表示にしたいです。 バツ印の表示/非表示が、ブラウザ、src属性,alt属性によって変わるので、それをまとめました。 検証方法 ブラウザ、src属性, alt属性のパターン
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
float、ダメ、絶対。HTMLメールを作る前に押さえるべき基本事項。 | Wantedly Engineer Blog
こんにちは、Wantedly ユーザーグロースチームの竹野です。普段はウェブやAPIに絡めた改善を色々やっています。今日は、4月に行ったメールの改善施策で得た知見を共有します。 背景メールはユーザーにリーチできる手段の一つです。 Wantedly でもメールを送っていますが、改善前のメールは比較的昔に作ったものが多く、大きく分けて3つの課題がありました。 1. テンプレートが横幅600px固定なのでモバイルで見ると縮小されてしまってそもそも読めない 2. メールの見た目に統一感がない（デザイン面での課題） 3. 可読性や再利用性が低く開発効率が良くない（エンジニアリング面での課題） これを解決するために、まず現実的にメールでレスポンシブにする方法を調査した上で、既存のメールを洗い出し、デザイナーの方にデザインを依頼し、自分の方でコーディングを行いました。コーディングの際は、将来的なことも考
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
target="_blank"を使った脆弱性Tabnabbingとその対策
About rel=noopenerの記事を見て、フィッシング詐欺の手法Tabnabbing(タブナビング)について、 以前にそれっぽい記事読んだけど、すっかり忘れていた。 改めて見直してみて、その内容と対策がまとまっていたのでおさらい。 Tabnabbing(タブナビング)の仕組みTabnabbing の仕組みは以下となる。 まず、新規のタブを開くようなアンカータグ
DataURI Shemeを作るスクリプト欲しいね。（作った。 - それマグで！
data uri scheme を愛しています。 DataURI Schemeは、巷でパフォーマンス・アップのためにチヤホヤされています。私は別の理由で愛しています（後述 DataURI Scheme とはなにか？ 今更感あるけど、一応おさらい。img を直接HTMLに埋め込む方法です。 <img src="data:XXXXXXX" /> data: プロトコルハンドラなんて呼ぶ人も居ますね。 画像をData URIに変換するスクリプト作りました。 画像をdatauriに変換をもっと簡単にして、DataURISchemaをもっと使い込もうと思いました。rubyスクリプト作りました。 base64_embed.rb takuya@air:~/Desktop$ ruby base64_embed.rb profile.gif data:image/gif;base64,R0lGODlhQAB
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
HTML5のアウトラインを極めるための6つのルール - Tech Design
こんにちは。@shibe97です。 みなさん、HTMLのアウトラインをちゃんと理解していますか？？ 実はかなり奥が深くて、間違って理解している方も実は多いのではないかと思います。 アウトラインとは 文書の階層構造のことを指します。 暗黙的なアウトラインと明示的なアウトラインの二種類が存在します。 暗黙的なアウトライン ルール１：暗黙的なアウトラインは、見出しタグを使用すると自動的に生成される 以下のように、見出しタグを用いるとアウトラインが生成されます。 この際、h1はh1のレベルを持ったアウトラインを生成し、h2はh2のレベルを持ったアウトラインを生成します。 ルール２：自分自身と同レベル以上の見出しが出現した場合、暗黙的に閉じられる 以下のようにh2が生成したアウトラインは別のh2が現れることによって暗黙的に閉じられます。 明示的なアウトライン ルール３：明示的なアウトラインは、HTM
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google
Learn web development | web.dev
https://qiita.com/nbnb/items/b44810b7ccffcdfa8ac7