【初心者のための】CSSプロパティ一覧(解説付き)

CSS

コーディング初学者の方
コーディングしていると、あれってなんだっけ、思い出せない!毎回調べるの大変だし、まとめて書いてあ
ると便利!

こういった思いの方にお答えします!

  • 記事の信頼性

記事を書いている私は現役webディレクターをしており、日頃からコードを目にする職場に勤務しています。



まず、css基本的な文法構造をおさらいしておきましょう。


セレクタ{
 プロパティ :値;
}



簡単に説明すると、

セレクタプロパティにする。

例) カレー味付け甘口にする。

  • セレクタの(修飾語 / ほかの部分の内容を、詳しく説明する部分のことです。)
  • プロパティを(目的語 / 動作の目的になる部分のことです。)
  • にする。(動詞 / ものごとの動作・存在などの部分のことです。)


上記の文法構造を参考に、読み進めてみてください。
本記事では、プロパティとよく使うも紹介しています。

フォント

font-size 文字の大きさを〜

文字の大きさを決めます。

単位(値)
  • px 画面上の1ドッド。絶対値。
  • em 親要素が16pxなら、1em=16px 2em=32pxになります。
  • rem html要素のサイズが基準。
       html要素が16pxなら、1rem=16pxになります。
  • %  親要素が16pxなら、100%=16pxになります。

text-decoration 装飾を〜

:none; 解除する。

装飾の解除。(下線とか)

letter-spacing テキストの間隔を〜

テキストの間隔を数値で指定します。 例):○px;

column-count 段落を〜

分ける段落の数を指定する事ができます。

:○(2以上の自然数); ○つに分ける。

位置の指定

position 位置を〜

:rerative; 動かす基準になる。(親要素)

現在の位置からコンテンツの位置を動かす基準点になります。

:absolute; 動かした後の位置に固定します。(子要素)

親要素を基準に絶対的な位置を指定します。

:fixed; 画面上の特定の位置に固定します。

特定の位置(画面上)に固定します。

使い所!!
  • 特定のコンテンツを指定した分だけ移動させたい時。
  • コンテンツの上に別のコンテンツを重ねたい時。
  • 常に同じ位置に固定したい時。例)TOPへのスクロールボタン。

z-index 重なり順を〜

要素の重なる順番を指定する事ができます。
値は整数値で指定し、値が大きいほど上に表示されます。 例) :10;

positionと併用して使いましょう。

margin 要素の外側の余白を〜

:auto;

ブラウザーが適切なマージンを選択し、指定してくれます。
表示位置は画面の左右幅の中央になります。

widthが指定されている場合のみ適用されます。

装飾

border 〜な線を引く。

線で囲う・引く。

:○px 線の種類 カラー; 

色や線の種類、カラーを指定します。

  • :solid ; 実線。
  • :dotted ; 点線。

column-rule 段落の間に〜な線を引く。

段落の間に線を引く事ができます。

:○px 線の種類 カラー; 

色や線の種類、カラーを指定します。

background-size 背景の大きさを〜

:cover; 表示範囲内に埋め尽くす。

表示範囲を埋め尽くします。

background-colour 背景の色を〜

:raba(〇〇,〇〇,〇〇,〇〇); 〇〇色にする。

背景の色を指定の透明度の指定のカラーにする。

:rgb(〇〇,〇〇,〇〇); 〇〇色にする。

背景の色を指定のカラーにする。

opacity 要素の透明度を〜

要素の透明度を数値で指定します。
0.0(完全に透明)~1.0(完全に不透明)

box-shadow 要素に〜な影をつける。

要素に影をつける事ができます。

:○px 線の種類 カラー; 

色や線の種類、カラーを指定します。

要素の種別

display 要素の種類を〜

要素の種類を決めることができます。

:block; block要素に変更します。

ブロック要素:p / div / ul / h1~h6 / nav など

:inline; inline要素に変更します。

インライン要素: a / span / imgなど

:inline-block; inline-block要素に変更します。

インラインブロック要素: block要素とinline要素の間の要素。

その他

transition 〜(範囲・時間)アニメーションさせる。

アニメーションさせる要素を指定します。

:範囲 時間; 〇〇の範囲を○時間

また、どのくらい(範囲・時間)かを値とします。 例)all 0.5s;

如何でしたでしょうか?
今後も随時更新予定ですので、是非ブックマークしコーディングの際のカンニングペーパーとしてお使いください。

コメント

タイトルとURLをコピーしました