Go to Qiita Advent Calendar Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kohki_takatama(Kohki Takatama)

最近学んだことリスト【CSS】2

Posted at

はじめに

今更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で導入されたレイアウトモデル

  1. 方向の独立性：flex-direction プロパティを使用して、子要素（フレックスアイテム）を水平（row）または垂直（column）に配置することができます。これにより、横並びだけでなく縦並びも容易に実現できます。

  2. コンテナ内での自動調整：フレックスアイテムは、利用可能なスペースに応じてサイズを自動的に調整できます。flex-grow、flex-shrink、flex-basis などのプロパティによって、アイテムの拡大や縮小の挙動を制御できます。

  3. 整列と配置の容易さ：align-items、justify-content、align-self などのプロパティを使用して、アイテムの縦横の整列や配置を簡単に調整できます。

  4. レイアウトの単純化：従来のフロートやポジショニングに比べ、フレックスボックスはより直感的で柔軟なレイアウトを可能にし、特に複雑なレイアウトやレスポンシブデザインにおいてその威力を発揮します。

他

  • 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かな？

記念

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?