Alt Text Hall of Fame - Alt Text Hall of Fame
What is alt text?Alternative text (or alt text, in short) is the text you can use to describe an image when you publish it on your website or social media. Why is alt text important?Imagine, for a moment, that your browser stopped showing you images. You would still see them referenced in articles, you’d read conversations about them, people making jokes. What would this experience be like for you
Googleのtitleタグ書き換えを防ぐ方法×10
[レベル: 中級] この記事では、Google によるタイトルリンクの書き換えを防ぐのに役立つ 10 個の施策を紹介します。 先日、Cyrus Shepard（サイラス・シェパード）氏が調査した title タグ書き換えの分析と対策について Web担当者Forum の連載コラムで取り上げました。 その続編になります。 1. title タグの長さを適切に title タグを適切な長さに調整します。 具体的には、（半角で）51 〜 60 文字程度が好ましいとのことです。 検索結果の幅（現在は約 650 ピクセル）にちょうど収まる長さです。 長すぎるのはもちろん、短すぎても書き換えが発生しやすくなります。 極端に長いもしくは短い title タグは実に 95% が書き換えられていました。 2. h1 タグと一致させる title タグと h1 タグの記述を一致させます。 アップデート後のタイト
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
アクセシビリティー対応とかいう害しかないクソ
今年の初めから弊社の公式サイトは「音声読み上げソフトに配慮した記述」が求められるようになった。 例えば「7/28(火)」はNG、「7月28日（火曜日）」が正しい。これはまあいい。 でも他の例では「※詳細はこちら」これはダメで、「注記：詳細はキャンペーン詳細サイト（外部サイトへ移動します）（別ウィンドウで表示します）をご覧ください。」と、こうなる。 あと「～」が使えなくなった。これ、「５～８ポイント」を「５から８ポイント」とするのが本来のアクセシビリティー対応なのだが、画一的に「～」を禁止されて「アマゾン ～最後の秘境～」とかの固有名詞まで「アマゾン 最後の秘境」に書き換えが発生している。もはや意味もないし商品名や番組名を改変しちゃって怒られるまである。 どうなんかね？音声ブラウザならまだしも、通常のブラウザでは明らかに日本語としての可読性が下がって苦情も来ている。でも社会的要請からアクセシ
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA
知っておく価値のある珍しいHTMLタグ - Qiita
以下はChristopher Kadeによる記事、Unusual HTML tags worth knowingの日本語訳です。 なお斜体は訳者(私だ)による補足です。 Unusual HTML tags worth knowing 正しいHTML要素を使用することは、私たちの多くが考えている以上に重要です。 Semantic HTMLとして知られるそれは、ページにデザインだけではなく、意味を持たせることができます。 <p>要素には段落が含まれており、それがどのように見えるべきかを誰もが知っています。 ページの内容を検索エンジンに伝えるのに役立つだけではなく、スクリーンリーダーが正確に仕事を行うためにも役立ちます。 この記事では、日常的に使うのに便利な、あまり知られていないタグを幾つか紹介します。 abbr MDN 下記例のように、略語を提供します。 title属性、およびインラインテキス
特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題） - Qiita
特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題）HTMLCSS トップページに掲載されるキャッチフレーズなど、言葉の途中で改行されると急激にダサくなってしまう文があると思います。 英語を始めとするスペースで単語が区切られる言語であればブラウザが良い感じに調整してくれるのですが、日本語を含むCJKVのような言語では単語の途中であっても無慈悲に改行されてしまいます。 要するにこれを避けたい 途中で改行されるものとして最も有名なのがこれです。 （https://java.com/ja/ より） この「今すぐダウンロー（改行）ド」は何の変哲もないHTMLで再現できます。
Only CSS: Trick Art
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
引用元の表記
blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語：citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
“Responsive Line Breaks,” an article by Dan Mall
You’re on an old version of this site. Please visit danmall.me for the latest. Responsive Line Breaks I create a lot of mobile-first, responsive designs. It’s the way SuperFriendly builds websites, as many suggest (unless, of course, there’s a good reason not to do so). Perhaps because responsive design is still relatively new or perhaps because of my history and affinity towards fixed-width pixel
ウェブサイトに円記号を書くときは、どうかこれでお願いします
わかってる人にはもう「何を今さら」という話かもしれませんけど、悲しい思いをすることが多いのでここであらためてお願いします。 ウェブサイトに金額を書くとき、円記号 (¥) を使う際には HTML に ¥ ではなくて ¥ と書いていただきたいのですお願いします。 日本語環境の Windows 端末から入力した円記号は、日本語環境の Windows で見ると円記号になってますけど、その他の多くの環境であれはバックスラッシュになります。 日本語版の Windows でこう表示されていても その他の環境ではこうなります。 HTML 内に \ ではなく ¥ と書けば基本的にはどの環境でも ¥ が表示されるはずなので、円で金額を書く時にはぜひ ¥ にしていただきたいのですお願いします。 こいうことが起きている事情はこのあたりで。 日本語用文字コードにおける円記号 – Wikipe
引用元のマークアップ
引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。 figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。 <figure> <blockquote cite="http://example.com/"> <p>Lorem ipsum dolor sit amet.</p> </blockquote> <figcaption> <p><cite><a href="http://example.com/">Example Website</a></cite></p> </figcaption> </figure> bl
mf2md
本気のメモです。メモなのでタイトルをわかりづらくしておきました。SEO対策ですね。 hAtom From: <article class="hentry"> <h2 class="entry-title"> <a rel="bookmark" href="/blog/webdesign/document-structure.html"> 文書構造を見なおした(ている) </a> </h2> <footer> <p> Posted on <time datetime="2011-11-09T19:31:06+09:00" pubdate class="published"> 09 Nov, 2011 </time> in <a rel="tag" href="/blog/webdesign/"> Web Design </a> </p> </footer> <div class="entry
HTML5の新要素「data要素」に繋がる Microdataのプロパティについて - kojika17
time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。 またHTML5 の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、 Microdataで利用できるプロパティを紹介致します。 Microdata とは HTML5の独立した仕様です。 HTML文章に、コンピュータが可読できるデータにすることができ、RDFやJSONなどの多数の他のデータ形式と互換性を持たせることができます。 記述方法は以前の記事を参照して下さい。 MicroformatsとMicrodataの違いについて : Web Design KOJIKA17 なぜコンピュータが可読できるデータにする必要があるのか？？ HTMLでは、人や時間、場所など細かくマークアップすることができません。 例として、機械翻訳したカンナダ語を見てみまし
Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute | HTML5 Doctor
NOTE: (6/11/2013) The definitions of cite and blockquote in HTML have changed. For the latest advice on using these elements refer to cite and blockquote – reloaded Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elements <blockquote> and <q>, with their optional cite attribute. In addition, there’s the <cite> element, which over the last
UTF-8 の文字化け対策！ 「美乳」ではなく「†（ダガー）」を使う
文字化けと対策 （これからも── Mojibake と戦い続ける） 「文字化け」しているウェブサイトは、最近では見なくなりました（と思いたい）。 大昔──、まだ人類が石のヤリでマンモスと戦っていたころは、何度も何度もウェブ・ブラウザの「文字コード」を手動で変更していましたよね。何もかもが懐かしい──。 石のヤリ: Internet Explosion ──もとい Internet Explore 6 マンモス: Yahoo!ジオシティーズ ──いや、両方とも世間では健在ですけれど。 ウェブ上の文章が異常な状態で表示される原因は、おもに「文字コード」の問題です。ソフトウエアと人間の両方が成長することで、じょじょに改善されているけれど──。 文字化け – Wikipedia Unicode 版「美乳テーブル」 ところが、まだまだ文字は化ける！ そこで、UTF-8 時代の「おまじない」として、次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中
文字丸めしたらtitle属性を必須とすることを提唱しまぁす！ - Qiita
Time Series 2: Typographic Clock