htmlのlang指定は端末の表示や、SEOに影響するので、正しく設定しましょう。 さて、中国語ウェブサイトの言語コードとして、これまで利用していた、 zh-CN（簡体字）、zh-TW（繁体字）は推薦しない書き方になってしまい、現時点で、古い端末の対応も考えて、正しい書き方は以下になります。 中国語簡体字サイト：html lang=”zh-cmn-Hans” 中国語繁体字サイト：html lang=”zh-cmn-Hant” 個々のコードは以下の通りになります。 “zh”はMacrolanguageで、つまり中国語です。（省くことも可） ”cmn”は”普通話”あるいは”国語”、中国の公用語です。対して、方言もいろいろあります。例えば広東語の指定は”yue”。 ”Hans”は”簡体字”ですが、”Hant”は”繁体字”です。 下記例ですが、 html lang=”zh-cmn-Hant”　とい

Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な

2016年12月21日 忙しさにかまけているうち、すっかり投稿のタイミングを逃してしまって、既に旧聞に属する話ではあるけれど、少し前に話題になったh1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い - Togetterまとめについて、アクセシビリティおじさんとして反応しておきたい。 各所で指摘されている通り、h1要素を複数回使うことについて、是か非かでいえば明確に「是」ですね。W3Cの策定する「HTML5」を使おうと、WHATWGの策定する「HTML Standard」を使おうと。ちなみにSEO上でも問題ないらしい。従い、この話題で論じられるべきは、アウトラインアルゴリズムを前提として見出し要素をマークアップすべきか否かでしょう。HTML 5.1の4.3.10.1. Creating an outlineには、以下の注記があります： There ar

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

HTMLやCSSのチェックに使われる、Nu Html CheckerとCSS Validatorというものがあります。 こういうやつですね。 Ready to check - Nu Html Checker The W3C CSS Validation Service それぞれURLを指定したり、ファイルをアップロードしたり、対象を直接テキストで入力してチェックすることができるサービスです。 これらのローカル環境での構築手順が公開されているので、ちょっと試してみたいと思います。 Nu Html Checker Nu Html Checkerでは、以下のページの「How to to run your own copy of the Nu Html Checker」の部分に概要が書かれています。 About the Nu Html Checker Webベースで動かす方法、コマンドラインで使う

[対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。 CSS Niteで講演 2014年9月20日（土）に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。 僕は出演者として登壇し、セマンティック検索と構造化データ、schema.orgをテーマに公演しました。 このなかで、JSON-LDの使い方についても説明しました。 [撮影：飯田昌之] 参加者には録画した動画とスライドが提供されています。 年内には（無償で）一般公開される予定です。 ですが、JSON-LDを使ったschema.orgをもっともっと多くのサイト管理者に使ってもらうことが僕の希望です。 3か月近くも待たせたくありませ

Updated 2015.06.16 / Published 2015.04.24 構造化データは、Webサイトのコンテンツを構造的に把握できるように提示するもので、代表例としてGoogleやBingの検索サービスが構造化データを機械的に抽出・利用しています。Googleではリッチスニペットの名称で、検索結果画面上にイベント、レシピ、レビューなどのメタデータが表示でき、人目を引けることで注目しているWeb制作者も多くいることでしょう。その構造化データの記述方法にはMicrodata、RDFa、JSON-LDの3つが存在し、中でもGoogleが推奨するJSONベースのデータ形式で記述できるJSON-LDであればより簡単に導入することができます。 各構造を表す語彙を定義するschema.org 構造化データにおいてGoogleやBingの検索サービスがサポートしている各構造を表す語彙を定義して

こんにちは！カカドゥの増田です。 SEO対策をしているウェブサービスのエンジニアなら、SEO対策としてパンくずや、レビュー(口コミ)の評点に、MicrodataやRDFaを使って構造化データ(メタデータ)をつける作業を依頼されたことのある人は、少なくないんじゃないでしょうか。 構造化データを記述する方法としては、従来からMicrodataやRDFaなどが使われていましたが、2014年頃からJSON-LDというのも使えるようになっています。 構造化データに関する変遷はJSON-LDでschema.orgの構造化データ導入をより簡単にが詳しいです JSON-LDについては【徹底解説】JSON-LDを使ったschema.orgの記述方法 | 海外SEO情報ブログが詳しいです 僕自身が最近、新規サイトの構築にあたって初めてJSON-LDを使い、JSON-LDは従来の方法のデメリットを解決するとても

構造化データ　マークアップは、MicrodataやRDFなどを利用して、schema.orgやMicroformatsなどのスキーマを設定する手法です。 構造化データ マークアップを行うことで、Googleのリッチスニペットの露出を高めるなどの効果が挙げられます。 Googleが提供しているツールを利用した構造化データ　マークアップの導入方法を紹介します。 今回の目標 Microdataなどの具体的なマークアップの方法にはあまり触れず、ツールを利用して、構造化データ　マークアップを行います。 またGoogleの検索におけるリッチスニペットの最適化を目標としています。 リッチスニペット スニペットとは、検索結果の表示される数行のテキストのことですが、さらに詳細な情報を表示したものが「リッチスニペット」になります。 Googleの検索結果でパンくずリストや商品画像、レビューなどが表示されるのを

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

これまで Basis は Sass/CSS フレームワークとして開発していましたが、先日書いた記事（SassからStylusに乗り換えてみたので違いや躓いたところなど）のとおり Stylus がなかなか良さ気だったので Stylus 版の Basis を作りました。 その中で、Stylus でやるなら単純に Sass を書き換えるだけじゃなく設計から変えたほうが良いのではないか？という気がして内部的には結構書き換えを行ったりしたので、その辺りも含め、Basis とは何か、どういう思想に基づいて開発しているのか、等改めてまとめてみたいと思います。 Basis Stylus 版ドキュメント https://getbasis.github.io Basis の設計思想 Basis は「どんな Web サイトの制作にも適用でき、簡単に使え、邪魔にならない CSS フレームワークが欲しい」との思いか

とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない） 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ

2017/06/21 iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。そのことで無駄に画面を拡大してしまい、入力後に元に戻さないといけません。この自動調整を防ぐには、フォントサイズを16px以上に設定します。 サンプルコードiPhoneやiPadなどiOSでは、入力フォームのフォントサイズが16px未満だと、入力時に文字を大きく見せようとお節介な自動調整をしてくれます。Androidしか持っていないウェブ制作者も、「フォームの文字は16px以上にしておく」ということを覚えておきましょう。 input { font-size: 16px ; }デモ上の入力フォームは、フォントサイズを16px以上に設定しているので、フォーカスしても画面が拡大しません。iPhoneなどでお試し下さい。 <!-- このコードは編集できます。 --> <!DOCTYPE htm

アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ

日立コンサルティング 公共コンサルティング本部の岡山将也マネージャー、サイボウズ グローバル開発本部 東京第2開発部 小林大輔氏、ツルカメの森田雄代表取締役社長・UXディレクターによる対談の後編。アクセシビリティ向上の基本となる“Webの構造化”と、そのメリットについて語り合う。 タイトルや見出しなど、ページの内容をきちんと構造化したHTMLのテンプレートを使うだけで、一定のアクセシビリティは確保できますよね。例えば、音声読み上げソフトで見出しだけを読み上げるといったことができるようになったり。 森田氏　そうですね。でも国内の多くの会社では、構造化されていないテンプレートがまだまだ使われています。テンプレートを構造化されたものに変えることはそんなに面倒ではないはずです。でも、「見た目が変わらないのに作り直す」ということにはなかなか予算が出ない。 Webページの制作を請け負うベンダー側の能力