マークアップのいらない未来を考える
みなさん、マークアップ好きですか？ 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね！ ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな？」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか？ と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。 この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまと
IE=edgeが効かない場合の対処法 | USEFuL NOTES
ウェブサイトを運営するものにとって、Internet Explorerの動作保証は大きな課題。複数のver、そして互換モードの存在により検証も一苦労です。特にHTML 5、CSS3、最新のスクリプトで組み上げたページはver.によって再現しなかったり、表示崩れが起きたり運用者をひやひやさせます。 そこで普及してきたのがIE8以降のverでレンダリングモードを指定するmeta要素の記述。このmetaの中で最新のレンダリングモードを指定するようにしておけば、互換表示モードに設定していてもmetaの記述を優先してレンダリングされるので、IE7を意識して作る必要がありません。 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> この記述を入れると、IEで閲覧時にGoogle Chrome Frameで表示し、Google
IEに互換表示をさせないX-UA-Compatibleの指定 - loconoco
IEはバージョンごとに表示方法（レンダリング）がガッツリ変わると言う、とてもやっかいなブラウザです。 また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、ありがた迷惑この上ない機能が搭載されています。 このサイトのトップページをIE10で表示すると・・・ アドレスバーに紙が破けたようなアイコンが表示されます。そしてこのアイコンをクリックすると互換表示に切り替わり、再レンダリングがはじまります。 box-shadow、background-sizeなどのCSSが効かなくなってしまいました。 また同じアイコンをクリックすれば互換表示が通常表示に戻ります。もし通常表示に戻さなかったか場合、IEは設定を覚えてしまい、再度同じURLにアクセスすると、また互換表示になってしまいます。IEを終了して再起動しても戻りません。 新バージョンのIEを使用しているユ
ハイパーリンク -- ごく簡単なHTMLの説明
WWWでは、読者は文書のある部分から、関連するほかの文書・場所へ直接ジャンプし、関心を持ったトピックについて、「文書」の枠を超えて次々に渡り歩いていくことができます。このような機能を持つ文書をハイパーテキストと呼び、関連づけをすることを「リンクを張る」と言ったりします。HTMLではa要素を使って文中の語句や画像からリンクを形成します。 目次： アンカー要素 ほかの文書へのリンク 文書の特定の場所へのリンク 名前を付ける 名付けたフラグメントにリンクする 名前付けの注意点 同じファイルの指定箇所へのリンク フラグメント識別子に関する補足 取り上げる要素： a アンカー要素 本文中のリンク情報は アンカー要素（a要素タイプ）で表現します。アンカー（Anchor）とは「錨」のことですが、何かをつなぎとめるものという一般的な意味もあります。文書のある場所から別の場所（リソース）へのリンクを、文書と
ちゃんと使い分けてる？alt属性とtitle属性の違いについて
こんにちは、井畑です。 今回は、alt属性とtitle属性についてです。この２つは、似たような意味合いのタグですが、実は用途が大きく違います。自分自身、最初のころは混同していたので、復習もかねて記事にしてみました。 よく使う属性値だからこそ、ちゃんと理解して使いたいですよね。 それではどうぞ！
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
Facebook - Facebook[いいね！]ボタン設置・カスタマイズ：吹き出し（バルーン,ボックスカウント）の位置を変更｜及川WEB室
Facebook[いいね！]ボタンを自分のサイトに設置する方法と、ボタンのカスタマイズについてメモしておきます。 特に、ボタンの吹き出し（バルーン、ボックスカウント）の位置を横から上に変更して表示したかった。その方法をメモ。 コードを取得・自分のホームページに設置 ↓こちらでコードを取得できる。 Like Button - Facebook開発者 [Get your Like Button Code]で、ある程度表示内容を設定して[Get Code]ボタンをクリックすると、コードが表示される。 コードが2つある。 1つ目のコードをコピーし、ボタンを設置するご自分のホームページのWEBページ内の<body>タグのすぐ後にペースト。 もうひとつのプラグインコードをコピーし、WEBページ内で、いいねボタンを設置したい個所にペースト。 コードをカスタマイズ 吹き出しを横から上に変更するには、コード
![Facebook - Facebook[いいね！]ボタン設置・カスタマイズ：吹き出し（バルーン,ボックスカウント）の位置を変更｜及川WEB室](https://cdn-ak-scissors.b.st-hatena.com/image/square/034410f7fbbf735d0a6e889efbb08aeea3e9dc4d/height=288;version=1;width=512/http%3A%2F%2Fwww.oikawa-sekkei.com%2Fweb%2Fcommon%2Fimages%2Fcommon%2Ffacebook_ak.gif)
Twitter - Twitter[ツイート]ボタン設置・カスタマイズ：吹き出し（バルーン,ボックスカウント）の位置を変更｜及川WEB室
Twitter[ツイート]ボタンを自分のサイトに設置する方法と、ボタンのカスタマイズについてメモしておきます。 特に、ボタンの吹き出し（バルーン、ボックスカウント）の位置を横から上に変更して表示したかった。その方法をメモ。 Twitter[ツイート]ボタン設置・カスタマイズ方法 コードを取得・自分のホームページに設置 ↓こちらでコードを取得できる。 Twitter / Twitterボタン [ボタンのオプション]で、ある程度表示内容をカスタマイズ。 [コードのプレビューを見る]の項目に表示されたHTMLコードをコピーする。 コピーしたコードを、ご自分のホームページのWEBページ内で、ツイートボタンを設置したい個所にペースト。 コードをカスタマイズ ツイート 吹き出しをボタンの上部に表示するには、アンカータグ（<a>）のアトリビュートに「data-count="vertical"」を設定する
構造化データとは？非エンジニアでもよく分かる！初心者向け徹底解説！ | ナイルのマーケティング相談室
これだけは押さえてほしい構造化データ2つのポイント 難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。 検索エンジンがページの内容を理解しやすくなる 検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。 そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま
アンカーの最適化
Updated 2007.01.30 / Published 2007.01.30 従来の HTML では a要素の name属性にアンカー名を付与してウェブページ内の特定箇所をリンク先として参照できるようにする目的地アンカー（終点アンカー）が用いられてきましたが、XHTML では name属性は廃止され、旧来の目的地アンカーのテクニックは利用できません。本文書では HTML4 の規格から新たに登場した id属性を name属性に代わって指定することでアンカーを最適化させる手法を解説します。 アンカー内容を空にして使う旧来の手法について a要素に name属性を指定する目的地アンカー（終点アンカー）は、従来の HTML によく用いられる手法ですが、開始タグと終了タグの間、つまりアンカー内容を空にして使われていることがあります。これはアンカー内容を空にすることで、目的地アンカーを視覚的にわか
ページ内リンクがずれる…原因はhtmlの書き方次第！？ | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
WordPressでblogを書いていて、「あーここの部分は一部の人しか興味ないかな？」と思うようなときに、ページ内リンクを付けたくなります。そしてページ内リンクを付けて試してみると、あれれ？思ったところとちょっとずれてしまっている…ということが起こってしまいました。 それをどうしたらずれないようにするか、というか 何が問題だったのか？ が分かって解決したので書いてみました。 小見出しにページ内リンクを貼りたい… h2を使って小見出しを付けて、blogを書いています。 ＜ｈ２＞ステップ１＜／ｈ２＞ 文章～ ＜ｈ２＞ステップ２＜／ｈ２＞ 文章～ ＜ｈ２＞ステップ３＜／ｈ２＞ 文章～ のような感じで。例えば最初のリード部分で目次みたいなものを作って やり方はこちら！ ・ステップ１ ・ステップ２ ・ステップ３ それぞれをクリックしたときに、ページ内リンクでジャンプして欲しいときにこのように飛び先
はてなブログ | 無料ブログを作成しよう
ゆるソロツー 牛久大仏 セイコーマート 梅雨前最後！と思って のんびりソロツーリングに行ってきました。 ツーリングといってもそんなに走ってないゆるゆる。 梅雨前最後と思いつつ なかなか梅雨が来なかったので 焦って行く必要もなかったかなと思ったけど ツーリング日和な気候でした。 ゆるすぎて書くほど…
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
RSSフィードが存在することを知らせるためのlinkタグ | TechMemo
シェアしてね♪ Tweet ワンコインで広告掲載してみませんか？ Tweet ブラウザの拡張機能などを導入していると、サイトを開いた時にRSSフィードが購読可能かどうかを調べて、アイコンでお知らせしてくれます。 私は、Google Chromeの「RSS Subscription Extension」というエクステンションを入れていますが、RSS Subscription Extensionを入れていると、RSSフィードが見つかった場合以下のようなアイコン(URLバーに表示されます)でお知らせしてくれます。 アイコンをクリックすると、WEBサイトに設定されているRSSフィードを表示してすぐにフィード購読を登録できます。 RSSフィードがあるかどうかをどうやって認識しているかというと、HTMLの<head>内に設置されているRSS用のlinkタグを調べています。このタグがないと拡張機能はRS
リストの作成 -- ごく簡単なHTMLの説明
情報を見やすく整理して表現する方法として、リスト（一覧）はとても効果的です。HTMLでは、項目を列挙するul要素、順序を考慮して列挙するol要素、用語とその説明という定義型のリストを構成するdl要素の3つのリスト要素が用意されています。 目次： リストで情報を分かりやすく整理する 並列列挙リスト 順序付きリスト 定義型リスト リスト要素はブロックレベル リストの入れ子 取り上げる要素： ul ol li dl dt dd リストで情報を分かりやすく整理する 基本的には本文は見出しと段落だけで構成できるはずです。しかし、一連の並列される情報や、順序立ててステップを説明するような内容は、リストとして表現する方が分かりやすいことがあります。 一つの段落が長くなってしまう場合は、そこで述べようとしているポイントを箇条書きにすると、簡潔に表現することができます。また、複数の段落に分けて書いている内容
アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」
H33: title 属性を用いて、リンクテキストを補足する | WCAG 2.0 達成方法集
文字実体参照一覧
