はじめに
今更Progateをやり始めたマンです。
前回の記事に引き続き、知らなかったことを残しておきます。
見ずらい内容なので、気になった見出しがあればご覧ください。
メモず
メディアクエリ@media (max-width: [num])
画面幅の大きさでクエリできる。
max-width: 1000px
なら、1000px
以下の画面の時に当てはまる。
この時の1000px
をブレイクポイントと呼ぶ。
スマホ:~670px
タブレット:671px~1000pc
PC:1001px~
*
:すべての要素
html
に対して書くよりスマートな上、継承の問題を回避できる。
box-sizing: border-box;
標準のルールはbox-sizing: content-box
で、padding
とborder
を要素サイズの外として扱う。
box-sizing: border-box;
はpadding
とborder
を要素サイズの内として扱う。
デメリットは一部の古いブラウザとの互換性・計算の複雑さ・継承されないことがあるが、フレキシブルなレイアウトを容易にするメリットは大きい。*
と組み合わせて使おう。
viewport
の呪文
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ビューポートの幅をデバイスの幅に合わせ、初期のズームレベルを1に設定
子要素はまとめて書け"ない"
通常のCSSでは、
header h1 {}
header h2 {}
を
header {
h1 {}
h2 {}
}
と書くことはできない。
ただし、プリプロセッサを使えば可能。
その場合は、プリプロセッサを通して通常のCSSに変換・実行される
float
を回避するclear
子要素が全てfloatでも、親要素が高さを持つように設定してみましょう。 floatはclear: left;で「浮いている」状態を解除できます。 ここではclear: left;を適用するためだけの空のタグを用意しましょう。 空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくようにしましょう。
clear
という言葉から「相手要素のfloat
状態を消してしまう」イメージをしたが
「自分要素がfloat
をfloat
として扱わなくなる(回避する)」ということ
clear
プロパティは以下の値を取ることができます:
none
: 要素はfloat
された要素の横に配置されます(デフォルト)。left
: 要素は左側にfloat
された要素の下に配置されます。right
: 要素は右側にfloat
された要素の下に配置されます。both
: 要素は両側にfloat
された要素の下に配置されます。
display: flex
CSS3で導入されたレイアウトモデル
方向の独立性:
flex-direction
プロパティを使用して、子要素(フレックスアイテム)を水平(row
)または垂直(column
)に配置することができます。これにより、横並びだけでなく縦並びも容易に実現できます。コンテナ内での自動調整:フレックスアイテムは、利用可能なスペースに応じてサイズを自動的に調整できます。
flex-grow
、flex-shrink
、flex-basis
などのプロパティによって、アイテムの拡大や縮小の挙動を制御できます。整列と配置の容易さ:
align-items
、justify-content
、align-self
などのプロパティを使用して、アイテムの縦横の整列や配置を簡単に調整できます。レイアウトの単純化:従来のフロートやポジショニングに比べ、フレックスボックスはより直感的で柔軟なレイアウトを可能にし、特に複雑なレイアウトやレスポンシブデザインにおいてその威力を発揮します。
他
-
flex-wrap: wrap
折り返し
コンテンツの高さ=height
or height + padding
?
height + padding
がコンテンツの高さになる。
height: 500px; padding-top: 50px
だとコンテンツ表示の領域の高さは550px
になる(例えばbackground-color
の適用範囲)。
もしコンテンツ全体で500px
にしたい&padding-top: 50px
で余白を作りたいときは、
- 子要素に
padding
を適用する。 -
box-sizing: border-box
を使用する。
text-align
の規定値はleft
もしくはstart
。アラビア語も考慮するとstart
が望ましい。
text-align
プロパティのデフォルト値(規定値)は通常start
です。ただし、実際のブラウザの挙動では、多くの場合left
がデフォルトとして扱われます。
text-align: start;
は、要素のテキストをその要素の「開始位置」に揃えることを意味します。これは、文書の書かれている言語の書字方向に依存します。たとえば、左から右へ書かれる言語(英語など)では、start
はleft
と同じ挙動をします。一方、右から左へ書かれる言語(アラビア語やヘブライ語など)では、start
はright
と同じになります。
多くのウェブサイトは左から右への書字方向を採用しているため、
text-align
のデフォルト値がleft
として振る舞うことが一般的です。しかし、国際化されたウェブコンテンツではstart
が適切な選択となる場合もあります。これにより、異なる書字方向を持つ言語に対して自動的に適切なテキスト揃えが行われるためです。
終わりに
とりあえずProgateのHTML / CSSは修了しました。
楽しかった。次はRubyかな?
記念
ずっと気になってたんだけど、Congratulation"s"が見切れてるw
— たま / SamuraiStats⚾ (@SamuraiStats) January 10, 2024
CSSミスるとこうなるよ、という具体例なのだろうか……w pic.twitter.com/Mrk0p51gk8
道場レッスン、なぜかうまくいかなくてうんうんうなってたら、divがdiuになってたw
— たま / SamuraiStats⚾ (@SamuraiStats) January 10, 2024
Progate、ちょっと愚痴
— たま / SamuraiStats⚾ (@SamuraiStats) January 11, 2024
HTML道場上級-3
.headingクラスを使うと仕様書外まで変更しちゃうので
工夫して仕様書内の要素だけ変更するようにした。でも答えが仕様書外まで変える仕様だった。 pic.twitter.com/7FefikmANl
HTML / CSS すべて修了! pic.twitter.com/TAT5ScCcBd
— たま / SamuraiStats⚾ (@SamuraiStats) January 11, 2024