タグ

関連タグで絞り込む (63)

タグの絞り込みを解除

HTMLに関するasiamothのブックマーク (120)

  • 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

    asiamoth
    asiamoth 2023/08/24
    img要素のalt属性専門（！）サイト。本文で否定しているが、つまるところ視覚障害者への説明が主な存在理由だと思う。ただ、「波線模様の長袖ドレス」や「青く塗られた壁」は伝わるのかな？
    リンク

  • Googleのtitleタグ書き換えを防ぐ方法×10


    [レベル: 中級] この記事では、Google によるタイトルリンクの書き換えを防ぐのに役立つ10個の施策を紹介します。 先日、Cyrus Shepard︵サイラス・シェパード︶氏が調査したtitleタグ書き換えの分析と対策について Web担当者Forum の連載コラムで取り上げました。 その続編になります。 1. titleタグの長さを適切にtitleタグを適切な長さに調整します。 具体的には、︵半角で︶51〜60文字程度が好ましいとのことです。 検索結果の幅︵現在は約 650 ピクセル︶にちょうど収まる長さです。 長すぎるのはもちろん、短すぎても書き換えが発生しやすくなります。 極端に長いもしくは短いtitleタグは実に 95% が書き換えられていました。 2. h1 タグと一致させるtitleタグと h1 タグの記述を一致させます。 アップデート後のタイト
    Googleのtitleタグ書き換えを防ぐ方法×10
    asiamoth
    asiamoth 2022/03/01
    「GoogleはHTMLタグを見ない」とは何だったのか……。
    リンク

  • 「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中

    米村歩@日本一残業の少ないIT企業社長 @yonemura2006 ・丁目、番地が全角しか入力できない ・電話番号が全角しか入力できない ・建物名が全角しか入力できない ・生年月日がカレンダーで果てしなきページ送りを要求される ・何の入力チェックでエラーが出ているのかわからない ・入力チェックエラーになると入力内容が全部消える #クソ入力フォーム選手権 2021-09-06 22:44:39

    「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中
    asiamoth
    asiamoth 2021/09/09
    何十項目もあるフォームを入力し終わったあと、送信ボタンの隣に「クリア（全項目消去）」ボタンがああああぁぁぁぁ！！！1（思い出し発狂）
    リンク

  • どうしてHTML5が廃止されたのか | フューチャー技術ブログ


    フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
    どうしてHTML5が廃止されたのか | フューチャー技術ブログ
    asiamoth
    asiamoth 2021/06/21
    「HTML5（という名称）が廃止された」という認識で だいたい良さそう？¶“HTML Living Standardは日々更新されるので”←やめて！！！！
    リンク

  • アクセシビリティー対応とかいう害しかないクソ

    今年の初めから弊社の公式サイトは「音声読み上げソフトに配慮した記述」が求められるようになった。 例えば「7/28(火)」はNG、「7月28日（火曜日）」が正しい。これはまあいい。 でも他の例では「※詳細はこちら」これはダメで、「注記：詳細はキャンペーン詳細サイト（外部サイトへ移動します）（別ウィンドウで表示します）をご覧ください。」と、こうなる。 あと「～」が使えなくなった。これ、「５～８ポイント」を「５から８ポイント」とするのが本来のアクセシビリティー対応なのだが、画一的に「～」を禁止されて「アマゾン ～最後の秘境～」とかの固有名詞まで「アマゾン　最後の秘境」に書き換えが発生している。もはや意味もないし商品名や番組名を改変しちゃって怒られるまである。 どうなんかね？音声ブラウザならまだしも、通常のブラウザでは明らかに日本語としての可読性が下がって苦情も来ている。でも社会的要請からアクセシ

    アクセシビリティー対応とかいう害しかないクソ
    asiamoth
    asiamoth 2020/07/30
    記号の使い方を考え直す良い機会だと思う。たとえば「○○の冒険 -ドラゴンの章-」とマイナス記号を使うことで検索避けになってしまう等（同人ソフトにアリガチ）。
    リンク

  • なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita


    はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる﹁みんなに知ってもらいたいデザインシステムのこと﹂でした。 文中で紹介されていた﹁悲劇的なデザイン﹂は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
    なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
    asiamoth
    asiamoth 2019/12/17
    “W3Cが提供しているバリデーターを使って確認してみてもいいかもしれません。”とあるが、曖昧な知識に頼るよりも、まず 真っ先にバリデータを通してほしい。
    リンク

  • 快速ページ表示のための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
    快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
    asiamoth
    asiamoth 2019/08/20
    全ブラウザで正しく表示される──よりも、iframeでも使える`//:0`が手軽で良いと思う。「壊れた画像アイコン」が表示されるが、それはCSSで何とかする。
    リンク

  • 知っておく価値のある珍しいHTMLタグ - Qiita


    以下はChristopher Kadeによる記事、Unusual HTML tags worth knowingの日本語訳です。 なお斜体は訳者(私だ)による補足です。 Unusual HTML tags worth knowing 正しいHTML要素を使用することは、私たちの多くが考えている以上に重要です。Semantic HTMLとして知られるそれは、ページにデザインだけではなく、意味を持たせることができます。 <p>要素には段落が含まれており、それがどのように見えるべきかを誰もが知っています。 ページの内容を検索エンジンに伝えるのに役立つだけではなく、スクリーンリーダーが正確に仕事を行うためにも役立ちます。 この記事では、日常的に使うのに便利な、あまり知られていないタグを幾つか紹介します。 abbr MDN 下記例のように、略語を提供します。title属性、およびインラインテキス
    知っておく価値のある珍しいHTMLタグ - Qiita
    asiamoth
    asiamoth 2019/06/06
    cite要素は*厳密に作品名のみ*に使う、とどこかで読んだような。たとえば https://reference.hyper-text.org/html5/element/cite/#sampleCodeArea のサンプルだと`<cite>吾輩は猫である</cite>（角川文庫）`と書くべき。
    リンク

  • 特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題） - Qiita

    特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題）HTMLCSS トップページに掲載されるキャッチフレーズなど、言葉の途中で改行されると急激にダサくなってしまう文があると思います。 英語を始めとするスペースで単語が区切られる言語であればブラウザが良い感じに調整してくれるのですが、日本語を含むCJKVのような言語では単語の途中であっても無慈悲に改行されてしまいます。 要するにこれを避けたい 途中で改行されるものとして最も有名なのがこれです。 （https://java.com/ja/ より） この「今すぐダウンロー（改行）ド」は何の変哲もないHTMLで再現できます。

    特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題） - Qiita
    asiamoth
    asiamoth 2018/06/24
    まさに この用途のために `wbr` 要素があるので使ってあげてください……。
    リンク

  • 文字丸めしたらtitle属性を必須とすることを提唱しまぁす！ - Qiita

    Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

    文字丸めしたらtitle属性を必須とすることを提唱しまぁす！ - Qiita
    asiamoth
    asiamoth 2017/11/22
    阿部寛氏のホームページ効果か、Qiitaでは大昔のHTMLテクニックが流行中？ できればJavaScriptやCSSで表現してほしいな……。
    リンク

  • 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-

    Only CSS: Trick Art
    asiamoth
    asiamoth 2017/10/05
    CSSだけでトリックアート。「ほーん、d」──と油断していたらメッチャ動いて驚いた！
    リンク

  • Time Series 2: Typographic Clock

    asiamoth
    asiamoth 2017/10/05
     00-59で作られたデジタル時計。シンプルで面白い。ニキシー管︵のようなデザイン︶で見てみたい。  

    ●PC・ゲーム・家電
    ●JavaScript
    ●CSS
    ●HTML
    ●CodePen
      
    リンク

  • 引用元の表記


    blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語‥citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
    引用元の表記
    asiamoth
    asiamoth 2013/11/10
    自分は W3C 派です。なぜなら、タイトルも uri も「引用元から引用」しているので blockquote 要素内で問題ないと思うから。figcaption は図表用という感じがするのも理由ですね。
    リンク

  • “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

    asiamoth
    asiamoth 2012/08/10
    画面の横幅に応じて br 要素での改行を切り替えるアイデア。 こういうメディア・クエリィの地味な使いこなし方は おもしろいなー。
    リンク

  • ウェブサイトに円記号を書くときは、どうかこれでお願いします


    わかってる人にはもう﹁何を今さら﹂という話かもしれませんけど、悲しい思いをすることが多いのでここであらためてお願いします。 ウェブサイトに金額を書くとき、円記号 (¥) を使う際には HTML に ¥ ではなくて &yen; と書いていただきたいのですお願いします。 日本語環境の Windows 端末から入力した円記号は、日本語環境の Windows で見ると円記号になってますけど、その他の多くの環境であれはバックスラッシュになります。 日本語版の Windows でこう表示されていても その他の環境ではこうなります。 HTML 内に \ ではなく &yen; と書けば基本的にはどの環境でも ¥ が表示されるはずなので、円で金額を書く時にはぜひ &yen; にしていただきたいのですお願いします。 こいうことが起きている事情はこのあたりで。 日本語用文字コードにおける円記号 – Wikipe
    ウェブサイトに円記号を書くときは、どうかこれでお願いします
    asiamoth
    asiamoth 2012/03/11
    これは知らなかった！ ──けれど、「○○円」で万事オッケーだと思う。
    リンク

  • 引用元のマークアップ

    引用で引用元について明らかにすることは大切です。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

    引用元のマークアップ
    asiamoth
    asiamoth 2011/12/19
    cite 要素（属性ではなく）でマークアップできるのは「作品のタイトル」のみ http://j.mp/eSnELv という仕様も、この上なく unk だと思います。仕様のほうが変だよなー。
    リンク

  • 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

    mf2md
    asiamoth
    asiamoth 2011/11/11
    Microformats も Microdata も、Google が拾えるように http://bit.ly/rStx4d したほうが良いのでは……。 SEO = Google に好かれること。
    リンク

  • HTML5の新要素「data要素」に繋がる Microdataのプロパティについて - kojika17


    time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。 またHTML5の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、 Microdataで利用できるプロパティを紹介致します。 Microdata とは HTML5の独立した仕様です。 HTML文章に、コンピュータが可読できるデータにすることができ、RDFやJSONなどの多数の他のデータ形式と互換性を持たせることができます。 記述方法は以前の記事を参照して下さい。 MicroformatsとMicrodataの違いについて : Web Design KOJIKA17 なぜコンピュータが可読できるデータにする必要があるのか？？ HTMLでは、人や時間、場所など細かくマークアップすることができません。 例として、機械翻訳したカンナダ語を見てみまし
    HTML5の新要素「data要素」に繋がる Microdataのプロパティについて - kojika17
    asiamoth
    asiamoth 2011/11/03
    あちゃー time 要素の奴 とうとう■んじゃったか──って、え！？ いつのまに！ またテンプレートを変更せねば……。 しばらくは要素・属性がコロコロ変わるでしょうね。まだ hgroup は息してる？
    リンク

  • 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

    asiamoth
    asiamoth 2011/10/26
     HTML5 で cite *属性*を使うと、W3C の Validator は﹁まだUAが未対応だぜ！﹂と怒る。でも、この記事の CSS や﹁あれこれポップアップ﹂で表示できます。見逃してくれよ！  

    ●PC・ゲーム・家電
    ●HTML5
    ●HTML
    ●CSS
    ●webdesign
      
    リンク

  • UTF-8 の文字化け対策！ 「美乳」ではなく「†（ダガー）」を使う


    文字化けと対策 ︵これからも── Mojibake と戦い続ける︶ ﹁文字化け﹂しているウェブサイトは、最近では見なくなりました︵と思いたい︶。 大昔──、まだ人類が石のヤリでマンモスと戦っていたころは、何度も何度もウェブ・ブラウザの﹁文字コード﹂を手動で変更していましたよね。何もかもが懐かしい──。 石のヤリ: Internet Explosion ──もとい Internet Explore 6 マンモス: Yahoo!ジオシティーズ ──いや、両方とも世間では健在ですけれど。 ウェブ上の文章が異常な状態で表示される原因は、おもに﹁文字コード﹂の問題です。ソフトウエアと人間の両方が成長することで、じょじょに改善されているけれど──。 文字化け – Wikipedia Unicode 版﹁美乳テーブル﹂ ところが、まだまだ文字は化ける！ そこで、UTF-8 時代の﹁おまじない﹂として、次
    asiamoth
    asiamoth 2011/10/23
    いろんな意味で「あのさぁ……」とツッコまれそうな記事を書きました！ 「†」を多用したページは、そこはかとなくメンヘ──メルヘンチックな感じがするけれど。
    リンク
  • 1 2 3 4 5 6 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.