aria-labelについて - HTML

ウェブアクセンシビリティを意識したWebアプリを作るときに使う！

アクセシビリティとは、特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。
アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい場所など）においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。

アクセシビリティとは - IT用語辞典 Weblio辞書

アクセンシビリティとは「誰でも使える同じように使える」って意味かな？
これはすごい大事らしい！！imgタグにalt属性つけるとか

aria-labelはいつ使うの？

aria-label属性は画像や文字に情報を付けたいときとかに使う

文字列を表示する必要が無いケース、例えばアイコンのようなビジュアルで目的を表現する要素に対して指定を行います。

aria-label属性 | WAI-ARIA - HTMLリファレンス

アイコンフォントを表わす HTML 要素の中に「aria-label= "xxx" (xxx は具体的な自然言語によるラベル)」を記述することで、スクリーンリーダーが認識して読み上げてくれるラベルを付与することができます。

アイコンフォントのアクセシビリティ向上 — Website Usability Info

目の不自由な方のためのスクリーンリーダーというものが読み上げられるようになる

参考文献

• 知っていると便利なaria-label属性の使い方 – ofujimiki
• ARIA ラベルと関係性  |  Web  |  Google Developers
• アイコンフォントのアクセシビリティ向上 — Website Usability Info
• アクセシビリティとは - IT用語辞典 Weblio辞書
• aria-label属性 | WAI-ARIA - HTMLリファレンス

data-*属性 - HTML

HTML5からはタグの中にdata-*属性といったような「独自データ属性」というものを定義できるらしい。data-*に遭遇したときには「自分で定義してる属性だー」って思えばいい

JavaScriptからはHTMLElement.datasetプロパティでアクセスできる

JavaScriptなどに渡したい値を設定しておくのかな？よくわかってないです！！！

JavaScriptからdata-*属性の値を取得

値の取得は要素.dataset.属性名でできる

例外としてはdata-phone-numberみたいに-で繋がっている場合にはphoneNumberとキャメルケースに変換した値でアクセスできる。要素.dataset.phoneNumberみたいな

<div class="prefecture" data-place="tokyo">
  東京都品川区
</div>

const prefectureElem = document.querySelector(".prefecture");
const place = prefectureElem.dataset.place;
console.log(place);

• data-placeという独自の属性を定義
• JavaScript側でHTMLElement.dataset.placeで取得可能
  data-以降の文字列がプロパティとして扱える

See the Pen data-*を使ったデータの取得 by tamago (@tamago324) on CodePen.

HTMLElement.dataset.プロパティ名で取得できる値はstring型 (2018/04/18 追記)

数値で値を設定していても、stringで返ってくるため、数値で扱いたい場合にはキャストしないといけない

参考文献

• Using data attributes - ウェブ開発を学ぶ | MDN
• HTML5における独自データ属性の取り扱い - Qiita
• data-* - HTML | MDN

タグの折りたたみ - Vim

zfitで折りたたみ
zaで折りたたみ切り替え
zRですべての折りたたみを解除

参考文献

• Vim as a HTML Editor - Dark Matter in Cyberspace

Twitterのログインページを書いてみた - HTML

以下の記事を見て、「すでにあるページを作ることで学べる」みたいなことが書いてあったから、やってみた

2018年の最先端フロントエンドエンジニアになろう - Qiita

Twitterのログインページを書いてみることにした(HTMLのみ、CSSはまだ書いていない)
書いたソースはGistにおいた
Twitterのログインページを書いてみた - Gist

実際のソースと自分で書いたソースを比較して気づいた点

構造を重点的に見ること！！

1. インデントはスペース2つで書いてある
2. divが多い！！
3. 10行目のclass名がconteinerだった(containerは結構使われるのかな？)
4. 上のヘッダーにはul liが使われていた。(ナビゲーションだもんね...)
5. 言語: 日本語は右寄せにするため(?)に、divで囲まれている
6. smallタグで文字を小さくしている
7. fieldsetタグとlegendタグが使われていた
8. ユーザー名とパスワードそれぞれがdivで囲まれている
9. ログインボタンがinputタグではなく、buttonタグ
10. labelでcheckboxを囲んでリンクさせている

fieldsetとlegend - HTML

HTML5で登場したタグ
fieldsetはフォーム部品をまとめるために使う
legendはそのまとまりのタイトル

<form action="">
    <fieldset disabled>
        <legend>注文依頼</legend>
        <div>
            商品名：<input type="text" name="" id="">
        </div>
        <div>
            数量：<input type="text" name="" id="">
        </div>
    </fieldset>
</form>

See the Pen fieldsetとlegend by tamago (@tamago324) on CodePen.

角を丸くする border-radius - CSS

角を丸くするにはborder-radiusプロパティを使う
Emmentのショーットカットはbdrs(border-radius)

border-radius: 半径;

指定する値は半径となる

また、４つの角それぞれで指定することもできる

値	説明	Emment
border-radius	すべての角、それぞれ指定	bdrs
border-top-left-radius	左上	bdtlrs
border-top-right-radius	右上	bdtrrs
border-bottom-right-radius	右下	bdbrrs
border-bottom-left-radius	左下	bdblrs

border-radiusで４つの角を指定する場合の順番は
border-radius: 左上 右上 右下 左下;となる

See the Pen 角を丸くする by tamago (@tamago324) on CodePen.

参考文献

• Progate

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

ボックス - CSS

インラインボックスとブロックボックス

要素  
├── インラインボックス  
└── ブロックボックス  
    ├── コンテンツに意味づけ  
    └── 情報を整理・グループ化 

インラインボックス

• 横並び
• display: inline;

コンテンツがぎりぎり収まる大きさのボックス
主にテキストを装飾するもの(b、strong)や、すべてのフォーム部品など

インラインボックスは上下のmargin、width、heightを設定することはできない

ブロックボックス

• 縦並び
• display: block;

親要素と同じ幅のボックス
ブロックボックスの中でも2つにわけられる。

• コンテンツに対して意味付けを行う
  • h1やpなど
• 情報を整理・グループ化を行う
  • ul,liやdivなど
  • ページの情報整理、CSSのレイアウト

(インラインブロックボックス)

• 横並び
• display: inline-block;

上下のmarginとwidth、heightを設定可能なインラインボックスみたいな感じ
横並びにして、widthやheightを指定したいときとかに使う？

---

ボックスモデル

ボックスとは、コンテンツを表示するために使う領域のこと
内側から以下のようになっている

• コンテンツ widthとheight
• パディング padding
• ボーター border
• マージン margin

用語	説明
padding	コンテンツのすぐ外側にある領域。ボックスに背景色を設定した場合、この領域も塗りつぶされる
border	ボックスの周囲の枠線
margin	このボックスの周囲のボックスとの距離

ボックスは「コンテンツ+パディングの領域」ってこと！

インラインブロックの活用

インラインの場合、うまくpaddingが適用されないことがある？
そんなときは、インラインブロックを使う！！

インラインレベル要素にも上下左右のpaddingを指定できるが、そのpaddingの大きさは親要素の高さを決定付ける数値として加算されず、親要素の大きさ以上のpaddingを設定した場合は親要素を突き破って表示される。

marginとpadding まとめ | CSS中級編

display: inline-block;とするだけ！！！
そうすると、うまいことpaddingが効いてくれる

inlineの場合

See the Pen インライン by tamago (@tamago324) on CodePen.

ボタンの上下のpaddingがうまく効いていない

inline-blockの場合

See the Pen インラインブロック by tamago (@tamago324) on CodePen.

指定通りにpaddingが効いている！！

参考文献

• Progate
• marginとpadding まとめ | CSS中級編

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)