中国語ウェブサイトの言語コード指定（lang属性） | 国際ウェブマーケティングのエクスポート・ジャパン
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” とい
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 ブラウザのサポートバージョン変化環境面の変化まとめ ブラウザのサポートバージョン変化§ IE 8 サポート終了§ 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になったSVGが（PNGによる代替画像を用意することなく）使えるようになったvideo要素、audio要素が使えるようになった::before, ::after 擬似要素をダブルコロンで書けるようになった:not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになったaddEventListener(),
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 | フロントエンドBlog | ミツエーリンクス
2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者 宇賀 数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況（Can I use） srcset属性のサポート状況（Can I use） 画像のレスポンシブ対応 通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ
Re: h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
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
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
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
W3CのNu Html CheckerとCSS Validatorをローカルで動かす - CLOVER🍀
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の記述方法
[対象: 上級] この記事では、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か月近くも待たせたくありませ
JSON-LDでschema.orgの構造化データ導入をより簡単に
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のための構造化データ記述にこれからはJSON-LDがおすすめ - カカドゥ開発者ブログ
こんにちは！カカドゥの増田です。 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などの構造化データ マークアップについて - kojika17
構造化データ マークアップは、MicrodataやRDFなどを利用して、schema.orgやMicroformatsなどのスキーマを設定する手法です。 構造化データ マークアップを行うことで、Googleのリッチスニペットの露出を高めるなどの効果が挙げられます。 Googleが提供しているツールを利用した構造化データ マークアップの導入方法を紹介します。 今回の目標 Microdataなどの具体的なマークアップの方法にはあまり触れず、ツールを利用して、構造化データ マークアップを行います。 またGoogleの検索におけるリッチスニペットの最適化を目標としています。 リッチスニペット スニペットとは、検索結果の表示される数行のテキストのことですが、さらに詳細な情報を表示したものが「リッチスニペット」になります。 Googleの検索結果でパンくずリストや商品画像、レビューなどが表示されるのを
FlexboxベースのレスポンシブStylus/CSSフレームワークBasisをつくったので設計思想や特徴など
これまで Basis は Sass/CSS フレームワークとして開発していましたが、先日書いた記事（SassからStylusに乗り換えてみたので違いや躓いたところなど）のとおり Stylus がなかなか良さ気だったので Stylus 版の Basis を作りました。 その中で、Stylus でやるなら単純に Sass を書き換えるだけじゃなく設計から変えたほうが良いのではないか？という気がして内部的には結構書き換えを行ったりしたので、その辺りも含め、Basis とは何か、どういう思想に基づいて開発しているのか、等改めてまとめてみたいと思います。 Basis Stylus 版ドキュメント https://getbasis.github.io Basis の設計思想 Basis は「どんな Web サイトの制作にも適用でき、簡単に使え、邪魔にならない CSS フレームワークが欲しい」との思いか
srcset属性について - Qiita
とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない） 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ
iOSで入力フォームでズームするのを防ぐ方法
2017/06/21 iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。そのことで無駄に画面を拡大してしまい、入力後に元に戻さないといけません。この自動調整を防ぐには、フォントサイズを16px以上に設定します。 サンプルコードiPhoneやiPadなどiOSでは、入力フォームのフォントサイズが16px未満だと、入力時に文字を大きく見せようとお節介な自動調整をしてくれます。Androidしか持っていないウェブ制作者も、「フォームの文字は16px以上にしておく」ということを覚えておきましょう。 input { font-size: 16px ; }デモ上の入力フォームは、フォントサイズを16px以上に設定しているので、フォーカスしても画面が拡大しません。iPhoneなどでお試し下さい。 <!-- このコードは編集できます。 --> <!DOCTYPE htm
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
徹底対談後編：適切なHTMLタグを使うことのメリットを知ろう
日立コンサルティング 公共コンサルティング本部の岡山将也マネージャー、サイボウズ グローバル開発本部 東京第2開発部 小林大輔氏、ツルカメの森田雄代表取締役社長・UXディレクターによる対談の後編。アクセシビリティ向上の基本となる“Webの構造化”と、そのメリットについて語り合う。 タイトルや見出しなど、ページの内容をきちんと構造化したHTMLのテンプレートを使うだけで、一定のアクセシビリティは確保できますよね。例えば、音声読み上げソフトで見出しだけを読み上げるといったことができるようになったり。 森田氏 そうですね。でも国内の多くの会社では、構造化されていないテンプレートがまだまだ使われています。テンプレートを構造化されたものに変えることはそんなに面倒ではないはずです。でも、「見た目が変わらないのに作り直す」ということにはなかなか予算が出ない。 Webページの制作を請け負うベンダー側の能力
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html-best-practices/README.ja.md at master · hail2u/html-best-practices · GitHub
README.ja.md#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0for%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B
