TIL

Today I Learned. 知ったこと、学んだことを書いていく

floatの解除 - HTML

CSS HTML

すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない

See the Pen 子要素がすべてfloatしていると親要素の高さは0px by tamago (@tamago324) on CodePen.

floatについては以下のサイトが参考になった
CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス

floatの解除方法

  • float解除用divの追加
  • 【これ良い！！】親要素にdisplay: flow-root;を適用

float解除用divの追加

clearプロパティを使うことでfloatを解除することができる

例）右側のfloatの解除

.clear {
  clear: left;
}

See the Pen floatの解除(clear: left;) by tamago (@tamago324) on CodePen.

親要素にdisplay: flow-root;を適用

親要素にdisplay: flow-root;というスタイルを適用するだけでいい！！
これ単純だし、いいかも！！

.container {
  display: flow-root;
}

clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス

See the Pen floatの解除(display: flow-root;) by tamago (@tamago324) on CodePen.

すごい！！！！！これいいね！！！！

参考文献

メディアクエリ(@media) - HTML

レスポンシブデザイン CSS HTML Progate

レスポンシブデザインをするために必須のもの
ブラウザの画面サイズに対応して、CSSのスタイルを変更したいときに使う

書き方

@media(条件) {
  /* 条件がTrue時に適用させるスタイル */
}

CSSで@mediaというキーワードを使う。指定した条件がTrue時に適用させるスタイルを記述する

端末のブラウザ画面サイズ目安

スマホ、タブレット、パソコンのブラウザ画面サイズの目安は以下の通り

名称 画面サイズ
スマホ 〜670px
タブレット 671〜1000px
パソコン 1001px〜

メディアクエリを書くときには次のように書く

/* パソコン画面で適用するスタイル(通常通りに書く) */

@media(max-width: 670px) {
  /* スマホ画面で適用するスタイル */
}

@media(max-width: 1000px) {
  /* タブレット画面で適用するスタイル */
}

レスポンシブデザインを適用するために必要なmetaタグ

viewportというのが必要になるため、headタグ内に記述する

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • viewportとは表示領域のこと
  • width="device-width"はページ幅をデバイスの画面の横幅に指定
  • initial-scale=1.0はページの初期表示の倍率を1に指定

メディアクエリを別ファイルに記述

メディアクエリは通常時のCSSとは別ファイルで作成すると管理がしやすくなる！！
インポートするときには必ずviewportの記述よりも下に記述すること

例）メディアクエリ用のCSSがresponsive.cssの場合

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="responsive.css">
  ...
</head>

参考文献

aria-labelについて - HTML

HTML GitHubプロフィールページ書いた時知った

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

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

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

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

aria-labelはいつ使うの？

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

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

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

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

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

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

参考文献

data-*属性 - HTML

HTML JavaScript GitHubプロフィールページ書いた時知った

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で返ってくるため、数値で扱いたい場合にはキャストしないといけない

参考文献

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

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

CSS 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.

続きを読む