【コーディング初学者の方】
コーディングしていると、あれってなんだっけ、思い出せない！毎回調べるの大変だし、まとめて書いてあると便利！
こういった思いの方にお答えします！
記事を書いている私は現役webディレクターをしており、日頃からコードを目にする職場に勤務しています。
まず、cssの基本的な文法構造をおさらいしておきましょう。
セレクタ{
プロパティ :値;
}
簡単に説明すると、
セレクタのプロパティを値にする。
例) カレーの味付けを甘口にする。
- セレクタの（修飾語 / ほかの部分の内容を、詳しく説明する部分のことです。）
- プロパティを（目的語 / 動作の目的になる部分のことです。）
- 値にする。（動詞 / ものごとの動作・存在などの部分のことです。）
上記の文法構造を参考に、読み進めてみてください。
本記事では、プロパティとよく使う値も紹介しています。
フォント
font-size 文字の大きさを〜
文字の大きさを決めます。
text-decoration 装飾を〜
:none; 解除する。
装飾の解除。（下線とか）
letter-spacing テキストの間隔を〜
テキストの間隔を数値で指定します。 例):○px;
column-count 段落を〜
分ける段落の数を指定する事ができます。
:○（2以上の自然数）; ○つに分ける。
位置の指定
position 位置を〜
:rerative; 動かす基準になる。（親要素）
現在の位置からコンテンツの位置を動かす基準点になります。
:absolute; 動かした後の位置に固定します。（子要素）
親要素を基準に絶対的な位置を指定します。
:fixed; 画面上の特定の位置に固定します。
特定の位置（画面上）に固定します。
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;
如何でしたでしょうか？
今後も随時更新予定ですので、是非ブックマークしコーディングの際のカンニングペーパーとしてお使いください。
コメント