親要素の横幅いっぱいに表示 - CSS

親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ

• box-sizing: border-box;を使う
  paddingをborderもwidthに含める
• marginではなく、paddingで調整する
  marginはwidthに含まれていないため

<div class="main">
  <textarea class="editer"></textarea>
</div>

* {
  /* すごい重要！！ */
  box-sizing: border-box;
}

.editer {
  width: 100%;
  background-color: red;
}

.main {
  /* paddingで調整 */
  padding: 10px;
}

See the Pen 親要素の横幅いっぱいに表示 by tamago (@tamago324) on CodePen.

横幅いっぱいに表示できた！！！

親要素(.main、bodyタグ、htmlタグ)をwidth: 100%;にしなくてもいいのかな？というかなんでした方がいいと思ったのだろうか...

参考文献

• 横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All About

比率を変えずに画像をいっぱいに表示 - CSS

background-sizeを使うことで表示するときの大きさ設定ができる
Emmentのショートカットはbgsz
設定できる値は以下の通り

値	説明
contain	縦横の比率を変えず、切り取りせずに、できるだけ大きく表示(もし、余白がある場合、繰り返して表示される)
cover	縦横の比率を変えず、必要であれば切り取りして、できるだけ大きく表示(余白を作らない)

参考文献

• Progate
• background-size - CSS: カスケーディングスタイルシート | MDN

role属性 - HTML

そのタグの役割が何なのかを明示することができる

• application: アプリケーション
• form: 検索以外のフォームを含む領域
• search: 検索項目を含む領域

<div role="search">
    <form action="" class="search-form">
        <input id="" type="text" name="">
        <button type"submit">検索</button>
    </form>
</div>

参考文献

• レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-riverstyle Vanguard
• HTMLに「role属性」を付与してWebアクセシビリティの向上を目指す | 8bit モノづくりブログ｜Web制作、Webサービスに関するコラム｜東京都渋谷区のWeb制作会社 株式会社8bit

autocapitalize属性 - HTML

IOS端末でautocapitalize属性はユーザーが入力した文字列の先頭の文字を大文字にするかどうかの設定
offにしておけば、大文字にならない(初期値ではoff)

<input type="text" autocapitalize="off">

IOS端末だとなるのかな？

See the Pen QmJzXL by tamago (@tamago324) on CodePen.

追記：iPhoneから打ってみたけど、自動でならなかったよ！？なにこれ...

値の種類

値	説明
off	機能無効
none	機能無効
on	先頭を大文字に変換
sentences	文章の先頭を大文字に変換
words	単語の先頭を大文字に変換
characters	文字の先頭を大文字に変換

参考文献

• autocapitalize=mode - 自動大文字入力制御
• autocapitalize - HTML | MDN

レスポンシブデザインで気にすること - HTML

Progateに書いてあったことを自分なりにまとめてみる

• 画面サイズによって横並びにするコンテンツ数を変更する
• paddingとborderもwidthに含める
• width: 100%;にする
• floatの解除
• フォントサイズもレスポンシブ化
• 最大の横幅を指定する

画面サイズによって横並びにするコンテンツ数を変更する

例）通常時は4つ、1000px以下のときは2つ

通常時：25%
1000px時：50%

1000pxのときも25%にしてしまうと、小さくなってしまうため

/* 通常時 */
.item {
  width: 25%;
}

/* 〜1000px時 */
@media(max-width: 1000px) {
  .item {
    width: 50%;
  }
}

See the Pen 画面サイズによってコンテンツの横幅を変える by tamago (@tamago324) on CodePen.

paddingとborderもwidthに含める

コンテンツを横並びに敷きつめるときに、paddingとborderを設定する場合、コンテンツの合計の横幅が100%を超えてしまう
対処法として、box-sizingプロパティにborder-boxを指定する。こうすることで、要素のwidthにpaddingとborderが含まれるようになる

width = width + padding + border

※ marginは含まれないことに注意する

また、box-sizingをborder-boxにする場合、すべての要素に対してスタイルを適用すること
表示がおかしくなることがあるらしい

* {
  box-sizing: border-box;
}

box-sizingを指定しない場合

See the Pen レイアウト崩れ by tamago (@tamago324) on CodePen.

box-sizing: border-box;にした場合

おさまってる！！！

See the Pen レイアウト崩れの対処法(box-sizing: border-box) by tamago (@tamago324) on CodePen.

widht: 100%;にする

一番上の要素の横幅を100%にしておけば、画面サイズによって横幅が決まるようになる

.container {
  width: 100%;
}

floatの解除

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

float解除についてはここにかいた

親要素にdisplay: flow-root;をつけるのが簡単でいいかも

.contaienr {
  display: flow-root;
}

フォントもレスポンシブ化

フォントサイズもレスポンシブ化する必要がある

画面が小さくなったら、文字も小さくする

最大の横幅を指定

パソコンで2000pxとかの画面サイズで表示した場合、コンテンツを%で指定していると、横長になってしまう
横幅の最大値を設定しておけば、横長になりすぎることがなくなる！！

max-widthプロパティで指定できる

.container {
  max-width: 1200px;
}

参考文献

• Progate
• 【CSS】box-sizing:border-boxの使い方｜効かない時は？

floatの解除 - 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.

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

参考文献

• CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス
• clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス

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

レスポンシブデザインをするために必須のもの
ブラウザの画面サイズに対応して、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>

参考文献

• Responsive Web Design Viewport
• レスポンシブウェブデザインにおけるviewportを理解しよう！
• もう逃げない。HTMLのviewportをちゃんと理解する - Qiita