CSSについて
CSS
- Webサイトのサイズや色、レイアウトなどを設定 するためのプログラミング言語です。
- CSSは「シーエスエス」や「スタイルシート」などと呼ばれており、背景の色の変更や画像の設置、文字のフォントや色などの幅広いデザインを定義する際に使用されます。
- 公式サイト
- CSSタグリファレンス
- GitHub
CSSタグについて
- margin: コンテンツの内側に余白を作成します。
- margin: 10px 40px 20px 30px;
- margin: 上の値 右の値 下の値 左の値;
- margin-top: コンテンツの内側の上側に余白を作成します。
- margin-right: コンテンツの内側の右側に余白を作成します。
- margin-bottom: コンテンツの内側の下側に余白を作成します。
- margin-left: コンテンツの内側の左側に余白を作成します。
- padding: コンテンツの外側に余白を作成します。
- padding: 10px 40px 20px 30px;
- padding: 上の値 右の値 下の値 左の値;
- padding-top: コンテンツの外側の上側に余白を作成します。
- padding-right: コンテンツの外側の右側に余白を作成します。
- padding-bottom: コンテンツの外側の下側に余白を作成します。
- padding-left: コンテンツの外側の左側に余白を作成します。
- flex-direction: row; 左から右に並べる
- flex-direction: row-reverse; 右から左に並べる
- flex-direction: column; 上から下に並べる
- flex-direction: column-reverse; 下から上に並べる
単位について
- Px: ユーザーでぃすプレイの画面解像度に依存します。
- Em: 親要素のfont-sizeに依存します。
- Rem: 要素のfont-sizeに依存します。
- %: 親要素のfont-sizeに依存します。
- Pt: 1pt = 1/72in = 0.3528mm
レスポンシブデザインについて
- 画面の大きさに合わせてレイアウトを柔軟に調整するWebデザイン手法のことです。
メディアクエリについて
- CSS3の仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える記載方法です。
@media screen and (min-width:500px) { .test { color: blue; } }
@media screen and (min-width:1025px) { .test { color: green; } }
CSSフレームワークについて
BootStrap
- 開発時期: 2011年
- オープン ソースの Webサイトを効率よく開発するためのCSSフレームワークです。
- CSSファイルやjavascriptファイルが既に作成されており、それらの定義を呼び出すことで容量を軽くすることがて出来ます。
- 公式サイト: https://getbootstrap.com/docs/4.5/components/forms/
TaiwindCSS
- 開発時期:2017年
- オープン ソースの CSS フレームワークです。
- 他の CSS フレームワークとは異なり、ボタンやテーブルなどの要素に対して一連の定義済みクラスを提供しないことです。
- React, Vue.jsなどスタイルをコンポーネント化して画面を構築する際に使用します。
- 公式サイト: https://tailwindcss.com/
関連言語について
Sass
- CSSをより効率的に書けるように拡張した言語
- Sassには「SASS」記法と、「SCSS」記法の2種類の記法がある。 メリット
- セレクタやプロパティのネストで記述量が減る
- 一度定義したスタイルのセットを簡単に呼び出せる
- 複雑なコードも再利用できる
- 変数で値を使いまわすことができる
- 四則演算ができる
- 関数が使える
- 公式サイト: https://sass-lang.com/
- 参考サイト: https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
SASS記法
- 名前の通り、Sassがもともと採用していた記法です。
- 拡張子は.sassのファイル形式。
- 記述が非常に簡素化されているため、コーディングがコンパクト、簡潔になります。
- rubyライクな書き方をするのでrubyに慣れている方は書きやすいかもしれません。
- SASS記法ではインデントで依存関係を示します。
- 「background-color: lightgray」の後ろのセミコロンも省きます。
- この時、 background-color:の後には、半角スペースを入力する必要があります。
SCSS記法
- SCSSはSASSがCSSとの互換性が乏しかったために作られた記法です。
- 拡張子は.scssのファイル形式。
- SCSSの最大のメリットは、CSSの書き方がそのまま使えることです。
- SCSSの方が書き方がCSSに近いためコーディングしやすい。
- SCSS記法では、括弧{}を使い入れ子構造にすることでCSSの依存関係を示します。