Web プログラミング

【もりけん塾46日目】widthの詳細をまとめてみた

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

現在LP制作で追われていて、行き止まりにあったのがwidthだったことが判明したのでまとめていきます。

widthのプロフィール

widthの基本的なプロフィールをまとめていきます。

 

width 幅を指定する
使用 <TABLE>・ <TD>・ <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT>などの領域の幅を指定
基本 要素の幅を設定。
コンテンツ領域の幅を設定
応用 box-sizing を border-box に設定で境界領域の幅を設定。
→つまりwidth+padding+border。要素がブロック要素→コンテンツ領域の寸法は

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height

の各プロパティによって正確に定義。

注意 min-width および max-width プロパティはwidth を上書きに。
外側 widthの外側は

  1. padding
  2. border
  3. margin

の順で空白・けい線を表すプロパティに覆われている。

※画像参照

動作webブラウザ 全バージョンOK

widthなめてました!奥が深い…!

 

widthで使う値(heightも含むものあり)

vscodeで先読みででてくる中に知らない値がズラーッとでてきたので、調べてまとめました。

 

意味 備考(相対的:フォント20ptの場合)


auto


px 1画素(px)のサイズを1とする単位。
※実際はdpiで表示。モニタ解像度により変化。
【利用場所】
・border-radiusはpx指定が基本。
・円や楕円形にする場合は50%指定。
【注意点】
・px使用はレスポンシブデザインで調整が必要になり大変に。
・使うときは相対値を使うべし。


% 親要素のwidthの値を基準にして割合を%で表示。
PCブラウザのデフォルトである16pxをベースに<body>のフォントサイズをemで先に決めると本文の文字サイズに。
見出しは大きくコラムは小さく、文字のバランスをem設計。
(70%の場合:20pt✕70%)
em 現在使用中の標準フォントの高さを1とする単位。 (1.5emの場合:20pt✕1.5)
rem 基本のフォントサイズ基準の相対指定。 (0.7remの場合:16px ✕ 0.75=12px)
ex 現在使用中の標準フォントの小文字「x」の高さを1とする単位。 (2.5exの場合:20ptの「x」の高さ✕2.5)
親から継承 length 絶対的な値で幅を定義
vw viewport widthの略。
viewportの幅に対する割合。
vh viewport heightの略。
viewportの高さに対する割合。
vmin viewport minimumの略。viewportの幅と高さのうち、値が小さい方に対しての割合。
vmax viewport maxの略。viewportの幅と高さのうち、値が大きい方に対しての割合。
ch 半角数字の「0」の幅を1とする。
点字レイアウト。
gd グリッドモジュールの略。
max-content 望ましい固有の幅。 文字にぴったり合うマーカーなど
min-content 最小の固有の幅。
fit-content
(<length-percentage>)
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換える。
つまり、min(max-content, max(min-content, <length-percentage>))。
inherit 親要素のwidthの設定を継承。
max-width 幅の最大値を指定する
min-width 幅の最小値を指定する
height 高さを指定する
max-height 高さの最大値を指定する
min-height 高さの最小値を指定する

 

youtubeの海外の方を見ているとemを頻繁に使っていたので、今後これを使って応用していきたい。

 

参考URL①CSSの長さ、大きさを表す単位/変換
参考URL②【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)

 

おわりに

PCだときれいに画像が表示されているのに、レスポンシブデザインにすると縦長で文字が何も見えなくなり調べるとwidthが原因でした。

 

通常のcssでpxを指定し、レスポンシブデザインで%指定もしくはそのままできれいに表示されました!

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada