Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン #frontrend
2017年4月30日 著 4月28日の覚え書き。オシャンティーな渋谷プライムプラザ 4F Creative Loungeで催されたイベント、Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホンにブログ絶対に書くパーソン枠で参加したので、以下に感想など徒然なるままに書こうと思います。ちなみにブログ絶対に書くパーソン枠で参加しておきながらブログ書かなかったら何が起こるのかというのに個人的興味があったけど、社会人としてどうかと思うので、書きます。 継続的にアクセシビリティを高めるために 〜まずは無理なく基本を押さえる〜 サイバーエージェントでアクセシビリティおじさんを務めるますぴーさんのプレゼン。担当されているサービス、FRESH!（本イベントの録画も同サービスで公開されています）での取り組みを「まずはできるところから」「みんなでやる」の2種類に大別して紹介さ
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
文書の先頭へのリンク
文書の特定箇所をターゲットとするハイパーリンク、いわゆる「ページ内リンク」で、<a href="#top">Top of the Page</a> のように top というフラグメント識別子を指定すると、それは文書の先頭へのリンクになります。このとき top という名前を持った要素がページの先頭に存在する必要はありません (もし存在すればその要素へのリンクになる)。 …という仕様があることを、つい最近 MDN 経由ではじめて知りました。どうやらもともと一部のブラウザーの独自仕様だったものが HTML5 において仕様に定められた、という経緯のようです。 文書の先頭へのリンクの実装方法としては、コンテンツ全体をラップする #wrapper や #container、あるいは文書の最上部に位置する #header といったフラグメントへのリンクというかたちで実現する例がよく見られます。しかしこれ
Automatic Figure Numbering with CSS Counters | Codrops
Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page. When writing articles, blog posts, tutorials, magazine entries or anything else, you will often want to include some images, charts, photographs, or even videos and code snippets to illustrate your content. That being said, you will most likely want to attach some kind of caption
アクティブなナビゲーション項目とmark要素
アクティブなナビゲーション項目、つまり現在のページへのナビゲーション項目はclass属性を使ってactiveなどと付けられることが多い。特に間違ってはいないんだけど、いまいちピンとこない。というかしっくりこない。大体は流されてそうしているけど、このウェブサイトではmark要素を使ってる。 HTML5仕様ではmark要素は以下のようになってる。 The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. mark要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストならemやstrong、そしてb
将来のGoogleリッチスニペット対策に！初心者向けにスキーマ(Schema.org)のマークアップ方法を徹底的に教えるよ！
This domain may be for sale!
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
WordPressのカテゴリはindexするべきかno indexするべきか？
先日のエントリーで、 WordPressのカテゴリページをindexするべきかno indexするべきか？ って話題がタイムライン上で少し賑わっています。 知らないと逆効果！WordPressプラグインでSEO対策したつもりの結果 僕の曖昧な記憶では確かGoogleのマットカッツ氏は WordPressのアーカイブは適切に処理するから気にしなくていいってコメントをどこかで見たのですが探しても見つかりません。知ってる方いませんか？ 先のエントリーではカテゴリをindexした方がSEO的に良いというニュアンスが誤解を与えたかもしれません。言いたかったのは「カテゴリーページ」自体がリンクの構築の仕方次第では強力なコンテンツになりうるので「no index」にしちゃうのは勿体ない。そしてそれを目指していた僕のアーカイブが「no index」になってた！という事が言いたかったのですが、どうもカテゴリ
WordPressのカテゴリーページで重複コンテンツ判定回避のためにnoindexを使うべきかどうか – 旧・中川勉社会保険労務士事務所FPウェブシュフ
以前にワードプレスのアーカイブページを検索エンジンにインデックスさせるかどうかの論争に巻き込まれたことがありました。 その当時のエントリを一つにまとめました。 【再改訂】重複コンテンツ問題まとめ(2013年11月～12月) By: SEOPlanter 一部で少しだけ盛り上がった重複コンテンツ祭りに記事を2連投。気分は主催者、多少は燃料投下に貢献したつもりの@web_shufuです。2013年11月から12月にかけての動きなどをまとめてみました。 まとめの中立性に関するご指摘など受けましたが、この件で何度も記事を上げている私がまとめた以上、中立性など担保できません。ので「重複コンテンツ対策不要論派の記事」を末尾にまとめました。 @ENJILOGさんがカテゴリアーカイブをnoindexからindexに変更 [img-link url=”http://rentalhomepage.com/wo
コンテンツは王様なのか
最近に限らず、ウェブでは何かと「Content is king」というフレーズが多用されてきた。テーブル・レイアウトの駆逐期にもよく見た記憶がある。今までもこれからもコンテンツが王様で、それがために人はウェブサイトに訪れる、と。15年前ならそれは正しかったような気もするけど、様々なウェブサイトに同じようなコンテンツが散在する現在は、人はウェブサイトそのものを目的として訪れるようになっているように思う。 僕がAmazonを使うのは良い商品が安く売っているからではなく、Amazonなら手軽に買い物ができるからだ。多くの人もそうではないかと思う。ユーザー登録やクレジットカード番号の入力を乗り越えて、1円でも安い別のショッピング・サイトで買おうなどと思う人は稀だろう。また、Amazonに売っていなかったら諦めるなどという人も多いだろう。 ショッピング・サイトのコンテンツであるところの取扱商品とその
DiagnostiCSS — Visually detect any potentially invalid or inaccessible HTML markup
Visually detect any potentially invalid or inaccessible HTML markup* DiagnostiCSS highlights the following problems within markup: inline styles and event attributes invalid links empty or deprecated elements elements missing required attributes Use it in your project Good news everyone! DiagnostiCSS proudly supports Rails and any other Rack-compatible framework. Use it everywhere Just drag the Di
続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える
2012年 08月 24日 5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 サイトストラクチャとはWebサイトの構造のことです。サイトストラクチャを考える際には、作るサイトの目的に合わせた設計が必要なのは言うまでもありません。では、その目的に合わせた設計とはどういうものでしょうか？それを考えていきたいと思います。 1.サイトストラクチャ（サイトの構造）パターンについて 2.5つのパターンの解説 3.サイトの全体像と部分的な構造 サイトストラクチャ（サイトの構造）パターンについて Webサイト制作にあたり、サイトの設計で多く採用されるものとして5つパターンがあります。 階層型分類構造 ファセット型構造 Web型構造 直線型構造 ハブ＆スポーク型構造 名称だけを見てもピンと来
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9