マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
RSSが衰退し、SNSが繁栄する時代に改めて考えたい、ニュースリリースのマークアップ
7月下旬のことですが、またひとつフィードリーダーが終了してしまいました。 【重要】Live Dwango Reader/LDR Pocketサービス終了のお知らせ(blog.livedoor.jp) 終了の理由はこの数年で利用者も大幅に減少しており、サービスとしての役割を終えたとのことですが、ユーザーが別サービスに移行したというより、RSS/Atomフィードで新着をチェックする需要そのものが減っているのでしょうね。代わりに今はSNSで更新告知をしたり、プッシュ通知ができるサービスも増えたりしています。 RSS/Atomフィードでの更新チェックは、10分に1回、30分に1回などの間隔で巡回をするため、 リアルタイム性に劣る 更新頻度が少ないサイトほど無駄な通信の割合が高い など時代遅れの面もありますが、サイトの新着情報を確実に把握するという意味で総合的に考えると、その特性は未だ捨てがたいもの
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com
2016年9月23日（金）に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので（開発環境、作業効率、メンテナンス性などなど）、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
Web標準を学ぶ重量級コンテンツ「Web標準カリキュラム」の日本語訳が公開開始
オペラソフトウェアが中心となり、Yahoo!やWaSP（The Web Standards Project）などが協力して作成した、Web標準を学ぶためのオンラインコンテンツ「Web標準カリキュラム」日本語訳の一部公開が開始されました。 翻訳を行っているのは、W3Cの標準化動向などをブログで紹介していることでも知られる企業ミツエーリンクス。日本語訳の公開も、同社のブログのエントリ「Web標準カリキュラム 日本語訳の公開を開始 | Web標準Blog | ミツエーリンクス」で明らかにされました。 「Web標準カリキュラム」のオリジナルは英語版の「Opera Web Standards Curriculum」。全体で10章もある重量級のコンテンツです。 Introduction to the world of web standards Web Design Concepts HTML bas
TEXTAREAの謎の余白
Notice Win + IE で、 <TEXTAREA> や <INPUT> において、 CSSの指定次第では、謎の余白ができたり、文字を入力すると幅が伸びたり、 とにかく変な挙動をすることについての解決策。 参考ページ テキスト入力フォームの幅が文字入力時に変化する (Internet Explorer (Windows) CSSバグリスト) 文字を打つとビロンと伸びるフォームアイテム (ねこめしにっき～2003年11月中旬) <p style="margin-left:50px;"> <textarea cols="50" rows="10"></textarea> </p> どちらにも width を指定してない通常状態。 文字を入力したりしてもいたって変わりはない。 P + width <p style="margin-left:50px; width:90%;"> <texta
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Wiiのウェブブラウザ「インターネットチャンネル」向け ウェブページ制作の基本
我的春秋: タグクラウドのマークアップ
東京webデザイナー日記: 日経平均銘柄225社サイトの脱テーブル率調査