manabuyasuda / coding-guidelines Goto Github PK

popup-window - dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。
lightbox - carouselの類語で、モーダルのjQueryプラグインのこと。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること。
global-navigation - ほとんどの画面で表示されている、主要なナビゲーション。
local-navigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある。
mega-menu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン（クリックやマウスオーバー）で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い。
linear-navigation - その画面の前後に移動するためのナビゲーション。ページネーションとの違いはページ指定ができないこと。
input - フォームの入力画面。
confirm- フォームの確認画面。
finish - フォームの完了画面。
text-field - input[type="text"]のような利用者が編集する改行なしのテキストフィールド。
textarea - textareaのような利用者が編集する複数行のテキストフィールド。
checkbox - input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス。
radio - input[type="radio"]のような1つの項目を選択するインターフェイス。
select - selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、（dropdownのように）項目が最初は隠れているのが特徴。
submit - 送信ボタン。
reset - リセット（取り消し）ボタン。
modify - 修正ボタン。

Update: ルールの優先度を追加する

必須：使用しなければエラーに繋がるようなもの、ほとんどの場合でベストプラクティスとなるもの。
強く推奨：ほとんどの場合でベストプラクティスとなり得るもの。遵守しない場合はその理由を協議、明記する必要がある。
推奨：いくつかのルールの中で特に推奨しているもの。

SVGをwidth: 100%;にするバグフィックスを削除する

このバグに当てはまることがなかったため。

Update: Gitのリンクを追加

README.mdにGitのドキュメントへのリンクがない。

Update: CLI使用時の具体的なコマンド・状況を追加する

との間は空行を1つ挟んでください。空行がないと、CLIではとがつながって表示されてしまいます。

git log --onelineもしくは--pretty=oneline --abbrev-commit使用時に<Body>も表示されてしまう。
https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E5%B1%A5%E6%AD%B4%E3%81%AE%E9%96%B2%E8%A6%A7

altの設定の修正

読み上げ時に自然になるように大文字は小文字に変更する（「SEO」はエスイーオーなのでそのまま、「GOOGLE」はグーグルなので「Google」とする）。

以下の理由で、文字は画像の表記をそのまま指定する。

スクリーンリーダーによって読み上げは変わる
（画像読み込みができない状況で）alt属性値が表示されたときに画像と情報が若干変わってしまう
スクリーンリーダーの利用者は慣れているので、読み上げがおかしくても頭の中で変換できるひとが多い（特別にせず普通に書く）

Update: SVGの必須属性を見直す

https://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4e#comment-45be7f082d411d5b8cff

SVG に詳しくなく、また、仕様書を読んでいないので不確かなコメントで恐縮なのですが、次の箇所が気になりました。

必須の属性を確認する
タグで必須の属性です。表示崩れの原因にもなるので、必ず指定してください。

xmlns="http://www.w3.org/2000/svg"（SVG名前空間宣言）
xmlns:xlink="http://www.w3.org/1999/xlink"（XLink名前空間宣言）
version属性
width属性とheight属性（pxは省略可）
viewBox属性

単に「必須」の定義が異なるだけかもしれませんが、これらには仕様上の必須（required, must）ではなく、実装を考慮した推奨（recommended, should）も含まれているのではないかなと思いました。

xmlns 属性は HTML に SVG をインラインで記述する場合は省略可能
xmlns:xlink 属性は svg 要素の子孫要素で xlink:href 属性などを使用する場合は必須
version 属性はたしかに指定したほうが良さそうですが、必須なのでしょうか？
width 属性と height 属性は省略可能（省略した場合は不定扱い？）
viewBox 属性は省略可能（省略した場合は svg 要素の表示領域になる？）

Add: JSのガイドラインを追加する

Airbnb JavaScript Style Guide（日本語訳）をベースとする。

ES5のガイドライン（日本語訳）

manabuyasuda / coding-guidelines Goto Github PK

coding-guidelines's Issues

navタグを効果的に使うにaria-labeledbyなどの項目を追加

Update: Gitガイドラインの前提を提示する

Gitのコミットメッセージについてのガイドラインを追加する

Update: コミットメッセージのBodyについて説明を追加する

Add: SVGのガイドラインを追加する

Gitのコミットメッセージのガイドラインを追加する

tableタグの注意点（scope、colspanとrowspan）にcolgroupとrowgroupなどを追加

aria-*属性を使用するの修正

クラス名リストに追加するUI

Update: ルールの優先度を追加する

SVGをwidth: 100%;にするバグフィックスを削除する

Update: Gitのリンクを追加

Update: CLI使用時の具体的なコマンド・状況を追加する

altの設定の修正

Update: SVGの必須属性を見直す

Add: JSのガイドラインを追加する

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent